@flightctl/ui-components 0.0.3 → 0.0.5

package/src/components/Status/IntegrityStatus.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { DeviceIntegrityStatusSummaryType } from '@flightctl/types';
+import { useTranslation } from '../../hooks/useTranslation';
+import StatusDisplay from './StatusDisplay';
+import { getIntegrityStatusItems } from '../../utils/status/integrity';
+
+const IntegrityStatus = ({ status }: { status?: DeviceIntegrityStatusSummaryType }) => {
+  const { t } = useTranslation();
+
+  const statusItems = getIntegrityStatusItems(t);
+
+  const item = statusItems.find((statusItem) => {
+    return statusItem.id === status;
+  });
+  return <StatusDisplay item={item} />;
+};
+
+export default IntegrityStatus;

package/src/components/Status/RepositoryStatus.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
+
+import { ConditionType } from '@flightctl/types';
+import { RepositorySyncStatus, repositoryStatusLabels } from '../../utils/status/repository';
+import { StatusLevel } from '../../utils/status/common';
+import { useTranslation } from '../../hooks/useTranslation';
+import { StatusDisplayContent } from './StatusDisplay';
+import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
+
+const RepositoryStatus = ({ statusInfo }: { statusInfo: { status: RepositorySyncStatus; message?: string } }) => {
+  const statusType = statusInfo.status;
+  const { t } = useTranslation();
+
+  const statusLabels = repositoryStatusLabels(t);
+
+  let customIcon: React.ComponentClass<SVGIconProps> | undefined;
+  let status: StatusLevel;
+
+  switch (statusType) {
+    case ConditionType.ResourceSyncSynced:
+    case ConditionType.RepositoryAccessible:
+      status = 'success';
+      break;
+    case 'Sync pending':
+      status = 'warning';
+      customIcon = InProgressIcon;
+      break;
+    case 'Not synced':
+    case 'Not parsed':
+    case 'Not accessible':
+      status = 'danger';
+      break;
+
+    default:
+      status = 'unknown';
+      break;
+  }
+
+  return (
+    <StatusDisplayContent
+      label={statusLabels[statusType]}
+      level={status}
+      customIcon={customIcon}
+      message={statusInfo.message}
+    />
+  );
+};
+
+export default RepositoryStatus;

package/src/components/Status/StatusDisplay.css

@@ -0,0 +1,12 @@
+.ftcl_status-label {
+  flex-wrap: nowrap;
+}
+.ftcl_status-label > div {
+  /* Reduce the space between the icon and the label, caused by the table rules */
+  --pf-v5-l-flex--spacer--column: 0.5rem;
+}
+
+.fctl-status-display-content__popover .pf-v5-c-popover__body {
+  overflow-y: scroll;
+  max-height: 30vh;
+}

package/src/components/Status/StatusDisplay.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+
+import { Button, Flex, FlexItem, Icon, Popover } from '@patternfly/react-core';
+import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
+
+import { StatusLevel, getDefaultStatusColor, getDefaultStatusIcon } from '../../utils/status/common';
+import { useTranslation } from '../../hooks/useTranslation';
+
+import './StatusDisplay.css';
+
+type StatusLabelProps = {
+  label: string;
+  message?: React.ReactNode;
+  messageTitle?: string;
+  level: StatusLevel;
+  customIcon?: React.ComponentClass<SVGIconProps>;
+};
+
+export const StatusDisplayContent = ({ label, messageTitle, message, level, customIcon }: StatusLabelProps) => {
+  const iconLevel = level === 'unknown' ? undefined : level;
+  const IconComponent = customIcon || getDefaultStatusIcon(level);
+
+  if (message) {
+    return (
+      <Popover
+        aria-label="status popover"
+        headerContent={messageTitle || label}
+        bodyContent={message}
+        className="fctl-status-display-content__popover"
+        hasAutoWidth={false}
+      >
+        <Button
+          variant="link"
+          isInline
+          icon={
+            <Icon
+              status={iconLevel}
+              style={{ '--pf-v5-c-icon__content--Color': getDefaultStatusColor(level) } as React.CSSProperties}
+            >
+              <IconComponent />
+            </Icon>
+          }
+        >
+          {label}
+        </Button>
+      </Popover>
+    );
+  }
+
+  return (
+    <Flex className="ftcl_status-label">
+      <FlexItem>
+        <Icon
+          status={iconLevel}
+          style={{ '--pf-v5-c-icon__content--Color': getDefaultStatusColor(level) } as React.CSSProperties}
+        >
+          <IconComponent />
+        </Icon>
+      </FlexItem>
+      <FlexItem>{label}</FlexItem>
+    </Flex>
+  );
+};
+
+type StatusDisplayProps = {
+  item?: {
+    label: string;
+    level: StatusLevel;
+    customIcon?: React.ComponentClass<SVGIconProps>;
+  };
+  message?: string;
+};
+
+const StatusDisplay = ({ item, message }: StatusDisplayProps) => {
+  const { t } = useTranslation();
+  if (!item) {
+    return <StatusDisplayContent level="unknown" label={t('Unknown')} />;
+  }
+
+  return <StatusDisplayContent level={item.level} customIcon={item.customIcon} label={item.label} message={message} />;
+};
+
+export default StatusDisplay;

package/src/components/Status/SystemUpdateStatus.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import { ConditionStatus, ConditionType, DeviceStatus } from '@flightctl/types';
+import { useTranslation } from '../../hooks/useTranslation';
+import StatusDisplay, { StatusDisplayContent } from './StatusDisplay';
+import { getSystemUpdateStatusItems } from '../../utils/status/system';
+
+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;
+  });
+  return <StatusDisplay item={item} message={deviceStatus?.updated.info} />;
+};
+
+export default SystemUpdateStatus;

package/src/components/Status/SystemdStatus.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { useTranslation } from '../../hooks/useTranslation';
+import { StatusLevel } from '../../utils/status/common';
+import { StatusDisplayContent } from './StatusDisplay';
+
+const SystemdStatus = ({ status }: { status: string | undefined }) => {
+  let level: StatusLevel;
+  const { t } = useTranslation();
+
+  switch (status) {
+    case 'running':
+      level = 'success';
+      break;
+    default:
+      level = 'unknown';
+      break;
+  }
+  return <StatusDisplayContent level={level} label={status || t('Unknown')} />;
+};
+
+export default SystemdStatus;

package/src/components/Status/utils.ts

@@ -0,0 +1,8 @@
+import { TFunction } from 'i18next';
+
+export const getApplicationStatusHelperText = (t: TFunction) =>
+  t('Indicates the overall status of application workloads on the device.');
+export const getDeviceStatusHelperText = (t: TFunction) =>
+  t('Indicates the overall status of the device hardware and operating system.');
+export const getUpdateStatusHelperText = (t: TFunction) =>
+  t('Indicates whether a system is running the latest target configuration or is updating towards it.');

package/src/components/Table/Table.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { Bullseye, PageSection } from '@patternfly/react-core';
+import { Table as PFTable, Td, Th, ThProps, Thead, Tr } from '@patternfly/react-table';
+import { useTranslation } from '../../hooks/useTranslation';
+import WithHelperText from '../common/WithHelperText';
+
+export type TableColumn<D> = {
+  name: string;
+  onSort?: (data: D[]) => D[];
+  defaultSort?: boolean;
+  helperText?: string;
+  thProps?: Omit<ThProps, 'sort'> & {
+    ref?: React.Ref<HTMLTableCellElement> | undefined;
+  };
+};
+
+type TableProps<D> = {
+  columns: TableColumn<D>[];
+  children: React.ReactNode;
+  emptyFilters: boolean;
+  emptyData: boolean;
+  'aria-label': string;
+  getSortParams: (columnIndex: number) => ThProps['sort'];
+  onSelectAll?: (isSelected: boolean) => void;
+  isAllSelected?: boolean;
+};
+
+type TableFC = <D>(props: TableProps<D>) => JSX.Element;
+
+const Table: TableFC = ({
+  columns,
+  children,
+  emptyFilters,
+  emptyData,
+  getSortParams,
+  onSelectAll,
+  isAllSelected,
+  ...rest
+}) => {
+  const { t } = useTranslation();
+  if (emptyFilters && !emptyData) {
+    return (
+      <PageSection variant="light">
+        <Bullseye>{t('No resources are matching the current filters.')}</Bullseye>
+      </PageSection>
+    );
+  }
+
+  return (
+    <PFTable {...rest}>
+      <Thead>
+        <Tr>
+          {!emptyData && onSelectAll && (
+            <Th
+              select={{
+                onSelect: (_event, isSelecting) => onSelectAll(isSelecting),
+                isSelected: !!isAllSelected,
+              }}
+            />
+          )}
+          {columns.map((c, index) => (
+            <Th key={c.name} sort={getSortParams(index)} {...c.thProps}>
+              {c.helperText ? (
+                <WithHelperText ariaLabel={c.name} showLabel content={c.helperText} triggerAction="hover" />
+              ) : (
+                c.name
+              )}
+            </Th>
+          ))}
+          <Td />
+        </Tr>
+      </Thead>
+      {children}
+    </PFTable>
+  );
+};
+
+export default Table;

package/src/components/Table/TableActions.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { MenuToggle, Select } from '@patternfly/react-core';
+
+import { useTranslation } from '../../hooks/useTranslation';
+
+type TableActionsProps = {
+  isDisabled: boolean;
+};
+
+const TableActions = ({ isDisabled, children }: React.PropsWithChildren<TableActionsProps>) => {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+  return (
+    <Select
+      isOpen={isOpen}
+      onSelect={onToggle}
+      aria-disabled={isDisabled}
+      onOpenChange={setIsOpen}
+      toggle={(toggleRef) => (
+        <MenuToggle ref={toggleRef} onClick={onToggle} id="actions" isExpanded={isOpen} isDisabled={isDisabled}>
+          {t('Actions')}
+        </MenuToggle>
+      )}
+    >
+      {children}
+    </Select>
+  );
+};
+
+export default TableActions;

package/src/components/Table/TableTextSearch.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { SearchInput, SearchInputProps } from '@patternfly/react-core';
+
+export type TableTextSearchProps = Omit<SearchInputProps, 'onChange' | 'aria-label'> & {
+  setValue: (val: string) => void;
+  onClear?: VoidFunction;
+};
+
+const TableTextSearch: React.FC<TableTextSearchProps> = ({ value, setValue, placeholder, onClear, ...rest }) => {
+  return (
+    <SearchInput
+      aria-label={placeholder}
+      onChange={(_event, value) => (value === '' && onClear ? onClear() : setValue(value))}
+      value={value}
+      placeholder={placeholder}
+      onClear={() => (onClear ? onClear() : setValue(''))}
+      {...rest}
+    />
+  );
+};
+
+export default TableTextSearch;

package/src/components/Terminal/Terminal.css

@@ -0,0 +1 @@
+@import '@xterm/xterm/css/xterm.css';

package/src/components/Terminal/Terminal.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { ITerminalAddon, ITerminalInitOnlyOptions, ITerminalOptions, Terminal as XTerminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import { Spinner, Stack, StackItem } from '@patternfly/react-core';
+
+import { useTranslation } from '../../hooks/useTranslation';
+
+import './Terminal.css';
+
+const terminalOptions: ITerminalOptions & ITerminalInitOnlyOptions = {
+  fontFamily: 'monospace',
+  fontSize: 16,
+  cursorBlink: false,
+  cols: 80,
+  rows: 25,
+};
+
+type TerminalProps = {
+  onData: (data: string) => void;
+};
+
+export type ImperativeTerminalType = {
+  focus: VoidFunction;
+  onDataReceived: (data: string) => void;
+  loadAttachAddon: (addOn: ITerminalAddon) => void;
+  reset: VoidFunction;
+};
+
+const Terminal = React.forwardRef<ImperativeTerminalType, TerminalProps>(({ onData }, ref) => {
+  const { t } = useTranslation();
+  const [receivedData, setReceivedData] = React.useState(false);
+  const terminal = React.useRef<XTerminal>();
+  const terminalRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const term: XTerminal = new XTerminal(terminalOptions);
+    const fitAddon = new FitAddon();
+    terminalRef.current && term.open(terminalRef.current);
+    term.loadAddon(fitAddon);
+    term.focus();
+
+    const resizeObserver: ResizeObserver = new ResizeObserver(() => {
+      window.requestAnimationFrame(() => fitAddon.fit());
+    });
+
+    terminalRef.current && resizeObserver.observe(terminalRef.current);
+
+    if (terminal.current !== term) {
+      terminal.current?.dispose();
+      terminal.current = term;
+    }
+
+    return () => {
+      term.dispose();
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  React.useEffect(() => {
+    const term = terminal.current;
+    const data = term?.onData(onData);
+    return () => {
+      data?.dispose();
+    };
+  }, [onData]);
+
+  React.useImperativeHandle(ref, () => ({
+    focus: () => {
+      terminal.current?.focus();
+    },
+    onDataReceived: (data) => {
+      setReceivedData(true);
+      terminal.current?.write(data);
+    },
+    loadAttachAddon: (addOn) => {
+      terminal.current?.loadAddon(addOn);
+    },
+    reset: () => {
+      terminal.current?.reset();
+      setReceivedData(false);
+    },
+  }));
+
+  return (
+    <Stack hasGutter>
+      {!receivedData && (
+        <StackItem>
+          <Spinner size="md" /> {t('Waiting for terminal session to open...')}
+        </StackItem>
+      )}
+      <StackItem>
+        <div style={{ width: '100%' }} ref={terminalRef} />
+      </StackItem>
+    </Stack>
+  );
+});
+
+Terminal.displayName = 'Terminal';
+
+export default Terminal;

package/src/components/UserPreferences/UserPreferencesModal.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { TFunction } from 'i18next';
+import {
+  Button,
+  FormGroup,
+  MenuToggle,
+  MenuToggleElement,
+  Modal,
+  Select,
+  SelectOption,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+
+import { Theme } from '../../hooks/useThemePreferences';
+import { useTranslation } from '../../hooks/useTranslation';
+import FlightCtlActionGroup from '../form/FlightCtlActionGroup';
+import FlightCtlForm from '../form/FlightCtlForm';
+import { UserPreferencesContext } from './UserPreferencesProvider';
+
+const getThemeLabels = (t: TFunction): { [key in Theme]: string } => ({
+  system: t('System default'),
+  light: t('Light'),
+  dark: t('Dark'),
+});
+
+type UserPreferencesModalProps = {
+  onClose: VoidFunction;
+};
+
+const UserPreferencesModal: React.FC<UserPreferencesModalProps> = ({ onClose }) => {
+  const { t } = useTranslation();
+  const { theme, setTheme } = React.useContext(UserPreferencesContext);
+
+  const themeLabels = getThemeLabels(t);
+
+  const [themeExpanded, setThemeExpanded] = React.useState(false);
+  return (
+    <Modal title={t('User preferences')} isOpen variant="small" onClose={onClose}>
+      <Stack hasGutter>
+        <StackItem>
+          <FlightCtlForm>
+            <FormGroup label={t('Theme')}>
+              <Select
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    style={{ width: '100%' }}
+                    onClick={() => setThemeExpanded(true)}
+                    isExpanded={themeExpanded}
+                  >
+                    {themeLabels[theme]}
+                  </MenuToggle>
+                )}
+                selected={theme}
+                onSelect={(_, value) => {
+                  setTheme(value as Theme);
+                  setThemeExpanded(false);
+                }}
+                aria-label="theme"
+                isOpen={themeExpanded}
+                onOpenChange={setThemeExpanded}
+              >
+                {Object.keys(themeLabels).map((theme) => (
+                  <SelectOption key={theme} value={theme}>
+                    {themeLabels[theme]}
+                  </SelectOption>
+                ))}
+              </Select>
+            </FormGroup>
+          </FlightCtlForm>
+        </StackItem>
+        <StackItem>
+          <FlightCtlActionGroup>
+            <Button variant="secondary" onClick={onClose}>
+              {t('Close')}
+            </Button>
+          </FlightCtlActionGroup>
+        </StackItem>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default UserPreferencesModal;

package/src/components/UserPreferences/UserPreferencesProvider.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Theme, useThemePreferences } from '../../hooks/useThemePreferences';
+
+export const UserPreferencesContext = React.createContext<{
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}>({
+  theme: 'system',
+  setTheme: () => {},
+});
+
+export type UserPreferencesProviderProps = {
+  children: React.ReactNode;
+};
+
+export const UserPreferencesProvider: React.FC<UserPreferencesProviderProps> = ({ children }) => {
+  const { theme, setTheme } = useThemePreferences();
+
+  return (
+    <UserPreferencesContext.Provider
+      value={{
+        theme,
+        setTheme,
+      }}
+    >
+      {children}
+    </UserPreferencesContext.Provider>
+  );
+};

package/src/components/charts/DonutChart.css

@@ -0,0 +1,10 @@
+.fctl-charts__donut {
+    display: flex;
+    justify-content: center;
+}
+
+.fctl-charts__title {
+    height: 100%;
+    color: var(--pf-v5-global--Color--200);
+    font-size: 14px;
+}