@flightctl/ui-components 0.0.3 → 0.0.5

package/src/components/Device/DeviceDetails/DeviceOs.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Icon, Popover, PopoverPosition } from '@patternfly/react-core';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+
+const DeviceOs = ({
+  desiredOsImage,
+  renderedOsImage,
+}: {
+  desiredOsImage: string | undefined;
+  renderedOsImage: string | undefined;
+}) => {
+  const hasDiff = desiredOsImage && desiredOsImage !== renderedOsImage;
+  const { t } = useTranslation();
+  let popover: React.ReactNode;
+  if (hasDiff) {
+    popover = (
+      <Popover
+        aria-label={t('System image mismatch')}
+        position={PopoverPosition.top}
+        headerContent={t('System image mismatch')}
+        bodyContent={t('Desired system image: {{ desiredOsImage }}', { desiredOsImage: desiredOsImage })}
+        withFocusTrap={false}
+      >
+        <>
+          {' '}
+          <Icon status="warning">
+            <ExclamationTriangleIcon />
+          </Icon>
+        </>
+      </Popover>
+    );
+  }
+  return (
+    <div>
+      {renderedOsImage || '-'}
+      {popover}
+    </div>
+  );
+};
+
+export default DeviceOs;

package/src/components/Device/DeviceDetails/DeviceStatusDebugModal.css

@@ -0,0 +1,3 @@
+.fctl-device-status-debug__actions {
+  text-align: right;
+}

package/src/components/Device/DeviceDetails/DeviceStatusDebugModal.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Button, CodeBlock, CodeBlockCode, Modal, Stack, StackItem } from '@patternfly/react-core';
+import { CopyIcon } from '@patternfly/react-icons/dist/js/icons/copy-icon';
+import { RedoIcon } from '@patternfly/react-icons/dist/js/icons/redo-icon';
+
+import { DeviceStatus } from '@flightctl/types';
+import { useTranslation } from '../../../hooks/useTranslation';
+
+import './DeviceStatusDebugModal.css';
+
+const DeviceStatusDebugModal = ({ status, onClose }: { status: DeviceStatus; onClose: VoidFunction }) => {
+  const { t } = useTranslation();
+  const [refreshVersion, setRefreshVersion] = React.useState<string>(status.lastSeen);
+
+  const statusJson = React.useMemo(() => {
+    return JSON.stringify({ deviceStatus: status }, null, 3);
+    // We only update the JSON when the "Refresh status" button is clicked
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refreshVersion]);
+
+  const onCopy = () => {
+    void navigator.clipboard.writeText(statusJson);
+  };
+
+  return (
+    <Modal
+      variant="medium"
+      isOpen
+      title={t('Device status debug information')}
+      showClose
+      disableFocusTrap
+      onClose={onClose}
+    >
+      <Stack hasGutter>
+        <StackItem className="fctl-device-status-debug__actions">
+          <Button variant="primary" icon={<CopyIcon />} onClick={onCopy}>
+            {t('Copy debug info')}
+          </Button>{' '}
+          <Button
+            variant="link"
+            icon={<RedoIcon />}
+            isDisabled={status.lastSeen === refreshVersion}
+            onClick={() => {
+              setRefreshVersion(status.lastSeen);
+            }}
+          >
+            {t('Load updated status')}
+          </Button>
+        </StackItem>
+        <StackItem>
+          <CodeBlock>
+            <CodeBlockCode>{statusJson}</CodeBlockCode>
+          </CodeBlock>
+        </StackItem>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default DeviceStatusDebugModal;

package/src/components/Device/DeviceDetails/SystemdTable.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { Button, Stack, StackItem } from '@patternfly/react-core';
+import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
+
+import { Device, TemplateVersion } from '@flightctl/types';
+import WithTooltip from '../../common/WithTooltip';
+import { getDeviceFleet } from '../../../utils/devices';
+
+import MatchPatternsModal from '../MatchPatternsModal/MatchPatternsModal';
+import { useTranslation } from '../../../hooks/useTranslation';
+import SystemdDetailsTable from '../../DetailsPage/Tables/SystemdDetailsTable';
+
+type SystemdTableProps = {
+  device: Device;
+  onSystemdUnitsUpdate: VoidFunction;
+  templateVersion?: TemplateVersion;
+};
+
+const SystemdTable: React.FC<SystemdTableProps> = ({ device, templateVersion, onSystemdUnitsUpdate }) => {
+  const { t } = useTranslation();
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const disabledEditReason = getDeviceFleet(device.metadata)
+    ? t('The device is owned by a fleet and it cannot be edited')
+    : '';
+
+  const matchPatterns = templateVersion
+    ? templateVersion?.status?.systemd?.matchPatterns
+    : device.spec?.systemd?.matchPatterns;
+  // There is no status information for systemdunits
+  const systemdUnits = [];
+
+  return (
+    <>
+      <Stack hasGutter>
+        <StackItem>
+          <Button
+            variant="link"
+            icon={<PencilAltIcon />}
+            onClick={() => setIsModalOpen(true)}
+            isAriaDisabled={!!disabledEditReason}
+          >
+            <WithTooltip showTooltip={!!disabledEditReason} content={disabledEditReason}>
+              <span>{t('Edit')}</span>
+            </WithTooltip>
+          </Button>
+        </StackItem>
+        <StackItem>
+          <SystemdDetailsTable matchPatterns={matchPatterns} systemdUnits={systemdUnits} />
+        </StackItem>
+      </Stack>
+      {isModalOpen && (
+        <MatchPatternsModal
+          device={device}
+          onClose={(reload) => {
+            setIsModalOpen(false);
+            reload && onSystemdUnitsUpdate();
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default SystemdTable;

package/src/components/Device/DeviceDetails/TerminalTab.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Alert, AlertActionLink, Stack, StackItem } from '@patternfly/react-core';
+import { Device } from '@flightctl/types';
+
+import { useWebSocket } from '../../../hooks/useWebSocket';
+import ErrorAlert from '../../ErrorAlert/ErrorAlert';
+import { useTranslation } from '../../../hooks/useTranslation';
+import Terminal, { ImperativeTerminalType } from '../../Terminal/Terminal';
+
+const TerminalTab = ({ device }: { device: Device }) => {
+  const { t } = useTranslation();
+  const terminal = React.useRef<ImperativeTerminalType>(null);
+
+  const onMsgReceived = React.useCallback((message: string) => {
+    terminal.current?.onDataReceived(message);
+  }, []);
+
+  const { sendMessage, isClosed, error, reconnect } = useWebSocket(
+    `/api/terminal/${device.metadata.name}`,
+    onMsgReceived,
+  );
+
+  if (error) {
+    return <ErrorAlert error={error} />;
+  }
+
+  return (
+    <Stack hasGutter>
+      {isClosed && (
+        <Alert
+          isInline
+          variant="info"
+          title={t('Connection was closed')}
+          actionLinks={
+            <AlertActionLink
+              onClick={() => {
+                terminal.current?.reset();
+                reconnect();
+              }}
+            >
+              {t('Reconnect')}
+            </AlertActionLink>
+          }
+        />
+      )}
+      <StackItem>
+        <Terminal onData={sendMessage} ref={terminal} />
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default TerminalTab;

package/src/components/Device/DevicesPage/DeviceFilterSelect.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { Grid, GridItem, SelectList, SelectOption } from '@patternfly/react-core';
+import { TFunction } from 'i18next';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import FilterSelect, { FilterSelectGroup } from '../../form/FilterSelect';
+import { fuzzySeach } from '../../../utils/search';
+import { FilterOptionsFC, FilterStatusMap, UpdateStatus } from './types';
+import StatusDisplay from '../../Status/StatusDisplay';
+import { DeviceSummaryStatus, FilterSearchParams, getDeviceStatusItems } from '../../../utils/status/devices';
+import { StatusItem } from '../../../utils/status/common';
+import { getApplicationSummaryStatusItems } from '../../../utils/status/applications';
+import { getSystemUpdateStatusItems } from '../../../utils/status/system';
+
+export const getStatusItem = (
+  t: TFunction,
+  key: keyof FilterStatusMap,
+): {
+  title: string;
+  items: StatusItem<DeviceSummaryStatus>[];
+} => {
+  switch (key) {
+    case FilterSearchParams.AppStatus:
+      return {
+        title: t('Application status'),
+        items: getApplicationSummaryStatusItems(t),
+      };
+    case FilterSearchParams.DeviceStatus:
+      return {
+        title: t('Device status'),
+        items: getDeviceStatusItems(t),
+      };
+    default:
+      return {
+        title: t('System update status'),
+        items: getSystemUpdateStatusItems(t),
+      };
+  }
+};
+
+const FilterOption: FilterOptionsFC = ({ items, selectedFilters, onClick, filter }) => {
+  const { t } = useTranslation();
+  const filteredItems = items.filter((statusItem) => fuzzySeach(filter, statusItem.label));
+  if (!filteredItems.length) {
+    return (
+      <SelectOption key="no-option" isDisabled>
+        {t('No status available')}
+      </SelectOption>
+    );
+  }
+  return filteredItems.map((statusItem) => (
+    <SelectOption
+      onClick={() => onClick(statusItem.id)}
+      key={statusItem.id}
+      hasCheckbox
+      value={statusItem.id}
+      isSelected={selectedFilters.includes(statusItem.id)}
+    >
+      <StatusDisplay item={statusItem} />
+    </SelectOption>
+  ));
+};
+
+type DeviceStatusFilterProps = {
+  activeStatuses: FilterStatusMap;
+  updateStatus: UpdateStatus;
+  isFilterUpdating: boolean;
+};
+
+const DeviceStatusFilter = ({ activeStatuses, updateStatus, isFilterUpdating }: DeviceStatusFilterProps) => {
+  const { t } = useTranslation();
+  const [filter, setFilter] = React.useState('');
+
+  const selectedFilters = Object.values(activeStatuses).reduce((acc, curr) => {
+    acc += curr.length;
+    return acc;
+  }, 0);
+
+  return (
+    <FilterSelect
+      selectedFilters={selectedFilters}
+      placeholder={t('Filter by status')}
+      filter={filter}
+      setFilter={setFilter}
+      isFilterUpdating={isFilterUpdating}
+    >
+      <SelectList>
+        <Grid hasGutter>
+          {Object.keys(activeStatuses).map((k) => {
+            const key = k as keyof FilterStatusMap;
+            const { title, items } = getStatusItem(t, key);
+            return (
+              <GridItem key={key} span={4}>
+                <FilterSelectGroup label={title}>
+                  <FilterOption
+                    filter={filter}
+                    items={items}
+                    selectedFilters={activeStatuses[key]}
+                    onClick={(value) => updateStatus(key, value)}
+                  />
+                </FilterSelectGroup>
+              </GridItem>
+            );
+          })}
+        </Grid>
+      </SelectList>
+    </FilterSelect>
+  );
+};
+
+export default DeviceStatusFilter;

package/src/components/Device/DevicesPage/DeviceTableRow.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { ActionsColumn, OnSelect, Td, Tr } from '@patternfly/react-table';
+
+import { Device } from '@flightctl/types';
+import DeviceFleet from '../DeviceDetails/DeviceFleet';
+import { timeSinceText } from '../../../utils/dates';
+import { getDeviceFleet } from '../../../utils/devices';
+import { DeleteListActionResult } from '../../ListPage/types';
+import ApplicationSummaryStatus from '../../Status/ApplicationSummaryStatus';
+import DeviceStatus from '../../Status/DeviceStatus';
+import SystemUpdateStatus from '../../Status/SystemUpdateStatus';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import ResourceLink from '../../common/ResourceLink';
+
+type DeviceTableRowProps = {
+  device: Device;
+  deleteAction: DeleteListActionResult['deleteAction'];
+  rowIndex: number;
+  onRowSelect: (device: Device) => OnSelect;
+  isRowSelected: (device: Device) => boolean;
+};
+
+const DeviceTableRow: React.FC<DeviceTableRowProps> = ({
+  device,
+  deleteAction,
+  rowIndex,
+  onRowSelect,
+  isRowSelected,
+}) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const deviceName = device.metadata.name as string;
+  const deviceAlias = device.metadata.labels?.alias;
+  const editActionProps = getDeviceFleet(device?.metadata)
+    ? {
+        isAriaDisabled: true,
+        tooltipProps: {
+          content: t('Device is bound to a fleet. Its configurations cannot be edited'),
+        },
+      }
+    : undefined;
+
+  return (
+    <Tr>
+      <Td
+        select={{
+          rowIndex,
+          onSelect: onRowSelect(device),
+          isSelected: isRowSelected(device),
+        }}
+      />
+      <Td dataLabel={t('Alias')}>
+        <ResourceLink id={deviceName} name={deviceAlias || t('Untitled')} routeLink={ROUTE.DEVICE_DETAILS} />
+      </Td>
+      <Td dataLabel={t('Name')}>
+        <ResourceLink id={deviceName} />
+      </Td>
+      <Td dataLabel={t('Fleet')}>
+        <DeviceFleet device={device} />
+      </Td>
+      <Td dataLabel={t('Application status')}>
+        <ApplicationSummaryStatus statusSummary={device.status?.applicationsSummary} />
+      </Td>
+      <Td dataLabel={t('Device status')}>
+        <DeviceStatus deviceStatus={device.status} />
+      </Td>
+      <Td dataLabel={t('System update status')}>
+        <SystemUpdateStatus deviceStatus={device.status} />
+      </Td>
+      <Td dataLabel={t('Last seen')}>{timeSinceText(t, device.status?.lastSeen)}</Td>
+      <Td isActionCell>
+        <ActionsColumn
+          items={[
+            {
+              title: t('Edit device configurations'),
+              onClick: () => navigate({ route: ROUTE.DEVICE_EDIT, postfix: deviceName }),
+              ...editActionProps,
+            },
+            {
+              title: t('View device details'),
+              onClick: () => navigate({ route: ROUTE.DEVICE_DETAILS, postfix: deviceName }),
+            },
+            deleteAction({
+              resourceId: deviceName,
+              resourceName: deviceAlias,
+            }),
+          ]}
+        />
+      </Td>
+    </Tr>
+  );
+};
+
+export default DeviceTableRow;

package/src/components/Device/DevicesPage/DeviceTableToolbar.tsx

@@ -0,0 +1,195 @@
+import * as React from 'react';
+import {
+  Button,
+  Chip,
+  ChipGroup,
+  Split,
+  SplitItem,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
+
+import { Fleet } from '@flightctl/types';
+import { TableTextSearchProps } from '../../Table/TableTextSearch';
+import { useTranslation } from '../../../hooks/useTranslation';
+import DeviceStatusFilter, { getStatusItem } from './DeviceFilterSelect';
+import { FilterStatusMap, UpdateStatus } from './types';
+import { FlightCtlLabel } from '../../../types/extraTypes';
+import { labelToString } from '../../../utils/labels';
+import DeviceTableToolbarFilters from './DeviceToolbarFilters';
+
+type DeviceTableToolbarProps = {
+  search: TableTextSearchProps['value'];
+  setSearch: TableTextSearchProps['setValue'];
+  allLabels: FlightCtlLabel[];
+  ownerFleets: string[];
+  setOwnerFleets: (ownerFleets: string[]) => void;
+  activeStatuses: FilterStatusMap;
+  setActiveStatuses: (statuses: FilterStatusMap) => void;
+  selectedLabels: FlightCtlLabel[];
+  setSelectedLabels: (labels: FlightCtlLabel[]) => void;
+  fleets: Fleet[];
+  isFilterUpdating: boolean;
+};
+
+const DeviceTableToolbar: React.FC<React.PropsWithChildren<DeviceTableToolbarProps>> = ({ children, ...rest }) => {
+  const {
+    ownerFleets,
+    setOwnerFleets,
+    search,
+    setSearch,
+    activeStatuses,
+    setActiveStatuses,
+    allLabels,
+    selectedLabels,
+    setSelectedLabels,
+    fleets,
+    isFilterUpdating,
+  } = rest;
+
+  const updateStatus: UpdateStatus = (statusType, status) => {
+    if (!statusType) {
+      setActiveStatuses(
+        Object.keys(activeStatuses).reduce((acc, curr) => {
+          acc[curr] = [];
+          return acc;
+        }, {} as FilterStatusMap),
+      );
+    } else {
+      if (!status) {
+        setActiveStatuses({ ...activeStatuses, [statusType]: [] });
+      } else {
+        if (activeStatuses[statusType].find((s) => s === status)) {
+          const newStatuses = activeStatuses[statusType].filter((s) => s !== status);
+          setActiveStatuses({ ...activeStatuses, [statusType]: newStatuses });
+        } else {
+          const newValue = [...activeStatuses[statusType], status];
+          setActiveStatuses({ ...activeStatuses, [statusType]: newValue });
+        }
+      }
+    }
+  };
+
+  return (
+    <>
+      <Toolbar id="devices-toolbar" inset={{ default: 'insetNone' }}>
+        <ToolbarContent>
+          <ToolbarGroup>
+            <ToolbarItem variant="search-filter">
+              <DeviceStatusFilter
+                activeStatuses={activeStatuses}
+                updateStatus={updateStatus}
+                isFilterUpdating={isFilterUpdating}
+              />
+            </ToolbarItem>
+            <ToolbarItem variant="search-filter">
+              <DeviceTableToolbarFilters
+                allLabels={allLabels}
+                selectedLabels={selectedLabels}
+                selectedFleetNames={ownerFleets}
+                setSelectedLabels={setSelectedLabels}
+                setSelectedFleets={setOwnerFleets}
+                fleets={fleets}
+                search={search}
+                setSearch={setSearch}
+              />
+            </ToolbarItem>
+          </ToolbarGroup>
+          {children}
+        </ToolbarContent>
+      </Toolbar>
+      <DeviceToolbarChips {...rest} updateStatus={updateStatus} />
+    </>
+  );
+};
+
+type DeviceToolbarChipsProps = Omit<DeviceTableToolbarProps, 'setActiveStatuses'> & {
+  updateStatus: UpdateStatus;
+};
+
+const DeviceToolbarChips = ({
+  activeStatuses,
+  updateStatus,
+  ownerFleets,
+  search,
+  setOwnerFleets,
+  setSearch,
+  selectedLabels,
+  setSelectedLabels,
+}: DeviceToolbarChipsProps) => {
+  const { t } = useTranslation();
+  const statusKeys = Object.keys(activeStatuses).filter((k) => !!activeStatuses[k as keyof FilterStatusMap].length);
+  return (
+    <Split hasGutter>
+      {statusKeys.map((k) => {
+        const key = k as keyof FilterStatusMap;
+        const { title, items } = getStatusItem(t, key);
+        return (
+          <SplitItem key={key}>
+            <ChipGroup categoryName={title} isClosable onClick={() => updateStatus(key)}>
+              {activeStatuses[key].map((status: string) => (
+                <Chip key={status} onClick={() => updateStatus(key, status)}>
+                  {items.find(({ id }) => id === status)?.label}
+                </Chip>
+              ))}
+            </ChipGroup>
+          </SplitItem>
+        );
+      })}
+      {!!ownerFleets.length && (
+        <SplitItem>
+          <ChipGroup categoryName={t('Fleet')} isClosable onClick={() => setOwnerFleets([])}>
+            {ownerFleets.map((fleetId) => (
+              <Chip key={fleetId} onClick={() => setOwnerFleets(ownerFleets.filter((f) => f !== fleetId))}>
+                {fleetId}
+              </Chip>
+            ))}
+          </ChipGroup>
+        </SplitItem>
+      )}
+      {search && (
+        <SplitItem>
+          <ChipGroup categoryName={t('Name / Alias')} isClosable onClick={() => setSearch('')}>
+            <Chip onClick={() => setSearch('')}>{search}</Chip>
+          </ChipGroup>
+        </SplitItem>
+      )}
+      {!!selectedLabels.length && (
+        <SplitItem>
+          <ChipGroup categoryName={t('Labels')} isClosable onClick={() => setSelectedLabels([])}>
+            {selectedLabels.map((label) => {
+              const labelStr = labelToString(label);
+              return (
+                <Chip
+                  key={labelStr}
+                  onClick={() => setSelectedLabels(selectedLabels.filter((l) => labelToString(l) !== labelStr))}
+                >
+                  {labelStr}
+                </Chip>
+              );
+            })}
+          </ChipGroup>
+        </SplitItem>
+      )}
+      {(!!statusKeys.length || !!ownerFleets.length || !!search || !!selectedLabels.length) && (
+        <SplitItem>
+          <Button
+            variant="link"
+            onClick={() => {
+              updateStatus();
+              setOwnerFleets([]);
+              setSearch('');
+              setSelectedLabels([]);
+            }}
+          >
+            {t('Clear all filters')}
+          </Button>
+        </SplitItem>
+      )}
+    </Split>
+  );
+};
+
+export default DeviceTableToolbar;

package/src/components/Device/DevicesPage/DeviceToolbarFilters.css

@@ -0,0 +1,16 @@
+.fctl-device-toolbar-filters__hint {
+  padding: 0.75rem;
+}
+
+.fctl_device-toolbar-filters__typeselect .pf-v5-c-menu-toggle__text {
+  min-width: 150px;
+  text-align: left;
+}
+
+.fctl-device-toolbar-filters__search-icon {
+  padding: 0.5rem 1rem;
+}
+
+.fctl-device-toolbar-filters__toggle .pf-v5-c-menu-toggle__controls {
+  display: none;
+}