Add sorting on status column

Author: gansheer

plugin/src/components/camel-list-page/CamelIntegrationRow.tsx

@@ -9,7 +9,8 @@ import {
 } from '@openshift-console/dynamic-plugin-sdk';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import CamelIntegrationStatus from './CamelIntegrationStatus';
+import Status from '@openshift-console/dynamic-plugin-sdk/lib/app/components/status/Status';
+import { CamelIntegrationStatusTitle, CamelIntegrationStatusValue } from './CamelIntegrationStatus';
 
 const getKind = (obj) => obj.kind;
 const getNamespace = (obj) => obj.metadata?.namespace;
@@ -38,9 +39,7 @@ const ResourcesRow: React.FC<RowProps<K8sResourceKind>> = ({ obj: camelInt, acti
     <>
       <TableData id="name" activeColumnIDs={activeColumnIDs}>
         <span className="co-resource-item co-resource-item--truncate">
-          <span className="co-m-resource-icon co-m-resource-secret">
-            C
-          </span>
+          <span className="co-m-resource-icon co-m-resource-secret">C</span>
           <Link
             to={`/camel/integration/ns/${camelInt.metadata.namespace}/kind/${camelInt.kind}/name/${camelInt.metadata.name}`}
             className="co-resource-item__resource-name"
@@ -67,7 +66,10 @@ const ResourcesRow: React.FC<RowProps<K8sResourceKind>> = ({ obj: camelInt, acti
         </span>
       </TableData>
       <TableData id="status" activeColumnIDs={activeColumnIDs}>
-        <CamelIntegrationStatus camelInt={camelInt} />
+        <Status
+          title={CamelIntegrationStatusTitle(camelInt)}
+          status={CamelIntegrationStatusValue(camelInt)}
+        />
       </TableData>
       <TableData id="camel" activeColumnIDs={activeColumnIDs}>
         {camelVersion || <span className="text-muted">{t('No camel version')}</span>}

plugin/src/components/camel-list-page/CamelIntegrationStatus.tsx

@@ -1,30 +1,31 @@
-import * as React from 'react';
 import { K8sResourceKind } from '@openshift-console/dynamic-plugin-sdk';
 
-import Status from '@openshift-console/dynamic-plugin-sdk/lib/app/components/status/Status';
-//import { useTranslation } from "react-i18next";
+export const CamelIntegrationStatuses = ['Succeeded', 'Failed', 'Unknown'] as const;
 
-const CamelIntegrationStatus = ({ camelInt }: { camelInt: K8sResourceKind }) => {
-  // Use translated values for Succeded and Failed
-  //const { t } = useTranslation('plugin__camel-openshift-console-plugin');
+export type CamelIntegrationStatuses = typeof CamelIntegrationStatuses[number];
 
+export const CamelIntegrationStatusValue = (
+  camelInt: K8sResourceKind,
+): CamelIntegrationStatuses => {
   if (camelInt.kind == 'Deployment' || camelInt.kind == 'DeploymentConfig') {
-    return (
-      <Status
-        title={`${camelInt.status.availableReplicas} of ${camelInt.status.replicas} pods`}
-        status={
-          camelInt.status.availableReplicas === camelInt.status.replicas ? 'Succeeded' : 'Failed'
-        }
-      />
-    );
-  } else if (camelInt.kind == 'CronJob') {
-    return (
-      <Status
-        title={`${camelInt.status.lastSuccessfulTime}`}
-        status={camelInt.status.lastSuccessfulTime ? 'Succeeded' : 'Failed'}
-      />
-    );
+    return camelInt.status.availableReplicas === camelInt.status.replicas ? 'Succeeded' : 'Failed';
   }
+
+  if (camelInt.kind == 'CronJob') {
+    return camelInt.status.lastSuccessfulTime ? 'Succeeded' : 'Failed';
+  }
+
+  return 'Unknown';
 };
 
-export default CamelIntegrationStatus;
+export const CamelIntegrationStatusTitle = (camelInt: K8sResourceKind): string => {
+  if (camelInt.kind == 'Deployment' || camelInt.kind == 'DeploymentConfig') {
+    return camelInt.status.availableReplicas + ' of ' + camelInt.status.replicas + ' pods';
+  }
+
+  if (camelInt.kind == 'CronJob') {
+    return camelInt.status.lastSuccessfulTime;
+  }
+
+  return 'Unknown';
+};

plugin/src/components/camel-list-page/useCamelIntegrationColumns.tsx

@@ -1,6 +1,18 @@
 import { K8sResourceKind, TableColumn } from '@openshift-console/dynamic-plugin-sdk';
 import { sortable } from '@patternfly/react-table';
 import { useTranslation } from 'react-i18next';
+import { CamelIntegrationStatusValue } from './CamelIntegrationStatus';
+
+export const sortResourceByStatus =
+  (direction: string) => (a: K8sResourceKind, b: K8sResourceKind) => {
+    const { first, second } =
+      direction === 'asc' ? { first: a, second: b } : { first: b, second: a };
+
+    const firstValue = CamelIntegrationStatusValue(first);
+    const secondValue = CamelIntegrationStatusValue(second);
+
+    return firstValue?.localeCompare(secondValue);
+  };
 
 const useCamelIntegrationColumns = (namespace): TableColumn<K8sResourceKind>[] => {
   const { t } = useTranslation('plugin__camel-openshift-console-plugin');
@@ -30,8 +42,8 @@ const useCamelIntegrationColumns = (namespace): TableColumn<K8sResourceKind>[] =
     {
       title: t('Status'),
       id: 'status',
-      sort: 'status.phase',
-      transforms: [],
+      sort: (data, direction) => data?.sort(sortResourceByStatus(direction)),
+      transforms: [sortable],
     },
     {
       title: t('Camel'),