@flightctl/ui-components 0.0.3 → 0.0.5

package/src/components/Fleet/FleetDetails/FleetDevices.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { Grid, GridItem } from '@patternfly/react-core';
+
+import { DevicesSummary } from '@flightctl/types';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { FilterSearchParams, getDeviceStatusItems } from '../../../utils/status/devices';
+import { getSystemUpdateStatusItems } from '../../../utils/status/system';
+import {
+  getApplicationStatusHelperText,
+  getDeviceStatusHelperText,
+  getUpdateStatusHelperText,
+} from '../../Status/utils';
+import DonutChart from '../../charts/DonutChart';
+import { getApplicationSummaryStatusItems } from '../../../utils/status/applications';
+import { toChartData } from '../../../components/charts/utils';
+
+interface FleetDevicesProps {
+  fleetId: string;
+  devicesSummary: DevicesSummary;
+}
+
+const getBaseFleetQuery = (fleetId: string) => {
+  const baseQuery = new URLSearchParams();
+  baseQuery.set(FilterSearchParams.Fleet, fleetId);
+  return baseQuery;
+};
+
+const DevicesByAppStatusChart = ({
+  fleetId,
+  applicationStatus,
+}: {
+  fleetId: string;
+  applicationStatus: DevicesSummary['applicationStatus'];
+}) => {
+  const { t } = useTranslation();
+
+  const statusItems = getApplicationSummaryStatusItems(t);
+
+  const appStatusData = toChartData(
+    applicationStatus,
+    statusItems,
+    getBaseFleetQuery(fleetId),
+    FilterSearchParams.DeviceStatus,
+  );
+
+  return (
+    <DonutChart title={t('Application status')} data={appStatusData} helperText={getApplicationStatusHelperText(t)} />
+  );
+};
+
+const DevicesByUpdateStatusChart = ({
+  fleetId,
+  updateStatus,
+}: {
+  fleetId: string;
+  updateStatus: DevicesSummary['updateStatus'];
+}) => {
+  const { t } = useTranslation();
+
+  const statusItems = getSystemUpdateStatusItems(t);
+
+  const updateStatusData = toChartData(
+    updateStatus,
+    statusItems,
+    getBaseFleetQuery(fleetId),
+    FilterSearchParams.UpdatedStatus,
+  );
+
+  return <DonutChart title={t('Update status')} data={updateStatusData} helperText={getUpdateStatusHelperText(t)} />;
+};
+
+const DevicesByDeviceStatusChart = ({
+  fleetId,
+  deviceStatus,
+}: {
+  fleetId: string;
+  deviceStatus: DevicesSummary['summaryStatus'];
+}) => {
+  const { t } = useTranslation();
+
+  const statusItems = getDeviceStatusItems(t);
+
+  const deviceStatusData = toChartData(
+    deviceStatus,
+    statusItems,
+    getBaseFleetQuery(fleetId),
+    FilterSearchParams.DeviceStatus,
+  );
+
+  return <DonutChart title={t('Device status')} data={deviceStatusData} helperText={getDeviceStatusHelperText(t)} />;
+};
+
+const FleetDevices = ({ devicesSummary, fleetId }: FleetDevicesProps) => {
+  return (
+    <Grid hasGutter>
+      {devicesSummary.applicationStatus && (
+        <GridItem md={6}>
+          <DevicesByAppStatusChart fleetId={fleetId} applicationStatus={devicesSummary.applicationStatus} />
+        </GridItem>
+      )}
+      {devicesSummary.summaryStatus && (
+        <GridItem md={6}>
+          <DevicesByDeviceStatusChart fleetId={fleetId} deviceStatus={devicesSummary.summaryStatus} />
+        </GridItem>
+      )}
+      {devicesSummary.updateStatus && (
+        <GridItem md={6}>
+          <DevicesByUpdateStatusChart fleetId={fleetId} updateStatus={devicesSummary.updateStatus} />
+        </GridItem>
+      )}
+    </Grid>
+  );
+};
+
+export default FleetDevices;

package/src/components/Fleet/FleetDetails/FleetDevicesLink.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Link, ROUTE } from '../../../hooks/useNavigate';
+
+const FleetDevicesLink = ({ fleetId, count }: { fleetId: string; count: number | undefined }) => {
+  if (!count) {
+    return <>0</>;
+  }
+  return (
+    <Link to={ROUTE.DEVICES} query={`fleetId=${fleetId}`}>
+      {count}
+    </Link>
+  );
+};
+
+export default FleetDevicesLink;

package/src/components/Fleet/FleetDetails/FleetOwnerLink.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { CodeBranchIcon } from '@patternfly/react-icons/dist/js/icons/code-branch-icon';
+import { Link, ROUTE } from '../../../hooks/useNavigate';
+import WithTooltip from '../../common/WithTooltip';
+import { useTranslation } from '../../../hooks/useTranslation';
+
+const rsOwnerRegex = /^ResourceSync\/(?<rsName>.*)$/;
+
+export const getOwnerName = (owner: string | undefined) => rsOwnerRegex.exec(owner || '')?.groups?.rsName;
+
+export const RSLink = ({ rsName }: { rsName: string }) => (
+  <div>
+    <CodeBranchIcon /> <Link to={{ route: ROUTE.RESOURCE_SYNC_DETAILS, postfix: rsName }}>{rsName}</Link>
+  </div>
+);
+
+const FleetOwnerLink = ({ owner }: { owner: string | undefined }) => {
+  const ownerRsName = getOwnerName(owner);
+  if (!ownerRsName) {
+    return '-';
+  }
+
+  return <RSLink rsName={ownerRsName} />;
+};
+
+export const FleetOwnerLinkIcon = ({
+  ownerName,
+  children,
+}: React.PropsWithChildren<{
+  ownerName: string | undefined;
+}>) => {
+  const { t } = useTranslation();
+  if (!ownerName) {
+    return children;
+  }
+
+  return (
+    <span style={{ display: 'flex', alignItems: 'center' }}>
+      <WithTooltip
+        content={t('Managed by the resource sync {{resourceSyncName}}', { resourceSyncName: ownerName })}
+        showTooltip
+      >
+        <CodeBranchIcon />
+      </WithTooltip>
+      &nbsp;
+      {children}
+    </span>
+  );
+};
+
+export default FleetOwnerLink;

package/src/components/Fleet/FleetResourceSyncs.tsx

@@ -0,0 +1,161 @@
+import * as React from 'react';
+import {
+  Alert,
+  AlertActionCloseButton,
+  PageSection,
+  PageSectionVariants,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { TFunction, Trans } from 'react-i18next';
+
+import { Fleet, ResourceSync, ResourceSyncList } from '@flightctl/types';
+
+import { useTranslation } from '../../hooks/useTranslation';
+import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
+import { Link, ROUTE } from '../../hooks/useNavigate';
+import { getLastTransitionTime, getRepositorySyncStatus } from '../../utils/status/repository';
+
+// Entries format: <rs0Name>@@<rs0LastSync>,<rs1Name>@@<rs1LastSync>,...
+const RS_DISMISS_STORAGE_KEY = 'FC_DISMISS_SYNCS';
+
+const RS_DISMISS_PARTS_SEPARATOR = '@@';
+
+const getRsDismissKey = (rs: ResourceSync) => {
+  if (rs.metadata.generation !== undefined) {
+    return `${rs.metadata.name}${RS_DISMISS_PARTS_SEPARATOR}${rs.metadata.generation}`;
+  }
+  const lastTransition = getLastTransitionTime(rs.status?.conditions);
+  return `${rs.metadata.name}${RS_DISMISS_PARTS_SEPARATOR}${lastTransition}`;
+};
+
+const isDismissed = (rs: ResourceSync) => {
+  const dismissedValue = localStorage.getItem(RS_DISMISS_STORAGE_KEY);
+  if (!dismissedValue) {
+    return false;
+  }
+  const rsDismissKey = getRsDismissKey(rs);
+  const dismissedEntries = dismissedValue.split(',');
+  return dismissedEntries.includes(rsDismissKey);
+};
+
+const hasError = (rs: ResourceSync, t: TFunction) => {
+  const rsStatus = getRepositorySyncStatus(rs, t);
+  return ['Not parsed', 'Not synced', 'Not accessible'].includes(rsStatus.status);
+};
+
+const ResourceSyncInfoAlert = ({ rs }: { rs: ResourceSync }) => {
+  const { t } = useTranslation();
+  const name = rs.metadata.name as string;
+
+  return (
+    <Alert
+      variant="info"
+      title={
+        <Trans t={t}>
+          Importing fleets from <Link to={{ route: ROUTE.RESOURCE_SYNC_DETAILS, postfix: name }}>{name}</Link>. This
+          might take a few minutes to complete.
+        </Trans>
+      }
+      isInline
+    />
+  );
+};
+
+const ResourceSyncErrorAlert = ({ rs, refetch }: { rs: ResourceSync; refetch: VoidFunction }) => {
+  const { t } = useTranslation();
+  const name = rs.metadata.name as string;
+
+  const dismissAlert = () => {
+    const dismissedValue = localStorage.getItem(RS_DISMISS_STORAGE_KEY);
+    const newDismissKey = getRsDismissKey(rs);
+    if (dismissedValue) {
+      const dismissedEntries = dismissedValue.split(',');
+      let isNewEntry = true;
+      const updatedEntries = dismissedEntries.map((entry) => {
+        const entryParts = entry.split(RS_DISMISS_PARTS_SEPARATOR);
+        const entryRsName = entryParts[0];
+        if (entryRsName === name) {
+          isNewEntry = false;
+          // The old timestamp is now stale, we can replace the entry with the new timestamp
+          return newDismissKey;
+        } else {
+          // Entries for other resource syncs are kept untouched
+          return entry;
+        }
+      });
+      if (isNewEntry) {
+        updatedEntries.push(newDismissKey);
+      }
+      localStorage.setItem(RS_DISMISS_STORAGE_KEY, updatedEntries.join(','));
+    } else {
+      localStorage.setItem(RS_DISMISS_STORAGE_KEY, newDismissKey);
+    }
+    refetch();
+  };
+  return (
+    <Alert
+      variant="danger"
+      title={t('Fleets import failed')}
+      isInline
+      actionClose={<AlertActionCloseButton onClose={dismissAlert} />}
+    >
+      <Trans t={t}>
+        Importing fleets from <Link to={{ route: ROUTE.RESOURCE_SYNC_DETAILS, postfix: name }}>{name}</Link> failed.
+        Check the resource sync for more details.
+      </Trans>
+    </Alert>
+  );
+};
+
+const FleetResourceSyncs = ({ fleets }: { fleets: Fleet[] }) => {
+  const { t } = useTranslation();
+
+  const [rsList, , , rsRefetch] = useFetchPeriodically<ResourceSyncList>({ endpoint: 'resourcesyncs' });
+
+  // TODO Remove the client-side filtering once the API filter is available
+  const pendingResourceSyncs = React.useMemo(
+    () => [
+      ...(rsList?.items || []).filter((rs) => {
+        if (isDismissed(rs)) {
+          return false;
+        }
+        if (hasError(rs, t)) {
+          return true;
+        }
+        return !fleets.some((fleet) => fleet.metadata.owner === `ResourceSync/${rs.metadata.name}`);
+      }),
+    ],
+    [fleets, rsList, t],
+  );
+
+  if (pendingResourceSyncs.length === 0) {
+    return null;
+  }
+  return (
+    <PageSection variant={PageSectionVariants.light}>
+      <Stack hasGutter>
+        {pendingResourceSyncs
+          .filter((rs) => !hasError(rs, t))
+          .map((rs) => {
+            return (
+              <StackItem key={rs.metadata.name as string}>
+                <ResourceSyncInfoAlert rs={rs} />
+              </StackItem>
+            );
+          })}
+        {pendingResourceSyncs
+          .filter((rs) => hasError(rs, t))
+          .map((rs) => {
+            return (
+              <StackItem key={rs.metadata.name as string}>
+                <ResourceSyncErrorAlert rs={rs} refetch={rsRefetch} />
+              </StackItem>
+            );
+          })}
+      </Stack>
+    </PageSection>
+  );
+};
+
+export default FleetResourceSyncs;

package/src/components/Fleet/FleetRow.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { ActionsColumn, IAction, OnSelect, Td, Tr } from '@patternfly/react-table';
+
+import { Fleet } from '@flightctl/types';
+import { useTranslation } from '../../hooks/useTranslation';
+import { FleetOwnerLinkIcon, getOwnerName } from './FleetDetails/FleetOwnerLink';
+import { ROUTE, useNavigate } from '../../hooks/useNavigate';
+import FleetStatus from './FleetStatus';
+import ResourceLink from '../common/ResourceLink';
+import FleetDevicesLink from './FleetDetails/FleetDevicesLink';
+
+type FleetRowProps = {
+  fleet: Fleet;
+  rowIndex: number;
+  onRowSelect: (fleet: Fleet) => OnSelect;
+  isRowSelected: (fleet: Fleet) => boolean;
+  onDeleteClick: () => void;
+};
+
+const useFleetActions = (fleetName: string, isManaged: boolean) => {
+  const actions: IAction[] = [];
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  if (isManaged) {
+    actions.push({
+      title: t("View fleet's configuration"),
+      onClick: () => navigate({ route: ROUTE.FLEET_DETAILS, postfix: fleetName }),
+    });
+  } else {
+    actions.push({
+      title: t('Edit fleet'),
+      onClick: () => navigate({ route: ROUTE.FLEET_EDIT, postfix: fleetName }),
+    });
+  }
+  return actions;
+};
+
+const FleetRow: React.FC<FleetRowProps> = ({ fleet, rowIndex, onRowSelect, isRowSelected, onDeleteClick }) => {
+  const { t } = useTranslation();
+  const fleetName = fleet.metadata.name || '';
+
+  const isManaged = !!fleet.metadata?.owner;
+  const actions = useFleetActions(fleetName, isManaged);
+  actions.push({
+    title: t('Delete fleet'),
+    onClick: onDeleteClick,
+    tooltipProps: isManaged
+      ? {
+          content: t(
+            "This fleet is managed by a resource sync and cannot be directly deleted. Either remove this fleet's definition from the resource sync configuration, or delete the resource sync first.",
+          ),
+        }
+      : undefined,
+    isAriaDisabled: isManaged,
+  });
+
+  return (
+    <Tr>
+      <Td
+        select={{
+          rowIndex,
+          onSelect: onRowSelect(fleet),
+          isSelected: isRowSelected(fleet),
+        }}
+      />
+      <Td dataLabel={t('Name')}>
+        <FleetOwnerLinkIcon ownerName={getOwnerName(fleet.metadata.owner)}>
+          <ResourceLink id={fleetName} routeLink={ROUTE.FLEET_DETAILS} />
+        </FleetOwnerLinkIcon>
+      </Td>
+      <Td dataLabel={t('System image')}>{fleet.spec.template.spec.os?.image || '-'}</Td>
+      <Td dataLabel={t('Devices')}>
+        <FleetDevicesLink fleetId={fleetName} count={fleet.status?.devicesSummary?.total} />
+      </Td>
+      <Td dataLabel={t('Status')}>
+        <FleetStatus fleet={fleet} />
+      </Td>
+      <Td isActionCell>
+        <ActionsColumn items={actions} />
+      </Td>
+    </Tr>
+  );
+};
+
+export default FleetRow;

package/src/components/Fleet/FleetStatus.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import { ConditionType, Fleet } from '@flightctl/types';
+import { fleetStatusLabels, getFleetSyncStatus } from '../../utils/status/fleet';
+import { useTranslation } from '../../hooks/useTranslation';
+import { StatusDisplayContent } from '../Status/StatusDisplay';
+import { StatusLevel } from '../../utils/status/common';
+
+const FleetStatus = ({ fleet }: { fleet: Fleet }) => {
+  const { t } = useTranslation();
+  const syncStatus = getFleetSyncStatus(fleet, t);
+  const statusLabels = fleetStatusLabels(t);
+
+  let level: StatusLevel;
+
+  switch (syncStatus.status) {
+    case ConditionType.FleetValid:
+      level = 'success';
+      break;
+    case ConditionType.FleetOverlappingSelectors:
+      level = 'warning';
+      break;
+    case 'SyncPending':
+      level = 'info';
+      break;
+    case 'Invalid':
+      level = 'danger';
+      break;
+    default:
+      level = 'unknown';
+      break;
+  }
+
+  return <StatusDisplayContent label={statusLabels[syncStatus.status]} level={level} message={syncStatus.message} />;
+};
+
+export default FleetStatus;

package/src/components/Fleet/FleetsPage.tsx

@@ -0,0 +1,204 @@
+import * as React from 'react';
+import {
+  Button,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  SelectList,
+  SelectOption,
+  Split,
+  SplitItem,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import { Tbody } from '@patternfly/react-table';
+import { TopologyIcon } from '@patternfly/react-icons/dist/js/icons/topology-icon';
+import { Trans } from 'react-i18next';
+import { TFunction } from 'i18next';
+
+import { Fleet, FleetList } from '@flightctl/types';
+import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
+import ListPage from '../ListPage/ListPage';
+import ListPageBody from '../ListPage/ListPageBody';
+import { sortByName } from '../../utils/sort/generic';
+import { sortByStatus, sortFleetsByOSImg } from '../../utils/sort/fleet';
+import TableTextSearch from '../Table/TableTextSearch';
+import Table, { TableColumn } from '../Table/Table';
+import { useTableTextSearch } from '../../hooks/useTableTextSearch';
+import { useTableSort } from '../../hooks/useTableSort';
+import { useTableSelect } from '../../hooks/useTableSelect';
+import TableActions from '../Table/TableActions';
+import { getResourceId } from '../../utils/resource';
+import MassDeleteFleetModal from '../modals/massModals/MassDeleteFleetModal/MassDeleteFleetModal';
+import FleetRow from './FleetRow';
+import ResourceListEmptyState from '../common/ResourceListEmptyState';
+import { useTranslation } from '../../hooks/useTranslation';
+import { ROUTE, useNavigate } from '../../hooks/useNavigate';
+import DeleteFleetModal from './DeleteFleetModal/DeleteFleetModal';
+import FleetResourceSyncs from './FleetResourceSyncs';
+
+const FleetPageActions = ({ createText }: { createText?: string }) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  return (
+    <Split hasGutter>
+      <SplitItem>
+        <Button variant="primary" onClick={() => navigate(ROUTE.FLEET_CREATE)}>
+          {createText || t('Create a fleet')}
+        </Button>
+      </SplitItem>
+      <SplitItem>
+        <Button variant="secondary" onClick={() => navigate(ROUTE.FLEET_IMPORT)}>
+          {t('Import fleets')}
+        </Button>
+      </SplitItem>
+    </Split>
+  );
+};
+
+const FleetEmptyState = () => {
+  const { t } = useTranslation();
+  return (
+    <ResourceListEmptyState icon={TopologyIcon} titleText={t('No fleets here!')}>
+      <EmptyStateBody>
+        <Trans t={t}>
+          Fleets are an easy way to manage multiple devices that share the same configurations.
+          <br />
+          With fleets you will be able to edit and update devices in mass.
+        </Trans>
+      </EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <FleetPageActions />
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </ResourceListEmptyState>
+  );
+};
+
+const getColumns = (t: TFunction): TableColumn<Fleet>[] => [
+  {
+    name: t('Name'),
+    onSort: sortByName,
+  },
+  {
+    name: t('System image'),
+    onSort: sortFleetsByOSImg,
+  },
+  {
+    name: t('Devices'),
+  },
+  {
+    name: t('Status'),
+    onSort: sortByStatus,
+  },
+];
+
+const getSearchText = (fleet: Fleet) => [fleet.metadata.name];
+
+const FleetTable = ({ fleetLoad }: { fleetLoad: FleetLoad }) => {
+  const { t } = useTranslation();
+
+  const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
+  const [fleetToDeleteId, setFleetToDeleteId] = React.useState<string>();
+
+  const [fleetList, loading, error, refetch] = fleetLoad;
+  const columns = React.useMemo(() => getColumns(t), [t]);
+  const fleets = fleetList?.items || [];
+  const { search, setSearch, filteredData } = useTableTextSearch(fleets, getSearchText);
+  const { getSortParams, sortedData: sortedFleets } = useTableSort(filteredData, columns);
+  const { onRowSelect, isAllSelected, hasSelectedRows, isRowSelected, setAllSelected } = useTableSelect();
+
+  return (
+    <ListPageBody error={error} loading={loading}>
+      <Toolbar inset={{ default: 'insetNone' }}>
+        <ToolbarContent>
+          <ToolbarGroup>
+            <ToolbarItem variant="search-filter">
+              <TableTextSearch value={search} setValue={setSearch} placeholder={t('Search by name')} />
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarItem>
+            <FleetPageActions createText={t('Create fleet')} />
+          </ToolbarItem>
+          <ToolbarItem>
+            <TableActions isDisabled={!hasSelectedRows}>
+              <SelectList>
+                <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
+              </SelectList>
+            </TableActions>
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <Table
+        aria-label={t('Fleets table')}
+        columns={columns}
+        emptyFilters={filteredData.length === 0}
+        emptyData={fleets.length === 0}
+        getSortParams={getSortParams}
+        isAllSelected={isAllSelected}
+        onSelectAll={setAllSelected}
+      >
+        <Tbody>
+          {sortedFleets.map((fleet, rowIndex) => (
+            <FleetRow
+              key={getResourceId(fleet)}
+              fleet={fleet}
+              rowIndex={rowIndex}
+              onDeleteClick={() => {
+                setFleetToDeleteId(fleet.metadata.name || '');
+              }}
+              isRowSelected={isRowSelected}
+              onRowSelect={onRowSelect}
+            />
+          ))}
+        </Tbody>
+      </Table>
+      {fleets.length === 0 && <FleetEmptyState />}
+      {fleetToDeleteId && (
+        <DeleteFleetModal
+          fleetId={fleetToDeleteId}
+          onClose={(hasDeleted?: boolean) => {
+            if (hasDeleted) {
+              refetch();
+            }
+            setFleetToDeleteId(undefined);
+          }}
+        />
+      )}
+      {isMassDeleteModalOpen && (
+        <MassDeleteFleetModal
+          onClose={() => setIsMassDeleteModalOpen(false)}
+          fleets={sortedFleets.filter(isRowSelected)}
+          onDeleteSuccess={() => {
+            setIsMassDeleteModalOpen(false);
+            refetch();
+          }}
+        />
+      )}
+    </ListPageBody>
+  );
+};
+
+type FleetLoad = [FleetList | undefined, boolean, unknown, VoidFunction, boolean];
+
+const FleetsPage = () => {
+  const { t } = useTranslation();
+
+  // TODO move the fetch down to FleetTable when the API includes the filter for pending / errored resource syncs
+  const fleetLoad = useFetchPeriodically<FleetList>({ endpoint: 'fleets?addDevicesCount=true' });
+
+  return (
+    <>
+      <FleetResourceSyncs fleets={fleetLoad[0]?.items || []} />
+
+      <ListPage title={t('Fleets')}>
+        <FleetTable fleetLoad={fleetLoad} />
+      </ListPage>
+    </>
+  );
+};
+
+export default FleetsPage;

package/src/components/Fleet/ImportFleetWizard/ImportFleetWizard.css

@@ -0,0 +1,3 @@
+.fctl-import-fleet .pf-v5-c-wizard__main-body {
+    height: 100%
+}