@flightctl/ui-components 0.0.4 → 0.0.10

package/src/components/Repository/RepositoryDetails/RepositoryDetails.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { DropdownItem, DropdownList, Grid, GridItem } from '@patternfly/react-core';
+
+import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
+import { RepoSpecType, Repository } from '@flightctl/types';
+
+import DetailsPage from '../../DetailsPage/DetailsPage';
+import DetailsPageActions from '../../DetailsPage/DetailsPageActions';
+import RepositoryGeneralDetailsCard from './RepositoryGeneralDetailsCard';
+import RepositoryResourceSyncsCard from './RepositoryResourceSyncsCard';
+import DeleteRepositoryModal from './DeleteRepositoryModal';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import { useAppContext } from '../../../hooks/useAppContext';
+
+const RepositoryDetails = () => {
+  const { t } = useTranslation();
+  const {
+    router: { useParams },
+  } = useAppContext();
+  const { repositoryId } = useParams() as { repositoryId: string };
+  const [repoDetails, isLoading, error] = useFetchPeriodically<Required<Repository>>({
+    endpoint: `repositories/${repositoryId}`,
+  });
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState<boolean>(false);
+
+  const navigate = useNavigate();
+
+  const onDeleteSuccess = () => {
+    navigate(ROUTE.REPOSITORIES);
+  };
+
+  return (
+    <DetailsPage
+      loading={isLoading}
+      error={error}
+      id={repositoryId}
+      title={repoDetails?.metadata.name as string}
+      resourceLink={ROUTE.REPOSITORIES}
+      resourceType="Repositories"
+      resourceTypeLabel={t('Repositories')}
+      actions={
+        <DetailsPageActions>
+          <DropdownList>
+            <DropdownItem onClick={() => navigate({ route: ROUTE.REPO_EDIT, postfix: repositoryId })}>
+              {t('Edit repository')}
+            </DropdownItem>
+            <DropdownItem onClick={() => setIsDeleteModalOpen(true)}>{t('Delete repository')}</DropdownItem>
+          </DropdownList>
+        </DetailsPageActions>
+      }
+    >
+      {repoDetails && (
+        <>
+          <Grid hasGutter>
+            <GridItem>
+              <RepositoryGeneralDetailsCard repoDetails={repoDetails} />
+            </GridItem>
+            {repoDetails.spec.type !== RepoSpecType.HTTP && (
+              <GridItem>
+                <RepositoryResourceSyncsCard repositoryId={repositoryId} />
+              </GridItem>
+            )}
+          </Grid>
+          {isDeleteModalOpen && (
+            <DeleteRepositoryModal
+              onClose={() => setIsDeleteModalOpen(false)}
+              onDeleteSuccess={onDeleteSuccess}
+              repositoryId={repositoryId}
+            />
+          )}
+        </>
+      )}
+    </DetailsPage>
+  );
+};
+
+export default RepositoryDetails;

package/src/components/Repository/RepositoryDetails/RepositoryGeneralDetailsCard.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Icon,
+} from '@patternfly/react-core';
+import { LockIcon } from '@patternfly/react-icons/dist/js/icons/lock-icon';
+import { LockOpenIcon } from '@patternfly/react-icons/dist/js/icons/lock-open-icon';
+
+import { RepoSpecType, Repository } from '@flightctl/types';
+
+import { getLastTransitionTimeText, getRepositorySyncStatus } from '../../../utils/status/repository';
+import { useTranslation } from '../../../hooks/useTranslation';
+import FlightControlDescriptionList from '../../common/FlightCtlDescriptionList';
+import RepositoryStatus from '../../Status/RepositoryStatus';
+import { isHttpRepoSpec, isSshRepoSpec } from '../CreateRepository/utils';
+import { GitRepositoryLink, HttpRepositoryUrl } from './RepositorySource';
+
+const RepoPrivacy = ({ repo }: { repo: Repository }) => {
+  const { t } = useTranslation();
+  let isPrivate = false;
+  if (isHttpRepoSpec(repo.spec)) {
+    if (repo.spec.httpConfig.password || repo.spec.httpConfig['tls.crt'] || repo.spec.httpConfig['tls.key']) {
+      isPrivate = true;
+    }
+  } else if (isSshRepoSpec(repo.spec)) {
+    if (repo.spec.sshConfig.sshPrivateKey) {
+      isPrivate = true;
+    }
+  }
+
+  return isPrivate ? (
+    <>
+      <Icon>
+        <LockIcon />
+      </Icon>{' '}
+      {t('Private repository')}
+    </>
+  ) : (
+    <>
+      <Icon>
+        <LockOpenIcon />
+      </Icon>{' '}
+      {t('Public repository')}
+    </>
+  );
+};
+
+const DetailsTab = ({ repoDetails }: { repoDetails: Repository }) => {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <CardTitle>{t('Details')}</CardTitle>
+      <CardBody>
+        <FlightControlDescriptionList columnModifier={{ lg: '3Col' }}>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Url')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {repoDetails?.spec.type === RepoSpecType.HTTP ? (
+                <HttpRepositoryUrl url={repoDetails.spec.url} />
+              ) : (
+                <GitRepositoryLink url={repoDetails.spec.url} />
+              )}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Type')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {repoDetails?.spec.type === RepoSpecType.HTTP ? t('HTTP service') : t('Git repository')}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup />
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Status')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {' '}
+              {repoDetails ? <RepositoryStatus statusInfo={getRepositorySyncStatus(repoDetails)} /> : '-'}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Privacy')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <RepoPrivacy repo={repoDetails} />
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Last transition')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {repoDetails ? getLastTransitionTimeText(repoDetails, t).text : '-'}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </FlightControlDescriptionList>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default DetailsTab;

package/src/components/Repository/RepositoryDetails/RepositoryResourceSyncsCard.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Card, CardBody, CardTitle } from '@patternfly/react-core';
+
+import WithHelperText from '../../common/WithHelperText';
+import RepositoryResourceSyncList from '../../ResourceSync/RepositoryResourceSyncList';
+import { useTranslation } from '../../../hooks/useTranslation';
+
+const ResourceSyncsTab = ({ repositoryId }: { repositoryId: string }) => {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <CardTitle>
+        <WithHelperText
+          showLabel
+          ariaLabel={t('Resource syncs')}
+          content={t(
+            'Device management service will monitor the specified paths, import the defined fleets and synchronise devices',
+          )}
+        />
+      </CardTitle>
+      <CardBody>
+        <RepositoryResourceSyncList repositoryId={repositoryId} />
+      </CardBody>
+    </Card>
+  );
+};
+
+export default ResourceSyncsTab;

package/src/components/Repository/RepositoryDetails/RepositorySource.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Button, Icon, Tooltip } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+
+import {
+  GitConfigProviderSpec,
+  HttpConfigProviderSpec,
+  InlineConfigProviderSpec,
+  KubernetesSecretProviderSpec,
+} from '@flightctl/types';
+import {
+  ConfigSourceProvider,
+  ConfigType,
+  RepoConfig,
+  getConfigFullRepoUrl,
+  getRepoName,
+  isHttpProviderSpec,
+} from '../../../types/deviceSpec';
+import CopyButton from '../../common/CopyButton';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { getConfigType } from '../../Device/EditDeviceWizard/deviceSpecUtils';
+
+type ExtraArgs = Record<string, string>;
+
+export const DefaultConfigDetails = ({
+  config,
+}: {
+  config: InlineConfigProviderSpec | KubernetesSecretProviderSpec;
+}) => {
+  return <>{config.name}</>;
+};
+
+export const HttpRepositoryUrl = ({ name, url }: { name?: string; url: string }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      {name || url}
+      <CopyButton text={url} ariaLabel={t('Copy Url')} />
+    </>
+  );
+};
+
+export const GitRepositoryLink = ({ name, url }: { name?: string; url: string }) => (
+  <Button
+    component="a"
+    variant="link"
+    isInline
+    href={url}
+    target="_blank"
+    icon={<ExternalLinkAltIcon />}
+    iconPosition="end"
+  >
+    {name || url}
+  </Button>
+);
+
+export const RepositoryConfigDetails = ({ config, extraArgs }: { config: RepoConfig; extraArgs: ExtraArgs }) => {
+  const { t } = useTranslation();
+  if (extraArgs.errorMsg) {
+    const fullError = `${t('The repository "{{name}}" defined for this source failed to load.', {
+      name: getRepoName(config),
+    })} ${extraArgs.errorMsg}`;
+    return (
+      <>
+        {config.name}{' '}
+        <Tooltip content={fullError}>
+          <Icon status="danger">
+            <ExclamationCircleIcon />
+          </Icon>
+        </Tooltip>
+      </>
+    );
+  }
+
+  const url = getConfigFullRepoUrl(config, extraArgs.url);
+  if (isHttpProviderSpec(config)) {
+    return <HttpRepositoryUrl name={config.name} url={url} />;
+  }
+  return <GitRepositoryLink name={config.name} url={url} />;
+};
+
+export const getConfigDetails = (config: ConfigSourceProvider, extraArgs: ExtraArgs) => {
+  switch (getConfigType(config)) {
+    case ConfigType.GIT:
+    case ConfigType.HTTP:
+      return (
+        <RepositoryConfigDetails
+          config={config as GitConfigProviderSpec | HttpConfigProviderSpec}
+          extraArgs={extraArgs}
+        />
+      );
+    default:
+      return <DefaultConfigDetails config={config as KubernetesSecretProviderSpec | InlineConfigProviderSpec} />;
+  }
+};

package/src/components/Repository/RepositoryDetails/RepositorySourceList.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { List, ListItem, Spinner } from '@patternfly/react-core';
+
+import { Repository } from '@flightctl/types';
+import { useFetch } from '../../../hooks/useFetch';
+import { ConfigSourceProvider, getRepoName, isRepoConfig } from '../../../types/deviceSpec';
+import { isPromiseRejected } from '../../../types/typeUtils';
+import { getErrorMessage } from '../../../utils/error';
+import { getConfigDetails } from './RepositorySource';
+
+const useArrayEq = (array: string[]) => {
+  const prevArrayRef = React.useRef(array);
+
+  if (prevArrayRef.current.length !== array.length || prevArrayRef.current.some((item) => !array.includes(item))) {
+    prevArrayRef.current = array;
+  }
+
+  return prevArrayRef.current;
+};
+
+type RepoLoadDetails = { url?: string; errorMsg?: string };
+
+const RepositorySourceList = ({ configs }: { configs: Array<ConfigSourceProvider> }) => {
+  const { get } = useFetch();
+  const repoConfigs = configs.filter(isRepoConfig);
+
+  // Map indexed by repository name, with the result of fetching the repository details
+  const [repoDetailsMap, setRepoDetailsMap] = React.useState<Record<string, Record<string, RepoLoadDetails>>>({});
+
+  const repoConfigNames = useArrayEq(repoConfigs.map((config) => config.name));
+  const repositoryNames = useArrayEq(repoConfigs.map(getRepoName));
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+
+  React.useEffect(() => {
+    const fetch = async () => {
+      const promises = repositoryNames.map((repoName) => get<Repository>(`repositories/${repoName}`));
+      const results = await Promise.allSettled(promises);
+
+      const map = {};
+      results.forEach((result, index) => {
+        const isRepoMissing = isPromiseRejected(result);
+        const repoName = repositoryNames[index];
+
+        const repoInfo: { url?: string; errorMsg?: string } = {};
+        if (isRepoMissing) {
+          repoInfo.errorMsg = getErrorMessage(result.reason);
+        } else {
+          repoInfo.url = result.value.spec.url;
+        }
+        map[repoName] = repoInfo;
+      });
+      setRepoDetailsMap(map);
+      setIsLoading(false);
+    };
+
+    void fetch();
+  }, [get, repoConfigNames, repositoryNames]);
+
+  if (isLoading) {
+    return <Spinner size="sm" />;
+  }
+
+  return configs.length > 0 ? (
+    <List>
+      {configs.map((config) => {
+        let extraArgs = {};
+        if (isRepoConfig(config)) {
+          const repoName = getRepoName(config);
+          extraArgs = repoDetailsMap[repoName] || {};
+        }
+        return <ListItem key={config.name}>{getConfigDetails(config, extraArgs)}</ListItem>;
+      })}
+    </List>
+  ) : (
+    '-'
+  );
+};
+
+export default RepositorySourceList;

package/src/components/Repository/RepositoryList.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import {
+  Button,
+  DropdownList,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  SelectOption,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import { ActionsColumn, Tbody, Td, Tr } from '@patternfly/react-table';
+import { RepositoryIcon } from '@patternfly/react-icons/dist/js/icons/repository-icon';
+import { TFunction } from 'i18next';
+
+import { RepoSpecType, Repository, RepositoryList } from '@flightctl/types';
+import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
+import ListPageBody from '../ListPage/ListPageBody';
+import ListPage from '../ListPage/ListPage';
+import { getLastTransitionTimeText, getRepositorySyncStatus } from '../../utils/status/repository';
+import { useTableSort } from '../../hooks/useTableSort';
+import { sortByName } from '../../utils/sort/generic';
+import * as repoSort from '../../utils/sort/repository';
+import { useTableTextSearch } from '../../hooks/useTableTextSearch';
+import DeleteRepositoryModal from './RepositoryDetails/DeleteRepositoryModal';
+import TableTextSearch from '../Table/TableTextSearch';
+import Table, { TableColumn } from '../Table/Table';
+import TableActions from '../Table/TableActions';
+import { useTableSelect } from '../../hooks/useTableSelect';
+import MassDeleteRepositoryModal from '../modals/massModals/MassDeleteRepositoryModal/MassDeleteRepositoryModal';
+import ResourceListEmptyState from '../common/ResourceListEmptyState';
+import { useTranslation } from '../../hooks/useTranslation';
+import { ROUTE, useNavigate } from '../../hooks/useNavigate';
+import ResourceLink from '../common/ResourceLink';
+import RepositoryStatus from '../Status/RepositoryStatus';
+
+const CreateRepositoryButton = ({ buttonText }: { buttonText?: string }) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  return (
+    <Button variant="primary" onClick={() => navigate(ROUTE.REPO_CREATE)}>
+      {buttonText || t('Create a repository')}
+    </Button>
+  );
+};
+
+const RepositoryEmptyState = () => {
+  const { t } = useTranslation();
+  return (
+    <ResourceListEmptyState icon={RepositoryIcon} titleText={t('No repositories here!')}>
+      <EmptyStateBody>
+        <>
+          {t('You can create repositories and use them to point to Git repositories.')}
+          <br />
+          {t(` Adding resource syncs to them will allow you to keep your fleet's configurations updated and synced
+          automatically.`)}
+        </>
+      </EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <CreateRepositoryButton />
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </ResourceListEmptyState>
+  );
+};
+
+const getColumns = (t: TFunction): TableColumn<Repository>[] => [
+  {
+    name: t('Name'),
+    onSort: sortByName,
+  },
+  {
+    name: t('Type'),
+    onSort: repoSort.sortRepositoriesByType,
+  },
+  {
+    name: t('Url'),
+    onSort: repoSort.sortRepositoriesByUrl,
+  },
+  {
+    name: t('Sync status'),
+    onSort: repoSort.sortRepositoriesBySyncStatus,
+  },
+  {
+    name: t('Last transition'),
+    onSort: repoSort.sortRepositoriesByLastTransition,
+  },
+];
+
+const getSearchText = (repo: Repository) => [repo.metadata.name];
+
+const RepositoryTable = () => {
+  const { t } = useTranslation();
+  const [repositoryList, loading, error, refetch] = useFetchPeriodically<RepositoryList>({ endpoint: 'repositories' });
+  const [deleteModalRepoId, setDeleteModalRepoId] = React.useState<string>();
+  const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
+
+  const navigate = useNavigate();
+
+  const onDeleteSuccess = () => {
+    setDeleteModalRepoId(undefined);
+    refetch();
+  };
+
+  const { search, setSearch, filteredData } = useTableTextSearch(repositoryList?.items || [], getSearchText);
+
+  const columns = React.useMemo(() => getColumns(t), [t]);
+  const { getSortParams, sortedData } = useTableSort(filteredData, columns);
+
+  const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
+
+  return (
+    <ListPageBody error={error} loading={loading}>
+      <Toolbar inset={{ default: 'insetNone' }}>
+        <ToolbarContent>
+          <ToolbarGroup>
+            <ToolbarItem variant="search-filter">
+              <TableTextSearch value={search} setValue={setSearch} />
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarItem>
+            <CreateRepositoryButton buttonText={t('Create repository')} />
+          </ToolbarItem>
+          <ToolbarItem>
+            <TableActions isDisabled={!hasSelectedRows}>
+              <DropdownList>
+                <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
+              </DropdownList>
+            </TableActions>
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <Table
+        aria-label={t('Repositories table')}
+        loading={loading}
+        emptyFilters={filteredData.length === 0}
+        emptyData={(repositoryList?.items.length || 0) === 0}
+        isAllSelected={isAllSelected}
+        onSelectAll={setAllSelected}
+        columns={columns}
+        getSortParams={getSortParams}
+      >
+        <Tbody>
+          {sortedData.map((repository, rowIndex) => (
+            <Tr key={repository.metadata.name}>
+              <Td
+                select={{
+                  rowIndex,
+                  onSelect: onRowSelect(repository),
+                  isSelected: isRowSelected(repository),
+                }}
+              />
+              <Td dataLabel={t('Name')}>
+                <ResourceLink id={repository.metadata.name as string} routeLink={ROUTE.REPO_DETAILS} />
+              </Td>
+              <Td dataLabel={t('Type')}>
+                {repository.spec.type === RepoSpecType.HTTP ? t('HTTP service') : t('Git repository')}
+              </Td>
+              <Td dataLabel={t('Url')}>{repository.spec.url || '-'}</Td>
+              <Td dataLabel={t('Sync status')}>
+                <RepositoryStatus statusInfo={getRepositorySyncStatus(repository)} />
+              </Td>
+              <Td dataLabel={t('Last transition')}>{getLastTransitionTimeText(repository, t).text}</Td>
+              <Td isActionCell>
+                <ActionsColumn
+                  items={[
+                    {
+                      title: t('Edit repository'),
+                      onClick: () => navigate({ route: ROUTE.REPO_EDIT, postfix: repository.metadata.name }),
+                    },
+                    {
+                      title: t('Delete repository'),
+                      onClick: () => setDeleteModalRepoId(repository.metadata.name),
+                    },
+                  ]}
+                />
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+      {repositoryList?.items.length === 0 && <RepositoryEmptyState />}
+      {!!deleteModalRepoId && (
+        <DeleteRepositoryModal
+          onClose={() => setDeleteModalRepoId(undefined)}
+          onDeleteSuccess={onDeleteSuccess}
+          repositoryId={deleteModalRepoId}
+        />
+      )}
+      {isMassDeleteModalOpen && (
+        <MassDeleteRepositoryModal
+          onClose={() => setIsMassDeleteModalOpen(false)}
+          onDeleteSuccess={() => {
+            setIsMassDeleteModalOpen(false);
+            refetch();
+          }}
+          repositories={sortedData.filter(isRowSelected)}
+        />
+      )}
+    </ListPageBody>
+  );
+};
+
+const RepositoryList = () => {
+  const { t } = useTranslation();
+  return (
+    <ListPage title={t('Repositories')}>
+      <RepositoryTable />
+    </ListPage>
+  );
+};
+
+export default RepositoryList;

package/src/components/ResourceSync/RepositoryResourceSyncList.css

@@ -0,0 +1,14 @@
+.fctl-rslist-row--selected {
+  background-color: var(--pf-v5-global--palette--blue-50);
+}
+
+.pf-v5-theme-dark .fctl-rslist-row--selected {
+  background-color: var(--pf-v5-global--palette--blue-400);
+}
+
+.fctl-rslist__addrsbutton {
+  position: absolute;
+  right: 0;
+  display: inline-block;
+  top: 20%
+}