pgwatch/internal/webui/src/pages/MetricsPage/components/MetricsGrid/MetricsGrid.consts.tsx at 5c631a601235abb88d3bf8f5f27bbda43258d338 · cybertec-postgresql/pgwatch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import CheckIcon from "@mui/icons-material/Check";
import { GridColDef } from "@mui/x-data-grid";
import { MetricGridRow } from "./MetricsGrid.types";
import { MetricsGridActions } from "./components/MetricsGridActions/MetricsGridActions";
import { SqlPopUp } from "./components/SqlPopUp/SqlPopUp";

const getIcon = (value: boolean) => {
  if (value) {
    return <CheckIcon color="success" />;
  }
  return null;
};

export const useMetricsGridColumns = (): GridColDef<MetricGridRow>[] => ([
  {
    field: "Key",
    headerName: "Name",
    width: 150,
    align: "left",
    headerAlign: "left",
  },
  {
    field: "Description",
    headerName: "Description",
    width: 200,
    align: "left",
    headerAlign: "center",
    valueGetter: ({ row }) => row.Metric.Description,
  },
  {
    field: "InitSQL",
    headerName: "InitSQL",
    width: 200,
    align: "left",
    headerAlign: "center",
    valueGetter: ({ row }) => row.Metric.InitSQL,
  },
  {
    field: "NodeStatus",
    headerName: "Node status",
    width: 200,
    align: "center",
    headerAlign: "center",
    valueGetter: ({ row }) => row.Metric.NodeStatus,
  },
  {
    field: "Gauges",
    headerName: "Gauges",
    width: 200,
    align: "center",
    headerAlign: "center",
    valueGetter: ({ row }) => row.Metric.Gauges && row.Metric.Gauges.toString(),
  },
  {
    field: "IsInstanceLevel",
    headerName: "Instance level?",
    width: 120,
    align: "center",
    headerAlign: "center",
    renderCell: ({ row }) => getIcon(row.Metric.IsInstanceLevel),
  },
  {
    field: "StorageName",
    headerName: "Storage name",
    width: 200,
    align: "left",
    headerAlign: "center",
    valueGetter: ({ row }) => row.Metric.StorageName,
  },
  {
    field: "SQLs",
    headerName: "SQLs",
    width: 120,
    align: "center",
    headerAlign: "center",
    renderCell: ({ row }) => <SqlPopUp SQLs={row.Metric.SQLs} />,
  },
  {
    field: "Actions",
    headerName: "Actions",
    headerAlign: "center",
    renderCell: ({ row }) => <MetricsGridActions metric={row} />
  },
]);