@flightctl/ui-components 0.0.4 → 0.0.5

package/src/components/modals/massModals/MassDeleteRepositoryModal/MassDeleteRepositoryModal.tsx

@@ -0,0 +1,172 @@
+import { useFetch } from '../../../../hooks/useFetch';
+import { getErrorMessage } from '../../../../utils/error';
+import { Alert, Button, Modal, Progress, ProgressMeasureLocation, Stack, StackItem } from '@patternfly/react-core';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { Repository, ResourceSyncList } from '@flightctl/types';
+import * as React from 'react';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { isPromiseRejected } from '../../../../types/typeUtils';
+import { getApiListCount } from '../../../../utils/api';
+
+type MassDeleteRepositoryModalProps = {
+  onClose: VoidFunction;
+  onDeleteSuccess: VoidFunction;
+  repositories: Repository[];
+};
+
+type ResourceSyncCountMap = Record<string, number>;
+
+const MassDeleteRepositoryModal: React.FC<MassDeleteRepositoryModalProps> = ({
+  onClose,
+  onDeleteSuccess,
+  repositories,
+}) => {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [errors, setErrors] = React.useState<string[]>();
+  const [resourceSyncCount, setResourceSyncCount] = React.useState<ResourceSyncCountMap>({});
+  const isFirstCountReq = Object.keys(resourceSyncCount).length === 0;
+  const [progress, setProgress] = React.useState(0);
+  const [progressTotal, setProgressTotal] = React.useState(0);
+  const { get, remove } = useFetch();
+
+  const fetchResourceSyncsCount = React.useCallback(async () => {
+    setIsLoading(isFirstCountReq);
+
+    const rsCount = {};
+    const promises = repositories.map(async (r) => {
+      const repositoryId = r.metadata.name || '';
+      const resourceSyncs = await get<ResourceSyncList>(`resourcesyncs?repository=${repositoryId}&limit=1`);
+      rsCount[repositoryId] = getApiListCount(resourceSyncs);
+    });
+    await Promise.allSettled(promises);
+
+    setResourceSyncCount(rsCount);
+    setIsLoading(false);
+  }, [get, repositories, isFirstCountReq]);
+
+  const deleteRepositories = async () => {
+    setIsDeleting(true);
+    setProgress(0);
+    const promises = repositories.map(async (r) => {
+      const repositoryId = r.metadata.name || '';
+      const resourceSyncs = await get<ResourceSyncList>(`resourcesyncs?repository=${repositoryId}`);
+      const rsyncPromises = resourceSyncs.items.map((rsync) => remove(`resourcesyncs/${rsync.metadata.name}`));
+      const rsyncResults = await Promise.allSettled(rsyncPromises);
+      const rejectedResults = rsyncResults.filter(isPromiseRejected);
+      if (rejectedResults.length) {
+        throw new Error(
+          t('Failed to delete resource syncs. {{errorDetails}}', {
+            errorDetails: getErrorMessage(rejectedResults[0].reason),
+          }),
+        );
+      }
+      await remove(`repositories/${repositoryId}`);
+      setProgress((p) => p + 1);
+    });
+    setProgressTotal(promises.length);
+    const results = await Promise.allSettled(promises);
+    setIsDeleting(false);
+
+    const rejectedResults = results.filter(isPromiseRejected);
+
+    if (rejectedResults.length) {
+      setErrors(rejectedResults.map((r) => getErrorMessage(r.reason)));
+    } else {
+      onDeleteSuccess();
+    }
+  };
+
+  React.useEffect(() => {
+    void fetchResourceSyncsCount();
+  }, [fetchResourceSyncsCount]);
+
+  return (
+    <Modal
+      title={t('Delete repositories ?')}
+      isOpen
+      onClose={onClose}
+      showClose={!isDeleting}
+      variant="medium"
+      titleIconVariant="warning"
+      actions={[
+        <Button
+          key="delete"
+          variant="danger"
+          onClick={deleteRepositories}
+          isLoading={isLoading || isDeleting}
+          isDisabled={isLoading || isDeleting}
+        >
+          {t('Delete repositories')}
+        </Button>,
+        <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleting}>
+          {t('Cancel')}
+        </Button>,
+      ]}
+    >
+      <Stack hasGutter>
+        {isLoading && <>{t('Please wait while the repository details are loading')}</>}
+        {!isLoading && (
+          <>
+            <StackItem>{t('Are you sure you want to delete the following repositories ?')}</StackItem>
+            <StackItem>
+              <Alert variant="warning" title={t('Resource syncs will also be deleted')} isInline>
+                {t(
+                  'Note that all the resource syncs of the selected repositories will also be deleted. Any fleet that is being managed by those resource syncs will become unmanaged.',
+                )}
+              </Alert>
+            </StackItem>
+            <StackItem>
+              <Table>
+                <Thead>
+                  <Tr>
+                    <Th>{t('Repository name')}</Th>
+                    <Th>{t('# Resource syncs')}</Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {repositories.map((repository) => {
+                    const repositoryId = repository.metadata.name || '';
+                    return (
+                      <Tr key={repositoryId}>
+                        <Td dataLabel={t('Repository name')}>{repositoryId}</Td>
+                        <Td dataLabel={t('# Resource syncs')}>{resourceSyncCount[repositoryId] || '0'}</Td>
+                      </Tr>
+                    );
+                  })}
+                </Tbody>
+              </Table>
+            </StackItem>
+          </>
+        )}
+        {isDeleting && (
+          <StackItem>
+            <Progress
+              value={progress}
+              min={0}
+              max={progressTotal}
+              title={t('Deleting...')}
+              measureLocation={ProgressMeasureLocation.top}
+              label={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
+              valueText={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
+            />
+          </StackItem>
+        )}
+        {errors?.length && (
+          <StackItem>
+            <Alert isInline variant="danger" title={t('An error occurred')}>
+              <Stack hasGutter>
+                {errors.map((e, index) => (
+                  <StackItem key={index}>{e}</StackItem>
+                ))}
+              </Stack>
+            </Alert>
+          </StackItem>
+        )}
+      </Stack>
+    </Modal>
+  );
+};
+
+export default MassDeleteRepositoryModal;

package/src/components/modals/massModals/MassDeleteResourceSyncModal/MassDeleteResourceSyncModal.tsx

@@ -0,0 +1,116 @@
+import { Alert, Button, Modal, Progress, ProgressMeasureLocation, Stack, StackItem } from '@patternfly/react-core';
+import { ResourceSync } from '@flightctl/types';
+import * as React from 'react';
+import { getErrorMessage } from '../../../../utils/error';
+import { useFetch } from '../../../../hooks/useFetch';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { isPromiseRejected } from '../../../../types/typeUtils';
+
+type MassDeleteResourceSyncModalProps = {
+  onClose: VoidFunction;
+  resources: ResourceSync[];
+  onDeleteSuccess: VoidFunction;
+};
+
+const MassDeleteResourceSyncModal: React.FC<MassDeleteResourceSyncModalProps> = ({
+  onClose,
+  resources,
+  onDeleteSuccess,
+}) => {
+  const { t } = useTranslation();
+  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [progress, setProgress] = React.useState(0);
+  const [progressTotal, setProgressTotal] = React.useState(0);
+  const [errors, setErrors] = React.useState<string[]>();
+  const { remove } = useFetch();
+
+  const deleteResources = async () => {
+    setIsDeleting(true);
+    setProgress(0);
+    const promises = resources.map(async (r) => {
+      await remove(`resourcesyncs/${r.metadata.name}`);
+      setProgress((p) => p + 1);
+    });
+    setProgressTotal(promises.length);
+    const results = await Promise.allSettled(promises);
+    setIsDeleting(false);
+
+    const rejectedResults = results.filter(isPromiseRejected);
+
+    if (rejectedResults.length) {
+      setErrors(rejectedResults.map((r) => getErrorMessage(r.reason)));
+    } else {
+      onDeleteSuccess();
+    }
+  };
+  return (
+    <Modal
+      title={t('Delete resource syncs')}
+      isOpen
+      onClose={onClose}
+      showClose={!isDeleting}
+      variant="medium"
+      actions={[
+        <Button key="delete" variant="danger" onClick={deleteResources} isLoading={isDeleting} isDisabled={isDeleting}>
+          {t('Delete')}
+        </Button>,
+        <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleting}>
+          {t('Cancel')}
+        </Button>,
+      ]}
+    >
+      <Stack hasGutter>
+        <StackItem>{t('Are you sure you want to delete the following resource syncs ?')}</StackItem>
+        <StackItem>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>{t('Name')}</Th>
+                <Th>{t('Revision')}</Th>
+                <Th>{t('Path')}</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {resources.map((resource) => {
+                return (
+                  <Tr key={resource.metadata.name}>
+                    <Td dataLabel={t('Name')}>{resource.metadata.name || '-'}</Td>
+                    <Td dataLabel={t('Target revision')}>{resource.spec.targetRevision || '-'}</Td>
+                    <Td dataLabel={t('Path')}>{resource.spec.path || '-'}</Td>
+                  </Tr>
+                );
+              })}
+            </Tbody>
+          </Table>
+        </StackItem>
+        {isDeleting && (
+          <StackItem>
+            <Progress
+              value={progress}
+              min={0}
+              max={progressTotal}
+              title={t('Deleting...')}
+              measureLocation={ProgressMeasureLocation.top}
+              label={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
+              valueText={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
+            />
+          </StackItem>
+        )}
+        {errors?.length && (
+          <StackItem>
+            <Alert isInline variant="danger" title={t('An error occurred')}>
+              <Stack hasGutter>
+                {errors.map((e, index) => (
+                  <StackItem key={index}>{e}</StackItem>
+                ))}
+              </Stack>
+            </Alert>
+          </StackItem>
+        )}
+      </Stack>
+    </Modal>
+  );
+};
+
+export default MassDeleteResourceSyncModal;

package/src/constants.ts

@@ -0,0 +1,4 @@
+const APP_TITLE = 'Device management service';
+const API_VERSION = 'v1alpha1';
+
+export { APP_TITLE, API_VERSION };

package/src/hooks/useAppContext.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import {
+  Link,
+  NavLink,
+  Navigate,
+  Route,
+  NavigateFunction as RouterNavigateFunction,
+  Routes,
+  useBlocker,
+  useLocation,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from 'react-router-dom';
+import { ROUTE } from './useNavigate';
+import { PatchRequest } from '@flightctl/types';
+
+export const appRoutes = {
+  [ROUTE.ROOT]: '/',
+  [ROUTE.FLEETS]: '/devicemanagement/fleets',
+  [ROUTE.FLEET_DETAILS]: '/devicemanagement/fleets',
+  [ROUTE.FLEET_CREATE]: '/devicemanagement/fleets/create',
+  [ROUTE.FLEET_EDIT]: '/devicemanagement/fleets/edit',
+  [ROUTE.FLEET_IMPORT]: '/devicemanagement/fleets/import',
+  [ROUTE.DEVICES]: '/devicemanagement/devices',
+  [ROUTE.DEVICE_DETAILS]: '/devicemanagement/devices',
+  [ROUTE.DEVICE_EDIT]: '/devicemanagement/devices/edit',
+  [ROUTE.REPO_CREATE]: '/devicemanagement/repositories/create',
+  [ROUTE.REPO_EDIT]: '/devicemanagement/repositories/edit',
+  [ROUTE.REPO_DETAILS]: '/devicemanagement/repositories',
+  [ROUTE.REPOSITORIES]: '/devicemanagement/repositories',
+  [ROUTE.RESOURCE_SYNC_DETAILS]: '/devicemanagement/resourcesyncs',
+  [ROUTE.ENROLLMENT_REQUESTS]: '/devicemanagement/enrollmentrequests',
+  [ROUTE.ENROLLMENT_REQUEST_DETAILS]: '/devicemanagement/enrollmentrequests',
+};
+
+export type NavLinkFC = React.FC<{ to: string; children: (props: { isActive: boolean }) => React.ReactNode }>;
+export type PromptFC = React.FC<{ message: string }>;
+
+export type AppContextProps = {
+  appType: 'standalone' | 'ocp' | 'aap';
+  qcow2ImgUrl: string | undefined;
+  bootcImgUrl: string | undefined;
+  user?: string; // auth?.user?.profile.preferred_username
+  i18n: {
+    transNamespace?: string;
+  };
+  router: {
+    useNavigate: () => RouterNavigateFunction;
+    Link: typeof Link;
+    appRoutes: Record<ROUTE, string>;
+    NavLink: NavLinkFC;
+    useSearchParams: typeof useSearchParams;
+    useBlocker?: typeof useBlocker;
+    useParams: typeof useParams;
+    Navigate: typeof Navigate;
+    Route: typeof Route;
+    Routes: typeof Routes;
+    useLocation: typeof useLocation;
+    Prompt?: PromptFC;
+  };
+  fetch: {
+    getWsEndpoint: () => { wsEndpoint: string; protocols: string[] };
+    get: <R>(kind: string, abortSignal?: AbortSignal) => Promise<R>;
+    post: <R>(kind: string, data: R, abortSignal?: AbortSignal) => Promise<R>;
+    remove: <R>(kind: string, abortSignal?: AbortSignal) => Promise<R>;
+    patch: <R>(kind: string, patches: PatchRequest, abortSignal?: AbortSignal) => Promise<R>;
+  };
+  metrics: {
+    get: <R>(query: string, abortSignal?: AbortSignal) => Promise<R>;
+  };
+};
+
+export const AppContext = React.createContext<AppContextProps>({
+  appType: 'standalone',
+  qcow2ImgUrl: undefined,
+  bootcImgUrl: undefined,
+  router: {
+    useNavigate,
+    Link,
+    appRoutes,
+    NavLink: NavLink as NavLinkFC,
+    useParams,
+    useBlocker,
+    useSearchParams,
+    Route,
+    Routes,
+    Navigate,
+    useLocation,
+  },
+  i18n: {
+    transNamespace: undefined,
+  },
+  /* eslint-disable */
+  fetch: {
+    getWsEndpoint: () => ({ wsEndpoint: '', protocols: [''] }),
+    get: async () => ({}) as any,
+    post: async () => ({}) as any,
+    remove: async () => ({}) as any,
+    patch: async () => ({}) as any,
+  },
+  metrics: {
+    get: async () => ({}) as any,
+  },
+  /* eslint-enable */
+});
+
+export const useAppContext = () => React.useContext(AppContext);

package/src/hooks/useDeviceLabelMatch.ts

@@ -0,0 +1,101 @@
+import * as React from 'react';
+
+import { Fleet, FleetList } from '@flightctl/types';
+import { FlightCtlLabel } from '../types/extraTypes';
+import { useFetch } from './useFetch';
+import { getErrorMessage } from '../utils/error';
+
+export type DeviceMatchStatus = {
+  status:
+    | 'unchecked'
+    | 'unchecked--invalid'
+    | 'checking'
+    | 'checked--error'
+    | 'checked--unique'
+    | 'checked--multiple'
+    | 'checked--empty';
+  detail?: string;
+};
+
+type MatchLabelsFn = (labels: FlightCtlLabel[], hasErrors: boolean) => void;
+
+const getMatchResult = (fleets: Fleet[], deviceLabels: FlightCtlLabel[]): DeviceMatchStatus => {
+  const matchingFleets = fleets.filter((fleet) => {
+    const fleetMatch = fleet.spec.selector?.matchLabels || {};
+
+    if (Object.keys(fleetMatch).length === 0) {
+      // Fleets with no label selector don't match any devices
+      return false;
+    }
+    return Object.entries(fleetMatch).every(([fleetMatchKey, fleetMatchValue]) => {
+      const matchingDeviceLabel = deviceLabels.find((dLabel) => dLabel.key === fleetMatchKey);
+      return matchingDeviceLabel && (matchingDeviceLabel.value || '') === (fleetMatchValue || '');
+    });
+  });
+
+  const matchCount = matchingFleets?.length || 0;
+
+  switch (matchCount) {
+    case 0:
+      return { status: 'checked--empty' };
+    case 1:
+      return { status: 'checked--unique', detail: matchingFleets[0].metadata.name };
+    default:
+      return { status: 'checked--multiple' };
+  }
+};
+
+const useDeviceLabelMatch = (): [MatchLabelsFn, DeviceMatchStatus] => {
+  const { get } = useFetch();
+  const abortControllerRef = React.useRef<AbortController>();
+
+  const [matchStatus, setMatchStatus] = React.useState<DeviceMatchStatus>({
+    status: 'unchecked',
+    detail: '',
+  });
+
+  const matchLabelsFn = React.useCallback(
+    (newLabels: FlightCtlLabel[], hasErrors: boolean) => {
+      const matchDeviceLabels = async () => {
+        // TODO PoC implementation, we're missing the ability of filtering in the "fleets" endpoint.
+        let result: DeviceMatchStatus = {
+          status: 'unchecked',
+          detail: '',
+        };
+
+        try {
+          if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+          }
+          abortControllerRef.current = new AbortController();
+
+          const allFleets = await get<FleetList>('fleets', abortControllerRef.current.signal);
+
+          result = getMatchResult(allFleets.items ?? [], newLabels);
+        } catch (e) {
+          // aborting fetch trows 'AbortError', we can ignore it
+          if (!abortControllerRef.current?.signal.aborted) {
+            result = { status: 'checked--error', detail: getErrorMessage(e) };
+          }
+        }
+        setMatchStatus(result);
+      };
+      if (newLabels.length === 0) {
+        setMatchStatus({
+          status: 'unchecked',
+        });
+      } else if (hasErrors) {
+        setMatchStatus({
+          status: 'unchecked--invalid',
+        });
+      } else {
+        void matchDeviceLabels();
+      }
+    },
+    [get],
+  );
+
+  return [matchLabelsFn, matchStatus];
+};
+
+export default useDeviceLabelMatch;

package/src/hooks/useDocumentTitle.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+// a custom hook for setting the page title
+export function useDocumentTitle(title: string) {
+  React.useEffect(() => {
+    const originalTitle = document.title;
+    document.title = title;
+    return () => {
+      document.title = originalTitle;
+    };
+  }, [title]);
+}

package/src/hooks/useFetch.ts

@@ -0,0 +1,10 @@
+import { useAppContext } from './useAppContext';
+
+export const useFetch = () => {
+  const { fetch, metrics } = useAppContext();
+
+  return {
+    ...fetch,
+    getMetrics: metrics.get,
+  };
+};

package/src/hooks/useFetchPeriodically.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { FlightControlQuery } from '../types/extraTypes';
+import { getQueryStringHash, getRequestQueryString, isApiQuery } from '../utils/api';
+
+import { useFetch } from './useFetch';
+
+const TIMEOUT = 10000;
+
+export const useFetchPeriodically = <R>(
+  query: FlightControlQuery,
+): [R | undefined, boolean, unknown, VoidFunction, boolean] => {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [isUpdating, setIsUpdating] = React.useState(false);
+  const [data, setData] = React.useState<R>();
+  const [error, setError] = React.useState<unknown>();
+  const [forceUpdate, setForceUpdate] = React.useState(0);
+  const ref = React.useRef(0);
+  const prevResolvedQueryHash = React.useRef<string>();
+
+  const { get, getMetrics } = useFetch();
+
+  // When the query parameters change, the hash will too. We must perform a refetch outside the timeout loop
+  const queryStringHash = getQueryStringHash(query);
+  const isAPI = isApiQuery(query);
+
+  // Callback that generates the updated query for refreshes. It may provide updated values for parameters such as from/to for metric queries
+  const getRequestQuery = React.useCallback(() => getRequestQueryString(query), [query]);
+
+  React.useEffect(() => {
+    let abortController: AbortController;
+
+    const fetchPeriodically = async (id: number) => {
+      while (ref.current === id) {
+        const requestQuery = getRequestQuery();
+        if (requestQuery) {
+          try {
+            abortController = new AbortController();
+            if (id > 0 && prevResolvedQueryHash.current !== queryStringHash) {
+              setIsUpdating(true);
+            }
+
+            const fetchFn = isAPI ? get : getMetrics;
+            const data = await fetchFn(requestQuery, abortController.signal);
+            if (isLoading) {
+              setIsLoading(false);
+            }
+            setIsUpdating(false);
+            // eslint-disable-next-line
+            setData(isAPI ? data : (data as any).data.result);
+            setError(undefined);
+          } catch (err) {
+            // aborting fetch trows 'AbortError', we can ignore it
+            if (abortController.signal.aborted) {
+              return;
+            }
+            setError(err);
+            setIsLoading(false);
+            setIsUpdating(false);
+          }
+        } else {
+          setIsLoading(false);
+          setError(undefined);
+          setData(undefined);
+        }
+        prevResolvedQueryHash.current = queryStringHash;
+        await new Promise((resolve) => setTimeout(resolve, TIMEOUT));
+      }
+    };
+
+    fetchPeriodically(ref.current);
+    return () => {
+      // eslint-disable-next-line
+      ref.current++;
+      abortController?.abort();
+    };
+    // eslint-disable-next-line
+  }, [get, getMetrics, forceUpdate, queryStringHash, isAPI]);
+
+  const refetch = React.useCallback(() => setForceUpdate((val) => val + 1), []);
+
+  return [data, isLoading, error, refetch, isUpdating];
+};