feat(ui): update the slow log table

- replace the virtual table with Redis UI

re #RI-7437

Author: valkirilov

redisinsight/ui/src/pages/slow-log/components/SlowLogTable/SlowLogTable.styles.ts

@@ -0,0 +1,11 @@
+import { Table } from '@redis-ui/table'
+import styled from 'styled-components'
+import { Col } from 'uiSrc/components/base/layout/flex'
+
+export const StyledTableWrapper = styled(Col)`
+  height: calc(100% - 100px);
+`
+
+export const StyledTable = styled(Table)`
+  max-height: 100%;
+`

redisinsight/ui/src/pages/slow-log/components/SlowLogTable/SlowLogTable.tsx

@@ -1,102 +1,88 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { useParams } from 'react-router-dom'
-import { ITableColumn } from 'uiSrc/components/virtual-table/interfaces'
-import VirtualTable from 'uiSrc/components/virtual-table/VirtualTable'
-import {
-  DURATION_UNITS,
-  DurationUnits,
-  SortOrder,
-  TableCellAlignment,
-  TableCellTextAlignment,
-} from 'uiSrc/constants'
+import { DURATION_UNITS, DurationUnits, SortOrder } from 'uiSrc/constants'
 import { convertNumberByUnits } from 'uiSrc/pages/slow-log/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
 import { Text } from 'uiSrc/components/base/text'
+import {
+  Table,
+  ColumnDef,
+  SortingState,
+} from 'uiSrc/components/base/layout/table'
 
 import { FormatedDate, RiTooltip } from 'uiSrc/components'
 import styles from '../styles.module.scss'
 
+import { SlowLog } from 'apiSrc/modules/slow-log/models'
+import { StyledTableWrapper } from './SlowLogTable.styles'
+
 export const DATE_FORMAT = 'HH:mm:ss d LLL yyyy'
 
 export interface Props {
-  items: any
+  items: SlowLog[]
   loading: boolean
   durationUnit: DurationUnits
 }
 
-const sortByTimeStamp = (items = [], order: SortOrder) =>
-  [...items].sort((a: any, b: any) =>
-    order === SortOrder.DESC ? b.time - a.time : a.time - b.time,
-  )
-
 const SlowLogTable = (props: Props) => {
-  const { items = [], loading = false, durationUnit } = props
-  const [table, setTable] = useState<any>([])
-  const [sortedColumnName, setSortedColumnName] = useState('time')
-  const [sortedColumnOrder, setSortedColumnOrder] = useState(SortOrder.DESC)
+  const { items = [], durationUnit } = props
 
   const { instanceId } = useParams<{ instanceId: string }>()
-  const sortedColumn = {
-    column: sortedColumnName,
-    order: sortedColumnOrder,
-  }
-
-  useEffect(() => {
-    setTable(sortByTimeStamp(items, sortedColumnOrder))
-  }, [items, sortedColumnOrder])
 
-  const columns: ITableColumn[] = [
+  const columns: ColumnDef<SlowLog>[] = [
     {
       id: 'time',
-      label: 'Timestamp',
-      absoluteWidth: 190,
-      minWidth: 190,
-      isSortable: true,
-      render: (timestamp) => (
-        <Text
-          size="s"
-          color="subdued"
-          data-testid="timestamp-value"
-          className={styles.timestampCell}
-        >
-          <FormatedDate date={timestamp * 1000} />
-        </Text>
-      ),
+      header: 'Timestamp',
+      accessorKey: 'time',
+      size: 15,
+      cell: ({ getValue }) => {
+        const date = (getValue() as number) * 1000
+
+        return <FormatedDate date={date} />
+      },
     },
     {
       id: 'durationUs',
-      label: `Duration, ${DURATION_UNITS.find(({ value }) => value === durationUnit)?.inputDisplay}`,
-      minWidth: 110,
-      absoluteWidth: 'auto',
-      textAlignment: TableCellTextAlignment.Right,
-      alignment: TableCellAlignment.Right,
-      render: (duration) => (
-        <Text size="s" color="subdued" data-testid="duration-value">
-          {numberWithSpaces(convertNumberByUnits(duration, durationUnit))}
-        </Text>
-      ),
+      header: `Duration, ${DURATION_UNITS.find(({ value }) => value === durationUnit)?.inputDisplay}`,
+      accessorKey: 'durationUs',
+      size: 15,
+      cell: ({ getValue }) => {
+        const duration = getValue() as number
+
+        return (
+          <Text size="s" data-testid="duration-value">
+            {numberWithSpaces(convertNumberByUnits(duration, durationUnit))}
+          </Text>
+        )
+      },
     },
     {
       id: 'args',
-      label: 'Command',
-      render: (command) => (
-        <RiTooltip
-          position="bottom"
-          content={command}
-          anchorClassName={styles.commandTooltip}
-        >
-          <span className={styles.commandText} data-testid="command-value">
-            {command}
-          </span>
-        </RiTooltip>
-      ),
+      header: 'Command',
+      accessorKey: 'args',
+      cell: ({ getValue }) => {
+        const command = getValue() as string
+
+        return (
+          <RiTooltip
+            position="bottom"
+            content={command}
+            anchorClassName={styles.commandTooltip}
+          >
+            <span className={styles.commandText} data-testid="command-value">
+              {command}
+            </span>
+          </RiTooltip>
+        )
+      },
     },
   ]
 
-  const onChangeSorting = (column: any, order: SortOrder) => {
-    setSortedColumnName(column)
-    setSortedColumnOrder(order)
+  const handleSortingChange = (state: SortingState) => {
+    const { desc } = state[0] || { desc: true }
+    const order = desc ? SortOrder.DESC : SortOrder.ASC
+
     sendEventTelemetry({
       event: TelemetryEvent.SLOWLOG_SORTED,
       eventData: {
@@ -107,17 +93,15 @@ const SlowLogTable = (props: Props) => {
   }
 
   return (
-    <div className={styles.tableWrapper} data-testid="slowlog-table">
-      <VirtualTable
-        selectable={false}
-        loading={loading}
-        items={table}
+    <StyledTableWrapper data-testid="slowlog-table">
+      <Table
         columns={columns}
-        sortedColumn={sortedColumn}
-        onChangeSorting={onChangeSorting}
-        hideFooter
+        data={items}
+        onSortingChange={handleSortingChange}
+        maxHeight="60vh"
+        stripedRows
       />
-    </div>
+    </StyledTableWrapper>
   )
 }