Connect chart links

bcgov · Jan 18, 2024 · 241de24 · 241de24
1 parent f8ea23a
commit 241de24
Show file tree

Hide file tree

Showing 18 changed files with 356 additions and 193 deletions.
diff --git a/src/dashboard/src/components/charts/allocationTable/AllocationTable.module.scss b/src/dashboard/src/components/charts/allocationTable/AllocationTable.module.scss
@@ -214,4 +214,8 @@
             }
         }
     }
-}
+}
+
+.link {
+  cursor: pointer;
+}
diff --git a/src/dashboard/src/components/charts/allocationTable/AllocationTable.tsx b/src/dashboard/src/components/charts/allocationTable/AllocationTable.tsx
@@ -18,19 +18,21 @@ export interface IAllocationTableProps {
   operatingSystem?: string;
   serverItems: IServerItemModel[];
   loading?: boolean;
+  onClick?: (serverItem?: IServerItemModel) => void;
 }
 
 export const AllocationTable = ({
   operatingSystem,
   serverItems,
   loading,
+  onClick,
 }: IAllocationTableProps) => {
   const getServerItems = useAllocationByOS(operatingSystem);
 
   const [keyword, setKeyword] = React.useState('');
   const [filter, setFilter] = React.useState(keyword);
   const [sort, setSort] = React.useState<string>('server:asc');
-  const [rows, setRows] = React.useState<ITableRowData[]>([]);
+  const [rows, setRows] = React.useState<ITableRowData<IServerItemModel>[]>([]);
 
   React.useEffect(() => {
     const sorting = sort.split(':');
@@ -43,7 +45,7 @@ export const AllocationTable = ({
           : '[NO NAME]'.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) ||
         (!!si.operatingSystemItem &&
           si.operatingSystemItem.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())),
-      sorting[0] as keyof ITableRowData,
+      sorting[0] as keyof ITableRowData<IServerItemModel>,
       sorting[1] as any,
     );
     setRows(rows);
@@ -90,15 +92,16 @@ export const AllocationTable = ({
           <p>Total</p>
         </div>
         <div className={styles.chart}>
-          {rows.map((data, index) => (
+          {rows.map((row, index) => (
             <TableRow
               key={index}
-              server={data.server}
-              tenant={data.tenant}
-              os={data.os}
-              capacity={data.capacity}
-              available={data.available}
+              server={row.server}
+              tenant={row.tenant}
+              os={row.os}
+              capacity={row.capacity}
+              available={row.available}
               showTenant={showTenants}
+              onClick={() => onClick?.(row.data)}
             />
           ))}
         </div>

diff --git a/src/dashboard/src/components/charts/allocationTable/ITableRowData.ts b/src/dashboard/src/components/charts/allocationTable/ITableRowData.ts
@@ -1,7 +1,8 @@
-export interface ITableRowData {
+export interface ITableRowData<T> {
   server: string;
   tenant: string;
   os: string;
   capacity: number;
   available: number;
+  data?: T;
 }
diff --git a/src/dashboard/src/components/charts/allocationTable/TableRow.tsx b/src/dashboard/src/components/charts/allocationTable/TableRow.tsx
@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import React from 'react';
 import { convertToStorageSize } from './../../../utils/convertToStorageSize';
 import styles from './AllocationTable.module.scss';
@@ -10,6 +9,7 @@ interface TableRowProps {
   capacity: number;
   available: number;
   showTenant?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
 }
 
 export const TableRow: React.FC<TableRowProps> = ({
@@ -19,6 +19,7 @@ export const TableRow: React.FC<TableRowProps> = ({
   capacity,
   available,
   showTenant,
+  onClick,
 }) => {
   const percentageUsed = capacity ? Math.round(((capacity - available) / capacity) * 100) : 0;
   const capacityValue = convertToStorageSize<string>(capacity, 'MB', 'TB');
@@ -27,9 +28,15 @@ export const TableRow: React.FC<TableRowProps> = ({
   return (
     <div className={styles.row}>
       <div className={styles.info}>
-        <Link href={``} title={server}>
-          {server}
-        </Link>
+        <p>
+          {onClick ? (
+            <label className={styles.link} onClick={(e) => onClick?.(e)}>
+              {server}
+            </label>
+          ) : (
+            <label>{server}</label>
+          )}
+        </p>
         {showTenant ? <p title={tenant}>{tenant}</p> : ''}
         <p title={os}>{os}</p>
         <p title={capacityValue}>{capacityValue}</p>

diff --git a/src/dashboard/src/components/charts/allocationTable/hooks/useAllocationByOS.ts b/src/dashboard/src/components/charts/allocationTable/hooks/useAllocationByOS.ts
@@ -16,7 +16,7 @@ export const useAllocationByOS = (operatingSystem?: string) => {
     (
       serverItems: IServerItemModel[],
       filter: (serverItem: IServerItemModel) => boolean = () => true,
-      sort: keyof ITableRowData = 'server',
+      sort: keyof ITableRowData<IServerItemModel> = 'server',
       direction: 'asc' | 'desc' = 'asc',
     ) => {
       const data = serverItems
@@ -29,13 +29,14 @@ export const useAllocationByOS = (operatingSystem?: string) => {
           const className = si.operatingSystemItem?.rawData.u_class;
           return (!operatingSystem || className === operatingSystem) && filter(si);
         })
-        .map<ITableRowData>((si) => {
+        .map<ITableRowData<IServerItemModel>>((si) => {
           return {
             server: si.name.length ? si.name : '[NO NAME]',
             os: si.operatingSystemItem?.name ?? '',
             tenant: si.tenant?.name ?? '',
             capacity: si.capacity ?? 0,
             available: si.availableSpace ?? 0,
+            data: si,
           };
         })
         .sort((a, b) => {

diff --git a/src/dashboard/src/components/charts/bar/allocationByOS/AllocationByOS.module.scss b/src/dashboard/src/components/charts/bar/allocationByOS/AllocationByOS.module.scss
@@ -0,0 +1,5 @@
+@import '@/styles/utils.scss';
+
+.link {
+  cursor: pointer;
+}
diff --git a/src/dashboard/src/components/charts/bar/allocationByOS/AllocationByOS.tsx b/src/dashboard/src/components/charts/bar/allocationByOS/AllocationByOS.tsx
@@ -1,21 +1,23 @@
 'use client';
 
 import { IOperatingSystemItemModel, IServerItemModel } from '@/hooks';
-import Link from 'next/link';
 import { BarRow, SmallBarChart } from '../smallBar';
+import styles from './AllocationByOS.module.scss';
 import defaultData from './defaultData';
 import { groupByOS } from './utils';
 
 export interface IAllocationByOSProps {
   serverItems: IServerItemModel[];
   operatingSystemItems: IOperatingSystemItemModel[];
   loading?: boolean;
+  onClick?: (operatingSystemItem?: IOperatingSystemItemModel) => void;
 }
 
 export const AllocationByOS = ({
   serverItems,
   operatingSystemItems,
   loading,
+  onClick,
 }: IAllocationByOSProps) => {
   return (
     <SmallBarChart
@@ -28,7 +30,17 @@ export const AllocationByOS = ({
         return data.datasets.map((os) => (
           <BarRow
             key={os.key}
-            label={<Link href="">{os.label}</Link>}
+            label={
+              <p>
+                {onClick && os.data ? (
+                  <label className={styles.link} onClick={() => onClick?.(os.data)}>
+                    {os.label}
+                  </label>
+                ) : (
+                  <p>{os.label}</p>
+                )}
+              </p>
+            }
             capacity={os.capacity}
             available={os.available}
           />

diff --git a/src/dashboard/src/components/charts/bar/allocationByOS/utils/groupByOS.ts b/src/dashboard/src/components/charts/bar/allocationByOS/utils/groupByOS.ts
@@ -6,7 +6,7 @@ export const groupByOS = (
   serverItems: IServerItemModel[],
   operatingSystemItems: IOperatingSystemItemModel[],
 ) => {
-  const groups = groupBy<IServerItemModel, IBarChartRowData>(
+  const groups = groupBy<IServerItemModel, any>(
     serverItems,
     (item) => `${item.operatingSystemItemId ?? 'NA'}`,
     (item) => {
@@ -20,14 +20,15 @@ export const groupByOS = (
   );
 
   const result = Object.keys(groups)
-    .map<IBarChartRowData>((key) => {
+    .map<IBarChartRowData<IOperatingSystemItemModel | undefined>>((key) => {
       const items = groups[key];
       const capacity = items.reduce((result, item) => result + item.capacity, 0);
       const available = items.reduce((result, item) => result + item.available, 0);
       const label =
         key === 'NA' ? 'NA' : operatingSystemItems.find((os) => os.id === +key)?.name ?? 'NA';
+      const os = operatingSystemItems.find((os) => os.id == +key);
 
-      return { key, label, capacity, available };
+      return { key, label, capacity, available, data: os };
     })
     .sort((a, b) => (a.label < b.label ? -1 : a.label > b.label ? 1 : 0));
-Original file line number
+Diff line change
@@ Expand Up / @@ -214,4 +214,8 @@ @@
                 }
             }
         }
-    }
+    }
+    .link {
+      cursor: pointer;
+    }