@flightctl/ui-components 0.0.3 → 0.0.5

package/src/components/OverviewPage/Cards/Status/DeviceStatusChart.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import { DeviceSummaryStatusType } from '@flightctl/types';
+import { FlightCtlLabel } from '../../../../types/extraTypes';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { getDeviceStatusHelperText } from '../../../Status/utils';
+import { getDeviceStatusItems } from '../../../../utils/status/devices';
+import { FilterSearchParams } from '../../../../utils/status/devices';
+import { toOverviewChartData } from './utils';
+import DonutChart from '../../../charts/DonutChart';
+
+const DeviceStatusChart = ({
+  deviceStatus,
+  labels,
+  fleets,
+}: {
+  deviceStatus: Record<string, number>;
+  labels: FlightCtlLabel[];
+  fleets: string[];
+}) => {
+  const { t } = useTranslation();
+
+  const statusItems = getDeviceStatusItems(t);
+
+  // TODO should we add the "Pending" devices, now that the Device table does not contain ERs?
+  const devStatusData = toOverviewChartData<DeviceSummaryStatusType>(
+    deviceStatus,
+    statusItems,
+    labels,
+    fleets,
+    FilterSearchParams.DeviceStatus,
+  );
+
+  return <DonutChart title={t('Device status')} data={devStatusData} helperText={getDeviceStatusHelperText(t)} />;
+};
+
+export default DeviceStatusChart;

package/src/components/OverviewPage/Cards/Status/StatusCard.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import {
+  Bullseye,
+  Card,
+  CardBody,
+  CardHeader,
+  CardTitle,
+  Flex,
+  FlexItem,
+  Spinner,
+  Stack,
+  StackItem,
+  Text,
+  TextContent,
+  TextVariants,
+} from '@patternfly/react-core';
+import { FleetList } from '@flightctl/types';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import ApplicationStatusChart from './ApplicationStatusChart';
+import DeviceStatusChart from './DeviceStatusChart';
+import SystemUpdateStatusChart from './SystemUpdateStatusChart';
+import { useFetchPeriodically } from '../../../../hooks/useFetchPeriodically';
+import StatusCardFilters from './StatusCardFilters';
+import ErrorAlert from '../../../ErrorAlert/ErrorAlert';
+import { FlightCtlLabel } from '../../../../types/extraTypes';
+import { useDevices, useDevicesSummary } from '../../../Device/DevicesPage/useDevices';
+
+const StatusCard = () => {
+  const { t } = useTranslation();
+  const [fleets, setFleets] = React.useState<string[]>([]);
+  const [labels, setLabels] = React.useState<FlightCtlLabel[]>([]);
+
+  const [devicesSummary, summaryLoading] = useDevicesSummary({
+    ownerFleets: fleets,
+    labels,
+  });
+
+  // TODO remove "useDevices" (to fetch labels), and fetching of fleets when the new API endpoints are available
+  const [devices, loading, error, , , allLabels] = useDevices({
+    ownerFleets: fleets,
+    labels,
+  });
+
+  const [fleetsList, flLoading, flError] = useFetchPeriodically<FleetList>({
+    endpoint: 'fleets',
+  });
+
+  let content: React.ReactNode;
+  if (loading || flLoading || summaryLoading) {
+    content = (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  } else if (error || flError) {
+    content = <ErrorAlert error={error || flError} />;
+  } else {
+    content = (
+      <Stack>
+        <StackItem>
+          <TextContent>
+            <Text component={TextVariants.small}>{t('{{count}} Devices', { count: devices.length || 0 })}</Text>
+          </TextContent>
+        </StackItem>
+        <StackItem>
+          <Flex justifyContent={{ default: 'justifyContentSpaceAround' }}>
+            <FlexItem>
+              <ApplicationStatusChart
+                applicationStatus={devicesSummary?.applicationStatus || {}}
+                labels={labels}
+                fleets={fleets}
+              />
+            </FlexItem>
+            <FlexItem>
+              <DeviceStatusChart deviceStatus={devicesSummary?.summaryStatus || {}} labels={labels} fleets={fleets} />
+            </FlexItem>
+            <FlexItem>
+              <SystemUpdateStatusChart
+                updatedStatus={devicesSummary?.updateStatus || {}}
+                labels={labels}
+                fleets={fleets}
+              />
+            </FlexItem>
+          </Flex>
+        </StackItem>
+      </Stack>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <Flex alignItems={{ default: 'alignItemsCenter' }}>
+          <FlexItem>
+            <CardTitle>{t('Status')}</CardTitle>
+          </FlexItem>
+          <FlexItem>
+            <StatusCardFilters
+              fleets={fleetsList?.items || []}
+              selectedFleets={fleets}
+              setSelectedFleets={setFleets}
+              allLabels={allLabels}
+              selectedLabels={labels}
+              setSelectedLabels={setLabels}
+            />
+          </FlexItem>
+        </Flex>
+      </CardHeader>
+
+      <CardBody>{content}</CardBody>
+    </Card>
+  );
+};
+
+export default StatusCard;

package/src/components/OverviewPage/Cards/Status/StatusCardFilters.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import {
+  Button,
+  Chip,
+  ChipGroup,
+  Flex,
+  FlexItem,
+  StackItem,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import { Fleet } from '@flightctl/types';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { labelToString } from '../../../../utils/labels';
+import { FlightCtlLabel } from '../../../../types/extraTypes';
+import DeviceTableToolbarFilters from '../../../Device/DevicesPage/DeviceToolbarFilters';
+
+type StatusCardFiltersProps = {
+  fleets: Fleet[];
+  selectedFleets: string[];
+  setSelectedFleets: (fleets: string[]) => void;
+  allLabels: FlightCtlLabel[];
+  selectedLabels: FlightCtlLabel[];
+  setSelectedLabels: (labels: FlightCtlLabel[]) => void;
+};
+
+const StatusCardFilters: React.FC<StatusCardFiltersProps> = ({
+  fleets,
+  selectedFleets,
+  setSelectedFleets,
+  allLabels,
+  selectedLabels,
+  setSelectedLabels,
+}) => {
+  const { t } = useTranslation();
+
+  const hasFilters = selectedFleets.length + selectedLabels.length > 0;
+
+  return (
+    <Flex>
+      <FlexItem>
+        <Toolbar id="overview-toolbar" inset={{ default: 'insetNone' }}>
+          <ToolbarContent>
+            <ToolbarGroup>
+              <ToolbarItem variant="search-filter">
+                <DeviceTableToolbarFilters
+                  fleets={fleets}
+                  selectedFleetNames={selectedFleets}
+                  setSelectedFleets={setSelectedFleets}
+                  allLabels={allLabels}
+                  selectedLabels={selectedLabels}
+                  setSelectedLabels={setSelectedLabels}
+                />
+              </ToolbarItem>
+            </ToolbarGroup>
+          </ToolbarContent>
+        </Toolbar>
+      </FlexItem>
+
+      {hasFilters && (
+        <StackItem>
+          <Flex>
+            {!!selectedFleets.length && (
+              <FlexItem>
+                <ChipGroup categoryName={t('Fleets')} isClosable onClick={() => setSelectedFleets([])}>
+                  {selectedFleets.map((fleet) => (
+                    <Chip key={fleet} onClick={() => setSelectedFleets(selectedFleets.filter((f) => f !== fleet))}>
+                      {fleet}
+                    </Chip>
+                  ))}
+                </ChipGroup>
+              </FlexItem>
+            )}
+            {!!selectedLabels.length && (
+              <FlexItem>
+                <ChipGroup categoryName={t('Labels')} isClosable onClick={() => setSelectedLabels([])}>
+                  {selectedLabels.map((l) => {
+                    const label = labelToString(l);
+                    return (
+                      <Chip
+                        key={label}
+                        onClick={() => setSelectedLabels(selectedLabels.filter((l) => labelToString(l) !== label))}
+                      >
+                        {label}
+                      </Chip>
+                    );
+                  })}
+                </ChipGroup>
+              </FlexItem>
+            )}
+            <FlexItem>
+              <Button
+                variant="link"
+                onClick={() => {
+                  setSelectedLabels([]);
+                  setSelectedFleets([]);
+                }}
+              >
+                {t('Clear all filters')}
+              </Button>
+            </FlexItem>
+          </Flex>
+        </StackItem>
+      )}
+    </Flex>
+  );
+};
+
+export default StatusCardFilters;

package/src/components/OverviewPage/Cards/Status/SystemUpdateStatusChart.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+import { DeviceUpdatedStatusType } from '@flightctl/types';
+import { FlightCtlLabel } from '../../../../types/extraTypes';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { getUpdateStatusHelperText } from '../../../Status/utils';
+import { getSystemUpdateStatusItems } from '../../../../utils/status/system';
+import { FilterSearchParams } from '../../../../utils/status/devices';
+import { toOverviewChartData } from './utils';
+import DonutChart from '../../../charts/DonutChart';
+
+const SystemUpdateStatusChart = ({
+  updatedStatus,
+  labels,
+  fleets,
+}: {
+  updatedStatus: Record<string, number>;
+  labels: FlightCtlLabel[];
+  fleets: string[];
+}) => {
+  const { t } = useTranslation();
+
+  const statusItems = getSystemUpdateStatusItems(t);
+
+  const updateStatusData = toOverviewChartData<DeviceUpdatedStatusType>(
+    updatedStatus,
+    statusItems,
+    labels,
+    fleets,
+    FilterSearchParams.UpdatedStatus,
+  );
+
+  return (
+    <DonutChart title={t('System update status')} data={updateStatusData} helperText={getUpdateStatusHelperText(t)} />
+  );
+};
+
+export default SystemUpdateStatusChart;

package/src/components/OverviewPage/Cards/Status/utils.ts

@@ -0,0 +1,19 @@
+import { FlightCtlLabel } from '../../../../types/extraTypes';
+import { labelToString } from '../../../../utils/labels';
+import { FilterSearchParams } from '../../../../utils/status/devices';
+import { StatusItem } from '../../../../utils/status/common';
+import { StatusMap, toChartData } from '../../../charts/utils';
+
+export const toOverviewChartData = <T extends string>(
+  map: StatusMap,
+  statusItems: StatusItem<T>[],
+  labels: FlightCtlLabel[],
+  fleetNames: string[],
+  filterName: FilterSearchParams,
+) => {
+  const baseQuery = new URLSearchParams();
+  labels.forEach((l) => baseQuery.append(FilterSearchParams.Label, labelToString(l)));
+  fleetNames.forEach((f) => baseQuery.append(FilterSearchParams.Fleet, f));
+
+  return toChartData<T>(map, statusItems, baseQuery, filterName);
+};

package/src/components/OverviewPage/Cards/ToDo/ToDoCard.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {
+  Bullseye,
+  Card,
+  CardBody,
+  CardTitle,
+  List,
+  ListItem,
+  Spinner,
+  Split,
+  SplitItem,
+  Text,
+  TextContent,
+  TextVariants,
+} from '@patternfly/react-core';
+import { EnrollmentRequestList } from '@flightctl/types';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { useFetchPeriodically } from '../../../../hooks/useFetchPeriodically';
+import { EnrollmentRequestStatus, getApprovalStatus } from '../../../../utils/status/enrollmentRequest';
+import { Link, ROUTE } from '../../../../hooks/useNavigate';
+import ErrorAlert from '../../../ErrorAlert/ErrorAlert';
+
+const ToDoCard = () => {
+  const { t } = useTranslation();
+  const [erList, loading, error] = useFetchPeriodically<EnrollmentRequestList>({
+    endpoint: 'enrollmentrequests',
+  });
+
+  let content: React.ReactNode;
+  if (loading) {
+    content = (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  } else if (error) {
+    content = <ErrorAlert error={error} />;
+  } else {
+    const pendingErs = erList?.items.filter((er) => getApprovalStatus(er) === EnrollmentRequestStatus.Pending);
+    if (pendingErs?.length) {
+      content = (
+        <List>
+          <ListItem>
+            <Split hasGutter>
+              <SplitItem isFilled>{t('{{ count }} devices pending approval', { count: pendingErs.length })}</SplitItem>
+              <SplitItem>
+                <Link to={ROUTE.DEVICES}>{t('Review pending devices', { count: pendingErs.length })}</Link>
+              </SplitItem>
+            </Split>
+          </ListItem>
+        </List>
+      );
+    } else {
+      content = (
+        <Bullseye>
+          <TextContent>
+            <Text component={TextVariants.small}>{t('All good!')}</Text>
+          </TextContent>
+        </Bullseye>
+      );
+    }
+  }
+
+  return (
+    <Card>
+      <CardTitle>{t('To do')}</CardTitle>
+      <CardBody>{content}</CardBody>
+    </Card>
+  );
+};
+
+export default ToDoCard;

package/src/components/OverviewPage/Overview.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Grid, GridItem } from '@patternfly/react-core';
+import StatusCard from './Cards/Status/StatusCard';
+import ToDoCard from './Cards/ToDo/ToDoCard';
+
+const Overview = () => {
+  return (
+    <Grid hasGutter>
+      <GridItem>
+        <StatusCard />
+      </GridItem>
+      <GridItem span={4}>
+        <ToDoCard />
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default Overview;

package/src/components/OverviewPage/OverviewPage.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Overview from './Overview';
+import { useTranslation } from '../../hooks/useTranslation';
+import { PageSection, PageSectionVariants, Title } from '@patternfly/react-core';
+
+const OverviewPage = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <PageSection variant={PageSectionVariants.light}>
+        <Title headingLevel="h1" size="3xl" role="heading">
+          {t('Overview')}
+        </Title>
+      </PageSection>
+      <PageSection variant={PageSectionVariants.light} isFilled>
+        <Overview />
+      </PageSection>
+    </>
+  );
+};
+
+export default OverviewPage;

package/src/components/Repository/CreateRepository/CreateRepository.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import {
+  Alert,
+  Breadcrumb,
+  BreadcrumbItem,
+  Bullseye,
+  Button,
+  ExpandableSection,
+  PageSection,
+  PageSectionVariants,
+  Spinner,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useFetch } from '../../../hooks/useFetch';
+
+import CreateRepositoryForm from './CreateRepositoryForm';
+
+import { isPromiseFulfilled } from '../../../types/typeUtils';
+import { Repository, ResourceSync, ResourceSyncList } from '@flightctl/types';
+import { getErrorMessage } from '../../../utils/error';
+import { Link, ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import { useAppContext } from '../../../hooks/useAppContext';
+
+const CreateRepository = () => {
+  const { t } = useTranslation();
+  const {
+    router: { useParams },
+  } = useAppContext();
+  const { repositoryId } = useParams<{ repositoryId: string }>();
+  const { get } = useFetch();
+  const [repoError, setRepoError] = React.useState<string>();
+  const [rsError, setRsError] = React.useState<string>();
+  const [isLoading, setIsLoading] = React.useState(!!repositoryId);
+  const [repositoryDetails, setRepositoryDetails] = React.useState<Repository>();
+  const [resourceSyncs, setResourceSyncs] = React.useState<ResourceSync[]>();
+  const navigate = useNavigate();
+
+  React.useEffect(() => {
+    const fetchResources = async () => {
+      setIsLoading(true);
+      try {
+        const results = await Promise.allSettled([
+          get<Repository>(`repositories/${repositoryId}`),
+          get<ResourceSyncList>(`resourcesyncs?repository=${repositoryId}`),
+        ]);
+
+        if (isPromiseFulfilled(results[0])) {
+          setRepositoryDetails(results[0].value);
+          if (isPromiseFulfilled(results[1])) {
+            setResourceSyncs(results[1].value.items);
+          } else {
+            setRsError(getErrorMessage(results[1].reason));
+          }
+        } else {
+          setRepoError(getErrorMessage(results[0].reason));
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    if (repositoryId) {
+      void fetchResources();
+    }
+  }, [get, repositoryId]);
+
+  const reloadResourceSyncs = React.useCallback(() => {
+    const reload = async () => {
+      try {
+        setIsLoading(true);
+        const rsList = await get<ResourceSyncList>(`resourcesyncs?labelSelector=repository=${repositoryId}`);
+        setResourceSyncs(rsList.items);
+        setRsError(undefined);
+      } catch (e) {
+        setRsError(getErrorMessage(e));
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    void reload();
+  }, [get, repositoryId]);
+
+  let content: React.ReactNode;
+
+  if (repoError) {
+    content = (
+      <Alert isInline variant="danger" title={t('An error occurred')}>
+        <div>
+          {t('Failed to retrieve repository details')}:{repoError}
+        </div>
+      </Alert>
+    );
+  } else if (isLoading) {
+    content = (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  } else {
+    content = (
+      <CreateRepositoryForm
+        onClose={() => navigate(-1)}
+        onSuccess={(repo) => navigate({ route: ROUTE.REPO_DETAILS, postfix: repo.metadata.name })}
+        repository={repositoryDetails}
+        resourceSyncs={resourceSyncs}
+        options={{
+          isReadOnly: !!rsError,
+        }}
+      />
+    );
+  }
+
+  return (
+    <PageSection variant={PageSectionVariants.light}>
+      <Stack hasGutter>
+        <StackItem>
+          <Breadcrumb>
+            <BreadcrumbItem>
+              <Link to={ROUTE.REPOSITORIES}>{t('Repositories')}</Link>
+            </BreadcrumbItem>
+            <BreadcrumbItem isActive>{repositoryId ? t('Edit repository') : t('Create repository')}</BreadcrumbItem>
+          </Breadcrumb>
+          <Title headingLevel="h1" size="3xl">
+            {repositoryId ? t('Edit repository') : t('Create repository')}
+          </Title>
+        </StackItem>
+        {rsError && (
+          <Alert isInline variant="warning" title={t('Failed to retrieve the resource syncs')}>
+            {t('The repository cannot be modified at the moment because some of its details could not be obtained.')}
+            <Button variant="link" onClick={reloadResourceSyncs}>
+              {t('Try again')}
+            </Button>
+            <ExpandableSection toggleText={t('Details')}>{rsError}</ExpandableSection>
+          </Alert>
+        )}
+        <StackItem>{content}</StackItem>
+      </Stack>
+    </PageSection>
+  );
+};
+
+export default CreateRepository;

package/src/components/Repository/CreateRepository/CreateRepositoryForm.css

@@ -0,0 +1,7 @@
+.fctl-create-repo fieldset {
+  border: none;
+}
+
+.fctl-create-repo__adv-section--nested {
+    margin-left: 1.5rem;
+}