mwa: Improve how MWA exposes errors

backend/apps/common/routes/get.py

@@ -99,3 +99,15 @@ def get_knative_route(namespace, name):
                               name=name)
 
     return api.success_response("knativeRoute", svc)
+
+
+@bp.route("/api/namespaces/<namespace>/inferenceservices/<name>/events")
+def get_inference_service_events(namespace, name):
+
+    field_selector = api.events_field_selector("InferenceService", name)
+
+    events = api.events.list_events(namespace, field_selector).items
+
+    return api.success_response(
+        "events", api.serialize(events),
+    )

frontend/COMMIT

@@ -1 +1 @@
-046c6d3c8
+3649e7e61

frontend/package.json

@@ -37,7 +37,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.26",
     "@fortawesome/free-brands-svg-icons": "^5.12.0",
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
-    "@kubernetes/client-node": "^0.12.2",
+    "@kubernetes/client-node": "^0.16.3",
     "date-fns": "^1.29.0",
     "js-yaml": "^4.0.0",
     "lodash": "^4.17.20",

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

@@ -1,12 +1,4 @@
 <div>
-  <lib-details-list-item
-    key="Status"
-    [icon]="statusIcon"
-    valueTooltip="Status is deduced from the Ready condition"
-  >
-    {{ status }}
-  </lib-details-list-item>
-
   <lib-details-list-item key="Name">
     {{ svc.metadata.name }}
   </lib-details-list-item>

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

@@ -1,10 +1,5 @@
 import { Component, Input } from '@angular/core';
 import { ListEntry, ChipDescriptor } from 'kubeflow';
-import {
-  getReadyCondition,
-  getPredictorType,
-  getK8sObjectStatus,
-} from 'src/app/shared/utils';
 import { InferenceServiceK8s } from 'src/app/types/kfserving/v1beta1';
 
 @Component({
@@ -28,14 +23,6 @@ export class DetailsComponent {
     return this.svcPrv;
   }
 
-  get status() {
-    return getK8sObjectStatus(this.svc)[0];
-  }
-
-  get statusIcon() {
-    return getK8sObjectStatus(this.svc)[1];
-  }
-
   get externalUrl() {
     if (!this.svc.status) {
       return 'InferenceService is not ready to receive traffic yet.';

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

@@ -0,0 +1,49 @@
+import { PropertyValue, TableConfig, DateTimeValue } from 'kubeflow';
+
+// --- Config for the Resource Table ---
+export const defaultConfig: TableConfig = {
+  dynamicNamespaceColumn: true,
+  columns: [
+    {
+      matHeaderCellDef: $localize`Type`,
+      matColumnDef: 'type',
+      style: { width: '12%' },
+      value: new PropertyValue({
+        field: 'type',
+        tooltipField: 'type',
+        truncate: true,
+      }),
+      sort: true,
+    },
+    {
+      matHeaderCellDef: $localize`Reason`,
+      matColumnDef: 'reason',
+      style: { width: '12%' },
+      value: new PropertyValue({
+        field: 'reason',
+        tooltipField: 'reason',
+        truncate: true,
+      }),
+      sort: true,
+    },
+    {
+      matHeaderCellDef: $localize`Created at`,
+      matColumnDef: 'age',
+      style: { width: '12%' },
+      value: new DateTimeValue({ field: 'metadata.creationTimestamp' }),
+      sort: true,
+    },
+    {
+      matHeaderCellDef: $localize`Message`,
+      matColumnDef: 'message',
+      value: new PropertyValue({
+        field: 'message',
+        tooltipField: 'message',
+        truncate: true,
+      }),
+      sort: true,
+    },
+  ],
+  sortByColumn: 'age',
+  sortDirection: 'desc',
+};

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

@@ -0,0 +1,3 @@
+<div class="page-padding lib-flex-grow lib-overflow-auto">
+  <lib-table [config]="config" [data]="events"></lib-table>
+</div>

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

@@ -0,0 +1,39 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { KubeflowModule, PollerService } from 'kubeflow';
+import { of } from 'rxjs';
+import { MWABackendService } from 'src/app/services/backend.service';
+
+import { EventsComponent } from './events.component';
+
+const MWABackendServiceStub: Partial<MWABackendService> = {
+  getInferenceServiceEvents: () => of(),
+};
+const PollerServiceStub: Partial<PollerService> = {
+  exponential: () => of(),
+};
+
+describe('EventsComponent', () => {
+  let component: EventsComponent;
+  let fixture: ComponentFixture<EventsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [EventsComponent],
+      imports: [KubeflowModule],
+      providers: [
+        { provide: MWABackendService, useValue: MWABackendServiceStub },
+        { provide: PollerService, useValue: PollerServiceStub },
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EventsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,49 @@
+import { Component, Input, OnDestroy } from '@angular/core';
+import { PollerService } from 'kubeflow';
+import { Subscription } from 'rxjs';
+import { MWABackendService } from 'src/app/services/backend.service';
+import { defaultConfig } from './config';
+import { InferenceServiceK8s } from 'src/app/types/kfserving/v1beta1';
+import { EventObject } from '../../../types/event';
+
+@Component({
+  selector: 'app-events',
+  templateUrl: './events.component.html',
+  styleUrls: ['./events.component.scss'],
+})
+export class EventsComponent implements OnDestroy {
+  public events: EventObject[] = [];
+  public config = defaultConfig;
+  private pollSub = new Subscription();
+  private svcPrv: InferenceServiceK8s;
+
+  @Input()
+  set svc(s: InferenceServiceK8s) {
+    this.svcPrv = s;
+    this.poll(s);
+  }
+  get svc(): InferenceServiceK8s {
+    return this.svcPrv;
+  }
+
+  constructor(
+    public backend: MWABackendService,
+    public poller: PollerService,
+  ) {}
+
+  ngOnDestroy(): void {
+    if (this.pollSub) {
+      this.pollSub.unsubscribe();
+    }
+  }
+
+  private poll(svc: InferenceServiceK8s) {
+    this.pollSub.unsubscribe();
+
+    const request = this.backend.getInferenceServiceEvents(svc);
+
+    this.pollSub = this.poller.exponential(request).subscribe(events => {
+      this.events = events;
+    });
+  }
+}

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { EventsComponent } from './events.component';
+import { KubeflowModule } from 'kubeflow';
+
+@NgModule({
+  declarations: [EventsComponent],
+  imports: [CommonModule, KubeflowModule],
+  exports: [EventsComponent],
+})
+export class EventsModule {}

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

@@ -1,5 +1,4 @@
 import { Component, Input } from '@angular/core';
-import { getK8sObjectStatus } from 'src/app/shared/utils';
 import { ComponentStatusSpec } from 'src/app/types/kfserving/v1beta1';
 import { ComponentOwnedObjects } from 'src/app/types/backend';
 
@@ -12,6 +11,4 @@ export class ComponentOverviewComponent {
   @Input() componentName: string;
   @Input() ownedObjs: ComponentOwnedObjects;
   @Input() status: ComponentStatusSpec;
-
-  public getStatus = getK8sObjectStatus;
 }

frontend/src/app/pages/server-info/overview/overview.component.html

@@ -1,11 +1,3 @@
-<lib-details-list-item
-  key="Status"
-  [icon]="statusIcon"
-  valueTooltip="Status is deduced from the Ready condition"
->
-  {{ status }}
-</lib-details-list-item>
-
 <lib-details-list-item key="URL external" [copyValue]="externalUrl">
   {{ externalUrl }}
 </lib-details-list-item>
@@ -46,10 +38,6 @@
   {{ basePredictor.protocolVersion }}
 </lib-details-list-item>
 
-<lib-panel *ngIf="!svc.status" class="lib-panel">
-  This InferenceService has no status.
-</lib-panel>
-
 <lib-conditions-table
   *ngIf="svc?.status"
   [conditions]="svc.status?.conditions"

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

@@ -2,7 +2,6 @@ import { Component, Input } from '@angular/core';
 import { ListEntry, ChipDescriptor } from 'kubeflow';
 import {
   getPredictorType,
-  getK8sObjectStatus,
   getPredictorExtensionSpec,
   getPredictorRuntime,
 } from 'src/app/shared/utils';
@@ -37,14 +36,6 @@ export class OverviewComponent {
 
   private svcPrv: InferenceServiceK8s;
 
-  get status() {
-    return getK8sObjectStatus(this.svc)[0];
-  }
-
-  get statusIcon() {
-    return getK8sObjectStatus(this.svc)[1];
-  }
-
   get externalUrl() {
     if (!this.svc.status) {
       return 'InferenceService is not ready to receive traffic yet.';

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

@@ -1,4 +1,4 @@
-<div class="lib-content-wrapper">
+<div class="lib-content-wrapper details-page">
   <lib-title-actions-toolbar
     title="Endpoint details"
     [buttons]="buttonsConfig"
@@ -10,22 +10,21 @@
   </lib-title-actions-toolbar>
 
   <!--scrollable page content-->
-  <div class="page-padding lib-flex-grow lib-overflow-auto">
+  <div class="details-page-outer">
     <lib-loading-spinner *ngIf="!serverInfoLoaded"></lib-loading-spinner>
 
     <ng-container *ngIf="serverInfoLoaded">
-      <div class="page-padding margin-bottom">
-        <div class="flex page-placement center">
-          <mat-icon
+      <div class="details-page-inner">
+        <div class="details-page-inner-2">
+          <lib-status-icon
             class="small-padding-right"
-            [class.warning]="statusIcon === 'warning'"
-            [class.check_circle]="statusIcon === 'check_circle'"
-          >
-            {{ statusIcon }}
-          </mat-icon>
-
+            [phase]="status.phase"
+          ></lib-status-icon>
           <div class="title">{{ serverName }}</div>
         </div>
+        <div class="small-padding-up">
+          <lib-status-info [status]="status"></lib-status-info>
+        </div>
       </div>
 
       <!--tabs-->
@@ -61,6 +60,11 @@
             <app-logs [svc]="inferenceService"></app-logs>
           </ng-template>
         </mat-tab>
+        <mat-tab label="EVENTS">
+          <ng-template matTabContent>
+            <app-events [svc]="inferenceService"></app-events>
+          </ng-template>
+        </mat-tab>
         <mat-tab label="YAML">
           <ng-template matTabContent>
             <app-yamls [svc]="inferenceService"></app-yamls>

frontend/src/app/pages/server-info/server-info.component.scss

@@ -23,3 +23,11 @@
 div.lib-flex-grow {
   padding-top: 1.5rem;
 }
+
+.small-padding-right {
+  padding-right: 8px;
+}
+
+.small-padding-up {
+  margin-top: 5px;
+}

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

@@ -16,6 +16,7 @@ import { YamlsModule } from './yamls/yamls.module';
 
 import { ServerInfoComponent } from './server-info.component';
 import { of } from 'rxjs';
+import { EventsModule } from './events/events.module';
 
 let ActivatedRouteStub: Partial<ActivatedRoute>;
 
@@ -45,6 +46,7 @@ describe('ServerInfoComponent', () => {
         MetricsModule,
         LogsModule,
         YamlsModule,
+        EventsModule,
       ],
       providers: [{ provide: ActivatedRoute, useValue: ActivatedRouteStub }],
     }).compileComponents();