Skip to content

Commit a234321

Browse files
HijanhvHijanhv
authored
Refactor: Use More Descriptive, Expressive Naming Across Frontend (#144)
## PR #144 — Summary Refactored frontend TypeScript and Angular templates to use clearer, more descriptive identifier names across components, services, and tests. ### Key Changes - **Variables & Services** - Renamed `svc` → `inferenceService` - Renamed `svcPrv` → `inferenceServicePrivate` - Updated state variables: `currentNamespace`, `currentLogs` - **UI Configuration Objects** - Renamed `dialogConfig` → `dialogConfiguration` - Renamed `snackConfig` → `snackConfiguration` - **Subscriptions** - Updated subscription fields: - `namespaceSubscription` - `pollingSubscription` - **Callbacks & HTML Bindings** - Updated callback parameters: `dialogResponse` instead of `res` - Updated Angular HTML template bindings and `@Input` properties to match new names - **Code Quality** - Applied Prettier formatting for consistent style across the codebase ### Impact Improved code readability and maintainability with no functional changes. All TypeScript files, HTML templates, and unit tests were updated consistently. --------- Signed-off-by: Hijanhv <[email protected]>
1 parent 5dd5720 commit a234321

20 files changed

+4412
-2580
lines changed

‎frontend/package-lock.json‎

Lines changed: 4096 additions & 2308 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/app/pages/index/config.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,11 @@ import { getPredictorExtensionSpec } from 'src/app/shared/utils';
1515
import { parseRuntime } from 'src/app/shared/utils';
1616
import { InferenceServiceK8s } from 'src/app/types/kfserving/v1beta1';
1717

18-
export function generateDeleteConfig(svc: InferenceServiceK8s): DialogConfig {
18+
export function generateDeleteConfig(
19+
inferenceService: InferenceServiceK8s,
20+
): DialogConfig {
1921
return {
20-
title: $localize`Delete Endpoint ${svc.metadata.name}?`,
22+
title: $localize`Delete Endpoint ${inferenceService.metadata.name}?`,
2123
message: $localize`You cannot undo this action. Are you sure you want to delete this Endpoint?`,
2224
accept: $localize`DELETE`,
2325
applying: $localize`DELETING`,

‎frontend/src/app/pages/index/index.component.ts‎

Lines changed: 70 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,10 @@ import {
3636
export class IndexComponent implements OnInit, OnDestroy {
3737
env = environment;
3838

39-
nsSub = new Subscription();
40-
pollSub = new Subscription();
39+
namespaceSubscription = new Subscription();
40+
pollingSubscription = new Subscription();
4141

42-
currNamespace: string | string[];
42+
currentNamespace: string | string[];
4343
config = defaultConfig;
4444
inferenceServices: InferenceServiceIR[] = [];
4545

@@ -70,103 +70,108 @@ export class IndexComponent implements OnInit, OnDestroy {
7070
ngOnInit(): void {
7171
this.mwaNamespace.initialize().subscribe();
7272

73-
this.nsSub = this.mwaNamespace.getSelectedNamespace().subscribe(ns => {
74-
if (ns) {
75-
this.currNamespace = ns;
73+
// Reset the poller whenever the selected namespace changes
74+
this.namespaceSubscription = this.mwaNamespace
75+
.getSelectedNamespace()
76+
.subscribe(ns => {
77+
if (!ns) {
78+
return;
79+
}
80+
81+
this.currentNamespace = ns;
7682
this.poll(ns);
7783
this.newEndpointButton.namespaceChanged(ns, $localize`Endpoint`);
78-
}
79-
});
80-
81-
this.ns.getSelectedNamespace2().subscribe(ns => {});
84+
});
8285
}
8386

8487
ngOnDestroy() {
85-
this.nsSub.unsubscribe();
86-
this.pollSub.unsubscribe();
88+
this.namespaceSubscription.unsubscribe();
89+
this.pollingSubscription.unsubscribe();
8790
}
8891

8992
public poll(ns: string | string[]) {
90-
this.pollSub.unsubscribe();
93+
this.pollingSubscription.unsubscribe();
9194
this.inferenceServices = [];
9295

9396
const request = this.backend.getInferenceServices(ns);
9497

95-
this.pollSub = this.poller.exponential(request).subscribe(svcs => {
96-
this.inferenceServices = this.processIncomingData(svcs);
97-
});
98+
this.pollingSubscription = this.poller
99+
.exponential(request)
100+
.subscribe(svcs => {
101+
this.inferenceServices = this.processIncomingData(svcs);
102+
});
98103
}
99104

100105
// action handling functions
101106
public reactToAction(a: ActionEvent) {
102-
const svc = a.data as InferenceServiceIR;
107+
const inferenceService = a.data as InferenceServiceIR;
103108

104109
switch (a.action) {
105110
case 'delete':
106-
this.deleteClicked(svc);
111+
this.deleteClicked(inferenceService);
107112
break;
108113
case 'copy-link':
109-
this.clipboard.copy(svc.status.url);
110-
const config: SnackBarConfig = {
114+
this.clipboard.copy(inferenceService.status.url);
115+
const snackConfiguration: SnackBarConfig = {
111116
data: {
112-
msg: `Copied: ${svc.status.url}`,
117+
msg: `Copied: ${inferenceService.status.url}`,
113118
snackType: SnackType.Info,
114119
},
115120
};
116-
this.snack.open(config);
121+
this.snack.open(snackConfiguration);
117122
break;
118123
case 'name:link':
119124
/*
120125
* don't allow the user to navigate to the details page of a server
121126
* that is being deleted
122127
*/
123-
if (svc.ui.status.phase === STATUS_TYPE.TERMINATING) {
128+
if (inferenceService.ui.status.phase === STATUS_TYPE.TERMINATING) {
124129
a.event.stopPropagation();
125130
a.event.preventDefault();
126-
const config: SnackBarConfig = {
131+
const snackConfiguration: SnackBarConfig = {
127132
data: {
128133
msg: $localize`Endpoint is being deleted, cannot show details.`,
129134
snackType: SnackType.Info,
130135
},
131136
};
132-
this.snack.open(config);
137+
this.snack.open(snackConfiguration);
133138
return;
134139
}
135140
break;
136141
}
137142
}
138143

139-
private deleteClicked(svc: InferenceServiceIR) {
140-
const config = generateDeleteConfig(svc);
144+
private deleteClicked(inferenceService: InferenceServiceIR) {
145+
const dialogConfiguration = generateDeleteConfig(inferenceService);
141146

142-
const dialogRef = this.confirmDialog.open('Endpoint', config);
147+
const dialogRef = this.confirmDialog.open('Endpoint', dialogConfiguration);
143148
const applyingSub = dialogRef.componentInstance.applying$.subscribe(
144149
applying => {
145150
if (!applying) {
146151
return;
147152
}
148153

149-
this.backend.deleteInferenceService(svc).subscribe(
150-
res => {
154+
this.backend.deleteInferenceService(inferenceService).subscribe(
155+
dialogResponse => {
151156
dialogRef.close(DIALOG_RESP.ACCEPT);
152157
},
153158
err => {
154-
config.error = err;
159+
dialogConfiguration.error = err;
155160
dialogRef.componentInstance.applying$.next(false);
156161
},
157162
);
158163
},
159164
);
160165

161-
dialogRef.afterClosed().subscribe(res => {
166+
dialogRef.afterClosed().subscribe(dialogResponse => {
162167
applyingSub.unsubscribe();
163168

164-
if (res !== DIALOG_RESP.ACCEPT) {
169+
if (dialogResponse !== DIALOG_RESP.ACCEPT) {
165170
return;
166171
}
167172

168-
svc.ui.status.phase = STATUS_TYPE.TERMINATING;
169-
svc.ui.status.message = $localize`Preparing to delete Endpoint...`;
173+
inferenceService.ui.status.phase = STATUS_TYPE.TERMINATING;
174+
inferenceService.ui.status.message = $localize`Preparing to delete Endpoint...`;
170175
});
171176
}
172177

@@ -175,49 +180,56 @@ export class IndexComponent implements OnInit, OnDestroy {
175180
private processIncomingData(svcs: InferenceServiceK8s[]) {
176181
const svcsCopy: InferenceServiceIR[] = JSON.parse(JSON.stringify(svcs));
177182

178-
for (const svc of svcsCopy) {
179-
this.parseInferenceService(svc);
183+
for (const inferenceService of svcsCopy) {
184+
this.parseInferenceService(inferenceService);
180185
}
181186

182187
return svcsCopy;
183188
}
184189

185-
private parseInferenceService(svc: InferenceServiceIR) {
186-
svc.ui = { actions: {} };
187-
svc.ui.status = getK8sObjectUiStatus(svc);
188-
svc.ui.actions.copy = this.getCopyActionStatus(svc);
189-
svc.ui.actions.delete = this.getDeletionActionStatus(svc);
190-
191-
const predictorType = getPredictorType(svc.spec.predictor);
192-
const predictor = getPredictorExtensionSpec(svc.spec.predictor);
193-
svc.ui.predictorType = predictorType;
194-
svc.ui.runtimeVersion = predictor.runtimeVersion;
195-
svc.ui.storageUri = predictor.storageUri;
196-
svc.ui.protocolVersion = predictor.protocolVersion || 'v1';
197-
svc.ui.link = {
198-
text: svc.metadata.name,
199-
url: `/details/${svc.metadata.namespace}/${svc.metadata.name}`,
190+
private parseInferenceService(inferenceService: InferenceServiceIR) {
191+
inferenceService.ui = { actions: {} };
192+
inferenceService.ui.status = getK8sObjectUiStatus(inferenceService);
193+
inferenceService.ui.actions.copy =
194+
this.getCopyActionStatus(inferenceService);
195+
inferenceService.ui.actions.delete =
196+
this.getDeletionActionStatus(inferenceService);
197+
198+
const predictorType = getPredictorType(inferenceService.spec.predictor);
199+
const predictor = getPredictorExtensionSpec(
200+
inferenceService.spec.predictor,
201+
);
202+
inferenceService.ui.predictorType = predictorType;
203+
inferenceService.ui.runtimeVersion = predictor.runtimeVersion;
204+
inferenceService.ui.storageUri = predictor.storageUri;
205+
inferenceService.ui.protocolVersion = predictor.protocolVersion || 'v1';
206+
inferenceService.ui.link = {
207+
text: inferenceService.metadata.name,
208+
url: `/details/${inferenceService.metadata.namespace}/${inferenceService.metadata.name}`,
200209
};
201210
}
202211

203-
private getCopyActionStatus(svc: InferenceServiceIR) {
204-
if (svc.ui.status.phase !== STATUS_TYPE.READY) {
212+
private getCopyActionStatus(inferenceService: InferenceServiceIR) {
213+
if (inferenceService.ui.status.phase !== STATUS_TYPE.READY) {
205214
return STATUS_TYPE.UNAVAILABLE;
206215
}
207216

208217
return STATUS_TYPE.READY;
209218
}
210219

211-
private getDeletionActionStatus(svc: InferenceServiceIR) {
212-
if (svc.ui.status.phase !== STATUS_TYPE.TERMINATING) {
220+
private getDeletionActionStatus(inferenceService: InferenceServiceIR) {
221+
if (inferenceService.ui.status.phase !== STATUS_TYPE.TERMINATING) {
213222
return STATUS_TYPE.READY;
214223
}
215224

216225
return STATUS_TYPE.TERMINATING;
217226
}
218227

219228
// util functions
220-
public inferenceServiceTrackByFn(index: number, svc: InferenceServiceK8s) {
221-
return `${svc.metadata.name}/${svc.metadata.creationTimestamp}`;
229+
public inferenceServiceTrackByFn(
230+
index: number,
231+
inferenceService: InferenceServiceK8s,
232+
) {
233+
return `${inferenceService.metadata.name}/${inferenceService.metadata.creationTimestamp}`;
222234
}
223235
}

‎frontend/src/app/pages/server-info/details/details.component.html‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<div>
22
<lib-details-list-item key="Name">
3-
{{ svc.metadata.name }}
3+
{{ inferenceService.metadata.name }}
44
</lib-details-list-item>
55

66
<lib-details-list-item key="Namespace">
7-
{{ svc.metadata.namespace }}
7+
{{ inferenceService.metadata.namespace }}
88
</lib-details-list-item>
99

1010
<lib-details-list-item key="URL external" [copyValue]="externalUrl">
@@ -26,33 +26,35 @@
2626
</lib-details-list-item>
2727

2828
<lib-details-list-item key="Created">
29-
<lib-date-time [date]="svc?.metadata?.creationTimestamp"></lib-date-time>
29+
<lib-date-time
30+
[date]="inferenceService?.metadata?.creationTimestamp"
31+
></lib-date-time>
3032
</lib-details-list-item>
3133

3234
<!--predictor-->
3335
<lib-heading-row heading="Predictor:" subHeading="spec"> </lib-heading-row>
3436

3537
<app-predictor-details
36-
[predictorSpec]="svc.spec.predictor"
38+
[predictorSpec]="inferenceService.spec.predictor"
3739
[namespace]="namespace"
3840
></app-predictor-details>
3941

4042
<!--transformer-->
41-
<ng-container *ngIf="svc.spec.transformer">
43+
<ng-container *ngIf="inferenceService.spec.transformer">
4244
<lib-heading-row heading="Transformer:" subHeading="spec">
4345
</lib-heading-row>
4446

4547
<app-transformer-details
46-
[transformerSpec]="svc.spec.transformer"
48+
[transformerSpec]="inferenceService.spec.transformer"
4749
></app-transformer-details>
4850
</ng-container>
4951

5052
<!--explainer-->
51-
<ng-container *ngIf="svc.spec.explainer">
53+
<ng-container *ngIf="inferenceService.spec.explainer">
5254
<lib-heading-row heading="Explainer:" subHeading="spec"> </lib-heading-row>
5355

5456
<app-explainer-details
55-
[explainerSpec]="svc.spec.explainer"
57+
[explainerSpec]="inferenceService.spec.explainer"
5658
></app-explainer-details>
5759
</ng-container>
5860
</div>

‎frontend/src/app/pages/server-info/details/details.component.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { ComponentExtensionComponent } from './shared/component-extension/compon
1717
import { PodComponent } from './shared/pod/pod.component';
1818
import { SharedModule } from 'src/app/shared/shared.module';
1919

20-
const mockISVC: InferenceServiceK8s = {
20+
const mockInferenceService: InferenceServiceK8s = {
2121
apiVersion: 'serving.kserve.io/v1beta1',
2222
kind: 'InferenceService',
2323
metadata: {
@@ -171,7 +171,7 @@ describe('DetailsComponent', () => {
171171
beforeEach(() => {
172172
fixture = TestBed.createComponent(DetailsComponent);
173173
component = fixture.componentInstance;
174-
component.svc = mockISVC;
174+
component.inferenceService = mockInferenceService;
175175
fixture.detectChanges();
176176
});
177177

‎frontend/src/app/pages/server-info/details/details.component.ts‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,26 +14,26 @@ export class DetailsComponent {
1414

1515
@Input() namespace: string;
1616
@Input()
17-
set svc(s: InferenceServiceK8s) {
18-
this.svcPrv = s;
17+
set inferenceService(s: InferenceServiceK8s) {
18+
this.inferenceServicePrivate = s;
1919

2020
this.svcPropsList = this.generateSvcPropsList();
2121
}
22-
get svc(): InferenceServiceK8s {
23-
return this.svcPrv;
22+
get inferenceService(): InferenceServiceK8s {
23+
return this.inferenceServicePrivate;
2424
}
2525

2626
get externalUrl() {
27-
if (!this.svc.status) {
27+
if (!this.inferenceService.status) {
2828
return 'InferenceService is not ready to receive traffic yet.';
2929
}
3030

31-
return this.svc.status.url !== undefined
32-
? this.svc.status.url
31+
return this.inferenceService.status.url !== undefined
32+
? this.inferenceService.status.url
3333
: 'InferenceService is not ready to receive traffic yet.';
3434
}
3535

36-
private svcPrv: InferenceServiceK8s;
36+
private inferenceServicePrivate: InferenceServiceK8s;
3737

3838
private generateSvcPropsList(): ListEntry[] {
3939
const props: ListEntry[] = [];
@@ -47,16 +47,16 @@ export class DetailsComponent {
4747
private generateAnnotations() {
4848
const chips = [];
4949

50-
if (!this.svc.metadata.annotations) {
50+
if (!this.inferenceService.metadata.annotations) {
5151
return chips;
5252
}
5353

54-
for (const a in this.svc.metadata.annotations) {
55-
if (!this.svc.metadata.annotations.hasOwnProperty(a)) {
54+
for (const a in this.inferenceService.metadata.annotations) {
55+
if (!this.inferenceService.metadata.annotations.hasOwnProperty(a)) {
5656
continue;
5757
}
5858
const annotationKey = a;
59-
const annotationVal = this.svc.metadata.annotations[a];
59+
const annotationVal = this.inferenceService.metadata.annotations[a];
6060
if (annotationKey.includes('last-applied-configuration')) {
6161
continue;
6262
}
@@ -72,17 +72,17 @@ export class DetailsComponent {
7272

7373
private generateLabels() {
7474
const chips = [];
75-
if (!this.svc.metadata.labels) {
75+
if (!this.inferenceService.metadata.labels) {
7676
return chips;
7777
}
7878

79-
for (const l in this.svc.metadata.labels) {
80-
if (!this.svc.metadata.labels.hasOwnProperty(l)) {
79+
for (const l in this.inferenceService.metadata.labels) {
80+
if (!this.inferenceService.metadata.labels.hasOwnProperty(l)) {
8181
continue;
8282
}
8383

8484
const labelKey = l;
85-
const labelVal = this.svc.metadata.labels[l];
85+
const labelVal = this.inferenceService.metadata.labels[l];
8686

8787
const chip: ChipDescriptor = {
8888
value: `${labelKey}: ${labelVal}`,

0 commit comments

Comments
 (0)