update types frontend

Signed-off-by: Mohammed Abdi <[email protected]>

Author: Mohammed Abdi

frontend/src/pages/MCADashboard/DropDowns/refresh-rate-drop-down.tsx

@@ -15,7 +15,7 @@ const RefreshRateDropDown: React.FunctionComponent<RefreshRateDropDownProps> = (
         setIsOpen(!isOpen);
     };
 
-    function convertDurationToMilliseconds(durationString) {
+    function convertDurationToMilliseconds(durationString: string) {
         const parts = durationString.split(' ');
         const numericValue = parseInt(parts[0], 10);
         let conversionFactor;
@@ -48,7 +48,8 @@ const RefreshRateDropDown: React.FunctionComponent<RefreshRateDropDownProps> = (
     const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
         // eslint-disable-next-line no-console
         console.log('selected', itemId);
-        onSelected(convertDurationToMilliseconds(itemId));
+        if(itemId === 'string')
+            onSelected(convertDurationToMilliseconds(itemId));
         setSelected(itemId as string);
         setIsOpen(false);
     };

frontend/src/pages/MCADashboard/Metrics/McadMetricGraph.tsx

@@ -27,7 +27,7 @@ import { formatUnitStringOnAxis, timeStringToSeconds, filterData } from './metri
 
 const LegendContainer = ({ children }: { children?: React.ReactNode }) => {
   // The first child should be a <rect> with a `width` prop giving the legend's content width
-  const width = children?.[0]?.[0]?.props?.width ?? '100%';
+  const width = (React.Children.toArray(children)[0] as React.ReactElement)?.props?.width ?? '100%';
   return (
     <foreignObject height={75} width="100%" y={245}>
       <div className="monitoring-dashboards__legend-wrap horizontal-scroll">
@@ -199,21 +199,19 @@ const Graph: React.FC<GraphProps> = ({
         <Spinner />
       </div>
     );
-  } else {
-    console.log("metric to legend", metricData, legendData);
   }
 
   const [maxVal, setMaxVal] = React.useState<number>(0);
 
   const domain: any = { x: xDomain, y: undefined };
-  const getMaxVal = (metricData) => {
+  const getMaxVal = (metricData: MetricData[]) => {
     let maxDataVal;
     let maxVal = 0;
     for (const data of metricData) {
       maxDataVal = _.maxBy(data.values, (item) => {
         return parseInt(item[1]);
-      })[1];
-      maxVal = Math.max(maxVal, maxDataVal);
+      })?.[1];
+      maxVal = Math.max(maxVal, Number(maxDataVal));
     }
     return maxVal;
   };

frontend/src/pages/MCADashboard/Metrics/MetricGraph.tsx

@@ -27,7 +27,7 @@ import { formatUnitStringOnAxis, timeStringToSeconds, filterData } from './metri
 
 const LegendContainer = ({ children }: { children?: React.ReactNode }) => {
   // The first child should be a <rect> with a `width` prop giving the legend's content width
-  const width = children?.[0]?.[0]?.props?.width ?? '100%';
+  const width = (React.Children.toArray(children)[0] as React.ReactElement)?.props?.width ?? '100%';
   return (
     <foreignObject height={75} width="100%" y={245}>
       <div className="monitoring-dashboards__legend-wrap horizontal-scroll">
@@ -188,16 +188,15 @@ const Graph: React.FC<GraphProps> = ({
   }
 
   const [maxVal, setMaxVal] = React.useState<number>(0);
-
   const domain: any = { x: xDomain, y: undefined };
-  const getMaxVal = (metricData) => {
+  const getMaxVal = (metricData: MetricData[]) => {
     let maxDataVal;
     let maxVal = 0;
     for (const data of metricData) {
       maxDataVal = _.maxBy(data.values, (item) => {
         return parseInt(item[1]);
-      })[1];
-      maxVal = Math.max(maxVal, maxDataVal);
+      })?.[1];
+      maxVal = Math.max(maxVal, Number(maxDataVal));
     }
     return maxVal;
   };

frontend/src/pages/MCADashboard/Metrics/metrics-utils.ts

@@ -45,7 +45,7 @@ export const timeStringToSeconds = (timeString: string) => {
   }
 };
 
-export const getNamespacesFromAppwrappers = (data): string[] => {
+export const getNamespacesFromAppwrappers = (data: { appwrappers: any; }): string[] => {
   const namespaces = new Set<string>();
   const appwrapperData = data.appwrappers;
   for (const key in appwrapperData) {
@@ -101,7 +101,7 @@ export const formatUnitStringOnAxis = (value: number, maxVal: number, unit?: Uni
   }
 };
 
-export const filterData = (data, validNamespaces) => {
+export const filterData = (data: any[], validNamespaces: Set<string> | undefined) => {
   if (data && validNamespaces) {
     const filteredData = data.filter((dataPoint) => {
       return validNamespaces.has(dataPoint.metric.namespace);

frontend/src/pages/MCADashboard/Tables/SearchFieldAppwrappers.tsx

@@ -33,14 +33,14 @@ const SearchFieldAppwrappers: React.FC<SearchFieldProps> = ({
         selections={searchType}
         onSelect={(e, key) => {
           if (typeof key === 'string') {
-            onSearchTypeChange(SearchType[key]);
+            onSearchTypeChange(SearchType[key as keyof typeof SearchType]);
             setTypeOpen(false);
           }
         }}
       >
         {types.map((key) => (
           <SelectOption key={key} value={key}>
-            {SearchType[key]}
+            {SearchType[key as keyof typeof SearchType]}
           </SelectOption>
         ))}
       </Select>

frontend/src/pages/MCADashboard/Tables/SearchFieldNamespaces.tsx

@@ -31,14 +31,14 @@ const SearchFieldNamespaces: React.FC<SearchFieldProps> = ({
         selections={searchType}
         onSelect={(e, key) => {
           if (typeof key === 'string') {
-            onSearchTypeChange(SearchType[key]);
+            onSearchTypeChange(SearchType[key as keyof typeof SearchType]);
             setTypeOpen(false);
           }
         }}
       >
         {types.map((key) => (
           <SelectOption key={key} value={key}>
-            {SearchType[key]}
+            {SearchType[key as keyof typeof SearchType]}
           </SelectOption>
         ))}
       </Select>

frontend/src/pages/MCADashboard/Tables/quota-table.tsx

@@ -29,6 +29,7 @@ interface QuotaData {
   memorylimits?: number;
   gpu?: number;
   gpumemory?: number;
+  [key: string]: number | string | undefined; // Index signature
 }
 
 interface NameSpaceCount {
@@ -46,7 +47,7 @@ enum SearchTypeQuotaTable {
 }
 
 type kv_pair = {
-  key?: number;
+  [key: string]: number | undefined;
 };
 
 type TableData = {
@@ -60,6 +61,13 @@ type TableData = {
   gpumemory?: kv_pair;
 };
 
+interface DataPoint {
+  metric: {
+    namespace: string; // Adjust this type accordingly
+  };
+  value: [number, string]; // Adjust this type accordingly
+}
+
 export const QuotaTable: React.FunctionComponent<QuotaViewProps> = ({
   data: Data,
   validNamespaces,
@@ -81,17 +89,19 @@ export const QuotaTable: React.FunctionComponent<QuotaViewProps> = ({
     setTableData(initialTableData);
   }, []);
 
-  const sortFunction = (a: QuotaData, b: QuotaData, keyfield: string) => {
-    if (a[keyfield] === undefined && b[keyfield] === undefined) {
+  const sortFunction = (a: QuotaData, b: QuotaData, keyfield: keyof QuotaData) => {
+    const aValue = a[keyfield] as number | undefined;
+    const bValue = b[keyfield] as number | undefined;
+    if (aValue === undefined && bValue === undefined) {
       return 0;
     }
-    if (a[keyfield] === undefined) {
+    if (aValue === undefined) {
       return -1;
     }
-    if (b[keyfield] === undefined) {
+    if (bValue === undefined) {
       return 1;
     }
-    return a[keyfield] - b[keyfield];
+    return aValue - bValue;
   };
 
   const columns: SortableData<QuotaData>[] = [
@@ -165,12 +175,8 @@ export const QuotaTable: React.FunctionComponent<QuotaViewProps> = ({
   }
 
   React.useEffect(() => {
-    console.log(tableData);
-  }, [tableData]);
-
-  React.useEffect(() => {
-    const formatData = (data) => {
-      const formattedData = {};
+    const formatData = (data: DataPoint[]) => {
+      const formattedData: { [key: string]: number } = {};
       for (const dataPoint of data) {
         formattedData[dataPoint.metric.namespace] =
           Math.round(parseFloat(dataPoint.value[1]) * 100) / 100;
@@ -182,8 +188,11 @@ export const QuotaTable: React.FunctionComponent<QuotaViewProps> = ({
         const promises = tableQueries.map(async (query) => {
           const data = await getMetricTableData(query.query);
           const filteredData = filterData(data, validNamespaces);
-          const formattedData = formatData(filteredData);
-          return { [query.name]: formattedData };
+          if (filteredData) {
+            const formattedData = formatData(filteredData);
+            return { [query.name]: formattedData };
+          }
+          return null;
         });
         const results = await Promise.all(promises);
         const tableDataUpdate = Object.assign({}, ...results);

frontend/src/pages/MCADashboard/Tables/status-summary-table.tsx

@@ -9,7 +9,7 @@ import {
 import { Td, Tr } from '@patternfly/react-table';
 import { SortableData } from '../components/table/useTableColumnSort';
 import Table from '../components/table/Table';
-import { Data } from '../types';
+import { Data, StatusKey } from '../types';
 import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts';
 import MCADashboard from '../MCADashboard.css';
 
@@ -52,8 +52,8 @@ export const StatusSummaryTable: React.FunctionComponent<{ data: Data }> = ({ da
 
   let totalAppWrappers = 0;
   for (const key in data.stats.statusCounts) {
-    if (typeof data.stats.statusCounts[key] === 'number') {
-      totalAppWrappers += data.stats.statusCounts[key] as number;
+    if (typeof data.stats.statusCounts[key as StatusKey] === 'number') {
+      totalAppWrappers += data.stats.statusCounts[key as StatusKey] as number;
     }
   }
 

frontend/src/pages/MCADashboard/components/table/useTableColumnSort.ts

@@ -58,8 +58,8 @@ const useTableColumnSort = <T>(
             return 0;
           }
 
-          const dataValueA = a[columnField.field];
-          const dataValueB = b[columnField.field];
+          const dataValueA = a[columnField.field as keyof T];
+          const dataValueB = b[columnField.field as keyof T];
           if (typeof dataValueA === 'string' && typeof dataValueB === 'string') {
             return dataValueA.localeCompare(dataValueB);
           }

frontend/src/pages/MCADashboard/types.ts

@@ -26,3 +26,5 @@ export interface Data {
     };
   };
 }
+
+export type StatusKey = keyof Data['stats']['statusCounts'];