Merge pull request #119 from Sanketika-Obsrv/release-enterprise

Release enterprise
Sanketika-Obsrv · Nov 12, 2024 · e89bb6c · e89bb6c
2 parents 84198e6 + 55a80c2
commit e89bb6c
Show file tree

Hide file tree

Showing 34 changed files with 694 additions and 744 deletions.
diff --git a/web-console-v2/src/components/Accordian/AccordionSection.tsx b/web-console-v2/src/components/Accordian/AccordionSection.tsx
@@ -12,6 +12,7 @@ import {
 import * as _ from 'lodash';
 import config from 'data/initialConfig';
 import MainCard from 'components/CustomCard/MainCard';
+import { borderColor } from '@mui/system';
 const { spacing } = config;
 
 const FieldSection = (props: any) => {
@@ -40,16 +41,21 @@ const FieldSection = (props: any) => {
     const renderAccordion = () => {
         return (
             <Accordion expanded={true} square={false}>
-                <AccordionSummary aria-controls="panel1bh-content" id="panel1bh-header">
-                    <Stack direction="column"  alignItems="center">
-                        <Typography sx={{ width: '100%', flexShrink: 0 }} variant="h1">
-                            {title}
-                        </Typography>
-                        <Typography variant="body1" sx={{pt: '2px'}}>
-                            {description}
-                        </Typography>
-                    </Stack>
-                </AccordionSummary>
+                {(title || description)
+                    ?
+                    <AccordionSummary aria-controls="panel1bh-content" id="panel1bh-header">
+                        <Stack direction="column" alignItems="center">
+                            <Typography sx={{ width: '100%', flexShrink: 0 }} variant="h1">
+                                {title}
+                            </Typography>
+                            <Typography variant="body1" sx={{ pt: '2px' }}>
+                                {description}
+                            </Typography>
+                        </Stack>
+                    </AccordionSummary>
+                    :
+                    <></>
+                }
                 <AccordionDetails>{sectionDetails()}</AccordionDetails>
             </Accordion>
         );
@@ -64,7 +70,7 @@ const FieldSection = (props: any) => {
                     </Typography>
                 }
                 contentSX={{ px: 3, background: 'inherit' }}
-                sx={{ border: '1px solid #D6D6D6', borderColor: '#d6d6d6'}}
+                sx={{ border: '1px solid #D6D6D6', borderColor: '#d6d6d6d' }}
             >
                 {sectionDetails()}
             </MainCard>

diff --git a/web-console-v2/src/components/AlertDialog/AlertDialog.tsx b/web-console-v2/src/components/AlertDialog/AlertDialog.tsx
@@ -32,12 +32,14 @@ const AlertDialog = ({ handleClose, action = null, open = false, context = {} }:
                     {context.show === true && (
                         <DialogActions>
                             <Button
+                                size='small'
                                 data-edataid={interactIds.alert_dialog_cancel}
                                 onClick={(e) => handleClose()}
                             >
                                 Cancel
                             </Button>
                             <Button
+                                size='small'
                                 data-edataid={interactIds.alert_dialog_agree}
                                 variant="contained"
                                 onClick={handleAction}

diff --git a/web-console-v2/src/components/Cards/MetricsCard/MetricsCard.module.css b/web-console-v2/src/components/Cards/MetricsCard/MetricsCard.module.css
@@ -22,7 +22,7 @@
 }
 
 .loadingText {
-    font-size: 2.125rem !important;
+    font-size: 1.7rem !important;
 }
 
 .labelContainer {
@@ -36,10 +36,22 @@
 
 .label {
     font-size: 1rem !important;
+    word-wrap: break-word;
+    white-space: normal;
 }
 
 .symbol {
     margin-left: auto;
     text-align: center;
     font-size: 1rem !important;
+}
+
+.linearProgressContainer{
+    display: flex;
+    align-items: center;
+}
+
+.linearProgress{
+    width: 100%;
+    margin-right: 0.5rem;
 }
diff --git a/web-console-v2/src/components/Cards/StorageMetricCard.tsx b/web-console-v2/src/components/Cards/StorageMetricCard.tsx
@@ -8,9 +8,10 @@ import { Box, Grid, Tooltip } from '@mui/material';
 import _ from 'lodash';
 import { fetchMetricData } from '../../services/chartMetrics';
 import styles from "./MetricsCard/MetricsCard.module.css"
+import LinearProgress from '@mui/material/LinearProgress';
 
 const StorageMetricsCard: React.FC<any> = (props: any) => {
-    const { label, icon, query, uuid, transformer, description, refresh, interval } = props;
+    const { label, icon, query, uuid, transformer, description, refresh, interval, query2, query3 } = props;
     const [value, setValue] = useState('');
     const [loading, setLoading] = useState(false);
     const change = '0%';
@@ -20,6 +21,8 @@ const StorageMetricsCard: React.FC<any> = (props: any) => {
     ) : (
         <ArrowDownward sx={{ fontSize: 'small', color: 'error.main' }} />
     );
+    const [totalStorage, setTotalStorage] = useState('');
+    const [storageUtilization, setStorageUtilization] = useState('');
 
     const fetchMetric = async (query: any) => {
         try {
@@ -34,8 +37,40 @@ const StorageMetricsCard: React.FC<any> = (props: any) => {
         }
     };
 
+    const fetchMetricTotalStorage = async (query: any) => {
+        try {
+            setLoading(true);
+            const response = await fetchMetricData(query, { uuid });
+            const transformedLabel =
+                (await (transformer && transformer(response))) || response;
+            setTotalStorage(transformedLabel as any);
+            setLoading(false);
+        } catch (error) {
+            console.log('error occured', error);
+        }
+    };
+
+    const fetchMetricTotalStorageUtilization = async (query: any) => {
+        try {
+            setLoading(true);
+            const response = await fetchMetricData(query, { uuid });
+            const transformedLabel =
+                (await (transformer && transformer(response))) || response;
+            setStorageUtilization(transformedLabel as any);
+            setLoading(false);
+        } catch (error) {
+            console.log('error occured', error);
+        }
+    };
+
     useEffect(() => {
         fetchMetric(query);
+        if (query2) {
+            fetchMetricTotalStorage(query2)
+        }
+        if (query3) {
+            fetchMetricTotalStorageUtilization(query3)
+        }
     }, [refresh?.storage]);
 
     return (
@@ -51,7 +86,7 @@ const StorageMetricsCard: React.FC<any> = (props: any) => {
                         <span>{icon}</span>
 
                         <Typography variant="bodyBold" className={styles.loadingText}>
-                            {loading ? 'Loading...' : value}
+                            {loading ? 'Loading...' : !_.isEmpty(totalStorage) ? `${value} / ${totalStorage}` : value}
                         </Typography>
 
                         <Grid
@@ -69,6 +104,13 @@ const StorageMetricsCard: React.FC<any> = (props: any) => {
                                 {symbol} {_.trimStart(change, '+-')}
                             </Typography> */}
                         </Grid>
+                        {!_.isEmpty(storageUtilization) ?
+                            <Box className={styles.linearProgressContainer}>
+                                <Box className={styles.linearProgress}>
+                                    <LinearProgress variant='determinate' value={parseInt(_.replace(storageUtilization, "%"))} />
+                                </Box>
+                                <Typography variant="h6">{storageUtilization}</Typography>
+                            </Box> : <></>}
                     </CardContent>
                 </Card>
             </Box>

diff --git a/web-console-v2/src/components/CustomeTable/CustomTable.tsx b/web-console-v2/src/components/CustomeTable/CustomTable.tsx
@@ -15,6 +15,7 @@ const CustomTable = ({ columns, data, striped, header = true, styles = {} }: any
                 border: '1px solid #D6D6D6',
                 tableLayout:"fixed"
             }}
+            size='small'
         >
             {header && (
                 <TableHead>
@@ -50,7 +51,7 @@ const CustomTable = ({ columns, data, striped, header = true, styles = {} }: any
                                 <TableCell
                                     sx={{
                                         border: '0.0625rem solid #D6D6D6',
-                                        padding: '0.9375rem',
+                                        padding: '0.2375rem',
                                         ...styles
                                     }}
                                     {...cell.getCellProps([{ className: cell.column.className }])}

diff --git a/web-console-v2/src/components/Sidebar/Sidebar.tsx b/web-console-v2/src/components/Sidebar/Sidebar.tsx
@@ -77,6 +77,16 @@ const Sidebar: React.FC<Props> = ({ onExpandToggle, expand }) => {
             setSelectedChildItem(null);
             return
         }
+        if (pathSegments[0] === 'dataset') {
+            setSelectedItem(mainRoute);
+            setOpenParent(mainRoute);
+            if (mainRoute.match(subRoute)?.index === 0) {
+                navigate(`${mainRoute}/create`);
+            } else {
+                navigate(subRoute);
+            }
+            return
+        } 
 
         if (pathSegments[0] === 'alertRules') {
             setSelectedItem(mainRoute);

diff --git a/web-console-v2/src/components/TableWithCustomHeader.tsx b/web-console-v2/src/components/TableWithCustomHeader.tsx
@@ -41,7 +41,7 @@ function TableWithCustomHeader({ columns, data, renderHeader }: any) {
     return (
         <Stack spacing={2}>
             {renderHeader ? renderHeader({ preGlobalFilteredRows, setGlobalFilter, toggleRowExpanded, state }) : null}
-            <Table {...getTableProps()}>
+            <Table {...getTableProps()} size='small'>
                 <TableHead sx={{ borderTopWidth: 2 }}>
                     {headerGroups.map((headerGroup) => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
@@ -55,15 +55,6 @@ function TableWithCustomHeader({ columns, data, renderHeader }: any) {
                     ))}
                 </TableHead>
                 <TableBody {...getTableBodyProps()}>
-                    {headerGroups.map((group: any) => (
-                        <TableRow {...group.getHeaderGroupProps()}>
-                            {group.headers.map((column: any) => (
-                                <TableCell {...column.getHeaderProps([{ className: column.className }])}>
-                                    {column.canFilter ? column.render('Filter') : null}
-                                </TableCell>
-                            ))}
-                        </TableRow>
-                    ))}
                     {rows.map((row: any) => {
                         prepareRow(row);
                         return (

diff --git a/web-console-v2/src/components/filtering-table.tsx b/web-console-v2/src/components/filtering-table.tsx
@@ -1,19 +1,19 @@
 /* eslint-disable */
-import { useEffect, useMemo, useState } from 'react';
 import {
-    Box, Grid, Stack, Switch, Table, TableBody,
-    TableCell, TableHead, TableRow, FormControlLabel,
-    Button, Typography,
+    Box, Grid, Stack,
+    Table, TableBody,
+    TableCell, TableHead, TableRow,
+    Typography
 } from '@mui/material';
-import { useTable, useFilters, useGlobalFilter, useExpanded, } from 'react-table';
+import * as _ from "lodash";
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router';
+import { useGlobalFilter, useTable } from 'react-table';
 import {
-    GlobalFilter,
     DefaultColumnFilter,
+    GlobalFilter,
     renderFilterTypes,
 } from 'utils/react-table';
-import { useNavigate } from 'react-router';
-import interactIds from 'data/telemetry/interact.json';
-import * as _ from "lodash";
 
 
 function FilteringTable({ columns, data, title = '', toggleRefresh = '' }: any) {
@@ -86,7 +86,7 @@ function FilteringTable({ columns, data, title = '', toggleRefresh = '' }: any)
         // @ts-ignore
         setGlobalFilter,
         // @ts-ignore
-        toggleRowExpanded,
+        toggleRowExpanded
     } = useTable(
         {
             columns,
@@ -98,9 +98,7 @@ function FilteringTable({ columns, data, title = '', toggleRefresh = '' }: any)
             filterTypes,
             autoResetExpanded: false,
         },
-        useGlobalFilter,
-        useFilters,
-        useExpanded,
+        useGlobalFilter
     );
 
     useEffect(() => {
@@ -118,7 +116,7 @@ function FilteringTable({ columns, data, title = '', toggleRefresh = '' }: any)
 
     return (
         <Stack spacing={2}>
-            <Box sx={{ p: 2, pb: 0 }} textAlign='end'>
+            <Box sx={{ pt: 2, pl: 2, pb: 0 }} textAlign='end'>
                 <Grid
                     container
                     spacing={2}
@@ -128,29 +126,29 @@ function FilteringTable({ columns, data, title = '', toggleRefresh = '' }: any)
                     sx={{ flexWrap: 'nowrap' }}
                 >
                     <Grid item display="flex" alignItems="center">
-                        <Typography variant="h5" mr={0.5}>{title}</Typography>
+                        <Typography variant="h1">{title}</Typography>
                     </Grid>
-                    <Grid item alignItems="center" display="flex">
+                    <Grid item alignItems="left" display="flex">
                         <GlobalFilter
                             preGlobalFilteredRows={preGlobalFilteredRows}
                             // @ts-ignore
                             globalFilter={state.globalFilter}
                             setGlobalFilter={setGlobalFilter}
-                        />
+                                                    />
                         <Box mx={2} display="flex" alignItems="center">
-                            <FormControlLabel control={
+                            {/* <FormControlLabel control={
                                 <Switch inputProps={{ 'aria-label': 'toggle-group' }} onChange={handleGroup} checked={toggleGroup} />
                             }
                                 label="Group by Tags"
                                 sx={{ mr: 0, ml: 0 }}
-                            />
+                            /> */}
                         </Box>
                     </Grid>
                 </Grid>
             </Box>
 
-            <Table {...getTableProps()}>
-                <TableHead sx={{ borderTopWidth: 2 }}>
+            <Table {...getTableProps()} size='small'>
+                <TableHead>
                     {headerGroups.map((headerGroup) => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
                             {headerGroup.headers.map((column: any) => (
@@ -159,16 +157,7 @@ function FilteringTable({ columns, data, title = '', toggleRefresh = '' }: any)
                         </TableRow>
                     ))}
                 </TableHead>
-                <TableBody {...getTableBodyProps()}>
-                    {headerGroups.map((group: any) => (
-                        <TableRow {...group.getHeaderGroupProps()}>
-                            {group.headers.map((column: any) => (
-                                <TableCell {...column.getHeaderProps([{ className: column.className }])}>
-                                    {column.canFilter ? column.render('Filter') : null}
-                                </TableCell>
-                            ))}
-                        </TableRow>
-                    ))}
+                <TableBody {...getTableBodyProps()}>    
                     {rows.map((row: any) => {
                         prepareRow(row);
                         return (

diff --git a/web-console-v2/src/constants/Queries.ts b/web-console-v2/src/constants/Queries.ts
@@ -46,6 +46,10 @@ export default {
     query:
       '(time() - s3_last_modified_object_date{job="s3-backups", prefix=~"postgresql"})',
   },
+  cluster_last_backup_time: {
+    query:
+      'time() - s3_last_modified_object_date{job="s3-common-backups", bucket=~"velero.*"}',
+  },
   redis_last_backup_time: {
     query:
       'time() - s3_last_modified_object_date{job="s3-backups", prefix=~"denorm-redis|dedeup-redis"}',

diff --git a/web-console-v2/src/data/Charts/storage.ts b/web-console-v2/src/data/Charts/storage.ts
@@ -161,6 +161,29 @@ export default {
       },
     },
   },
+  cluster_last_backup_time: {
+    query: {
+      id: 'clusterLastBackupTime',
+      type: 'api',
+      url: endpoints.prometheusRead,
+      method: 'GET',
+      headers: {},
+      body: {},
+      params: {
+        query: promql.cluster_last_backup_time.query,
+      },
+      parse: (response: any) => {
+        const result = _.get(response, 'data.result[0].value[1]');
+        if (!result) throw new Error();
+        const date = dayjs().subtract(result * 1000, 'milliseconds');
+        const timeAgo = date.fromNow();
+        return timeAgo
+      },
+      error() {
+        return prettyMilliseconds(0);
+      },
+    },
+  },
   pv_total_size: {
     query: {
       id: 'pvTotalSize',