refactor: improve variable naming for better readability

- Rename currNamespace → currentNamespace
- Rename nsSub → namespaceSubscription
- Rename pollSub → pollingSubscription
- Rename svc → inferenceService throughout codebase
- Rename svcPrv → inferenceServicePrivate
- Rename config → dialogConfig/snackConfig (context-specific)
- Rename res → dialogResponse
- Rename currLogs → currentLogs

Updated 13 files including TypeScript components, HTML templates, and test specs to use more expressive and pronounceable variable names while maintaining all functionality.

Author: Hijanhv

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

@@ -15,9 +15,11 @@ import { getPredictorExtensionSpec } from 'src/app/shared/utils';
 import { parseRuntime } from 'src/app/shared/utils';
 import { InferenceServiceK8s } from 'src/app/types/kfserving/v1beta1';
 
-export function generateDeleteConfig(svc: InferenceServiceK8s): DialogConfig {
+export function generateDeleteConfig(
+  inferenceService: InferenceServiceK8s,
+): DialogConfig {
   return {
-    title: $localize`Delete Endpoint ${svc.metadata.name}?`,
+    title: $localize`Delete Endpoint ${inferenceService.metadata.name}?`,
     message: $localize`You cannot undo this action. Are you sure you want to delete this Endpoint?`,
     accept: $localize`DELETE`,
     applying: $localize`DELETING`,

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

@@ -35,10 +35,10 @@ import {
 export class IndexComponent implements OnInit, OnDestroy {
   env = environment;
 
-  nsSub = new Subscription();
-  pollSub = new Subscription();
+  namespaceSubscription = new Subscription();
+  pollingSubscription = new Subscription();
 
-  currNamespace: string | string[];
+  currentNamespace: string | string[];
   config = defaultConfig;
   inferenceServices: InferenceServiceIR[] = [];
 
@@ -67,100 +67,104 @@ export class IndexComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     // Reset the poller whenever the selected namespace changes
-    this.nsSub = this.ns.getSelectedNamespace2().subscribe(ns => {
-      this.currNamespace = ns;
-      this.poll(ns);
-      this.newEndpointButton.namespaceChanged(ns, $localize`Endpoint`);
-    });
+    this.namespaceSubscription = this.ns
+      .getSelectedNamespace2()
+      .subscribe(ns => {
+        this.currentNamespace = ns;
+        this.poll(ns);
+        this.newEndpointButton.namespaceChanged(ns, $localize`Endpoint`);
+      });
   }
 
   ngOnDestroy() {
-    this.nsSub.unsubscribe();
-    this.pollSub.unsubscribe();
+    this.namespaceSubscription.unsubscribe();
+    this.pollingSubscription.unsubscribe();
   }
 
   public poll(ns: string | string[]) {
-    this.pollSub.unsubscribe();
+    this.pollingSubscription.unsubscribe();
     this.inferenceServices = [];
 
     const request = this.backend.getInferenceServices(ns);
 
-    this.pollSub = this.poller.exponential(request).subscribe(svcs => {
-      this.inferenceServices = this.processIncomingData(svcs);
-    });
+    this.pollingSubscription = this.poller
+      .exponential(request)
+      .subscribe(svcs => {
+        this.inferenceServices = this.processIncomingData(svcs);
+      });
   }
 
   // action handling functions
   public reactToAction(a: ActionEvent) {
-    const svc = a.data as InferenceServiceIR;
+    const inferenceService = a.data as InferenceServiceIR;
 
     switch (a.action) {
       case 'delete':
-        this.deleteClicked(svc);
+        this.deleteClicked(inferenceService);
         break;
       case 'copy-link':
-        console.log(`Copied to clipboard: ${svc.status.url}`);
-        this.clipboard.copy(svc.status.url);
-        const config: SnackBarConfig = {
+        console.log(`Copied to clipboard: ${inferenceService.status.url}`);
+        this.clipboard.copy(inferenceService.status.url);
+        const snackConfig: SnackBarConfig = {
           data: {
-            msg: `Copied: ${svc.status.url}`,
+            msg: `Copied: ${inferenceService.status.url}`,
             snackType: SnackType.Info,
           },
         };
-        this.snack.open(config);
+        this.snack.open(snackConfig);
         break;
       case 'name:link':
         /*
          * don't allow the user to navigate to the details page of a server
          * that is being deleted
          */
-        if (svc.ui.status.phase === STATUS_TYPE.TERMINATING) {
+        if (inferenceService.ui.status.phase === STATUS_TYPE.TERMINATING) {
           a.event.stopPropagation();
           a.event.preventDefault();
-          const config: SnackBarConfig = {
+          const snackConfig: SnackBarConfig = {
             data: {
               msg: $localize`Endpoint is being deleted, cannot show details.`,
               snackType: SnackType.Info,
             },
           };
-          this.snack.open(config);
+          this.snack.open(snackConfig);
           return;
         }
         break;
     }
   }
 
-  private deleteClicked(svc: InferenceServiceIR) {
-    const config = generateDeleteConfig(svc);
+  private deleteClicked(inferenceService: InferenceServiceIR) {
+    const dialogConfig = generateDeleteConfig(inferenceService);
 
-    const dialogRef = this.confirmDialog.open('Endpoint', config);
+    const dialogRef = this.confirmDialog.open('Endpoint', dialogConfig);
     const applyingSub = dialogRef.componentInstance.applying$.subscribe(
       applying => {
         if (!applying) {
           return;
         }
 
-        this.backend.deleteInferenceService(svc).subscribe(
-          res => {
+        this.backend.deleteInferenceService(inferenceService).subscribe(
+          dialogResponse => {
             dialogRef.close(DIALOG_RESP.ACCEPT);
           },
           err => {
-            config.error = err;
+            dialogConfig.error = err;
             dialogRef.componentInstance.applying$.next(false);
           },
         );
       },
     );
 
-    dialogRef.afterClosed().subscribe(res => {
+    dialogRef.afterClosed().subscribe(dialogResponse => {
       applyingSub.unsubscribe();
 
-      if (res !== DIALOG_RESP.ACCEPT) {
+      if (dialogResponse !== DIALOG_RESP.ACCEPT) {
         return;
       }
 
-      svc.ui.status.phase = STATUS_TYPE.TERMINATING;
-      svc.ui.status.message = $localize`Preparing to delete Endpoint...`;
+      inferenceService.ui.status.phase = STATUS_TYPE.TERMINATING;
+      inferenceService.ui.status.message = $localize`Preparing to delete Endpoint...`;
     });
   }
 
@@ -169,49 +173,56 @@ export class IndexComponent implements OnInit, OnDestroy {
   private processIncomingData(svcs: InferenceServiceK8s[]) {
     const svcsCopy: InferenceServiceIR[] = JSON.parse(JSON.stringify(svcs));
 
-    for (const svc of svcsCopy) {
-      this.parseInferenceService(svc);
+    for (const inferenceService of svcsCopy) {
+      this.parseInferenceService(inferenceService);
     }
 
     return svcsCopy;
   }
 
-  private parseInferenceService(svc: InferenceServiceIR) {
-    svc.ui = { actions: {} };
-    svc.ui.status = getK8sObjectUiStatus(svc);
-    svc.ui.actions.copy = this.getCopyActionStatus(svc);
-    svc.ui.actions.delete = this.getDeletionActionStatus(svc);
-
-    const predictorType = getPredictorType(svc.spec.predictor);
-    const predictor = getPredictorExtensionSpec(svc.spec.predictor);
-    svc.ui.predictorType = predictorType;
-    svc.ui.runtimeVersion = predictor.runtimeVersion;
-    svc.ui.storageUri = predictor.storageUri;
-    svc.ui.protocolVersion = predictor.protocolVersion || 'v1';
-    svc.ui.link = {
-      text: svc.metadata.name,
-      url: `/details/${svc.metadata.namespace}/${svc.metadata.name}`,
+  private parseInferenceService(inferenceService: InferenceServiceIR) {
+    inferenceService.ui = { actions: {} };
+    inferenceService.ui.status = getK8sObjectUiStatus(inferenceService);
+    inferenceService.ui.actions.copy =
+      this.getCopyActionStatus(inferenceService);
+    inferenceService.ui.actions.delete =
+      this.getDeletionActionStatus(inferenceService);
+
+    const predictorType = getPredictorType(inferenceService.spec.predictor);
+    const predictor = getPredictorExtensionSpec(
+      inferenceService.spec.predictor,
+    );
+    inferenceService.ui.predictorType = predictorType;
+    inferenceService.ui.runtimeVersion = predictor.runtimeVersion;
+    inferenceService.ui.storageUri = predictor.storageUri;
+    inferenceService.ui.protocolVersion = predictor.protocolVersion || 'v1';
+    inferenceService.ui.link = {
+      text: inferenceService.metadata.name,
+      url: `/details/${inferenceService.metadata.namespace}/${inferenceService.metadata.name}`,
     };
   }
 
-  private getCopyActionStatus(svc: InferenceServiceIR) {
-    if (svc.ui.status.phase !== STATUS_TYPE.READY) {
+  private getCopyActionStatus(inferenceService: InferenceServiceIR) {
+    if (inferenceService.ui.status.phase !== STATUS_TYPE.READY) {
       return STATUS_TYPE.UNAVAILABLE;
     }
 
     return STATUS_TYPE.READY;
   }
 
-  private getDeletionActionStatus(svc: InferenceServiceIR) {
-    if (svc.ui.status.phase !== STATUS_TYPE.TERMINATING) {
+  private getDeletionActionStatus(inferenceService: InferenceServiceIR) {
+    if (inferenceService.ui.status.phase !== STATUS_TYPE.TERMINATING) {
       return STATUS_TYPE.READY;
     }
 
     return STATUS_TYPE.TERMINATING;
   }
 
   // util functions
-  public inferenceServiceTrackByFn(index: number, svc: InferenceServiceK8s) {
-    return `${svc.metadata.name}/${svc.metadata.creationTimestamp}`;
+  public inferenceServiceTrackByFn(
+    index: number,
+    inferenceService: InferenceServiceK8s,
+  ) {
+    return `${inferenceService.metadata.name}/${inferenceService.metadata.creationTimestamp}`;
   }
 }

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

@@ -171,7 +171,7 @@ describe('DetailsComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(DetailsComponent);
     component = fixture.componentInstance;
-    component.svc = mockISVC;
+    component.inferenceService = mockISVC;
     fixture.detectChanges();
   });
 

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

@@ -14,26 +14,26 @@ export class DetailsComponent {
 
   @Input() namespace: string;
   @Input()
-  set svc(s: InferenceServiceK8s) {
-    this.svcPrv = s;
+  set inferenceService(s: InferenceServiceK8s) {
+    this.inferenceServicePrivate = s;
 
     this.svcPropsList = this.generateSvcPropsList();
   }
-  get svc(): InferenceServiceK8s {
-    return this.svcPrv;
+  get inferenceService(): InferenceServiceK8s {
+    return this.inferenceServicePrivate;
   }
 
   get externalUrl() {
-    if (!this.svc.status) {
+    if (!this.inferenceService.status) {
       return 'InferenceService is not ready to receive traffic yet.';
     }
 
-    return this.svc.status.url !== undefined
-      ? this.svc.status.url
+    return this.inferenceService.status.url !== undefined
+      ? this.inferenceService.status.url
       : 'InferenceService is not ready to receive traffic yet.';
   }
 
-  private svcPrv: InferenceServiceK8s;
+  private inferenceServicePrivate: InferenceServiceK8s;
 
   private generateSvcPropsList(): ListEntry[] {
     const props: ListEntry[] = [];
@@ -47,16 +47,16 @@ export class DetailsComponent {
   private generateAnnotations() {
     const chips = [];
 
-    if (!this.svc.metadata.annotations) {
+    if (!this.inferenceService.metadata.annotations) {
       return chips;
     }
 
-    for (const a in this.svc.metadata.annotations) {
-      if (!this.svc.metadata.annotations.hasOwnProperty(a)) {
+    for (const a in this.inferenceService.metadata.annotations) {
+      if (!this.inferenceService.metadata.annotations.hasOwnProperty(a)) {
         continue;
       }
       const annotationKey = a;
-      const annotationVal = this.svc.metadata.annotations[a];
+      const annotationVal = this.inferenceService.metadata.annotations[a];
       if (annotationKey.includes('last-applied-configuration')) {
         continue;
       }
@@ -72,17 +72,17 @@ export class DetailsComponent {
 
   private generateLabels() {
     const chips = [];
-    if (!this.svc.metadata.labels) {
+    if (!this.inferenceService.metadata.labels) {
       return chips;
     }
 
-    for (const l in this.svc.metadata.labels) {
-      if (!this.svc.metadata.labels.hasOwnProperty(l)) {
+    for (const l in this.inferenceService.metadata.labels) {
+      if (!this.inferenceService.metadata.labels.hasOwnProperty(l)) {
         continue;
       }
 
       const labelKey = l;
-      const labelVal = this.svc.metadata.labels[l];
+      const labelVal = this.inferenceService.metadata.labels[l];
 
       const chip: ChipDescriptor = {
         value: `${labelKey}: ${labelVal}`,

frontend/src/app/pages/server-info/events/events.component.ts

@@ -14,16 +14,16 @@ import { EventObject } from '../../../types/event';
 export class EventsComponent implements OnDestroy {
   public events: EventObject[] = [];
   public config = defaultConfig;
-  private pollSub = new Subscription();
-  private svcPrv: InferenceServiceK8s;
+  private pollingSubscription = new Subscription();
+  private inferenceServicePrivate: InferenceServiceK8s;
 
   @Input()
-  set svc(s: InferenceServiceK8s) {
-    this.svcPrv = s;
+  set inferenceService(s: InferenceServiceK8s) {
+    this.inferenceServicePrivate = s;
     this.poll(s);
   }
-  get svc(): InferenceServiceK8s {
-    return this.svcPrv;
+  get inferenceService(): InferenceServiceK8s {
+    return this.inferenceServicePrivate;
   }
 
   constructor(
@@ -32,18 +32,20 @@ export class EventsComponent implements OnDestroy {
   ) {}
 
   ngOnDestroy(): void {
-    if (this.pollSub) {
-      this.pollSub.unsubscribe();
+    if (this.pollingSubscription) {
+      this.pollingSubscription.unsubscribe();
     }
   }
 
-  private poll(svc: InferenceServiceK8s) {
-    this.pollSub.unsubscribe();
+  private poll(inferenceService: InferenceServiceK8s) {
+    this.pollingSubscription.unsubscribe();
 
-    const request = this.backend.getInferenceServiceEvents(svc);
+    const request = this.backend.getInferenceServiceEvents(inferenceService);
 
-    this.pollSub = this.poller.exponential(request).subscribe(events => {
-      this.events = events;
-    });
+    this.pollingSubscription = this.poller
+      .exponential(request)
+      .subscribe(events => {
+        this.events = events;
+      });
   }
 }