refactor(nomad): sync frontend with EE [EE-3353] (#7758)

app/react/nomad/jobs/JobsView/JobsDatatable/JobsDatatable.tsx

@@ -0,0 +1,204 @@
+import { Fragment, useEffect } from 'react';
+import {
+  useExpanded,
+  useFilters,
+  useGlobalFilter,
+  usePagination,
+  useSortBy,
+  useTable,
+} from 'react-table';
+import { useRowSelectColumn } from '@lineup-lite/hooks';
+
+import { Job } from '@/react/nomad/types';
+import { useDebounce } from '@/react/hooks/useDebounce';
+
+import { PaginationControls } from '@@/PaginationControls';
+import {
+  Table,
+  TableActions,
+  TableContainer,
+  TableHeaderRow,
+  TableRow,
+  TableTitle,
+  TableSettingsMenu,
+  TableTitleActions,
+} from '@@/datatables';
+import { multiple } from '@@/datatables/filter-types';
+import { useTableSettings } from '@@/datatables/useTableSettings';
+import { SearchBar, useSearchBarState } from '@@/datatables/SearchBar';
+import { useRowSelect } from '@@/datatables/useRowSelect';
+import { TableFooter } from '@@/datatables/TableFooter';
+import { SelectedRowsCount } from '@@/datatables/SelectedRowsCount';
+import { TableContent } from '@@/datatables/TableContent';
+import { useRepeater } from '@@/datatables/useRepeater';
+
+import { JobsTableSettings } from './types';
+import { TasksDatatable } from './TasksDatatable';
+import { useColumns } from './columns';
+import { JobsDatatableSettings } from './JobsDatatableSettings';
+
+export interface JobsDatatableProps {
+  jobs: Job[];
+  refreshData: () => Promise<void>;
+  isLoading?: boolean;
+}
+
+export function JobsDatatable({
+  jobs,
+  refreshData,
+  isLoading,
+}: JobsDatatableProps) {
+  const { settings, setTableSettings } = useTableSettings<JobsTableSettings>();
+  const [searchBarValue, setSearchBarValue] = useSearchBarState('jobs');
+  const columns = useColumns();
+  const debouncedSearchValue = useDebounce(searchBarValue);
+  useRepeater(settings.autoRefreshRate, refreshData);
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    page,
+    prepareRow,
+    selectedFlatRows,
+    gotoPage,
+    setPageSize,
+    setGlobalFilter,
+    state: { pageIndex, pageSize },
+  } = useTable<Job>(
+    {
+      defaultCanFilter: false,
+      columns,
+      data: jobs,
+      filterTypes: { multiple },
+      initialState: {
+        pageSize: settings.pageSize || 10,
+        sortBy: [settings.sortBy],
+        globalFilter: searchBarValue,
+      },
+      isRowSelectable() {
+        return false;
+      },
+      autoResetExpanded: false,
+      autoResetSelectedRows: false,
+      selectColumnWidth: 5,
+      getRowId(job, relativeIndex) {
+        return `${job.ID}-${relativeIndex}`;
+      },
+    },
+    useFilters,
+    useGlobalFilter,
+    useSortBy,
+    useExpanded,
+    usePagination,
+    useRowSelect,
+    useRowSelectColumn
+  );
+
+  useEffect(() => {
+    setGlobalFilter(debouncedSearchValue);
+  }, [debouncedSearchValue, setGlobalFilter]);
+
+  const tableProps = getTableProps();
+  const tbodyProps = getTableBodyProps();
+
+  return (
+    <TableContainer>
+      <TableTitle icon="fa-cubes" label="Nomad Jobs">
+        <TableTitleActions>
+          <TableSettingsMenu>
+            <JobsDatatableSettings />
+          </TableSettingsMenu>
+        </TableTitleActions>
+      </TableTitle>
+
+      <TableActions />
+
+      <SearchBar value={searchBarValue} onChange={handleSearchBarChange} />
+
+      <Table
+        className={tableProps.className}
+        role={tableProps.role}
+        style={tableProps.style}
+      >
+        <thead>
+          {headerGroups.map((headerGroup) => {
+            const { key, className, role, style } =
+              headerGroup.getHeaderGroupProps();
+
+            return (
+              <TableHeaderRow<Job>
+                key={key}
+                className={className}
+                role={role}
+                style={style}
+                headers={headerGroup.headers}
+                onSortChange={handleSortChange}
+              />
+            );
+          })}
+        </thead>
+        <tbody
+          className={tbodyProps.className}
+          role={tbodyProps.role}
+          style={tbodyProps.style}
+        >
+          <TableContent
+            rows={page}
+            prepareRow={prepareRow}
+            isLoading={isLoading}
+            emptyContent="No jobs found"
+            renderRow={(row, { key, className, role, style }) => (
+              <Fragment key={key}>
+                <TableRow<Job>
+                  cells={row.cells}
+                  key={key}
+                  className={className}
+                  role={role}
+                  style={style}
+                />
+
+                {row.isExpanded && (
+                  <tr>
+                    <td />
+                    <td colSpan={row.cells.length - 1}>
+                      <TasksDatatable data={row.original.Tasks} />
+                    </td>
+                  </tr>
+                )}
+              </Fragment>
+            )}
+          />
+        </tbody>
+      </Table>
+
+      <TableFooter>
+        <SelectedRowsCount value={selectedFlatRows.length} />
+        <PaginationControls
+          showAll
+          pageLimit={pageSize}
+          page={pageIndex + 1}
+          onPageChange={(p) => gotoPage(p - 1)}
+          totalCount={jobs.length}
+          onPageLimitChange={handlePageSizeChange}
+        />
+      </TableFooter>
+    </TableContainer>
+  );
+
+  function handlePageSizeChange(pageSize: number) {
+    setPageSize(pageSize);
+    setTableSettings((settings) => ({ ...settings, pageSize }));
+  }
+
+  function handleSearchBarChange(value: string) {
+    setSearchBarValue(value);
+  }
+
+  function handleSortChange(id: string, desc: boolean) {
+    setTableSettings((settings) => ({
+      ...settings,
+      sortBy: { id, desc },
+    }));
+  }
+}