feat: add TypeScript interfaces and utility functions for resource detail formatting

Signed-off-by: Amit Amrutiya <[email protected]>

Author: amitamrutiya

src/custom/ResourceDetailFormatters/types.ts

@@ -0,0 +1,264 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ComponentType, ReactNode } from 'react';
+
+export interface PrimaryDetailsProps {
+  title: string;
+  value: string;
+  hide?: boolean;
+}
+
+export interface CopyToClipboardProps {
+  data: string;
+}
+
+export interface CollapsibleSectionProps {
+  title: string;
+  children: ReactNode;
+  showAll?: boolean;
+  numberText?: string | number;
+  level?: number;
+}
+
+export interface SectionHeadingProps {
+  children: string;
+}
+
+export interface LongDetailsProps {
+  title: string;
+  value: string;
+}
+
+export interface NumberStateProps {
+  title?: string;
+  value: string | number;
+  quantity: string;
+}
+
+export interface EnvironmentVariablesProps {
+  title: string;
+  value?: string;
+  hide?: boolean;
+}
+
+export interface CategoryProps {
+  title: string;
+  hide?: boolean;
+}
+
+export interface NumberStateData {
+  title: string;
+  value: string | number;
+  quantity: string;
+}
+
+export interface NumberStateFormatterProps {
+  data: NumberStateData[];
+}
+
+export interface ActionIconButtonProps {
+  title: string;
+  Icon: ComponentType<{ fill: string; height?: number; width?: number }>;
+  onClick: () => void;
+}
+
+export interface KeyValueProps {
+  Key: string;
+  Value: string | number | ReactNode;
+}
+
+export interface EnvironmentFormatterProps {
+  data?: {
+    name: string;
+    value?: string;
+    valueFrom?: {
+      [key: string]: {
+        apiVersion: string;
+        fieldPath: string;
+      };
+    };
+  }[];
+}
+
+export interface CodeFormatterProps {
+  data: any;
+}
+
+export interface PortsFormatterProps {
+  data?: {
+    name?: string;
+    containerPort?: number;
+    port?: number;
+    protocol: string;
+  }[];
+}
+
+export interface ArrayFormatterProps {
+  data: any[];
+}
+
+export interface ListFormatterProps {
+  data: string[];
+}
+
+export interface OperatorDynamicFormatterProps {
+  data: any;
+  level?: number;
+}
+
+export interface StatusFormatterProps {
+  status: string;
+  rightPosition?: string;
+}
+
+export interface LabelFormatterProps {
+  data: string[];
+  onClick: (labels: string[]) => void;
+  selectedLabels: string[];
+}
+
+export interface MemoryUsageProps {
+  allocatable?: {
+    cpu: string;
+    memory: string;
+    'ephemeral-storage': string;
+  };
+  capacity?: {
+    cpu: string;
+    memory: string;
+    'ephemeral-storage': string;
+  };
+  height?: number;
+  width?: number;
+}
+
+export interface TableDataFormatterProps {
+  title?: string;
+  data?: any;
+  showAll?: boolean;
+  mainTableData?: any[][];
+  mainTableCols?: any[];
+}
+
+export interface TextWithLinkFormatterProps {
+  title: string;
+  value: string;
+  variant: 'row' | 'column';
+  onClick: () => void;
+}
+
+export interface JSONViewFormatterProps {
+  data: any;
+}
+
+export interface DetailSectionProps {
+  title?: string;
+  data: any;
+  formatter: React.ComponentType<any>;
+}
+
+export interface ContainerFormatterProps {
+  containerSpec: {
+    ports?: any[];
+    imagePullPolicy?: string;
+    image?: string;
+    env?: any[];
+    volumeMounts?: {
+      name: string;
+      mountPath: string;
+      readOnly?: boolean;
+    }[];
+    command?: any[];
+    livenessProbe?: any;
+    readinessProbe?: any;
+    startupProbe?: any;
+    args?: any[];
+    resources?: {
+      requests?: any;
+      limits?: any;
+    };
+  };
+  containerStatus: {
+    state: {
+      [key: string]: {
+        startedAt?: string;
+      };
+    };
+    restartCount: number;
+    containerID: string;
+  };
+}
+
+export interface SecretFormatterProps {
+  data: string;
+}
+
+export interface NumberState {
+  title: string;
+  value: number | string;
+  quantity: string;
+}
+
+export interface Resource {
+  status?: {
+    attribute?: string;
+    containerStatuses?: Array<{ restartCount?: number }>;
+    nodeInfo?: { kubeletVersion?: string };
+    podIP?: string;
+    hostIP?: string;
+    qosClass?: string;
+    replicas?: number;
+    availableReplicas?: number;
+    readyReplicas?: number;
+    loadBalancer?: { ingress?: Array<{ ip?: string }> };
+    allocatable?: Record<string, string>;
+    capacity?: Record<string, string>;
+    conditions?: Array<{ type?: string }>;
+  };
+  spec?: {
+    attribute?: string;
+    containers?: Array<{ image?: string }>;
+    initContainers?: Array<{ name?: string }>;
+    nodeSelector?: Record<string, string>;
+    template?: {
+      spec?: {
+        containers?: Array<{ image?: string }>;
+        nodeSelector?: Record<string, string>;
+      };
+    };
+    resources?: { requests?: { storage?: string } };
+    claimRef?: { name?: string; namespace?: string };
+    storageClassName?: string;
+    type?: string;
+    clusterIP?: string;
+    updateStrategy?: { type?: string };
+    externalIPs?: string[];
+    finalizers?: string[];
+    accessModes?: string[];
+    selector?: { matchLabels?: Record<string, string> };
+    serviceAccountName?: string;
+    tolerations?: unknown;
+    volumes?: unknown;
+    rules?: Array<{ host?: string }>;
+  };
+  metadata?: {
+    creationTimestamp?: string;
+    namespace?: string;
+    labels?: Array<{ key?: string; value?: string }>;
+    annotations?: Array<{ key?: string; value?: string }>;
+  };
+  kind?: string;
+  apiVersion?: string;
+  configuration?: {
+    spec?: { strategy?: { type?: string } };
+    data?: unknown;
+  };
+  type?: string;
+  data?: string;
+}
+
+export interface GetResourceCleanDataProps {
+  resource: Resource;
+  dispatchMsgToEditor?: (msg: any) => void;
+  activeLabels?: string[];
+  showStatus?: boolean;
+}

src/custom/ResourceDetailFormatters/utils.ts

@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import _ from 'lodash';
+
+interface TableData {
+  name: string;
+  [key: string]: string | number | undefined;
+}
+
+interface TableColumn {
+  name: string;
+  label: string;
+  options: {
+    sort: boolean;
+  };
+}
+
+interface TableStructure {
+  key: string;
+  columns: TableColumn[];
+  rows: TableData[];
+}
+
+export const splitCamelCaseString = (str: string): string => {
+  const pluralPatternRegex = /(?<=\w)[A-Z]+s$/;
+  const pluralMatches = str.match(pluralPatternRegex);
+
+  if (!pluralMatches) {
+    return _.startCase(str);
+  }
+  const reconstructedInput = str.replace(pluralPatternRegex, '');
+
+  return _.startCase(reconstructedInput) + ' ' + pluralMatches[0];
+};
+
+export const extractPodVolumnTables = (data: TableData[] | null): TableStructure[] => {
+  if (!data) {
+    return [];
+  }
+  const uniqueKeys = _.uniq(
+    _.flatMap(data, (item) => Object.keys(item).filter((key) => key !== 'name'))
+  );
+
+  return uniqueKeys.map((key) => {
+    const rows = data
+      .filter((item) => _.has(item, key))
+      .map((item) => {
+        const baseData: TableData = { name: item.name };
+        const nestedData = _.get(item, key);
+
+        if (_.isObject(nestedData)) {
+          Object.entries(nestedData).forEach(([nestedKey, value]) => {
+            baseData[nestedKey] =
+              nestedKey === 'defaultMode'
+                ? value?.toString()
+                : nestedKey === 'sources' && _.isArray(value)
+                ? value?.length
+                : JSON.stringify(value);
+          });
+        } else {
+          baseData[key] = JSON.stringify(nestedData);
+        }
+
+        return baseData;
+      });
+
+    const columns: TableColumn[] = rows.length
+      ? Object.keys(rows[0]).map((columnKey) => ({
+          name: columnKey,
+          label: _.startCase(columnKey),
+          options: {
+            sort: false
+          }
+        }))
+      : [];
+
+    return { key, columns, rows };
+  });
+};
+
+export function isEmptyAtAllDepths(input: any): boolean {
+  if (_.isArray(input)) {
+    // If the input is an array, check if all items are empty at all depths
+    return input.every(isEmptyAtAllDepths);
+  } else if (_.isObject(input)) {
+    // If the input is an object, check if all properties are empty at all depths
+    return _.every(input, isEmptyAtAllDepths);
+  } else {
+    // If the input is not an array or object, check if it's empty
+    return _.isEmpty(input);
+  }
+}