wip

plugins/argo-workflows/src/api/indext.ts

@@ -15,7 +15,7 @@ export const argoWorkflowsApiRef = createApiRef<ArgoWorkflowsApi>({
 export interface ArgoWorkflowsApi {
     discoveryApi: DiscoveryApi
     kubernetesApi: KubernetesApi
-    getWorkflows(clusterName: string | undefined, namespace: string | undefined, labels: string | undefined): Promise<string>
+    getWorkflows(clusterName: string | undefined, namespace: string | undefined, labels: string | undefined): Promise<Workflow[]>
 }
 
 type Metadata = {
@@ -25,16 +25,9 @@ type Metadata = {
     namespace: string
 }
 
-type Workflows = {
-    workflows: Workflow[]
-}
-
-
-
 export type Workflow = {
     metadata: Metadata
-    spec: any
-    status?: any
+    status?: WorkflowStatus
 }
 
 type WorkflowStatus = {
@@ -42,9 +35,11 @@ type WorkflowStatus = {
     startedAt: string
     phase: string
     progress: string
-
 }
 
+type workflowResponse = {
+    items: Workflow[]
+}
 
 export class ArgoWorkflows implements ArgoWorkflowsApi {
     discoveryApi: DiscoveryApi
@@ -59,13 +54,14 @@ export class ArgoWorkflows implements ArgoWorkflowsApi {
         this.oauthRequestApi = oauthRequestApi
     }
 
-    async getWorkflows(clusterName: string | undefined, namespace: string | undefined, labels: string | undefined): Promise<string> {
+    async getWorkflows(clusterName: string | undefined, namespace: string | undefined, labels: string | undefined): Promise<Workflow[]> {
         const ns = namespace !== undefined ? namespace : 'default'
         const path = `/apis/${API_VERSION}/namespaces/${ns}/${WORKFLOW_PLURAL}`
         const query = new URLSearchParams()
         if (labels) {
             query.set('labelSelector', labels)
         }
+        // need limits and pagination
         const resp = await this.kubernetesApi.proxy({
             clusterName: clusterName !== undefined ? clusterName: await this.getCluster(),
             path: `${path}?${query.toString()}`
@@ -74,9 +70,13 @@ export class ArgoWorkflows implements ArgoWorkflowsApi {
         if (!resp.ok) {
             return Promise.reject(`failed to fetch resources: ${resp.status}, ${resp.statusText}, ${await resp.json()}`)
         }
-        return Promise.resolve(resp.json());
+        // need validation
+        const workflows = JSON.parse(await resp.text()) as workflowResponse
+
+        return Promise.resolve(workflows.items);
     }
 
+
     async getCluster(): Promise<string> {
         const clusters = await this.kubernetesApi.getClusters()
         if (clusters.length > 0) {

plugins/argo-workflows/src/components/Version/Version.tsx

@@ -1,12 +1,40 @@
 import {useApi} from "@backstage/core-plugin-api";
-import {argoWorkflowsApiRef} from "../../api/indext";
+import {argoWorkflowsApiRef, Workflow} from "../../api/indext";
 import useAsync from "react-use/lib/useAsync";
-import {InfoCard, Progress, StructuredMetadataTable} from '@backstage/core-components'
+import {Progress, Table, TableColumn} from '@backstage/core-components'
 import React from "react";
 import Alert from "@material-ui/lab/Alert";
 import { useEntity } from '@backstage/plugin-catalog-react';
 
 
+type TableData = {
+    name: string
+    phase?: string
+    progress?: string
+    startedAt?: string
+    finishedAt?: string
+}
+
+
+const columns: TableColumn[] = [
+    {title: "Name", field: "name"},
+    {title: "Phase", field: "phase", cellStyle: (data, _) => {
+        if (data === "Succeeded") {
+            return {
+                color: '#6CD75F',
+            }
+        }
+        if (data === "Error" || data === "Failed") {
+            return {
+                color: '#DC3D5A'
+            }
+        }
+        return {}
+        }},
+    {title: "Progress", field: "progress"},
+    {title: "StartTime", field: "startedAt", type: "datetime"},
+    {title: "EndTime", field: "finishedAt", type: "datetime"}
+]
 
 export const VersionComponent = () => {
     const {entity} = useEntity()
@@ -19,7 +47,7 @@ export const VersionComponent = () => {
     const k8sLabelSelector = entity.metadata.annotations?.['backstage.io/kubernetes-label-selector']
 
     const {value, loading, error} = useAsync(
-        async (): Promise<string> => {
+        async (): Promise<Workflow[]> => {
             return await apiClient.getWorkflows(clusterName, ns, k8sLabelSelector)
         }
     )
@@ -28,14 +56,23 @@ export const VersionComponent = () => {
     } else if (error) {
         return <Alert severity="error">{error.message}</Alert>;
     }
-    if (value) {
-        const m = {
-            namespaces: value
-        }
+
+    const data = value?.map( val => {
+        return {
+            name: val.metadata.name,
+            phase: val.status?.phase,
+            progress: val.status?.progress,
+            startedAt: val.status?.startedAt,
+            finishedAt: val.status?.finishedAt
+        } as TableData
+    })
+
+    if (data) {
         return (
-            <InfoCard title="Testing" variant="fullHeight">
-                <StructuredMetadataTable metadata={m} />
-            </InfoCard>
+            <Table options={{paging: true, search: true}}
+                   columns={columns}
+                   data={data}
+            />
         )
     }
     return <Alert severity="warning">Oh no</Alert>