@flightctl/ui-components 0.8.1 → 0.9.1

package/src/components/Status/SystemUpdateStatus.tsx

@@ -1,30 +1,14 @@
 import * as React from 'react';
 
-import { ConditionStatus, ConditionType, DeviceStatus } from '@flightctl/types';
+import { DeviceStatus } from '@flightctl/types';
 import { useTranslation } from '../../hooks/useTranslation';
-import StatusDisplay, { StatusDisplayContent } from './StatusDisplay';
 import { getSystemUpdateStatusItems } from '../../utils/status/system';
+import StatusDisplay from './StatusDisplay';
 
 const SystemUpdateStatus = ({ deviceStatus }: { deviceStatus?: DeviceStatus }) => {
   const { t } = useTranslation();
   const statusItems = getSystemUpdateStatusItems(t);
 
-  // TODO Until Update status if fully implemented in the backend, we check for the "SpecValid" error condition
-  const invalidSpec = deviceStatus?.conditions?.find(
-    (c) => c.type === ConditionType.DeviceSpecValid && c.status === ConditionStatus.ConditionStatusFalse,
-  );
-
-  if (invalidSpec) {
-    return (
-      <StatusDisplayContent
-        level="danger"
-        label={t('Updates blocked')}
-        messageTitle={t('Invalid configuration')}
-        message={invalidSpec.message}
-      />
-    );
-  }
-
   const item = statusItems.find((statusItem) => {
     return statusItem.id === deviceStatus?.updated.status;
   });

package/src/components/form/validations.ts

@@ -29,7 +29,8 @@ import {
 import { labelToString } from '../../utils/labels';
 import { UpdateScheduleMode } from '../../utils/time';
 
-const SYSTEMD_PATTERNS_REGEXP = /^[a-z][a-z0-9-_.]*$/;
+const SYSTEMD_PATTERNS_REGEXP =
+  /^[0-9a-zA-Z:\-_.\\\[\]!\-\*\?]+(@[0-9a-zA-Z:\-_.\\\[\]!\-\*\?]+)?(\.[a-zA-Z\[\]!\-\*\?]+)?$/;
 const SYSTEMD_UNITS_MAX_PATTERNS = 256;
 
 // Accepts uppercase characters, and "underscore" symbols
@@ -653,8 +654,8 @@ export const systemdUnitListValidationSchema = (t: TFunction) =>
       }),
     )
     .test('invalid patterns', (systemdUnits: SystemdUnitFormValue[] | undefined, testContext) => {
-      // TODO analyze https://github.com/systemd/systemd/blob/9cebda59e818cdb89dc1e53ab5bb51b91b3dc3ff/src/basic/unit-name.c#L42
-      // and adjust the regular expression and / or the validation to accommodate for it
+      // Supports templated SystemD services with extended regex for all allowed unit file formats and glob searches
+      // See SYSTEMD_PATTERNS_REGEXP
       const invalidSystemdUnits = (systemdUnits || [])
         .map((unit) => unit.pattern)
         .filter((pattern) => {

package/src/hooks/useAlerts.ts

@@ -0,0 +1,147 @@
+import * as React from 'react';
+import { useAppContext } from './useAppContext';
+import { useAccessReview } from './useAccessReview';
+import { RESOURCE, VERB } from '../types/rbac';
+
+// AlertManager alert structure
+type AlertManagerAlert = {
+  fingerprint: string;
+  labels: {
+    alertname: string;
+    org_id: string;
+    resource: string;
+    [key: string]: string;
+  };
+  annotations: Record<string, string>;
+  startsAt: string;
+  endsAt: string;
+  updatedAt: string;
+  status: {
+    state: string;
+    inhibitedBy: string[];
+    mutedBy: string[];
+    silencedBy: string[];
+  };
+  receivers: Array<{ name: string }>;
+};
+
+const DEFAULT_REFRESH_INTERVAL = 30000; // 30 seconds
+
+export const useAlerts = (
+  refreshInterval: number = DEFAULT_REFRESH_INTERVAL,
+): [AlertManagerAlert[], boolean, unknown, VoidFunction] => {
+  const { getAlerts } = useAppContext();
+  const [alerts, setAlerts] = React.useState<AlertManagerAlert[]>([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState<unknown>();
+  const [forceRefresh, setForceRefresh] = React.useState(0);
+
+  const refetch = React.useCallback(() => {
+    setForceRefresh((prev) => prev + 1);
+  }, []);
+
+  React.useEffect(() => {
+    let abortController: AbortController;
+    let intervalId: NodeJS.Timeout;
+
+    const fetchAlerts = async () => {
+      if (!getAlerts) {
+        setIsLoading(false);
+        return;
+      }
+
+      try {
+        abortController = new AbortController();
+        const alertsData = await getAlerts<AlertManagerAlert[]>(abortController.signal);
+        setAlerts(alertsData || []);
+        setError(undefined);
+      } catch (err) {
+        if (!abortController.signal.aborted) {
+          setError(err);
+          setAlerts([]);
+        }
+      } finally {
+        if (!abortController.signal.aborted) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    // Initial fetch
+    fetchAlerts();
+
+    // Set up periodic refresh only if getAlerts is available
+    if (getAlerts && refreshInterval > 0) {
+      intervalId = setInterval(() => {
+        fetchAlerts();
+      }, refreshInterval);
+    }
+
+    return () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+      abortController?.abort();
+    };
+  }, [getAlerts, refreshInterval, forceRefresh]);
+
+  return [alerts, isLoading, error, refetch];
+};
+
+// Type guard to check if error is HttpError with status property
+const isHttpError = (error: unknown): error is { status: number } => {
+  const errorObj = error as Record<string, unknown>;
+  return typeof error === 'object' && error !== null && 'status' in error && typeof errorObj.status === 'number';
+};
+
+export const useAlertsEnabled = (): boolean => {
+  const { getAlerts } = useAppContext();
+  const [alertsEnabled, setAlertsEnabled] = React.useState(false);
+
+  const [canListAlerts, alertsLoading] = useAccessReview(RESOURCE.ALERTS, VERB.LIST);
+  const checkServiceEnabled = Boolean(getAlerts) && !alertsLoading && canListAlerts;
+
+  React.useEffect(() => {
+    let abortController: AbortController;
+
+    const checkAlertServiceEnabled = async () => {
+      if (!getAlerts) {
+        // If getAlerts is not available, alerts are disabled
+        setAlertsEnabled(false);
+        return;
+      }
+
+      try {
+        abortController = new AbortController();
+        await getAlerts<AlertManagerAlert[]>(abortController.signal);
+        setAlertsEnabled(true);
+      } catch (err) {
+        if (!abortController.signal.aborted) {
+          // Check if AlertManager is disabled (501 Not Implemented) or unavailable (500 Internal Server Error)
+          if (isHttpError(err) && (err.status === 501 || err.status === 500)) {
+            setAlertsEnabled(false);
+          } else {
+            // For other errors, assume alerts are enabled but there's a temporary issue
+            setAlertsEnabled(true);
+          }
+        }
+      }
+    };
+
+    if (checkServiceEnabled) {
+      // Check only if we know that the user has permisions to read the alerts
+      checkAlertServiceEnabled();
+    } else if (!getAlerts) {
+      // If getAlerts is not available, immediately set to disabled
+      setAlertsEnabled(false);
+    }
+
+    return () => {
+      abortController?.abort();
+    };
+  }, [getAlerts, checkServiceEnabled]);
+
+  return alertsEnabled;
+};
+
+export type { AlertManagerAlert };

package/src/hooks/useAppContext.tsx

@@ -78,6 +78,7 @@ export type AppContextProps = {
     checkPermissions: (resource: RESOURCE, verb: VERB) => Promise<boolean>;
   };
   // Extra fetch functions
+  getAlerts?: <R>(abortSignal?: AbortSignal) => Promise<R>;
   getMetrics?: <R>(query: string, abortSignal?: AbortSignal) => Promise<R>;
   getCliArtifacts?: (abortSignal?: AbortSignal) => Promise<CliArtifactsResponse>;
 };

package/src/types/extraTypes.ts

@@ -44,11 +44,7 @@ export interface MetricsQuery {
   period: string;
 }
 
-export type FleetConditionType =
-  | ConditionType.FleetOverlappingSelectors
-  | ConditionType.FleetValid
-  | 'Invalid'
-  | 'SyncPending';
+export type FleetConditionType = ConditionType.FleetValid | 'Invalid' | 'SyncPending';
 
 export type FlightControlQuery = ApiQuery | MetricsQuery;
 

package/src/types/rbac.ts

@@ -17,4 +17,5 @@ export enum RESOURCE {
   RESOURCE_SYNC = 'resourcesyncs',
   ENROLLMENT_REQUEST = 'enrollmentrequests',
   ENROLLMENT_REQUEST_APPROVAL = 'enrollmentrequests/approval',
+  ALERTS = 'alerts',
 }

package/src/utils/apiCalls.ts

@@ -13,3 +13,18 @@ export const getErrorMsgFromApiResponse = async (response: Response): Promise<st
   }
   return `Error ${response.status}: ${response.statusText}${errorText ? `: ${errorText}` : ''}`;
 };
+
+export const getErrorMsgFromAlertsApiResponse = async (response: Response): Promise<string> => {
+  let errorText = '';
+  try {
+    const msg = await response.text();
+    try {
+      errorText = JSON.parse(msg) as string;
+    } catch (e) {
+      errorText = msg;
+    }
+  } catch (e) {
+    //ignore
+  }
+  return `Error ${response.status}: ${response.statusText}${errorText ? `: ${errorText}` : ''}`;
+};

package/src/utils/status/fleet.ts

@@ -7,7 +7,6 @@ import { getConditionMessage } from '../error';
 const FLEET_ROLLOUT_FAILED_REASON = 'Suspended';
 
 export const fleetStatusLabels = (t: TFunction) => ({
-  [ConditionType.FleetOverlappingSelectors]: t('Selectors overlap'),
   [ConditionType.FleetValid]: t('Valid'),
   Invalid: t('Invalid'),
   SyncPending: t('Sync pending'),
@@ -20,18 +19,6 @@ export const getFleetSyncStatus = (
   status: FleetConditionType;
   message: string | undefined;
 } => {
-  const selectorOverlap = fleet.status?.conditions?.find(
-    (c) => c.type === ConditionType.FleetOverlappingSelectors && c.status === ConditionStatus.ConditionStatusTrue,
-  );
-  if (selectorOverlap) {
-    return {
-      message:
-        selectorOverlap.message ||
-        t("Fleet's selector overlaps with at least one other fleet, causing ambiguous device ownership."),
-      status: ConditionType.FleetOverlappingSelectors,
-    };
-  }
-
   const validCondition = (fleet.status?.conditions || []).find((c) => c.type === ConditionType.FleetValid);
   if (validCondition) {
     const isOK = validCondition.status === ConditionStatus.ConditionStatusTrue;

package/src/utils/status/integrity.ts

@@ -0,0 +1,44 @@
+import { TFunction } from 'react-i18next';
+
+import { DeviceIntegrityCheckStatusType, DeviceIntegrityStatusSummaryType } from '@flightctl/types';
+import { StatusItem } from './common';
+
+export const getIntegrityStatusItems = (t: TFunction): StatusItem<DeviceIntegrityStatusSummaryType>[] => [
+  {
+    id: DeviceIntegrityStatusSummaryType.DeviceIntegrityStatusFailed,
+    label: t('Failed'),
+    level: 'warning',
+  },
+  {
+    id: DeviceIntegrityStatusSummaryType.DeviceIntegrityStatusUnsupported,
+    label: t('Unsupported'),
+    level: 'unknown',
+  },
+  {
+    id: DeviceIntegrityStatusSummaryType.DeviceIntegrityStatusUnknown,
+    label: t('Unknown'),
+    level: 'unknown',
+  },
+  {
+    id: DeviceIntegrityStatusSummaryType.DeviceIntegrityStatusVerified,
+    label: t('Verified'),
+    level: 'success',
+  },
+];
+
+export const integrityCheckToSummaryType = (
+  status: DeviceIntegrityCheckStatusType,
+): DeviceIntegrityStatusSummaryType => {
+  switch (status) {
+    case DeviceIntegrityCheckStatusType.DeviceIntegrityCheckStatusVerified:
+      return DeviceIntegrityStatusSummaryType.DeviceIntegrityStatusVerified;
+    case DeviceIntegrityCheckStatusType.DeviceIntegrityCheckStatusFailed:
+      return DeviceIntegrityStatusSummaryType.DeviceIntegrityStatusFailed;
+    case DeviceIntegrityCheckStatusType.DeviceIntegrityCheckStatusUnknown:
+      return DeviceIntegrityStatusSummaryType.DeviceIntegrityStatusUnknown;
+    case DeviceIntegrityCheckStatusType.DeviceIntegrityCheckStatusUnsupported:
+      return DeviceIntegrityStatusSummaryType.DeviceIntegrityStatusUnsupported;
+  }
+};
+
+export const integrityStatusOrder = getIntegrityStatusItems((s: string) => s).map((item) => item.id);