[+] create common error & loading components, closes #125

src/webui/src/layout/Dashboard/DbsTable/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { Alert, AlertColor, Box, Checkbox, CircularProgress, Snackbar, Typography } from "@mui/material";
+import { Alert, AlertColor, Box, Checkbox, Snackbar, Typography } from "@mui/material";
 import {
   DataGrid,
   GridColDef,
@@ -9,12 +9,14 @@ import {
 
 import { useQuery } from "@tanstack/react-query";
 import moment from "moment";
+import { ErrorComponent } from "layout/common/ErrorComponent";
+import { GridToolbarComponent } from "layout/common/GridToolbarComponent";
+import { LoadingComponent } from "layout/common/LoadingComponent";
 import { QueryKeys } from "queries/queryKeys";
 import { Db } from "queries/types/DbTypes";
 import DbService from "services/Db";
 
 import { ActionsComponent } from "./ActionsComponent";
-import { GridToolbarComponent } from "./GridToolbarComponent";
 import { ModalComponent } from "./ModalComponent";
 
 export const DbsTable = () => {
@@ -25,7 +27,7 @@ export const DbsTable = () => {
   const [severity, setSeverity] = useState<AlertColor>();
   const [editData, setEditData] = useState<Db>();
 
-  const { status, data } = useQuery<Db[]>({
+  const { status, data, error } = useQuery<Db[]>({
     queryKey: QueryKeys.db,
     queryFn: async () => {
       return await services.getMonitoredDb();
@@ -46,6 +48,10 @@ export const DbsTable = () => {
     setAlertOpen(false);
   };
 
+  const handleModalOpen = () => {
+    setModalOpen(true);
+  };
+
   const columns: GridColDef[] = [
     {
       field: "md_id",
@@ -258,17 +264,13 @@ export const DbsTable = () => {
 
   if (status === "loading") {
     return (
-      <Box sx={{ width: "100%", height: 500, display: "flex", justifyContent: "center", alignItems: "center" }}>
-        <CircularProgress />
-      </Box>
+      <LoadingComponent />
     );
   };
 
   if (status === "error") {
     return (
-      <Box>
-        <Typography>Some error happens</Typography>
-      </Box>
+      <ErrorComponent errorMessage={String(error)} />
     );
   };
 
@@ -307,7 +309,7 @@ export const DbsTable = () => {
             },
           },
         }}
-        components={{ Toolbar: () => GridToolbarComponent(setModalOpen, setEditData) }}
+        components={{ Toolbar: () => <GridToolbarComponent handleModalOpen={handleModalOpen} setEditData={setEditData} /> }}
         disableColumnMenu
       />
       <ModalComponent open={modalOpen} setOpen={setModalOpen} handleAlertOpen={handleAlertOpen} recordData={editData} />

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

@@ -1,13 +1,15 @@
 import { useState } from "react";
-import { Alert, AlertColor, Box, Checkbox, CircularProgress, Snackbar, Typography } from "@mui/material";
+import { Alert, AlertColor, Box, Checkbox, Snackbar, Typography } from "@mui/material";
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { useQuery } from '@tanstack/react-query';
 import moment from 'moment';
+import { ErrorComponent } from "layout/common/ErrorComponent";
+import { GridToolbarComponent } from "layout/common/GridToolbarComponent";
+import { LoadingComponent } from "layout/common/LoadingComponent";
 import { QueryKeys } from 'queries/queryKeys';
 import { Metric } from 'queries/types/MetricTypes';
 import MetricService from 'services/Metric';
 import { ActionsComponent } from './ActionsComponent';
-import { GridToolbarComponent } from "./GridToolbarComponent";
 import { ModalComponent } from "./ModalComponent";
 
 export const MetricsTable = () => {
@@ -36,7 +38,7 @@ export const MetricsTable = () => {
     setModalOpen(false);
   };
 
-  const { status, data } = useQuery<Metric[]>({
+  const { status, data, error } = useQuery<Metric[]>({
     queryKey: QueryKeys.metric,
     queryFn: async () => {
       return await services.getMetrics();
@@ -132,17 +134,13 @@ export const MetricsTable = () => {
 
   if (status === "loading") {
     return (
-      <Box sx={{ width: "100%", height: 500, display: "flex", justifyContent: "center", alignItems: "center" }}>
-        <CircularProgress />
-      </Box>
+      <LoadingComponent />
     );
   };
 
   if (status === "error") {
     return (
-      <Box>
-        <Typography>Some error happens</Typography>
-      </Box>
+      <ErrorComponent errorMessage={String(error)} />
     );
   };
 

src/webui/src/layout/common/ErrorComponent.tsx

@@ -0,0 +1,15 @@
+import { Box, Typography } from "@mui/material";
+
+type Props = {
+  errorMessage: string
+}
+
+export const ErrorComponent = ({ errorMessage }: Props) => {
+  return (
+    <Box sx={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 3 }}>
+      <Typography variant="h3" fontWeight="bold">Oops!</Typography>
+      <Typography variant="h5">Something went wrong...</Typography>
+      <Typography>{errorMessage}</Typography>
+    </Box>
+  );
+};

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

@@ -1,11 +1,10 @@
 import AddIcon from '@mui/icons-material/Add';
 import { Button } from "@mui/material";
 import { GridToolbarColumnsButton, GridToolbarContainer, GridToolbarFilterButton } from "@mui/x-data-grid";
-import { Metric } from 'queries/types/MetricTypes';
 
 type Props = {
   handleModalOpen: () => void,
-  setEditData: React.Dispatch<React.SetStateAction<Metric | undefined>>
+  setEditData: React.Dispatch<React.SetStateAction<any>>
 }
 
 export const GridToolbarComponent = ({ handleModalOpen, setEditData }: Props) => {

src/webui/src/layout/common/LoadingComponent.tsx

@@ -0,0 +1,10 @@
+import { Box, CircularProgress } from "@mui/material";
+
+
+export const LoadingComponent = () => {
+  return (
+    <Box sx={{ width: "100%", height: "100%", display: "flex", justifyContent: "center", alignItems: "center" }}>
+      <CircularProgress size={60} />
+    </Box>
+  );
+};