refactor(Signatures): Refactor table to use tabletools

package.json

@@ -72,6 +72,7 @@
     "@sentry/webpack-plugin": "^3.5.0",
     "@unleash/proxy-client-react": "^5.0.0",
     "axios": "^1.10.0",
+    "bastilian-tabletools": "^2.11.0",
     "classnames": "^2.3.1",
     "graphql": "^15.10.1",
     "lodash": "^4.17.21",

src/Routes/Signatures/Signatures.js

@@ -20,11 +20,13 @@ import {
 import messages from '../../Messages';
 import { hasMalware } from '../../store/cache';
 import { DocumentationLink } from '../../Components/Common';
-import SigTable from '../../Components/SigTable/SigTable';
+
 import StatusCard from '../../Components/StatusCard/StatusCard';
 import ChartCard from '../../Components/ChartCard/ChartCard';
 import { useFeatureFlag } from '../../Utilities/Hooks';
 
+import SignaturesTable from './components/SignaturesTable/SignaturesTable';
+
 const Signatures = () => {
   const isLightspeedEnabled = useFeatureFlag('platform.lightspeed-rebrand');
 
@@ -104,7 +106,7 @@ const Signatures = () => {
           <GridItem span={12}>
             <Card>
               <CardBody>
-                <SigTable refetchSigPageData={refetch} />
+                <SignaturesTable refetchSigPageData={refetch} />
               </CardBody>
             </Card>
           </GridItem>

src/Routes/Signatures/components/SignaturesTable/SignaturesTable.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { useQuery } from '@apollo/client';
+import {
+  TableToolsTable,
+  TableStateProvider,
+  useSerialisedTableState,
+} from 'bastilian-tabletools';
+
+import { GET_SIGNATURE_TABLE } from '../../../../operations/queries';
+
+import columns from './columns';
+import filters from './filters';
+import serialisers from './serialisers';
+import SignatureDescription from './components/SignatureDescription';
+
+const SignaturesTable = () => {
+  const serialisedState = useSerialisedTableState();
+  const { pagination, sort: orderBy } = serialisedState || {};
+  const {
+    data: { rules: { totalCount: total } = {}, rulesList: items } = {},
+    loading,
+    error,
+  } = useQuery(GET_SIGNATURE_TABLE, {
+    variables: {
+      orderBy,
+      ...(pagination || {}),
+    },
+    skip: !serialisedState,
+  });
+
+  return (
+    <TableToolsTable
+      loading={loading}
+      items={items}
+      total={total}
+      error={error}
+      columns={columns}
+      filters={{
+        filterConfig: filters,
+        activeFilters: {
+          status: ['matched'],
+        },
+      }}
+      options={{
+        debug: true,
+        onSelect: true,
+        serialisers,
+        sortBy: {
+          index: 3,
+          direction: 'desc',
+        },
+        detailsComponent: SignatureDescription,
+      }}
+    />
+  );
+};
+
+const SignaturesTableWithTableStateProvider = (props) => (
+  <TableStateProvider>
+    <SignaturesTable {...props} />
+  </TableStateProvider>
+);
+
+export default SignaturesTableWithTableStateProvider;

src/Routes/Signatures/components/SignaturesTable/columns.js

@@ -0,0 +1,30 @@
+import SignatureName from './components/cells/SignatureName';
+import LastStatus from './components/cells/LastStatus';
+import Systems from './components/cells/Systems';
+import LastMatched from './components/cells/LastMatched';
+
+const signatureName = {
+  title: 'Signature name',
+  Component: SignatureName,
+  sortable: 'NAME',
+};
+
+const lastStatus = {
+  title: 'Last status',
+  Component: LastStatus,
+  sortable: 'LAST_STATUS',
+};
+
+const systems = {
+  title: 'Systems',
+  Component: Systems,
+  sortable: 'HOST_COUNT',
+};
+
+const lastMatched = {
+  title: 'Last matched',
+  Component: LastMatched,
+  sortable: 'LAST_MATCH_DATE_NULLS_LAST',
+};
+
+export default [signatureName, lastStatus, systems, lastMatched];

src/Routes/Signatures/components/SignaturesTable/components/SignatureDescription.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import {
+  Grid,
+  GridItem,
+  Content,
+  ContentVariants,
+} from '@patternfly/react-core';
+
+const SignatureDesctiprion = ({ item: signature }) => (
+  <div style={{ marginTop: 'var(--pf-t--global--spacer--md)' }}>
+    <Content>
+      <Grid hasGutter>
+        <GridItem span={12}>
+          {' '}
+          <Content component={ContentVariants.h6}>Description</Content>
+          {signature.metadata.description}
+        </GridItem>
+      </Grid>
+    </Content>
+  </div>
+);
+
+SignatureDesctiprion.propTypes = {
+  item: propTypes.object,
+};
+
+export default SignatureDesctiprion;

src/Routes/Signatures/components/SignaturesTable/components/cells/LastMatched.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Tooltip } from '@patternfly/react-core';
+import { DateFormat } from '@redhat-cloud-services/frontend-components/DateFormat';
+
+import messages from '../../../../../../Messages';
+
+const LastMatched = ({ lastMatchDate, isDisabled }) => (
+  <>
+    {isDisabled ? (
+      <FormattedMessage {...messages.notApplicable} />
+    ) : lastMatchDate ? (
+      <Tooltip
+        content={<DateFormat date={new Date(lastMatchDate)} type="exact" />}
+      >
+        <span>
+          <DateFormat date={new Date(lastMatchDate)} />
+        </span>
+      </Tooltip>
+    ) : (
+      <Tooltip content={<FormattedMessage {...messages.noHostHas} />}>
+        <span>
+          <FormattedMessage {...messages.never} />
+        </span>
+      </Tooltip>
+    )}
+  </>
+);
+
+LastMatched.propTypes = {
+  hostCount: propTypes.string,
+  lastMatchDate: propTypes.object,
+  isDisabled: propTypes.bool,
+};
+
+export default LastMatched;