Merge pull request #82 from platform-mesh/generic-list-ready-status

Generic list ready status

Author: Sobyt483

projects/lib/models/models/resource.ts

@@ -54,6 +54,7 @@ export interface Resource extends Record<string, any> {
   spec?: ResourceSpec;
   status?: ResourceStatus;
   __typename?: string;
+  ready?: boolean;
 }
 
 export interface ResourceDefinition {

projects/wc/src/app/components/generic-ui/list-view/list-view.component.html

@@ -35,6 +35,7 @@
 
   <ui5-table>
     <ui5-table-header-row slot="headerRow">
+      <ui5-table-header-cell width="32px" class="not-ready-indicator"></ui5-table-header-cell>
       @for (column of viewColomns(); track column.property) {
         @if (column.group) {
           <ui5-table-header-cell>{{ column.group.label ?? column.group.name }}</ui5-table-header-cell>
@@ -54,8 +55,13 @@
     </ui5-illustrated-message>
 
     @for (item of resources(); track item.metadata.name) {
-      <ui5-table-row interactive (click)="navigateToResource(item)">
-        @for (column of viewColomns(); track column.label) {
+      <ui5-table-row [interactive]="item.ready" [class.disabled]="!item.ready" (click)="navigateToResource(item)">
+        <ui5-table-cell>
+          @if (!item.ready) {
+            <ui5-icon class="not-ready-indicator" (click)="$event.stopPropagation()" [showTooltip]="true" accessibleName="Resource is not ready" name="alert" design="Critical"></ui5-icon>
+          }
+        </ui5-table-cell>
+        @for (column of viewColomns(); let first = $first;  track column.label) {
           @if (column.group) {
             <ui5-table-cell [class.multiline]="column.group.multiline ?? true">
               @for (field of column.group.fields; let last = $last; track field.label) {

projects/wc/src/app/components/generic-ui/list-view/list-view.component.scss

@@ -32,6 +32,7 @@
 
 .actions-column ui5-icon {
   min-width: 1rem;
+  cursor: pointer;
 }
 
 .edit-item {
@@ -41,3 +42,20 @@
 .delete-item {
   padding: 0 0.5rem;
 }
+
+.disabled {
+  filter: brightness(0.92);
+  pointer-events: none;
+
+  ui5-table-cell:not(:first-child) {
+    color: var(--sapContent_DisabledTextColor, #6a6d70);
+
+    ui5-icon {
+      color: var(--sapContent_DisabledTextColor, #6a6d70);
+    }
+  }
+}
+
+.not-ready-indicator {
+  pointer-events: auto;
+}

projects/wc/src/app/components/generic-ui/list-view/list-view.component.spec.ts

@@ -1,4 +1,5 @@
 import { ListViewComponent } from './list-view.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { LuigiCoreService } from '@openmfp/portal-ui-lib';
 import { ResourceService } from '@platform-mesh/portal-ui-lib/services';
@@ -12,7 +13,16 @@ describe('ListViewComponent', () => {
 
   beforeEach(() => {
     mockResourceService = {
-      list: jest.fn().mockReturnValue(of([{ metadata: { name: 'test' } }])),
+      list: jest.fn().mockReturnValue(
+        of([
+          {
+            metadata: { name: 'test' },
+            status: {
+              conditions: [{ type: 'Ready', status: 'True' }],
+            },
+          },
+        ]),
+      ),
       delete: jest.fn().mockReturnValue(of({})),
       create: jest.fn().mockReturnValue(of({ data: { name: 'test' } })),
       update: jest.fn().mockReturnValue(of({ data: { name: 'test' } })),
@@ -28,6 +38,7 @@ describe('ListViewComponent', () => {
         { provide: ResourceService, useValue: mockResourceService },
         { provide: LuigiCoreService, useValue: mockLuigiCoreService },
       ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).overrideComponent(ListViewComponent, {
       set: { template: '' },
     });
@@ -289,4 +300,253 @@ describe('ListViewComponent', () => {
     // Component should still be created even if list fails
     expect(newComponent).toBeTruthy();
   });
+
+  describe('Ready Status Functionality', () => {
+    it('should mark resource as ready when Ready condition status is True', () => {
+      const readyResource = {
+        metadata: { name: 'ready-resource' },
+        status: {
+          conditions: [{ type: 'Ready', status: 'True' }],
+        },
+      };
+
+      mockResourceService.list.mockReturnValueOnce(of([readyResource]));
+
+      const newFixture = TestBed.createComponent(ListViewComponent);
+      const newComponent = newFixture.componentInstance;
+
+      newComponent.context = (() => ({
+        resourceDefinition: {
+          plural: 'clusters',
+          kind: 'Cluster',
+          group: 'core.k8s.io',
+          ui: {
+            listView: {
+              fields: [],
+            },
+          },
+        },
+      })) as any;
+
+      newComponent.LuigiClient = (() => ({
+        linkManager: () => ({
+          fromContext: jest.fn().mockReturnThis(),
+          navigate: jest.fn(),
+          withParams: jest.fn().mockReturnThis(),
+        }),
+        getNodeParams: jest.fn(),
+      })) as any;
+
+      newFixture.detectChanges();
+
+      const resources = newComponent.resources();
+      expect(resources).toHaveLength(1);
+      expect(resources[0].ready).toBe(true);
+      expect(resources[0].metadata.name).toBe('ready-resource');
+    });
+
+    it('should mark resource as not ready when Ready condition status is False', () => {
+      const notReadyResource = {
+        metadata: { name: 'not-ready-resource' },
+        status: {
+          conditions: [{ type: 'Ready', status: 'False' }],
+        },
+      };
+
+      mockResourceService.list.mockReturnValueOnce(of([notReadyResource]));
+
+      const newFixture = TestBed.createComponent(ListViewComponent);
+      const newComponent = newFixture.componentInstance;
+
+      newComponent.context = (() => ({
+        resourceDefinition: {
+          plural: 'clusters',
+          kind: 'Cluster',
+          group: 'core.k8s.io',
+          ui: {
+            listView: {
+              fields: [],
+            },
+          },
+        },
+      })) as any;
+
+      newComponent.LuigiClient = (() => ({
+        linkManager: () => ({
+          fromContext: jest.fn().mockReturnThis(),
+          navigate: jest.fn(),
+          withParams: jest.fn().mockReturnThis(),
+        }),
+        getNodeParams: jest.fn(),
+      })) as any;
+
+      newFixture.detectChanges();
+
+      const resources = newComponent.resources();
+      expect(resources).toHaveLength(1);
+      expect(resources[0].ready).toBe(false);
+      expect(resources[0].metadata.name).toBe('not-ready-resource');
+    });
+
+    it('should mark resource as not ready when Ready condition is missing', () => {
+      const resourceWithoutReadyCondition = {
+        metadata: { name: 'no-ready-condition' },
+        status: {
+          conditions: [{ type: 'Other', status: 'True' }],
+        },
+      };
+
+      mockResourceService.list.mockReturnValueOnce(
+        of([resourceWithoutReadyCondition]),
+      );
+
+      const newFixture = TestBed.createComponent(ListViewComponent);
+      const newComponent = newFixture.componentInstance;
+
+      newComponent.context = (() => ({
+        resourceDefinition: {
+          plural: 'clusters',
+          kind: 'Cluster',
+          group: 'core.k8s.io',
+          ui: {
+            listView: {
+              fields: [],
+            },
+          },
+        },
+      })) as any;
+
+      newComponent.LuigiClient = (() => ({
+        linkManager: () => ({
+          fromContext: jest.fn().mockReturnThis(),
+          navigate: jest.fn(),
+          withParams: jest.fn().mockReturnThis(),
+        }),
+        getNodeParams: jest.fn(),
+      })) as any;
+
+      newFixture.detectChanges();
+
+      const resources = newComponent.resources();
+      expect(resources).toHaveLength(1);
+      expect(resources[0].ready).toBe(false);
+      expect(resources[0].metadata.name).toBe('no-ready-condition');
+    });
+
+    it('should mark resource as not ready when status.conditions is missing', async () => {
+      const resourceWithoutConditions = {
+        metadata: { name: 'no-conditions' },
+        status: {
+          conditions: [],
+        },
+      };
+
+      mockResourceService.list.mockReturnValueOnce(
+        of([resourceWithoutConditions]),
+      );
+
+      const newFixture = TestBed.createComponent(ListViewComponent);
+      const newComponent = newFixture.componentInstance;
+
+      newComponent.context = (() => ({
+        resourceDefinition: {
+          plural: 'clusters',
+          kind: 'Cluster',
+          group: 'core.k8s.io',
+          ui: {
+            listView: {
+              fields: [],
+            },
+          },
+        },
+      })) as any;
+
+      newComponent.LuigiClient = (() => ({
+        linkManager: () => ({
+          fromContext: jest.fn().mockReturnThis(),
+          navigate: jest.fn(),
+          withParams: jest.fn().mockReturnThis(),
+        }),
+        getNodeParams: jest.fn(),
+      })) as any;
+
+      newFixture.detectChanges();
+      await newFixture.whenStable();
+
+      const resources = newComponent.resources();
+      expect(resources).toHaveLength(1);
+      expect(resources[0].ready).toBe(false);
+      expect(resources[0].metadata.name).toBe('no-conditions');
+    });
+
+    it('should handle mixed ready statuses in resource list', () => {
+      const mixedResources = [
+        {
+          metadata: { name: 'ready-1' },
+          status: {
+            conditions: [{ type: 'Ready', status: 'True' }],
+          },
+        },
+        {
+          metadata: { name: 'not-ready-1' },
+          status: {
+            conditions: [{ type: 'Ready', status: 'False' }],
+          },
+        },
+        {
+          metadata: { name: 'ready-2' },
+          status: {
+            conditions: [{ type: 'Ready', status: 'True' }],
+          },
+        },
+      ];
+
+      mockResourceService.list.mockReturnValueOnce(of(mixedResources));
+
+      const newFixture = TestBed.createComponent(ListViewComponent);
+      const newComponent = newFixture.componentInstance;
+
+      newComponent.context = (() => ({
+        resourceDefinition: {
+          plural: 'clusters',
+          kind: 'Cluster',
+          group: 'core.k8s.io',
+          ui: {
+            listView: {
+              fields: [],
+            },
+          },
+        },
+      })) as any;
+
+      newComponent.LuigiClient = (() => ({
+        linkManager: () => ({
+          fromContext: jest.fn().mockReturnThis(),
+          navigate: jest.fn(),
+          withParams: jest.fn().mockReturnThis(),
+        }),
+        getNodeParams: jest.fn(),
+      })) as any;
+
+      newFixture.detectChanges();
+
+      const resources = newComponent.resources();
+      expect(resources).toHaveLength(3);
+      expect(resources[0].ready).toBe(true);
+      expect(resources[1].ready).toBe(false);
+      expect(resources[2].ready).toBe(true);
+    });
+
+    it('should call generateGqlFieldsWithStatusProperties when listing resources', () => {
+      const generateGqlFieldsSpy = jest.spyOn(
+        component as any,
+        'generateGqlFieldsWithStatusProperties',
+      );
+
+      component.list();
+
+      expect(generateGqlFieldsSpy).toHaveBeenCalled();
+      generateGqlFieldsSpy.mockRestore();
+    });
+  });
 });

projects/wc/src/app/components/generic-ui/list-view/list-view.component.ts

@@ -116,15 +116,25 @@ export class ListViewComponent implements OnInit {
   ngOnInit(): void {}
 
   list() {
-    const fields = generateGraphQLFields(this.columns());
+    const fields = this.generateGqlFieldsWithStatusProperties();
     const queryOperation = `${replaceDotsAndHyphensWithUnderscores(this.resourceDefinition().group)}_${this.resourceDefinition().plural}`;
 
     this.resourceService
       .list(queryOperation, fields, this.context())
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
-        next: (result) => {
-          this.resources.set(result);
+        next: (result: any[]) => {
+          this.resources.set(
+            result.map((resource) => {
+              return {
+                ...resource,
+                ready:
+                  resource.status?.conditions?.find(
+                    (condition: any) => condition.type === 'Ready',
+                  )?.status === 'True',
+              };
+            }),
+          );
         },
       });
   }
@@ -202,4 +212,12 @@ export class ListViewComponent implements OnInit {
     event.stopPropagation?.();
     this.deleteModal()?.open(resource);
   }
+
+  private generateGqlFieldsWithStatusProperties() {
+    return generateGraphQLFields(
+      this.columns().concat({
+        property: ['status.conditions.status', 'status.conditions.type'],
+      }),
+    );
+  }
 }