@flightctl/ui-components 0.9.2 → 0.10.0-rc1

package/src/components/modals/massModals/ResumeDevicesModal/MassResumeDevicesModal.tsx

@@ -0,0 +1,465 @@
+import * as React from 'react';
+import {
+  Alert,
+  Button,
+  FormGroup,
+  MenuToggle,
+  MenuToggleElement,
+  Modal,
+  ModalVariant,
+  Radio,
+  Select,
+  SelectList,
+  SelectOption,
+  Spinner,
+  Stack,
+  StackItem,
+  Text,
+  TextContent,
+} from '@patternfly/react-core';
+import { Trans } from 'react-i18next';
+import { Formik, useFormikContext } from 'formik';
+import { DeviceList, DeviceResumeRequest, DeviceResumeResponse, Fleet } from '@flightctl/types';
+
+import { FlightCtlLabel } from '../../../../types/extraTypes';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { useFetch } from '../../../../hooks/useFetch';
+import LabelsField from '../../../form/LabelsField';
+import FlightCtlForm from '../../../form/FlightCtlForm';
+import { createMassResumeValidationSchema } from '../../../form/validations';
+import { getErrorMessage } from '../../../../utils/error';
+import { commonQueries } from '../../../../utils/query';
+import { getApiListCount } from '../../../../utils/api';
+import { fromAPILabel, labelToExactApiMatchString } from '../../../../utils/labels';
+import { useFleets } from '../../../Fleet/useFleets';
+import ResumeAllDevicesConfirmationDialog from './ResumeAllDevicesConfirmationDialog';
+
+// Adds an artificial delay to make sure that the user notices the count is refreshing.
+// This is specially needed when users switch between modes, and the selection for the new mode is already valid.
+const showSpinnerBriefly = () => new Promise((resolve) => setTimeout(resolve, 450));
+
+type MassResumeFormValues = {
+  mode: SelectionMode;
+  fleetId: string;
+  labels: FlightCtlLabel[];
+};
+
+interface MassResumeDevicesModalProps {
+  onClose: (hasResumed?: boolean) => void;
+}
+
+enum SelectionMode {
+  FLEET = 'fleet',
+  LABELS = 'labels',
+  ALL = 'all',
+}
+
+const getSelectedFleetLabels = (fleets: Fleet[], fleetId: string) => {
+  const selectedFleet = fleets.find((fleet) => fleet.metadata.name === fleetId);
+  if (!selectedFleet) {
+    throw new Error('Selected fleet not found');
+  }
+  return fromAPILabel(selectedFleet.spec.selector?.matchLabels || {});
+};
+
+const MassResumeDevicesModalContent = ({ onClose }: MassResumeDevicesModalProps) => {
+  const { t } = useTranslation();
+  const { get, post } = useFetch();
+  const { values, setFieldValue, isValid, dirty } = useFormikContext<MassResumeFormValues>();
+
+  const { fleets, isLoading: fleetsLoading } = useFleets({});
+  const [isFleetListOpen, setIsFleetSelectOpen] = React.useState(false);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [submitError, setSubmitError] = React.useState<string | undefined>(undefined);
+  const [showResumeAllConfirmation, setShowResumeAllConfirmation] = React.useState(false);
+
+  // Resume result state
+  const [resumedCount, setResumedCount] = React.useState<number | undefined>(undefined);
+
+  // Device count state
+  const [deviceCountNum, setDeviceCountNum] = React.useState<number>(0);
+  const [isCountLoading, setIsCountLoading] = React.useState(false);
+  const [countError, setCountError] = React.useState<string | null>(null);
+
+  const hasResumedAtLeastOne = resumedCount !== undefined && resumedCount > 0;
+  const hasResumedAllExpected = deviceCountNum > 0 && resumedCount === deviceCountNum;
+  const isSubmitEnabled =
+    (values.mode === SelectionMode.ALL || deviceCountNum > 0) &&
+    !isSubmitting &&
+    !isCountLoading &&
+    isValid &&
+    resumedCount === undefined;
+  const deviceCount = deviceCountNum.toString();
+
+  const loadMatchingDevicesCount = React.useCallback(
+    async (criteria: { fleetId?: string; labels?: FlightCtlLabel[]; all?: boolean }) => {
+      setIsCountLoading(true);
+      setCountError(null);
+      setDeviceCountNum(0);
+
+      try {
+        let queryEndpoint: string;
+
+        if (criteria.all) {
+          queryEndpoint = commonQueries.getAllSuspendedDevicesCount();
+        } else {
+          const fleetLabels = criteria.fleetId
+            ? getSelectedFleetLabels(fleets, criteria.fleetId)
+            : criteria.labels || [];
+          if (fleetLabels.length === 0) {
+            throw new Error('Invalid criteria: must provide either fleetId or labels');
+          }
+          queryEndpoint = commonQueries.getSuspendedDeviceCountByLabels(fleetLabels);
+        }
+
+        const deviceResult = await get<DeviceList>(queryEndpoint);
+        await showSpinnerBriefly();
+        setDeviceCountNum(getApiListCount(deviceResult) || 0);
+      } catch (error) {
+        await showSpinnerBriefly();
+        setCountError(t('Failed to obtain the number of matching devices'));
+      } finally {
+        setIsCountLoading(false);
+      }
+    },
+    [get, t, fleets],
+  );
+
+  const performResume = async () => {
+    setIsSubmitting(true);
+    setSubmitError(undefined);
+
+    try {
+      let labels: FlightCtlLabel[];
+
+      if (values.mode === SelectionMode.ALL) {
+        labels = [];
+      } else {
+        if (values.mode === SelectionMode.FLEET) {
+          labels = getSelectedFleetLabels(fleets, values.fleetId);
+        } else {
+          labels = values.labels;
+        }
+        // This shouldn't happen due to validations, but since an empty label selector would target all existing devices,
+        // wake sure the UI does't accidentally submit a request with an empty selector
+        const emptySelection = labels.every((label) => label.key === '');
+        if (labels.length === 0 || emptySelection) {
+          throw new Error('The current selection would target all devices.');
+        }
+      }
+
+      const resumeRequest: DeviceResumeRequest = {
+        labelSelector: labels.map((label) => labelToExactApiMatchString(label)).join(','),
+      };
+
+      const resumeResponse = await post<DeviceResumeRequest, DeviceResumeResponse>(
+        'deviceactions/resume',
+        resumeRequest,
+      );
+      setResumedCount(resumeResponse.resumedDevices || 0);
+    } catch (error) {
+      setSubmitError(getErrorMessage(error));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleResume = () => {
+    if (values.mode === SelectionMode.ALL) {
+      setShowResumeAllConfirmation(true);
+    } else {
+      performResume();
+    }
+  };
+
+  const handleSelectionModeChanged = (mode: SelectionMode) => {
+    setFieldValue('mode', mode);
+
+    if (mode === SelectionMode.ALL) {
+      // Load count for all suspended devices
+      loadMatchingDevicesCount({ all: true });
+    } else if (mode === SelectionMode.FLEET && values.fleetId) {
+      // If switching to a mode that already had a valid selection, we refresh the count
+      loadMatchingDevicesCount({ fleetId: values.fleetId });
+    } else if (mode === SelectionMode.LABELS && values.labels.length > 0) {
+      loadMatchingDevicesCount({ labels: values.labels });
+    } else {
+      // Clear the count if there isn't a valid selection
+      setDeviceCountNum(0);
+      setCountError(null);
+      setIsCountLoading(false);
+    }
+  };
+
+  const handleFleetSelected = (fleetId: string) => {
+    setFieldValue('fleetId', fleetId);
+    setIsFleetSelectOpen(false);
+
+    if (fleetId) {
+      loadMatchingDevicesCount({ fleetId });
+    } else {
+      setDeviceCountNum(0);
+      setCountError(null);
+    }
+  };
+
+  const handleLabelsChanged = (newLabels: FlightCtlLabel[], hasErrors: boolean) => {
+    if (hasErrors || newLabels.length === 0) {
+      setDeviceCountNum(0);
+      setCountError(null);
+      return;
+    } else if (newLabels.length > 0) {
+      loadMatchingDevicesCount({ labels: newLabels });
+    }
+  };
+
+  return (
+    <Modal
+      variant={ModalVariant.medium}
+      title={t('Resume devices')}
+      isOpen
+      onClose={() => onClose(hasResumedAtLeastOne)}
+      actions={[
+        <Button
+          key="resume"
+          variant="primary"
+          onClick={handleResume}
+          isLoading={isSubmitting}
+          isDisabled={!isSubmitEnabled}
+        >
+          {t('Resume selection')}
+        </Button>,
+        <Button key="cancel" variant="link" onClick={() => onClose(hasResumedAtLeastOne)} isDisabled={isSubmitting}>
+          {hasResumedAtLeastOne ? t('Close') : t('Cancel')}
+        </Button>,
+      ]}
+    >
+      <Stack hasGutter>
+        <FlightCtlForm>
+          <StackItem>
+            <TextContent>
+              <Text>
+                {t(
+                  "Following a system restore, devices have been identified with configurations newer than the server's records. To prevent data loss, they have been suspended from receiving updates.",
+                )}
+              </Text>
+            </TextContent>
+          </StackItem>
+          <StackItem>
+            <TextContent>
+              <Text>{t('Choose the criteria to select the devices to resume')}:</Text>
+            </TextContent>
+          </StackItem>
+
+          <StackItem>
+            <FormGroup isRequired fieldId="selection-mode">
+              <Radio
+                label={t('Fleet')}
+                id="selectionModeFleet"
+                name="selectionMode"
+                isChecked={values.mode === SelectionMode.FLEET}
+                onChange={() => {
+                  handleSelectionModeChanged(SelectionMode.FLEET);
+                }}
+                description={t('Resume all suspended devices associated with a given fleet')}
+              />
+              <Radio
+                label={t('Labels')}
+                id="selectionModeLabels"
+                name="selectionMode"
+                isChecked={values.mode === SelectionMode.LABELS}
+                onChange={() => {
+                  handleSelectionModeChanged(SelectionMode.LABELS);
+                }}
+                description={t('Resume all suspended devices matching the specified labels')}
+              />
+              <Radio
+                label={t('All suspended devices')}
+                id="selectionModeAll"
+                name="selectionMode"
+                isChecked={values.mode === SelectionMode.ALL}
+                onChange={() => {
+                  handleSelectionModeChanged(SelectionMode.ALL);
+                }}
+                description={t('Resume all suspended devices')}
+              />
+            </FormGroup>
+          </StackItem>
+
+          {values.mode === SelectionMode.FLEET && (
+            <StackItem>
+              <FormGroup label={t('Fleet')} isRequired fieldId="fleetId">
+                <Select
+                  id="fleetSelection"
+                  isOpen={isFleetListOpen}
+                  selected={values.fleetId}
+                  onSelect={(_, selection) => handleFleetSelected(selection as string)}
+                  onOpenChange={(isOpen) => setIsFleetSelectOpen(isOpen)}
+                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      onClick={() => setIsFleetSelectOpen(!isFleetListOpen)}
+                      isExpanded={isFleetListOpen}
+                      isDisabled={fleetsLoading}
+                      style={{ width: '100%' }}
+                    >
+                      {values.fleetId || t('Select a fleet')}
+                    </MenuToggle>
+                  )}
+                  shouldFocusToggleOnSelect
+                >
+                  <SelectList>
+                    {fleets.map((fleet) => {
+                      const fleetId = fleet.metadata.name || '';
+                      const deviceSelectorStr = Object.entries(fleet.spec?.selector?.matchLabels || {})
+                        .map(([key, value]) => (value ? `${key}=${value}` : key))
+                        .join(',');
+
+                      let description = '';
+                      if (deviceSelectorStr) {
+                        description = `${t('Device selector labels')}: ${deviceSelectorStr}`;
+                      } else {
+                        description = t('This fleet does not select any devices');
+                      }
+
+                      return (
+                        <SelectOption
+                          key={fleetId}
+                          value={fleetId}
+                          description={description}
+                          isDisabled={!deviceSelectorStr}
+                        >
+                          {fleetId}
+                        </SelectOption>
+                      );
+                    })}
+                  </SelectList>
+                </Select>
+              </FormGroup>
+            </StackItem>
+          )}
+
+          {values.mode === SelectionMode.LABELS && (
+            <StackItem>
+              <FormGroup label={t('Device labels')} fieldId="labelsSelection" isRequired>
+                <LabelsField name="labels" onChangeCallback={handleLabelsChanged} />
+              </FormGroup>
+            </StackItem>
+          )}
+        </FlightCtlForm>
+
+        {isValid && dirty && resumedCount === undefined && (
+          <StackItem>
+            {isCountLoading ? (
+              <Alert variant="info" isInline title={t('Refreshing device count')}>
+                <Spinner size="md" className="pf-v5-u-mr-sm" />
+                {t('Checking how many suspended devices match your criteria...')}
+              </Alert>
+            ) : countError ? (
+              <Alert variant="warning" isInline title={t('Unable to refresh device count')}>
+                {countError}
+              </Alert>
+            ) : deviceCountNum > 0 ? (
+              <Alert
+                variant={values.mode === SelectionMode.ALL ? 'warning' : 'success'}
+                isInline
+                title={t('Devices found')}
+              >
+                {values.mode === SelectionMode.FLEET ? (
+                  <Trans t={t}>
+                    <strong>{deviceCount}</strong> suspended devices are currently associated with fleet{' '}
+                    <strong>{values.fleetId}</strong>.
+                  </Trans>
+                ) : values.mode === SelectionMode.LABELS ? (
+                  <Trans t={t}>
+                    <strong>{deviceCount}</strong> suspended devices match the specified labels.
+                  </Trans>
+                ) : (
+                  <>
+                    <Trans t={t} count={deviceCountNum}>
+                      You are about to resume all <strong>{deviceCount}</strong> suspended devices.
+                    </Trans>
+                    {t(
+                      'This action is irreversible and will allow all affected devices to receive new configuration updates from the server.',
+                    )}
+                  </>
+                )}
+              </Alert>
+            ) : (
+              <Alert variant="warning" isInline title={t('No devices found')}>
+                {values.mode === SelectionMode.FLEET ? (
+                  <Trans t={t}>
+                    No suspended devices are associated with fleet <strong>{values.fleetId}</strong>.
+                  </Trans>
+                ) : values.mode === SelectionMode.ALL ? (
+                  t('No suspended devices found.')
+                ) : (
+                  t('No suspended devices match the specified labels.')
+                )}
+              </Alert>
+            )}
+          </StackItem>
+        )}
+
+        {submitError && (
+          <StackItem>
+            <Alert isInline variant="danger" title={t('Resume devices failed')}>
+              {submitError}
+            </Alert>
+          </StackItem>
+        )}
+        {resumedCount !== undefined && hasResumedAllExpected && (
+          <StackItem>
+            <Alert isInline variant="success" title={t('Resume successful')}>
+              {t('{{ resumedCount }} devices were resumed', { resumedCount })}
+            </Alert>
+          </StackItem>
+        )}
+
+        {resumedCount !== undefined && !hasResumedAllExpected && (
+          <StackItem>
+            <Alert isInline variant="warning" title={t('Resumed with warnings')}>
+              {t('{{ expectedCount }} devices to resume, and {{ resumedCount }} resumed successfully', {
+                expectedCount: deviceCountNum,
+                resumedCount,
+              })}
+            </Alert>
+          </StackItem>
+        )}
+      </Stack>
+      {showResumeAllConfirmation && (
+        <ResumeAllDevicesConfirmationDialog
+          deviceCountNum={deviceCountNum}
+          onClose={(doConfirm) => {
+            setShowResumeAllConfirmation(false);
+            if (doConfirm) {
+              performResume();
+            }
+          }}
+        />
+      )}
+    </Modal>
+  );
+};
+
+const MassResumeDevicesModal = ({ onClose }: MassResumeDevicesModalProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Formik<MassResumeFormValues>
+      initialValues={{
+        mode: SelectionMode.FLEET,
+        fleetId: '',
+        labels: [],
+      }}
+      validationSchema={createMassResumeValidationSchema(t)}
+      onSubmit={() => {
+        // This will be handled by the inner component
+      }}
+    >
+      <MassResumeDevicesModalContent onClose={onClose} />
+    </Formik>
+  );
+};
+
+export default MassResumeDevicesModal;

package/src/components/modals/massModals/ResumeDevicesModal/ResumeAllDevicesConfirmationDialog.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Button, Modal, ModalVariant, Stack, StackItem, Text, TextContent } from '@patternfly/react-core';
+import { Trans } from 'react-i18next';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+
+interface ResumeAllDevicesConfirmationModalProps {
+  deviceCountNum: number;
+  onClose: (doConfirm: boolean) => void;
+  isSubmitting?: boolean;
+}
+
+const ResumeAllDevicesConfirmationModal = ({ deviceCountNum, onClose }: ResumeAllDevicesConfirmationModalProps) => {
+  const { t } = useTranslation();
+
+  const deviceCount = deviceCountNum.toString();
+
+  return (
+    <Modal
+      variant={ModalVariant.small}
+      title={t('Resume all {{ deviceCount }} devices?', { deviceCount })}
+      isOpen
+      onClose={() => onClose(false)}
+      actions={[
+        <Button key="confirm" variant="primary" onClick={() => onClose(true)}>
+          {t('Resume all devices')}
+        </Button>,
+        <Button key="cancel" variant="link" onClick={() => onClose(false)}>
+          {t('Cancel')}
+        </Button>,
+      ]}
+    >
+      <Stack hasGutter>
+        <StackItem>
+          <TextContent>
+            <Text>
+              <Trans t={t} count={deviceCountNum}>
+                You are about to resume all <strong>{deviceCount}</strong> suspended devices.
+              </Trans>
+            </Text>
+          </TextContent>
+          <TextContent>
+            <Text>
+              {t(
+                'This action is irreversible and will allow all affected devices to receive new configuration updates from the server.',
+              )}
+            </Text>
+          </TextContent>
+        </StackItem>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default ResumeAllDevicesConfirmationModal;

package/src/hooks/useAccessReview.ts

@@ -14,19 +14,35 @@ export const useAccessReview = (kind: RESOURCE, verb: VERB): AccessReviewResult
     fetch: { checkPermissions },
   } = useAppContext();
   React.useEffect(() => {
+    let isMounted = true;
+
     const doItAsync = async () => {
+      if (!isMounted) return;
+
       setIsLoading(true);
       try {
         const allowed = await checkPermissions(kind, verb);
-        setIsAllowed(allowed);
+        if (isMounted) {
+          setIsAllowed(allowed);
+        }
       } catch (err) {
-        setError(getErrorMessage(err));
-        setIsAllowed(false);
+        if (isMounted) {
+          setError(getErrorMessage(err));
+          setIsAllowed(false);
+        }
       } finally {
-        setIsLoading(false);
+        if (isMounted) {
+          setIsLoading(false);
+        }
       }
     };
+
     doItAsync();
+
+    // Cleanup function to prevent state updates after unmount
+    return () => {
+      isMounted = false;
+    };
   }, [kind, verb, checkPermissions]);
 
   return [isAllowed, isLoading, error];

package/src/hooks/useAlertsEnabled.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { RESOURCE, VERB } from '../types/rbac';
+import { useAccessReview } from './useAccessReview';
+import { useFetch } from './useFetch';
+
+// Alerts are considered disabled if the service returns either 501 (Not Implemented) or 500
+const isDisabledAlertManagerService = (error: Error): boolean =>
+  Number(error.message) === 501 || Number(error.message) === 500;
+
+export const useAlertsEnabled = (): boolean => {
+  const { get } = useFetch();
+  const [alertsEnabled, setAlertsEnabled] = React.useState(false);
+
+  const [canListAlerts, alertsLoading] = useAccessReview(RESOURCE.ALERTS, VERB.LIST);
+
+  React.useEffect(() => {
+    let abortController: AbortController;
+
+    const checkAlertServiceEnabled = async () => {
+      try {
+        abortController = new AbortController();
+        await get('alerts', abortController.signal);
+        setAlertsEnabled(true);
+      } catch (err) {
+        if (!abortController.signal.aborted) {
+          if (isDisabledAlertManagerService(err as Error)) {
+            setAlertsEnabled(false);
+          } else {
+            // For other errors, assume alerts are enabled but there's a temporary issue
+            setAlertsEnabled(true);
+          }
+        }
+      }
+    };
+
+    if (!alertsLoading && canListAlerts) {
+      // Check only if we know that the user has permissions to read the alerts
+      checkAlertServiceEnabled();
+    } else {
+      // If user doesn't have permissions, set to disabled
+      setAlertsEnabled(false);
+    }
+
+    return () => {
+      abortController?.abort();
+    };
+  }, [get, alertsLoading, canListAlerts]);
+
+  return alertsEnabled;
+};

package/src/hooks/useAppContext.tsx

@@ -13,7 +13,6 @@ import {
   useSearchParams,
 } from 'react-router-dom';
 import { PatchRequest } from '@flightctl/types';
-import { CliArtifactsResponse } from '@flightctl/ui-components/src/types/extraTypes';
 import { ROUTE } from './useNavigate';
 import { RESOURCE, VERB } from '../types/rbac';
 
@@ -71,16 +70,18 @@ export type AppContextProps = {
   fetch: {
     getWsEndpoint: (deviceId: string) => string;
     get: <R>(kind: string, abortSignal?: AbortSignal) => Promise<R>;
-    post: <R>(kind: string, data: R, abortSignal?: AbortSignal) => Promise<R>;
-    put: <R>(kind: string, data: R, abortSignal?: AbortSignal) => Promise<R>;
+    post: <TRequest, TResponse = TRequest>(
+      kind: string,
+      data: TRequest,
+      abortSignal?: AbortSignal,
+    ) => Promise<TResponse>;
+    put: <TRequest>(kind: string, data: TRequest, abortSignal?: AbortSignal) => Promise<TRequest>;
     remove: <R>(kind: string, abortSignal?: AbortSignal) => Promise<R>;
     patch: <R>(kind: string, patches: PatchRequest, abortSignal?: AbortSignal) => Promise<R>;
     checkPermissions: (resource: RESOURCE, verb: VERB) => Promise<boolean>;
+    // All methods to the UI proxy are handled in the same method - returns raw Response
+    proxyFetch: (endpoint: string, requestInit: RequestInit) => Promise<Response>;
   };
-  // Extra fetch functions
-  getAlerts?: <R>(abortSignal?: AbortSignal) => Promise<R>;
-  getMetrics?: <R>(query: string, abortSignal?: AbortSignal) => Promise<R>;
-  getCliArtifacts?: (abortSignal?: AbortSignal) => Promise<CliArtifactsResponse>;
 };
 
 export const AppContext = React.createContext<AppContextProps>({
@@ -113,6 +114,7 @@ export const AppContext = React.createContext<AppContextProps>({
     remove: async () => ({}) as any,
     patch: async () => ({}) as any,
     checkPermissions: async () => true,
+    proxyFetch: async () => ({}) as any,
   },
   /* eslint-enable */
 });

package/src/hooks/useFetch.ts

@@ -1,11 +1,9 @@
 import { useAppContext } from './useAppContext';
 
 export const useFetch = () => {
-  const { fetch, getCliArtifacts, getMetrics } = useAppContext();
+  const { fetch } = useAppContext();
 
   return {
     ...fetch,
-    getCliArtifacts,
-    getMetrics,
   };
 };