HOSTSD-199 Add storage trends chart (#40)

src/dashboard/src/app/hsb/dashboard/page.tsx

@@ -1,21 +1,19 @@
 import {
   AllOrgDonutChart,
   AllocationByStorageVolume,
-  StorageTrendsChart,
   DonutChart,
   SmallBarChart,
+  StorageTrendsChart,
 } from '@/components/charts';
 
 export default function Page() {
   return (
     <>
-      {/* HSB Dashboard */}
       <AllOrgDonutChart />
       <StorageTrendsChart large={false} />
       <AllocationByStorageVolume />
       <DonutChart />
       <SmallBarChart title="Allocation by OS" />
-      {/* <LineChart large='true' /> */}
     </>
   );
 }

src/dashboard/src/components/buttons/Button.module.scss

@@ -1,54 +1,70 @@
 @import '@/styles/utils.scss';
 
 .btn {
-    padding: 10px 16px;
-    border-radius: 3px;
-    font-size: 1em;
-    font-weight: bold;
-    border: 0;
-    cursor: pointer;
-    position: relative;
+  padding: 10px 16px;
+  border-radius: 3px;
+  font-size: 1em;
+  font-weight: bold;
+  border: 0;
+  cursor: pointer;
+  position: relative;
 }
 
 .primary {
-    background-color: $bc-blue;
-    color: $white;
+  background-color: $bc-blue;
+  color: $white;
 
-    &:hover {
-        background-color: $chart-blue;
-    }
+  &:hover {
+    background-color: $chart-blue;
+  }
 }
 
 .secondary {
-    background-color: $white;
-    color: $bc-black;
-    border: 1px solid $dark-gray;
+  background-color: $white;
+  color: $bc-black;
+  border: 1px solid $dark-gray;
 
-    &:hover {
-        background-color: $light-gray;
-    }
+  &:hover {
+    background-color: $light-gray;
+  }
 }
 
 .disabled {
-    background-color: $light-gray;
-    color: $dark-gray;
-    border: 1px solid $dark-gray;
-    pointer-events: none;
+  background-color: $light-gray;
+  color: $dark-gray;
+  border: 1px solid $dark-gray;
+  pointer-events: none;
 
-    &:hover {
-        background-color: $light-gray;
-    }
+  &:hover {
+    background-color: $light-gray;
+  }
 
-    .buttonIcon {
-        opacity: 0.5;
-    }
+  .buttonIcon {
+    opacity: 0.5;
+  }
 }
 
 .buttonIcon {
-    position: absolute;
-    left: 16px;
+  position: absolute;
+  left: 16px;
 }
 
 .btnWithIcon {
-    padding-left: 42px;
+  padding-left: 42px;
+}
+
+.spinner {
+  top: 0;
+  right: 0;
+  width: 22px;
+  height: 22px;
+  margin-top: calc(height / 2);
+  margin-right: 17px;
+
+  >div {
+    width: 20px;
+    height: 20px;
+    border: 2px solid $bc-blue;
+    border-color: $bc-blue transparent transparent transparent;
+  }
 }

src/dashboard/src/components/buttons/Button.tsx

@@ -1,18 +1,27 @@
-import React from 'react';
 import Image from 'next/image';
+import React from 'react';
+import { Spinner } from '../spinner';
 import styles from './Button.module.scss';
 
 interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary';
   children?: React.ReactNode;
   iconPath?: string;
+  loading?: boolean;
 }
 
-export const Button: React.FC<IButtonProps> = ({ variant = 'primary', children, iconPath, disabled, ...rest }) => {
+export const Button: React.FC<IButtonProps> = ({
+  variant = 'primary',
+  children,
+  iconPath,
+  disabled,
+  loading,
+  ...rest
+}) => {
   // Determine the button's className based on the 'variant' prop and whether iconPath is provided.
   const getButtonClassName = () => {
     let buttonClasses = `${styles.btn} ${styles[variant] || ''}`;
-    
+
     if (iconPath) {
       // If iconPath is truthy, append the class for an icon
       buttonClasses += ` ${styles.btnWithIcon}`;
@@ -27,14 +36,11 @@ export const Button: React.FC<IButtonProps> = ({ variant = 'primary', children,
   };
 
   return (
-    <button
-      className={getButtonClassName()}
-      disabled={disabled} 
-      {...rest}
-    >
+    <button className={getButtonClassName()} disabled={disabled} {...rest}>
       {iconPath && (
         <Image src={iconPath} alt="icon" width={17} height={17} className={styles.buttonIcon} />
       )}
+      {loading && <Spinner className={styles.spinner} />}
       {children}
     </button>
   );

src/dashboard/src/components/charts/allOrgDonut/AllOrgDonutChart.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Button } from '@/components/buttons';
-import { useFiltered } from '@/store';
+import { useDashboard } from '@/store';
 import { ArcElement, Chart as ChartJS, Tooltip } from 'chart.js';
 import React from 'react';
 import { Doughnut } from 'react-chartjs-2';
@@ -12,16 +12,15 @@ import { defaultData } from './defaultData';
 ChartJS.register(ArcElement, Tooltip);
 
 export const AllOrgDonutChart: React.FC = () => {
-  const organization = useFiltered((state) => state.organization);
-  const organizations = useFiltered((state) => state.organizations);
+  const organizations = useDashboard((state) => state.organizations);
   const data = useDonutChart();
 
   return (
     <div className={styles.panel}>
       <h1>All Organizations</h1>
       <div className={styles.chartContainer}>
         <div className={styles.info}>
-          <h2>Totals for {organization ? 1 : organizations.length} organizations</h2>
+          <h2>Totals for {organizations.length} organizations</h2>
           <div>
             <p>
               Allocated <span>{data.space}</span>

src/dashboard/src/components/charts/allOrgDonut/updateData.ts

@@ -13,13 +13,13 @@ export const updateData = (
   const availableCir = availablePercent ? (360 * availablePercent) / 100 : 0;
 
   return {
-    space: convertToStorageSize(space, 'MB', 'TB', navigator.language, {
+    space: convertToStorageSize<string>(space, 'MB', 'TB', {
       formula: Math.trunc,
     }),
-    used: convertToStorageSize(used, 'MB', 'TB', navigator.language, {
+    used: convertToStorageSize<string>(used, 'MB', 'TB', {
       formula: Math.trunc,
     }),
-    available: convertToStorageSize(available, 'MB', 'TB', navigator.language, {
+    available: convertToStorageSize<string>(available, 'MB', 'TB', {
       formula: Math.trunc,
     }),
     chart: {

src/dashboard/src/components/charts/allOrgDonut/useDonutChart.ts

@@ -1,19 +1,16 @@
-import { useFiltered } from '@/store';
+import { useDashboard } from '@/store';
 import React from 'react';
 import { IStats } from './IStats';
 import { defaultData } from './defaultData';
 import { updateData } from './updateData';
 
 export const useDonutChart = () => {
-  const serverItem = useFiltered((state) => state.serverItem);
-  const serverItems = useFiltered((state) => state.serverItems);
+  const serverItems = useDashboard((state) => state.serverItems);
 
   const [data, setData] = React.useState<IStats>(defaultData);
 
   React.useEffect(() => {
-    if (serverItem) {
-      setData((data) => updateData(serverItem.capacity, serverItem.availableSpace, data));
-    } else if (serverItems.length) {
+    if (serverItems.length) {
       const space = serverItems.map((si) => si.capacity!).reduce((a, b) => (a ?? 0) + (b ?? 0));
       const available = serverItems
         .map((si) => si.availableSpace!)
@@ -22,7 +19,7 @@ export const useDonutChart = () => {
     } else {
       setData(defaultData);
     }
-  }, [serverItems, serverItem]);
+  }, [serverItems]);
 
   return data;
 };

src/dashboard/src/components/charts/storageTrends/StorageTrendsChart.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useFiltered } from '@/store';
 import {
   CategoryScale,
   Chart as ChartJS,
@@ -13,7 +12,7 @@ import {
 } from 'chart.js';
 import React from 'react';
 import { LineChart } from '../lineChart';
-import { defaultData } from './defaultData';
+import { useStorageTrends } from './useStorageTrends';
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
 
@@ -22,9 +21,7 @@ interface LineChartProps {
 }
 
 export const StorageTrendsChart: React.FC<LineChartProps> = ({ large }) => {
-  const fileSystemItems = useFiltered((state) => state.fileSystemItems);
+  const data = useStorageTrends(12);
 
-  return (
-    <LineChart data={defaultData} label="Storage Trends" large={large} showExport exportDisabled />
-  );
+  return <LineChart data={data} label="Storage Trends" large={large} showExport exportDisabled />;
 };