add metrics grid to metrics tab, closes #102 (#111)

* Added comment column

* Added enabled column

* Added is helper column

* Added modified column

* Added metrics grid with data example

* Created actions component with 'Show SQL', 'Edit' and 'Delete' buttons. Changed spaces indents from 4 to 2

* changed spaces indent

* created grid toolbar component with 'columns', 'filter' and 'new' buttons

* changed location of columns definition

* removed sample data

src/webui/src/layout/MetricDefinitions/MetricsTable/ActionsComponent.tsx

@@ -0,0 +1,35 @@
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import { Box, Button } from "@mui/material";
+
+
+export const ActionsComponent = () => {
+
+
+  return (
+    <Box sx={{ display: "flex", justifyContent: "space-around", width: "100%" }}>
+      <Button
+        size="small"
+        variant="outlined"
+        startIcon={<VisibilityIcon />}
+      >
+        Show SQL
+      </Button>
+      <Button
+        size="small"
+        variant="outlined"
+        startIcon={<EditIcon />}
+      >
+        Edit
+      </Button>
+      <Button
+        size="small"
+        variant="contained"
+        startIcon={<DeleteIcon />}
+      >
+        Delete
+      </Button>
+    </Box>
+  );
+};

src/webui/src/layout/MetricDefinitions/MetricsTable/GridToolbarComponent.tsx

@@ -0,0 +1,16 @@
+import AddIcon from '@mui/icons-material/Add';
+import { Button } from "@mui/material";
+import { GridToolbarColumnsButton, GridToolbarContainer, GridToolbarFilterButton } from "@mui/x-data-grid";
+
+
+export const GridToolbarComponent = () => {
+
+
+  return (
+    <GridToolbarContainer>
+      <GridToolbarColumnsButton size="small" sx={{ height: 32 }} />
+      <GridToolbarFilterButton componentsProps={{ button: { size: "small" } }} sx={{ height: 32 }} />
+      <Button size="small" startIcon={<AddIcon />} sx={{ height: 32 }}>New</Button>
+    </GridToolbarContainer>
+  );
+};

src/webui/src/layout/MetricDefinitions/MetricsTable/index.tsx

@@ -0,0 +1,92 @@
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import { Box, Typography } from "@mui/material";
+import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import moment from 'moment';
+import { ActionsComponent } from './ActionsComponent';
+import { GridToolbarComponent } from "./GridToolbarComponent";
+
+export const MetricsTable = () => {
+
+  const columns: GridColDef[] = [
+    {
+      field: "m_name",
+      headerName: "Metric name",
+      width: 150,
+      align: "center",
+      headerAlign: "center"
+    },
+    {
+      field: "m_versions",
+      headerName: "PG versions",
+      width: 150,
+      align: "center",
+      headerAlign: "center",
+      valueGetter(params) {
+        return (Object.keys(params.value));
+      },
+    },
+    {
+      field: "m_comment",
+      headerName: "Comment",
+      width: 150,
+      align: "center",
+      headerAlign: "center"
+    },
+    {
+      field: "m_is_active",
+      headerName: "Enabled?",
+      width: 120,
+      renderCell: (params: GridRenderCellParams<boolean>) => params.value ? <CheckIcon /> : <CloseIcon />,
+      align: "center",
+      headerAlign: "center"
+    },
+    {
+      field: "m_is_helper",
+      headerName: "Helpers?",
+      width: 120,
+      renderCell: (params: GridRenderCellParams<boolean>) => params.value ? <CheckIcon /> : <CloseIcon />,
+      align: "center",
+      headerAlign: "center"
+    },
+    {
+      field: "m_last_modified_on",
+      headerName: "Last modified",
+      width: 150,
+      renderCell: (params) =>
+        <Box sx={{ display: "flex", alignItems: "center", textAlign: "center" }}>
+          {moment(params.value).format("MMMM Do YYYY HH:mm:ss")}
+        </Box>,
+      align: "center",
+      headerAlign: "center"
+    },
+    {
+      field: "actions",
+      headerName: "Actions",
+      type: "actions",
+      width: 350,
+      renderCell: () => (
+        <ActionsComponent />
+      ),
+      headerAlign: "center"
+    }
+  ];
+
+  return (
+    <Box display="flex" flexDirection="column" gap={1}>
+      <Typography variant="h5">
+        Metrics
+      </Typography>
+      <DataGrid
+        getRowHeight={() => "auto"}
+        getRowId={(row) => row.m_name}
+        columns={columns}
+        rows={[]}
+        autoHeight
+        pageSize={5}
+        components={{ Toolbar: () => GridToolbarComponent() }}
+        disableColumnMenu
+      />
+    </Box>
+  );
+};

src/webui/src/layout/MetricDefinitions/index.tsx

@@ -1,5 +1,10 @@
 import { Box } from "@mui/material";
+import { MetricsTable } from "./MetricsTable";
 
 export const MetricDefinitions = () => {
-  return <Box>Metric Definitions</Box>;
+  return (
+    <Box>
+      <MetricsTable />
+    </Box>
+  );
 };