feat(ocm): add sorting to the ocm ClusterStatusPage table (#1052)

Author: Zaperex

plugins/ocm/package.json

@@ -39,7 +39,8 @@
     "@material-ui/lab": "^4.0.0-alpha.45",
     "@patternfly/patternfly": "^5.1.0",
     "@patternfly/react-icons": "^5.1.1",
-    "react-use": "^17.4.0"
+    "react-use": "^17.4.0",
+    "semver": "^7.5.4"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0"

plugins/ocm/src/components/ClusterStatusPage/ClusterStatusPage.tsx

@@ -26,7 +26,9 @@ import {
 } from '@janus-idp/backstage-plugin-ocm-common';
 
 import { OcmApiRef } from '../../api';
+import { ClusterStatusRowData } from '../../types';
 import { Status, Update } from '../common';
+import { columns } from './tableHeading';
 
 const useStylesTwo = makeStyles({
   container: {
@@ -53,17 +55,15 @@ const NodeChip = ({
 }) => (
   <>
     {count > 0 ? (
-      <>
-        <Chip
-          label={
-            <>
-              {indicator}
-              {count}
-            </>
-          }
-          variant="outlined"
-        />
-      </>
+      <Chip
+        label={
+          <>
+            {indicator}
+            {count}
+          </>
+        }
+        variant="outlined"
+      />
     ) : (
       <></>
     )}
@@ -140,7 +140,7 @@ const CatalogClusters = () => {
     return <CircularProgress />;
   }
 
-  const data = clusterEntities
+  const data: ClusterStatusRowData[] = clusterEntities
     ? clusterEntities.map(ce => {
         return {
           name: (
@@ -168,29 +168,7 @@ const CatalogClusters = () => {
       <Table
         options={{ paging: false }}
         data={data}
-        columns={[
-          {
-            title: 'Name',
-            field: 'name',
-            highlight: true,
-          },
-          {
-            title: 'Status',
-            field: 'status',
-          },
-          {
-            title: 'Infrastructure',
-            field: 'infrastructure',
-          },
-          {
-            title: 'Version',
-            field: 'version',
-          },
-          {
-            title: 'Nodes',
-            field: 'nodes',
-          },
-        ]}
+        columns={columns}
         title="All"
       />
     </div>

plugins/ocm/src/components/ClusterStatusPage/tableHeading.tsx

@@ -0,0 +1,53 @@
+import { TableColumn } from '@backstage/core-components';
+
+import semver from 'semver';
+
+import { ClusterStatusRowData } from '../../types';
+
+export const columns: TableColumn<ClusterStatusRowData>[] = [
+  {
+    title: 'Name',
+    field: 'name',
+    highlight: true,
+    customSort: (a, b) => {
+      // The children type here is actually a ReactNode, but we know it's a string
+      return (a.name.props.children as string).localeCompare(
+        b.name.props.children as string,
+        'en',
+      );
+    },
+  },
+  {
+    title: 'Status',
+    field: 'status',
+    customSort: (a, b) => {
+      const availabilityA = a.status.props.status.available;
+      const availabilityB = b.status.props.status.available;
+      if (availabilityA === availabilityB) return 0;
+      return availabilityA ? -1 : 1;
+    },
+  },
+  {
+    title: 'Infrastructure',
+    field: 'infrastructure',
+  },
+  {
+    title: 'Version',
+    field: 'version',
+    customSort: (a, b) => {
+      return semver.gt(
+        a.version.props.data.version,
+        b.version.props.data.version,
+      )
+        ? 1
+        : -1;
+    },
+  },
+  {
+    title: 'Nodes',
+    field: 'nodes',
+    customSort: (a, b) => {
+      return a.nodes.props.nodes.length - b.nodes.props.nodes.length;
+    },
+  },
+];

plugins/ocm/src/components/common.tsx

@@ -9,10 +9,9 @@ import {
 import { Button, Grid, makeStyles, Tooltip } from '@material-ui/core';
 import { ArrowCircleUpIcon } from '@patternfly/react-icons';
 
-import {
-  ClusterStatus,
-  ClusterUpdate,
-} from '@janus-idp/backstage-plugin-ocm-common';
+import { ClusterStatus } from '@janus-idp/backstage-plugin-ocm-common';
+
+import { versionDetails } from '../types';
 
 const useStyles = makeStyles({
   button: {
@@ -48,11 +47,7 @@ export const Status = ({ status }: { status: ClusterStatus }) => {
   );
 };
 
-export const Update = ({
-  data,
-}: {
-  data: { version: string; update: ClusterUpdate };
-}) => {
+export const Update = ({ data }: { data: versionDetails }) => {
   const classes = useStyles();
   return (
     <>

plugins/ocm/src/types.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { EntityRefLinkProps } from '@backstage/plugin-catalog-react';
+
+import {
+  ClusterNodesStatus,
+  ClusterStatus,
+  ClusterUpdate,
+} from '@janus-idp/backstage-plugin-ocm-common';
+
+export type versionDetails = {
+  version: string;
+  update: ClusterUpdate;
+};
+
+export type ClusterStatusRowData = {
+  name: React.ReactElement<EntityRefLinkProps>;
+  status: React.ReactElement<{ status: ClusterStatus }>;
+  infrastructure: string;
+  version: React.ReactElement<{ data: versionDetails }>;
+  nodes: React.ReactElement<{ nodes: Array<ClusterNodesStatus> }>;
+};