[release] v0.12.0-unstable13

client/src/pages/dashboard/components/plot.jsx

@@ -46,12 +46,19 @@ function toUTC(date, time) {
   return formatDate(now, time);
 }
 
-const PlotComponent = ({ title, data, defaultSlot = 'latest' }) => {
+const PlotComponent = ({ title, data, SimpleDesign, withSelector, defaultSlot = 'latest' }) => {
   const [slot, setSlot] = useState(defaultSlot);
   const theme = useTheme();
   const { primary, secondary } = theme.palette.text;
   const line = theme.palette.divider;
   const [series, setSeries] = useState([]);
+  const [selected, setSelected] = useState(withSelector ? data.findIndex((d) => d.Key === withSelector)
+     : 0);
+     
+  const isDark = theme.palette.mode === 'dark';
+
+  const backColor = isDark ? '0,0,0' : '255,255,255';
+  const textColor = isDark ? 'white' : 'dark';
 
   // chart options
   const areaChartOptions = {
@@ -99,8 +106,12 @@ const PlotComponent = ({ title, data, defaultSlot = 'latest' }) => {
       }
     }
 
+    let toProcess = data;
+    if(withSelector) {
+      toProcess = data.filter((d, id) => id === selected);
+    }
     const dataSeries = [];
-    data.forEach((serie) => {
+    toProcess.forEach((serie) => {
       dataSeries.push({
         name: serie.Label,
         dataAxis: xAxis.map((date) => {
@@ -131,26 +142,27 @@ const PlotComponent = ({ title, data, defaultSlot = 'latest' }) => {
           : xAxis,
         labels: {
           style: {
-            fontSize: slot === 'latest' ? '0' : '11px',
+            fontSize: (slot === 'latest' || SimpleDesign) ? '0' : '11px',
           }
         },
         axisBorder: {
-          show: true,
+          show: !SimpleDesign,
           color: line
         },
         tickAmount: xAxis.length,
       },
-      yaxis: data.map((thisdata, ida) => ({
+      yaxis: toProcess.map((thisdata, ida) => ({
         opposite: ida === 1, 
         labels: {
           style: {
-            colors: [secondary]
+            colors: [secondary],
+            fontSize: '11px',
           },
           
           formatter: FormaterForMetric(thisdata)
         },
         title: {
-          text: thisdata.Label,
+          text: SimpleDesign ? '' : thisdata.Label,
         }
       })),
       grid: {
@@ -167,16 +179,34 @@ const PlotComponent = ({ title, data, defaultSlot = 'latest' }) => {
         data: serie.dataAxis
       }
     }));
-  }, [slot, data]);
+  }, [slot, data, selected]);
 
 
-  return <Grid item xs={12} md={7} lg={8}>
+  return <Grid item xs={12} md={7} lg={8} >
     <Grid container alignItems="center" justifyContent="space-between">
       <Grid item>
         <Typography variant="h5">{title}</Typography>
       </Grid>
-      <Grid item>
+      <Grid item >
         <Stack direction="row" alignItems="center" spacing={0}>
+
+          {withSelector && 
+          <div style={{ marginRight: 15 }}>
+          <TextField
+              id="standard-select-currency"
+              size="small"
+              select
+              value={selected}
+              onChange={(e) => setSelected(e.target.value)}
+              sx={{ '& .MuiInputBase-input': { py: 0.5, fontSize: '0.875rem',  } }}
+          >
+              {data.map((option, i) => (
+                  <MenuItem key={i} value={i}>
+                      {option.Label}
+                  </MenuItem>
+              ))}
+          </TextField></div>}
+
           <Button
             size="small"
             onClick={() => setSlot('latest')}
@@ -204,7 +234,7 @@ const PlotComponent = ({ title, data, defaultSlot = 'latest' }) => {
         </Stack>
       </Grid>
     </Grid>
-    <MainCard content={false} sx={{ mt: 1.5 }}>
+    <MainCard content={false} sx={{ mt: 1.5 }} >
       <Box sx={{ pt: 1, pr: 2 }}>
         <ReactApexChart options={options} series={series} type="area" height={450} />
       </Box>

client/src/pages/dashboard/components/table.jsx

@@ -98,7 +98,7 @@ function OrderTableHead({ order, orderBy, headCells }) {
   );
 }
 
-const TableComponent = ({ title, data, defaultSlot = 'latest' }) => {
+const TableComponent = ({ title, data, displayMax, render, defaultSlot = 'latest' }) => {
   const [slot, setSlot] = useState(defaultSlot);
   const theme = useTheme();
   const { primary, secondary } = theme.palette.text;
@@ -121,15 +121,17 @@ const TableComponent = ({ title, data, defaultSlot = 'latest' }) => {
 
       heads[cat] = true;
 
-      let formatter = FormaterForMetric(item); 
+      let formatter = FormaterForMetric(item, displayMax); 
 
       if(!fnrows.find((row) => row.name === name)) {
         fnrows.push({
           name,
-          [cat]: formatter(v.Value)
+          [cat]: render ? render(item, v.Value, formatter(v.Value)) : formatter(v.Value),
+          ["__" + cat]: v.Value
         });
       } else {
-        fnrows.find((row) => row.name === name)[cat] = formatter(v.Value);
+        fnrows.find((row) => row.name === name)[cat] = render ? render(item, v.Value, formatter(v.Value)) : formatter(v.Value)
+        fnrows.find((row) => row.name === name)["__" + cat] = v.Value
       }
     });
 
@@ -137,7 +139,8 @@ const TableComponent = ({ title, data, defaultSlot = 'latest' }) => {
     fnrows = fnrows.filter((row) => {
       let flag = false;
       Object.keys(row).forEach((key) => {
-        if(key !== 'name' && row[key] != 0) {
+        if(key !== 'name' && row["__" + key]) {
+          console.log(key, row["__" + key])
           flag = true;
         }
       });
@@ -212,7 +215,8 @@ const TableComponent = ({ title, data, defaultSlot = 'latest' }) => {
                     position: 'relative',
                     display: 'block',
                     maxWidth: '100%',
-                    '& td, & th': { whiteSpace: 'nowrap' }
+                    '& td, & th': { whiteSpace: 'nowrap' },
+                    maxHeight: '474px'
                 }}
             >
                 <Table
@@ -227,7 +231,7 @@ const TableComponent = ({ title, data, defaultSlot = 'latest' }) => {
                     }}
                 >
                     <OrderTableHead headCells={headCells} order={order} orderBy={orderBy} />
-                    <TableBody>
+                    <TableBody style={{height:'409px', overflow: 'auto'}}>
                         {stableSort(rows, getComparator(order, orderBy)).map((row, index) => {
                             const isItemSelected = false // isSelected(row.trackingNo);
                             const labelId = `enhanced-table-checkbox-${index}`;

client/src/pages/dashboard/components/utils.jsx

@@ -1,11 +1,5 @@
-export const FormaterForMetric = (metric) => {
-  console.log(metric)
-
-  return (num) => {
+export const simplifyNumber = (num) => {
     if(!num) return 0;
-
-    if(metric.Scale)
-      num /= metric.Scale;
     
     if (Math.abs(num) >= 1e12) {
       return (num / 1e12).toFixed(1) + 'T'; // Convert to Millions
@@ -18,5 +12,23 @@ export const FormaterForMetric = (metric) => {
     } else {
         return num.toString();
     }
+}
+
+export const FormaterForMetric = (metric, displayMax) => {
+  console.log(metric)
+
+  return (num) => {
+    if(!num) return 0;
+
+    if(metric.Scale)
+      num /= metric.Scale;
+    
+    num = simplifyNumber(num);
+
+    if(displayMax && metric.Max) {
+      num += ` / ${simplifyNumber(metric.Max)}`
+    }
+
+    return num;
   }
 }

client/src/pages/dashboard/index.jsx

@@ -16,7 +16,8 @@ import {
     Stack,
     TextField,
     Typography,
-    Alert
+    Alert,
+    LinearProgress
 } from '@mui/material';
 
 // project import
@@ -40,6 +41,7 @@ import * as API from '../../api';
 import AnimateButton from '../../components/@extended/AnimateButton';
 import PlotComponent from './components/plot';
 import TableComponent from './components/table';
+import { HomeBackground, TransparentHeader } from '../home';
 
 // avatar style
 const avatarSX = {
@@ -108,54 +110,12 @@ const DashboardDefault = () => {
 
     return (
         <>
+        {/* <HomeBackground status={coStatus} />
+        <TransparentHeader /> */}
         <IsLoggedIn />
-        <div>
-            <Stack spacing={1}>
-                {coStatus && !coStatus.database && (
-                    <Alert severity="error">
-                        No Database is setup for Cosmos! User Management and Authentication will not work.<br />
-                        You can either setup the database, or disable user management in the configuration panel.<br />
-                    </Alert>
-                )}
-
-                {coStatus && coStatus.letsencrypt && (
-                    <Alert severity="error">
-                        You have enabled Let's Encrypt for automatic HTTPS Certificate. You need to provide the configuration with an email address to use for Let's Encrypt in the configs.
-                    </Alert>
-                )}
-
-                {coStatus && coStatus.newVersionAvailable && (
-                    <Alert severity="warning">
-                        A new version of Cosmos is available! Please update to the latest version to get the latest features and bug fixes.
-                    </Alert>
-                )}
-
-                {coStatus && coStatus.needsRestart && (
-                    <Alert severity="warning">
-                        You have made changes to the configuration that require a restart to take effect. Please restart Cosmos to apply the changes.
-                    </Alert>
-                )}
-
-                {coStatus && coStatus.domain && (
-                    <Alert severity="error">
-                        You are using localhost or 0.0.0.0 as a hostname in the configuration. It is recommended that you use a domain name instead.
-                    </Alert>
-                )}
-
-                {coStatus && !coStatus.docker && (
-                    <Alert severity="error">
-                        Docker is not connected! Please check your docker connection.<br/>
-                        Did you forget to add <pre>-v /var/run/docker.sock:/var/run/docker.sock</pre> to your docker run command?<br />
-                        if your docker daemon is running somewhere else, please add <pre>-e DOCKER_HOST=...</pre> to your docker run command.
-                    </Alert>
-                )}
-
-                <Alert severity="info">Dashboard implementation currently in progress! If you want to voice your opinion on where Cosmos is going, please join us on Discord!</Alert>
-            </Stack>
-        </div>
-        {metrics && <div style={{marginTop: '30px'}}>
-            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-                {/* row 1 */}
+        {metrics && <div style={{marginTop: '30px', zIndex:2, position: 'relative'}}>
+            <Grid container rowSpacing={4.5} columnSpacing={2.75} >
+                {/* 
                 <Grid item xs={12} sx={{ mb: -2.25 }}>
                     <Typography variant="h5">Dashboard</Typography>
                 </Grid>
@@ -173,8 +133,8 @@ const DashboardDefault = () => {
                 </Grid>
 
                 <Grid item md={8} sx={{ display: { sm: 'none', md: 'block', lg: 'none' } }} />
-
-                {/* row 2 */}
+                */}
+                
                 
                 <PlotComponent title={'Resources'} data={[metrics["cosmos.system.cpu.0"], metrics["cosmos.system.ram"]]}/>
                
@@ -187,8 +147,26 @@ const DashboardDefault = () => {
                 <TableComponent title="Containers - Network" data={
                     Object.keys(metrics).filter((key) => key.startsWith("cosmos.system.docker.net")).map((key) => metrics[key])   
                 }/>
-
-                {/* row 3 */}
+                
+                <TableComponent title="Disk Usage" displayMax={true} 
+                render={(metric, value, formattedValue) => {
+                    return <span>
+                        {formattedValue}
+                        <LinearProgress variant="determinate" value={value / metric.Max * 100}  />
+                    </span>
+                }}
+                data={
+                    Object.keys(metrics).filter((key) => key.startsWith("cosmos.system.disk")).map((key) => metrics[key])   
+                }/>
+ 
+                <PlotComponent 
+                    title={'Temperature'}
+                    withSelector={'cosmos.system.temp.all'}
+                    SimpleDesign
+                    data={Object.keys(metrics).filter((key) => key.startsWith("cosmos.system.temp")).map((key) => metrics[key])}
+                />
+                
+                {/* 
                 <Grid item xs={12} md={7} lg={8}>
                     <Grid container alignItems="center" justifyContent="space-between">
                         <Grid item>
@@ -227,7 +205,6 @@ const DashboardDefault = () => {
                     </MainCard>
                 </Grid>
 
-                {/* row 4 */}
                 <Grid item xs={12} md={7} lg={8}>
                     <Grid container alignItems="center" justifyContent="space-between">
                         <Grid item>
@@ -382,6 +359,7 @@ const DashboardDefault = () => {
                         </Stack>
                     </MainCard>
                 </Grid>
+                 */}
             </Grid>
         </div>}
       </>