Support Nodes fleet table and map presentation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.5.5",
+  "version": "5.5.6",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/table/groupByControl.test.js

@@ -0,0 +1,41 @@
+import React from "react"
+import { renderWithProviders, screen, waitFor } from "testUtilities"
+import Table from "./table"
+
+describe("Table Group By control", () => {
+  it("keeps configured grouping active when the header control is hidden", async () => {
+    const tableRef = { current: null }
+
+    renderWithProviders(
+      <Table
+        data={[
+          { id: "node-1", status: "live" },
+          { id: "node-2", status: "live" },
+        ]}
+        dataColumns={[
+          {
+            id: "status",
+            accessorKey: "status",
+            header: "Status",
+            cell: () => null,
+          },
+        ]}
+        enableGroupByControl={false}
+        getRowId={row => row.id}
+        groupByColumns={{ status: { columns: ["status"], name: "Status" } }}
+        grouping="status"
+        tableRef={tableRef}
+      />
+    )
+
+    await waitFor(() => expect(tableRef.current).not.toBeNull())
+
+    expect(screen.queryByTestId("tableGroupBy")).not.toBeInTheDocument()
+    expect(tableRef.current.getState().grouping).toEqual(["status"])
+    expect(tableRef.current.getGroupedRowModel().rows).toHaveLength(1)
+    expect(tableRef.current.getGroupedRowModel().rows[0]).toMatchObject({
+      groupingColumnId: "status",
+      groupingValue: "live",
+    })
+  })
+})

src/components/table/header/groupBy.js

@@ -43,7 +43,7 @@ const HeaderGroupBy = ({ grouping, groupByColumns, onGroupBy, tableMeta, dataGa,
         menuPortalTarget={document.body}
         onChange={({ value }) => onGroupBy(value)}
         options={Object.values(groupByOptions)}
-        styles={{ size: "tiny", minWidth: 120 }}
+        styles={{ size: "tiny", minWidth: 120, ...tableMeta.groupBySelectStyles }}
         value={groupByOptions[grouping] || groupByOptions.default}
       />
     </Flex>

src/components/table/header/groupBy.test.js

@@ -0,0 +1,35 @@
+import React from "react"
+import { renderWithProviders, screen } from "testUtilities"
+import HeaderGroupBy from "./groupBy"
+
+const longGroup = "label:kubernetes.io/metadata.name"
+const groupByColumns = {
+  [longGroup]: { name: longGroup },
+}
+const dataColumns = [{ id: longGroup, name: longGroup }]
+
+const renderGroupBy = tableMeta =>
+  renderWithProviders(
+    <HeaderGroupBy
+      dataColumns={dataColumns}
+      groupByColumns={groupByColumns}
+      grouping={longGroup}
+      onGroupBy={() => {}}
+      tableMeta={tableMeta}
+    />
+  )
+
+describe("HeaderGroupBy", () => {
+  it("keeps the existing 120 px minimum by default", () => {
+    renderGroupBy({})
+
+    expect(screen.getByTestId("tableGroupByFilterControl")).toHaveStyle({ minWidth: "120px" })
+  })
+
+  it("accepts a reusable Select style override for long values", () => {
+    renderGroupBy({ groupBySelectStyles: { minWidth: 240 } })
+
+    expect(screen.getByText(longGroup)).toBeInTheDocument()
+    expect(screen.getByTestId("tableGroupByFilterControl")).toHaveStyle({ minWidth: "240px" })
+  })
+})

src/components/table/header/index.js

@@ -10,6 +10,7 @@ const Header = ({
   hasSearch,
   onSearch,
   groupByColumns,
+  enableGroupByControl = true,
   grouping,
   onGroupBy,
   tableMeta,
@@ -27,7 +28,13 @@ const Header = ({
     []
   )
 
-  if (!title && !groupByColumns && !hasSearch && !bulkActions && !enableColumnVisibility)
+  if (
+    !title &&
+    !(enableGroupByControl && groupByColumns) &&
+    !hasSearch &&
+    !bulkActions &&
+    !enableColumnVisibility
+  )
     return null
 
   return (
@@ -59,14 +66,16 @@ const Header = ({
           />
         </Flex>
       )}
-      <GroupBy
-        groupByColumns={groupByColumns}
-        tableMeta={tableMeta}
-        dataColumns={dataColumns}
-        grouping={grouping}
-        onGroupBy={onGroupBy}
-        dataGa={dataGa}
-      />
+      {enableGroupByControl && (
+        <GroupBy
+          groupByColumns={groupByColumns}
+          tableMeta={tableMeta}
+          dataColumns={dataColumns}
+          grouping={grouping}
+          onGroupBy={onGroupBy}
+          dataGa={dataGa}
+        />
+      )}
       {children}
     </Flex>
   )

src/components/table/header/index.test.js

@@ -0,0 +1,25 @@
+import React from "react"
+import { renderWithProviders, screen } from "testUtilities"
+import Header from "."
+
+const props = {
+  dataColumns: [{ id: "group", name: "Group" }],
+  groupByColumns: { group: { columns: ["group"], name: "Group" } },
+  grouping: "group",
+  onGroupBy: () => {},
+  tableMeta: {},
+}
+
+describe("Table Header", () => {
+  it("shows the Group By control by default", () => {
+    renderWithProviders(<Header {...props} />)
+
+    expect(screen.getByTestId("tableGroupBy")).toBeInTheDocument()
+  })
+
+  it("can hide the Group By control without removing grouping configuration", () => {
+    renderWithProviders(<Header {...props} enableGroupByControl={false} title="Nodes" />)
+
+    expect(screen.queryByTestId("tableGroupBy")).not.toBeInTheDocument()
+  })
+})

src/components/table/headerActionsOrder.test.js

@@ -0,0 +1,43 @@
+import React from "react"
+import { renderWithProviders } from "testUtilities"
+import Table from "./table"
+
+const data = [{ id: "node-1", name: "Node 1" }]
+const dataColumns = [
+  {
+    id: "name",
+    accessorKey: "name",
+    header: "Name",
+    cell: ({ getValue }) => getValue(),
+  },
+]
+
+const renderTable = props =>
+  renderWithProviders(
+    <Table
+      data={data}
+      dataColumns={dataColumns}
+      enableColumnVisibility
+      getRowId={row => row.id}
+      headerChildren={<button data-testid="trailing-control">View</button>}
+      {...props}
+    />
+  )
+
+const expectBefore = (first, second) => {
+  expect(first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+}
+
+describe("Table header action order", () => {
+  it("keeps custom children before built-in actions by default", () => {
+    const { getByTestId } = renderTable()
+
+    expectBefore(getByTestId("trailing-control"), getByTestId("bulk-actions"))
+  })
+
+  it("can place built-in actions before custom trailing controls", () => {
+    const { getByTestId } = renderTable({ headerActionsBeforeChildren: true })
+
+    expectBefore(getByTestId("bulk-actions"), getByTestId("trailing-control"))
+  })
+})

src/components/table/index.d.ts

@@ -10,6 +10,7 @@ import {
 } from "@tanstack/table-core"
 import { ComponentType, Key, MutableRefObject, ReactNode, RefObject, UIEventHandler } from "react"
 import { Virtualizer } from "@tanstack/react-virtual"
+import { StylesConfig } from "react-select"
 import { supportedBulkActions } from "./header/actions/useActions"
 import { supportedRowActions } from "./useColumns/useRowActions"
 
@@ -82,6 +83,21 @@ export type OverflowTooltipProps = {
   options?: OverflowTooltipOptions
 }
 
+export type TableGroupBySelectStyles = StylesConfig & {
+  minWidth?: number | string
+  size?: string
+}
+
+export type TableMeta = {
+  bulkActionsStyles?: Record<string, unknown>
+  cellStyles?: Record<string, unknown>
+  groupByContainerStyles?: Record<string, unknown>
+  groupBySelectStyles?: TableGroupBySelectStyles
+  headStyles?: Record<string, unknown>
+  searchContainerStyles?: Record<string, unknown>
+  searchStyles?: Record<string, unknown>
+}
+
 export type TableProps<T = any, D = any> = {
   data: Array<D>
   dataColumns: Array<NetdataCoreColumns<T>>
@@ -123,6 +139,9 @@ export type TableProps<T = any, D = any> = {
   columnVisibility?: VisibilityTableState
   enableColumnVisibility?: boolean
   enableColumnPinning?: boolean
+  enableGroupByControl?: boolean
+  headerActionsBeforeChildren?: boolean
+  headerChildren?: ReactNode
   onGlobalSearchChange?: (value: any) => void
   onRowSelected?: (value: any) => void
   onClickRow?: (value: any) => void
@@ -137,6 +156,7 @@ export type TableProps<T = any, D = any> = {
    */
   testPrefixCallback?: (rowData: D) => string
   largeDataOptions?: LargeDataOptions<D>
+  meta?: TableMeta | ((...args: Array<any>) => TableMeta)
 }
 
 declare const Table: (props: TableProps) => JSX.Element

src/components/table/table.js

@@ -49,8 +49,10 @@ const tableDefaultProps = {
   enableColumnPinning: false,
   enableColumnReordering: false,
   enableColumnVisibility: false,
+  enableGroupByControl: true,
   enableResizing: false,
   globalFilterFn: includesString,
+  headerActionsBeforeChildren: false,
   onColumnVisibilityChange: noop,
   onColumnOrderChange: noop,
   onSortingChange: noop,
@@ -73,6 +75,7 @@ const Table = memo(props => {
   const {
     bulkActions,
     headerChildren,
+    headerActionsBeforeChildren = tableDefaultProps.headerActionsBeforeChildren,
 
     data,
     dataColumns,
@@ -117,6 +120,7 @@ const Table = memo(props => {
     grouping: defaultGrouping,
     onGroupByChange: groupingChangeCb,
     groupByColumns,
+    enableGroupByControl = tableDefaultProps.enableGroupByControl,
 
     onRowSelected,
 
@@ -292,6 +296,19 @@ const Table = memo(props => {
   if (tableRef) tableRef.current = table
 
   const { getHasNextPage, loading, warning } = virtualizeOptions
+  const headerActions = (
+    <HeaderActions
+      rowSelection={rowSelection}
+      bulkActions={bulkActions}
+      columnPinning={columnPinning}
+      dataGa={dataGa}
+      enableColumnVisibility={enableColumnVisibility}
+      enableColumnPinning={enableColumnPinning}
+      table={table}
+      testPrefix={testPrefix}
+      onRowSelected={onRowSelected}
+    />
+  )
 
   return (
     <Flex
@@ -308,6 +325,7 @@ const Table = memo(props => {
         hasSearch={!!onSearch}
         onSearch={onGlobalFilterChange}
         groupByColumns={groupByColumns}
+        enableGroupByControl={enableGroupByControl}
         onGroupBy={onGroupingChange}
         grouping={grouping}
         tableMeta={tableMeta}
@@ -317,18 +335,9 @@ const Table = memo(props => {
         bulkActions={bulkActions}
         enableCustomSearch={enableCustomSearch}
       >
+        {headerActionsBeforeChildren && headerActions}
         {headerChildren || null}
-        <HeaderActions
-          rowSelection={rowSelection}
-          bulkActions={bulkActions}
-          columnPinning={columnPinning}
-          dataGa={dataGa}
-          enableColumnVisibility={enableColumnVisibility}
-          enableColumnPinning={enableColumnPinning}
-          table={table}
-          testPrefix={testPrefix}
-          onRowSelected={onRowSelected}
-        />
+        {!headerActionsBeforeChildren && headerActions}
       </Header>
       <Body
         table={table}

src/theme/dark/colors.js

@@ -72,6 +72,8 @@ const appColors = {
   staleSemi: rawColors.green.green900,
   unseen: rawColors.yellow.yellow900,
   offline: rawColors.neutral.grey90,
+  metricGap: rawColors.neutral.metricGapDark,
+  mapSearchHighlight: rawColors.blue.blue150,
 
   //=========================================\\
 

src/theme/default/colors.js

@@ -70,6 +70,8 @@ const appColors = {
   staleSemi: rawColors.green.green900,
   unseen: rawColors.yellow.yellow900,
   offline: rawColors.neutral.grey145,
+  metricGap: rawColors.neutral.metricGapLight,
+  mapSearchHighlight: rawColors.blue.blue100,
 
   //=========================================\\
 

src/theme/index.d.ts

@@ -25,6 +25,8 @@ export type AppColorsT = {
   errorLite: string
   errorBackground: string
   errorText: string
+  metricGap: string
+  mapSearchHighlight: string
   attention: string
   attentionSecondary: string
   separator: string

src/theme/index.test.js

@@ -0,0 +1,14 @@
+import { DarkTheme, DefaultTheme } from "./index"
+import rawColors from "./rawColors"
+
+describe("theme colors", () => {
+  it("owns metric gaps as a semantic color in both themes", () => {
+    expect(DefaultTheme.colors.metricGap).toBe(rawColors.neutral.metricGapLight)
+    expect(DarkTheme.colors.metricGap).toBe(rawColors.neutral.metricGapDark)
+  })
+
+  it("owns a contrasting Map search highlight in both themes", () => {
+    expect(DefaultTheme.colors.mapSearchHighlight).toBe(rawColors.blue.blue100)
+    expect(DarkTheme.colors.mapSearchHighlight).toBe(rawColors.blue.blue150)
+  })
+})

src/theme/rawColors.js

@@ -151,6 +151,8 @@ const rawColors = {
     gunmetal: "#282C34",
     darkGunmetal: "#21252B",
     eerieBlack: "#181c20",
+    metricGapDark: "#312E27",
+    metricGapLight: "#E0DCD5",
     // Grey shades
     grey05: "#040505",
     grey10: "#080A0A",