@flightctl/ui-components 0.0.3 → 0.0.5

package/src/hooks/useNavigate.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { LinkProps as RouterLinkProps } from 'react-router-dom';
+import { useAppContext } from './useAppContext';
+
+export interface NavigateFunction {
+  (to: Route | ToObj): void;
+  (delta: number): void;
+}
+
+export enum ROUTE {
+  ROOT = 'ROOT',
+  FLEETS = 'FLEETS',
+  FLEET_CREATE = 'FLEET_CREATE',
+  FLEET_IMPORT = 'FLEET_IMPORT',
+  FLEET_DETAILS = ' FLEET_DETAILS',
+  FLEET_EDIT = 'FLEET_EDIT',
+  DEVICES = 'DEVICES',
+  DEVICE_DETAILS = 'DEVICE_DETAILS',
+  DEVICE_EDIT = 'DEVICE_EDIT',
+  REPOSITORIES = 'REPOSITORIES',
+  REPO_CREATE = 'REPO_CREATE',
+  REPO_EDIT = 'REPO_EDIT',
+  REPO_DETAILS = ' REPO_DETAILS',
+  RESOURCE_SYNC_DETAILS = ' RESOURCE_SYNC_DETAILS',
+  ENROLLMENT_REQUESTS = 'ENROLLMENT_REQUESTS',
+  ENROLLMENT_REQUEST_DETAILS = 'ENROLLMENT_REQUEST_DETAILS',
+}
+
+export type RouteWithPostfix =
+  | ROUTE.FLEET_DETAILS
+  | ROUTE.FLEET_EDIT
+  | ROUTE.REPO_DETAILS
+  | ROUTE.RESOURCE_SYNC_DETAILS
+  | ROUTE.REPO_EDIT
+  | ROUTE.DEVICE_DETAILS
+  | ROUTE.DEVICE_EDIT
+  | ROUTE.ENROLLMENT_REQUEST_DETAILS;
+export type Route = Exclude<ROUTE, RouteWithPostfix>;
+
+type ToObj = { route: RouteWithPostfix; postfix: string | undefined };
+
+export const useNavigate = () => {
+  const {
+    router: { useNavigate: useRouterNavigate, appRoutes },
+  } = useAppContext();
+
+  const navigate = useRouterNavigate();
+
+  return React.useCallback<NavigateFunction>(
+    (to: Route | number | ToObj) => {
+      if (typeof to === 'number') {
+        navigate(to);
+      } else {
+        if (toParamIsToObj(to)) {
+          const route = appRoutes[to.route];
+          navigate(`${route}/${to.postfix}`);
+        } else {
+          const route = appRoutes[to];
+          navigate(route);
+        }
+      }
+    },
+    [navigate, appRoutes],
+  );
+};
+
+export type LinkProps = Omit<RouterLinkProps, 'to'> & {
+  to: Route | ToObj;
+  query?: string;
+};
+
+const toParamIsToObj = (to: LinkProps['to']): to is ToObj => {
+  if (typeof to === 'object') {
+    return 'route' in to;
+  }
+  return false;
+};
+
+export const Link = ({ to, query, ...rest }: LinkProps) => {
+  const {
+    router: { Link: RouterLink, appRoutes },
+  } = useAppContext();
+
+  let route = '';
+  if (toParamIsToObj(to)) {
+    route = `${appRoutes[to.route]}/${to.postfix}`;
+  } else {
+    route = appRoutes[to];
+  }
+
+  return <RouterLink to={query ? `${route}?${query}` : route} {...rest} />;
+};

package/src/hooks/useTableSelect.ts

@@ -0,0 +1,48 @@
+import { getResourceId } from '../utils/resource';
+import { OnSelect } from '@patternfly/react-table';
+import { ObjectMeta } from '@flightctl/types';
+import * as React from 'react';
+
+export const useTableSelect = <R extends { kind: string; metadata: ObjectMeta }>() => {
+  const [isAllSelected, setIsAllSelected] = React.useState<boolean>(false);
+  // The elements in this "selectedResourceIds" can either be:
+  // - included in the selection, when "isAllSelected=false"
+  // - excluded from the selection, when "isAllSelected=true"
+  const [selectedResourceIds, setSelectedResourceIds] = React.useState<string[]>([]);
+
+  const hasSelectedRows = isAllSelected || selectedResourceIds.length > 0;
+
+  const setAllSelected = (isSelected: boolean) => {
+    setIsAllSelected(isSelected);
+    setSelectedResourceIds([]);
+  };
+
+  const onRowSelect =
+    (resource: R): OnSelect =>
+    (_, isSelecting) => {
+      const resourceId = getResourceId(resource);
+
+      const addElementToList = (isAllSelected && !isSelecting) || (!isAllSelected && isSelecting);
+      if (addElementToList) {
+        setSelectedResourceIds([...selectedResourceIds, resourceId]);
+      } else {
+        setSelectedResourceIds(selectedResourceIds.filter((id) => id !== resourceId));
+      }
+    };
+
+  const isRowSelected = (resource: R) => {
+    if (isAllSelected) {
+      return !selectedResourceIds.includes(getResourceId(resource));
+    } else {
+      return selectedResourceIds.includes(getResourceId(resource));
+    }
+  };
+
+  return {
+    onRowSelect,
+    hasSelectedRows,
+    isAllSelected: isAllSelected && selectedResourceIds.length === 0,
+    setAllSelected,
+    isRowSelected,
+  };
+};

package/src/hooks/useTableSort.ts

@@ -0,0 +1,42 @@
+import { TableColumn } from '../components/Table/Table';
+import { ThProps } from '@patternfly/react-table';
+import * as React from 'react';
+
+const getDefaultIndex = <D>(columns: TableColumn<D>[]) => {
+  const defaultColumnIndex = columns.findIndex((c) => c.defaultSort);
+  return defaultColumnIndex === -1 ? 0 : defaultColumnIndex;
+};
+
+export const useTableSort = <D>(data: D[], columns: TableColumn<D>[]) => {
+  const [activeSortIndex, setActiveSortIndex] = React.useState<number>(getDefaultIndex(columns));
+  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc'>('asc');
+
+  const getSortParams = React.useCallback(
+    (columnIndex: number): ThProps['sort'] =>
+      columns[columnIndex].onSort
+        ? {
+            sortBy: {
+              index: activeSortIndex,
+              direction: activeSortDirection,
+              defaultDirection: 'asc',
+            },
+            onSort: (_, index, direction) => {
+              setActiveSortIndex(index);
+              setActiveSortDirection(direction);
+            },
+            columnIndex,
+          }
+        : undefined,
+    [activeSortIndex, activeSortDirection, columns],
+  );
+
+  const sortedData = React.useMemo(() => {
+    const sorted = columns[activeSortIndex].onSort?.(data);
+    if (activeSortDirection === 'desc') {
+      sorted?.reverse();
+    }
+    return sorted || data;
+  }, [columns, data, activeSortIndex, activeSortDirection]);
+
+  return { getSortParams, sortedData };
+};

package/src/hooks/useTableTextSearch.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import fuzzy from 'fuzzysearch';
+
+export const useTableTextSearch = <D>(
+  data: D[],
+  getText: (datum: D) => Array<string | undefined>,
+): { search: string; setSearch: (value: string) => void; filteredData: D[] } => {
+  const [search, setSearch] = React.useState<string>('');
+
+  const filteredData = React.useMemo(() => {
+    return data.filter((d) => {
+      const texts = getText(d);
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      return texts.some((t) => t && fuzzy(search, t));
+    });
+  }, [data, search, getText]);
+
+  return {
+    search,
+    setSearch,
+    filteredData,
+  };
+};

package/src/hooks/useTemplateVersion.ts

@@ -0,0 +1,23 @@
+import { Device, TemplateVersion } from '@flightctl/types';
+import { useFetchPeriodically } from './useFetchPeriodically';
+import { getDeviceFleet } from '../utils/devices';
+import { getMetadataAnnotation } from '../utils/api';
+import { DeviceAnnotation } from '../types/extraTypes';
+
+export const useTemplateVersion = (
+  device: Device | undefined,
+): [boolean, TemplateVersion | undefined, boolean, unknown] => {
+  let templateVersion: string | undefined;
+  let ownerFleet: string | null | undefined;
+  if (device?.metadata) {
+    templateVersion = getMetadataAnnotation(device?.metadata, DeviceAnnotation.TemplateVersion);
+    ownerFleet = getDeviceFleet(device?.metadata);
+  }
+
+  const shouldFetchTVs = !!(templateVersion && ownerFleet);
+  const [tv, isLoading, error] = useFetchPeriodically<TemplateVersion>({
+    endpoint: shouldFetchTVs ? `fleets/${ownerFleet}/templateversions/${templateVersion}` : '',
+  });
+
+  return [shouldFetchTVs, tv, isLoading && shouldFetchTVs, error];
+};

package/src/hooks/useThemePreferences.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { useUserPreferences } from './useUserPreferences';
+
+export const THEME_LOCAL_STORAGE_KEY = 'flightctl/theme';
+const THEME_DARK_CLASS = 'pf-v5-theme-dark';
+
+export type Theme = 'dark' | 'light' | 'system';
+
+export const updateThemeClass = (htmlTagElement: HTMLElement, theme: string | null) => {
+  const systemTheme: Theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  if (theme === 'dark' || (!theme && systemTheme === 'dark')) {
+    htmlTagElement.classList.add(THEME_DARK_CLASS);
+  } else {
+    htmlTagElement.classList.remove(THEME_DARK_CLASS);
+  }
+};
+
+const getTheme = (storageTheme: string | null): Theme => {
+  switch (storageTheme) {
+    case 'dark': {
+      return 'dark';
+    }
+    case 'light': {
+      return 'light';
+    }
+    default: {
+      return 'system';
+    }
+  }
+};
+
+export const useThemePreferences = () => {
+  const htmlTagElement = document.documentElement;
+  const [value, setValue] = useUserPreferences(THEME_LOCAL_STORAGE_KEY);
+
+  React.useEffect(() => {
+    const mqListener = (e: MediaQueryListEvent) => {
+      if (e.matches) {
+        htmlTagElement.classList.add(THEME_DARK_CLASS);
+      } else {
+        htmlTagElement.classList.remove(THEME_DARK_CLASS);
+      }
+    };
+    const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');
+    if (!value) {
+      darkThemeMq.addEventListener('change', mqListener);
+    }
+    updateThemeClass(htmlTagElement, value);
+    return () => darkThemeMq.removeEventListener('change', mqListener);
+  }, [htmlTagElement, value]);
+
+  const setThemeState = React.useCallback(
+    (theme: Theme) => {
+      setValue(theme);
+      updateThemeClass(htmlTagElement, theme);
+    },
+    [htmlTagElement, setValue],
+  );
+
+  return {
+    theme: getTheme(value),
+    setTheme: setThemeState,
+  };
+};

package/src/hooks/useTranslation.ts

@@ -0,0 +1,8 @@
+// eslint-disable-next-line no-restricted-imports
+import { useTranslation as useI18nTranslation } from 'react-i18next';
+import { useAppContext } from './useAppContext';
+
+export const useTranslation = () => {
+  const { i18n } = useAppContext();
+  return useI18nTranslation(i18n.transNamespace);
+};

package/src/hooks/useUserPreferences.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export const useUserPreferences = (userPreferencesKey: string): [string | null, (value: string) => void] => {
+  const userPreferencesStorage = localStorage.getItem(userPreferencesKey);
+  const [userPreferences, setUserPreferences] = React.useState(userPreferencesStorage);
+
+  const setUserPreferencesState = React.useCallback(
+    (value: string) => {
+      localStorage.setItem(userPreferencesKey, value);
+      setUserPreferences(value);
+    },
+    [userPreferencesKey],
+  );
+
+  return [userPreferences, setUserPreferencesState];
+};

package/src/hooks/useWebSocket.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { useTranslation } from './useTranslation';
+import { useAppContext } from './useAppContext';
+
+export const useWebSocket = <T extends string>(
+  endpoint: string,
+  onMsgReceived: (msg: T) => void,
+): {
+  sendMessage: (msg: T) => void;
+  isConnecting: boolean;
+  isClosed: boolean;
+  error: unknown;
+  reconnect: VoidFunction;
+} => {
+  const {
+    fetch: { getWsEndpoint },
+  } = useAppContext();
+  const { t } = useTranslation();
+  const wsRef = React.useRef<WebSocket>();
+  const [isConnecting, setIsConnecting] = React.useState(true);
+  const [isClosed, setIsClosed] = React.useState(false);
+  const [error, setError] = React.useState<unknown>();
+  const [reset, setReset] = React.useState<number>(0);
+
+  const sendMessage = React.useCallback((data: T) => {
+    wsRef.current?.send(data);
+  }, []);
+
+  React.useEffect(() => {
+    try {
+      setIsConnecting(true);
+      setIsClosed(false);
+      const { wsEndpoint, protocols } = getWsEndpoint();
+      const ws = new WebSocket(`${wsEndpoint}${endpoint}`, protocols);
+      ws.addEventListener('open', () => setIsConnecting(false));
+      ws.addEventListener('close', () => setIsClosed(true));
+      ws.addEventListener('error', (evt) => {
+        // eslint-disable-next-line no-console
+        console.error('Error creating websocket:', evt);
+        setError(t('Websocket error occured'));
+      });
+      wsRef.current = ws;
+    } catch (err) {
+      setIsConnecting(false);
+      setError(err);
+    }
+    return () => {
+      wsRef.current?.close();
+      wsRef.current = undefined;
+    };
+  }, [endpoint, t, getWsEndpoint, reset]);
+
+  const reconnect = React.useCallback(() => {
+    wsRef.current?.close();
+    wsRef.current = undefined;
+    setReset((prev) => prev + 1);
+  }, []);
+
+  React.useEffect(() => {
+    const listener = (evt: MessageEvent<T>) => onMsgReceived(evt.data);
+    wsRef.current?.addEventListener('message', listener);
+    return () => {
+      wsRef.current?.removeEventListener('message', listener);
+    };
+  }, [onMsgReceived, reset]);
+
+  return {
+    sendMessage,
+    isConnecting,
+    isClosed,
+    error,
+    reconnect,
+  };
+};

package/src/setupTests.ts

@@ -0,0 +1,21 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+i18n
+  // pass the i18n instance to react-i18next
+  .use(initReactI18next)
+  // init i18next
+  .init({
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+    lng: 'en',
+    ns: 'translation',
+    resources: {
+      en: {
+        // eslint-disable-next-line
+        translation: require('../../i18n/locales/en/translation.json'),
+      },
+    },
+  });

package/src/tests/test-utils.tsx

@@ -0,0 +1,21 @@
+import { RenderResult, render } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import '@testing-library/jest-dom';
+
+expect.extend(toHaveNoViolations);
+
+const customRender = (ui: React.ReactNode, options?: object): RenderResult =>
+  // eslint-disable-next-line
+  render(ui as any, { wrapper: BrowserRouter, ...options });
+
+export const checkAccessibility = async (container: HTMLElement | string, options?: object) => {
+  const results = await axe(container, options);
+  expect(results).toHaveNoViolations();
+};
+
+// re-export everything
+export * from '@testing-library/react';
+
+// override render method
+export { customRender as render };

package/src/types/deviceSpec.ts

@@ -0,0 +1,110 @@
+import {
+  ConfigProviderSpec,
+  GitConfigProviderSpec,
+  HttpConfigProviderSpec,
+  InlineConfigProviderSpec,
+  KubernetesSecretProviderSpec,
+} from '@flightctl/types';
+
+export enum ConfigType {
+  GIT = 'git',
+  HTTP = 'http',
+  K8S_SECRET = 'secret',
+  INLINE = 'inline',
+}
+
+export type ConfigTemplate = {
+  type: ConfigType;
+  name: string;
+};
+
+export type GitConfigTemplate = ConfigTemplate & {
+  type: ConfigType.GIT;
+  repository: string;
+  targetRevision: string;
+  path: string;
+  mountPath?: string;
+};
+
+export const isGitConfigTemplate = (configTemplate: ConfigTemplate): configTemplate is GitConfigTemplate =>
+  configTemplate.type === ConfigType.GIT;
+
+export const isGitProviderSpec = (providerSpec: ConfigProviderSpec): providerSpec is GitConfigProviderSpec =>
+  'gitRef' in providerSpec;
+
+export type ConfigSourceProvider =
+  | GitConfigProviderSpec
+  | KubernetesSecretProviderSpec
+  | InlineConfigProviderSpec
+  | HttpConfigProviderSpec;
+
+export type RepoConfig = GitConfigProviderSpec | HttpConfigProviderSpec;
+
+export const isRepoConfig = (config: ConfigSourceProvider): config is RepoConfig =>
+  isGitProviderSpec(config) || isHttpProviderSpec(config);
+
+const hasTemplateVariables = (str: string) => /device.metadata/.test(str);
+
+export const getConfigFullRepoUrl = (config: RepoConfig, repositoryUrl: string) => {
+  let relativePath: string = '';
+  if (isHttpProviderSpec(config)) {
+    relativePath = (config.httpRef.suffix || '').replace(/^\//g, ''); // remove the leading slash
+  } else if (isGitProviderSpec(config) && /github|gitlab/.test(repositoryUrl)) {
+    const configPath = config.gitRef.path.replace(/^\//g, ''); // remove the leading slash
+    const configParts = configPath.split('/');
+    const lastPart = configParts[configParts.length - 1];
+
+    // Extension-less files cannot be identified as such. GitHub and Gitlab both redirect to the correct URL to show the file contents
+    const fileOrDir = lastPart.includes('.') ? 'blob' : 'tree';
+    relativePath = `${fileOrDir}/${config.gitRef.targetRevision}/${configPath}`;
+  }
+
+  if (relativePath && !hasTemplateVariables(relativePath)) {
+    return `${repositoryUrl}/${relativePath}`;
+  }
+  // We return just the base repository URL as a fallback
+  return repositoryUrl;
+};
+
+export const getRepoName = (config: RepoConfig) =>
+  isGitProviderSpec(config) ? config.gitRef.repository : config.httpRef.repository;
+
+export type KubeSecretTemplate = ConfigTemplate & {
+  type: ConfigType.K8S_SECRET;
+  secretName: string;
+  secretNs: string;
+  mountPath: string;
+};
+
+export const isKubeSecretTemplate = (configTemplate: ConfigTemplate): configTemplate is KubeSecretTemplate =>
+  configTemplate.type === ConfigType.K8S_SECRET;
+
+export const isKubeProviderSpec = (providerSpec: ConfigProviderSpec): providerSpec is KubernetesSecretProviderSpec =>
+  'secretRef' in providerSpec;
+
+export type InlineConfigTemplate = ConfigTemplate & {
+  type: ConfigType.INLINE;
+  files: Array<{ path: string; content: string; base64: boolean; permissions?: string; user?: string; group?: string }>;
+};
+
+export const isInlineConfigTemplate = (configTemplate: ConfigTemplate): configTemplate is InlineConfigTemplate =>
+  configTemplate.type === ConfigType.INLINE;
+
+export const isInlineProviderSpec = (providerSpec: ConfigProviderSpec): providerSpec is InlineConfigProviderSpec =>
+  'inline' in providerSpec;
+
+export type HttpConfigTemplate = ConfigTemplate & {
+  type: ConfigType.HTTP;
+  repository: string;
+  validationSuffix: string;
+  suffix: string;
+  filePath: string;
+};
+
+export const isHttpConfigTemplate = (configTemplate: ConfigTemplate): configTemplate is HttpConfigTemplate =>
+  configTemplate.type === ConfigType.HTTP;
+
+export const isHttpProviderSpec = (providerSpec: ConfigProviderSpec): providerSpec is HttpConfigProviderSpec =>
+  'httpRef' in providerSpec;
+
+export type SpecConfigTemplate = GitConfigTemplate | HttpConfigTemplate | KubeSecretTemplate | InlineConfigTemplate;

package/src/types/extraTypes.ts

@@ -0,0 +1,52 @@
+import { ConditionType, Device, EnrollmentRequest, Fleet, ResourceSync } from '@flightctl/types';
+
+export enum FlightControlMetrics {
+  ACTIVE_AGENT_COUNT_METRIC = 'flightctl_devicesimulator_active_agent_count',
+  TOTAL_API_REQUESTS_METRIC = 'flightctl_devicesimulator_api_requests_total',
+}
+
+export type MetricValue = [number, number | string];
+
+export interface PrometheusMetric {
+  metric: {
+    __name__: FlightControlMetrics;
+    job: string;
+  };
+  value?: MetricValue;
+  values?: Array<MetricValue>;
+}
+
+export interface FlightCtlLabel {
+  key: string;
+  value?: string;
+  isDefault?: boolean;
+}
+
+export interface ApiQuery {
+  endpoint: string;
+}
+
+export interface MetricsQuery {
+  metrics: FlightControlMetrics[];
+  period: string;
+}
+
+export type FleetConditionType =
+  | ConditionType.FleetOverlappingSelectors
+  | ConditionType.FleetValid
+  | 'Invalid'
+  | 'SyncPending';
+
+export type FlightControlQuery = ApiQuery | MetricsQuery;
+
+export enum DeviceAnnotation {
+  TemplateVersion = 'fleet-controller/templateVersion',
+  RenderedVersion = 'device-controller/renderedVersion',
+}
+
+export const isEnrollmentRequest = (resource: Device | EnrollmentRequest): resource is EnrollmentRequest =>
+  resource.kind === 'EnrollmentRequest';
+
+export type AnnotationType = DeviceAnnotation; // Add more types when they are added to the API
+
+export const isFleet = (resource: ResourceSync | Fleet): resource is Fleet => resource.kind === 'Fleet';

package/src/types/typeUtils.ts

@@ -0,0 +1,7 @@
+export function isPromiseFulfilled<T>(result: PromiseSettledResult<T>): result is PromiseFulfilledResult<T> {
+  return result.status === 'fulfilled';
+}
+
+export function isPromiseRejected(result: PromiseSettledResult<unknown>): result is PromiseRejectedResult {
+  return result.status === 'rejected';
+}

package/src/typings.d.ts

@@ -0,0 +1,12 @@
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.svg';
+declare module '*.css';
+declare module '*.wav';
+declare module '*.mp3';
+declare module '*.m4a';
+declare module '*.rdf';
+declare module '*.ttl';
+declare module '*.pdf';