@flightctl/ui-components 0.0.4 → 0.0.10

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

@@ -0,0 +1,332 @@
+import * as React from 'react';
+import debounce from 'lodash/debounce';
+import {
+  Button,
+  Icon,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectGroup,
+  SelectList,
+  SelectOption,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+} from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { SearchIcon } from '@patternfly/react-icons/dist/js/icons/search-icon';
+
+import { Fleet } from '@flightctl/types';
+import { FlightCtlLabel } from '../../../types/extraTypes';
+
+import TableTextSearch, { TableTextSearchProps } from '../../Table/TableTextSearch';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { fuzzySeach, getSearchResultsCount } from '../../../utils/search';
+import { filterDevicesLabels, labelToString } from '../../../utils/labels';
+
+import './DeviceToolbarFilters.css';
+
+const NAME_SEARCH = 'NameAndAlias';
+const LABEL_SEARCH = 'LabelsAndFleets';
+
+type LabelFleetSelectorProps = {
+  fleets: Fleet[];
+  allLabels: FlightCtlLabel[];
+  selectedFleetNames: string[];
+  selectedLabels: FlightCtlLabel[];
+  onSelect: (type: 'fleet' | 'label', value: string) => void;
+  placeholder?: string;
+};
+
+const LabelFleetResults = ({
+  allLabels,
+  fleets,
+  selectedLabels,
+  filterText,
+}: Omit<LabelFleetSelectorProps, 'onSelect' | 'devices'> & { filterText: string }) => {
+  const { t } = useTranslation();
+
+  const availableFleetNames = fleets
+    .filter((f) => fuzzySeach(filterText, f.metadata.name))
+    .map((f) => f.metadata.name || '');
+
+  const filteredLabels = filterDevicesLabels(allLabels, selectedLabels, filterText);
+  const [visibleLabels, visibleFleets] = getSearchResultsCount(filteredLabels.length, availableFleetNames.length);
+  if (visibleLabels + visibleFleets === 0) {
+    return <div className="fctl-device-toolbar-filters__hint">{t('No results')}</div>;
+  }
+
+  return (
+    <>
+      {visibleLabels > 0 && (
+        <SelectGroup label={t('Labels')}>
+          <SelectList id="select-typeahead-labels-listbox">
+            {filteredLabels
+              .filter((_, index) => index < visibleLabels)
+              .map((labelStr) => {
+                return (
+                  <SelectOption key={`label@@${labelStr}`} value={`label@@${labelStr}`}>
+                    {labelStr}
+                  </SelectOption>
+                );
+              })}
+          </SelectList>
+        </SelectGroup>
+      )}
+      {visibleFleets > 0 && (
+        <SelectGroup label={t('Fleets')}>
+          <SelectList id="select-typeahead-fleets-listbox">
+            {availableFleetNames
+              .filter((_, index) => index < visibleFleets)
+              .map((fleetName) => (
+                <SelectOption key={`fleet@@${fleetName}`} value={`fleet@@${fleetName}`}>
+                  {fleetName}
+                </SelectOption>
+              ))}
+          </SelectList>
+        </SelectGroup>
+      )}
+    </>
+  );
+};
+
+const LabelFleetSelector = ({
+  fleets,
+  selectedFleetNames,
+  allLabels,
+  selectedLabels,
+  onSelect,
+  placeholder,
+}: LabelFleetSelectorProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [filterText, setFilterText] = React.useState<string>('');
+
+  const textInputRef = React.useRef<HTMLInputElement>();
+
+  const { t } = useTranslation();
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+    textInputRef?.current?.focus();
+  };
+
+  const onClearButtonClick = () => {
+    setFilterText('');
+    textInputRef?.current?.focus();
+  };
+
+  const closeMenu = () => {
+    setIsOpen(false);
+  };
+
+  const onInputClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    } else if (!filterText) {
+      closeMenu();
+    }
+  };
+
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setFilterText(value);
+  };
+
+  const selectedIds = selectedFleetNames
+    .map((fleetName) => `fleet@@${fleetName}`)
+    .concat(selectedLabels.map((label) => `label@@${labelToString(label)}`));
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      className="fctl-device-toolbar-filters__toggle"
+      ref={toggleRef}
+      variant="typeahead"
+      aria-label={t('Fleet and label filter toggle')}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isFullWidth
+      icon={
+        <Icon size="md" className="fctl-device-toolbar-filters__search-icon">
+          <SearchIcon />
+        </Icon>
+      }
+    >
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={filterText}
+          onClick={onInputClick}
+          onChange={onTextInputChange}
+          id="typeahead-select-input"
+          autoComplete="off"
+          innerRef={textInputRef}
+          role="combobox"
+          isExpanded={isOpen}
+          placeholder={placeholder}
+          aria-controls="fleet-label-typeahead-select-listbox"
+        />
+
+        <TextInputGroupUtilities {...(!filterText && { style: { display: 'none' } })}>
+          <Button variant="plain" onClick={onClearButtonClick} aria-label={t('Clear filter text')}>
+            <TimesIcon aria-hidden />
+          </Button>
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      id="fleet-label-typeahead-select-listbox"
+      isOpen={isOpen}
+      selected={selectedIds}
+      onSelect={(_event, value) => {
+        const valStr = value as string;
+        const id = valStr.split('@@')[1];
+        if (valStr.startsWith('fleet@@')) {
+          onSelect('fleet', id);
+        } else {
+          onSelect('label', id);
+        }
+        setIsOpen(false);
+        setFilterText('');
+      }}
+      onOpenChange={(isOpen) => {
+        !isOpen && closeMenu();
+      }}
+      toggle={toggle}
+    >
+      <LabelFleetResults
+        fleets={fleets}
+        filterText={filterText}
+        selectedFleetNames={selectedFleetNames}
+        allLabels={allLabels}
+        selectedLabels={selectedLabels}
+      />
+    </Select>
+  );
+};
+
+type DeviceToolbarFilterProps = {
+  fleets: Fleet[];
+  selectedFleetNames: string[];
+  setSelectedFleets: (ownerFleets: string[]) => void;
+  allLabels: FlightCtlLabel[];
+  selectedLabels: FlightCtlLabel[];
+  setSelectedLabels: (labels: FlightCtlLabel[]) => void;
+  nameOrAlias?: TableTextSearchProps['value'];
+  setNameOrAlias?: TableTextSearchProps['setValue'];
+};
+
+const DeviceToolbarFilter = ({
+  fleets,
+  selectedFleetNames,
+  setSelectedFleets,
+  allLabels,
+  selectedLabels,
+  setSelectedLabels,
+  nameOrAlias,
+  setNameOrAlias,
+}: DeviceToolbarFilterProps) => {
+  const { t } = useTranslation();
+  const [isSearchTypeExpanded, setIsSearchTypeExpanded] = React.useState(false);
+  const [selectedSearchType, setSelectedSearchType] = React.useState(LABEL_SEARCH);
+
+  const [typingText, setTypingText] = React.useState<string>('');
+  const debouncedSetParam = React.useMemo(
+    () =>
+      debounce((setValue: TableTextSearchProps['setValue'], value: string) => {
+        setValue(value || '');
+      }, 500),
+    [],
+  );
+
+  React.useEffect(() => {
+    if (setNameOrAlias) {
+      debouncedSetParam(setNameOrAlias, typingText);
+    }
+  }, [typingText, setNameOrAlias, debouncedSetParam]);
+
+  React.useEffect(() => {
+    if (!nameOrAlias && typingText) {
+      setTypingText('');
+    }
+    // When the filter is cleared from the chips, clear the "typingText" too
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nameOrAlias, setTypingText]);
+
+  const onToggle = () => {
+    setIsSearchTypeExpanded(!isSearchTypeExpanded);
+  };
+
+  const onSearchTypeSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    selection: string | number | undefined,
+  ) => {
+    setSelectedSearchType(selection as string);
+    setIsSearchTypeExpanded(false);
+    if (selection === LABEL_SEARCH) {
+      setTypingText('');
+    }
+  };
+
+  const onSelectFleetOrLabel = (type: 'fleet' | 'label', id: string) => {
+    // Selecting a previously selected label does nothing. Labels can only be removed from the chips.
+    if (type === 'fleet') {
+      const isSelected = selectedFleetNames.includes(id);
+      if (!isSelected) {
+        setSelectedFleets(selectedFleetNames.concat([id]));
+      }
+    } else {
+      const isSelected = selectedLabels.some((label) => labelToString(label) === id);
+      if (!isSelected) {
+        const [key, val] = id.split('=');
+        setSelectedLabels(selectedLabels.concat([{ key, value: val }]));
+      }
+    }
+  };
+
+  return (
+    <>
+      {setNameOrAlias && (
+        <Select
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={onToggle}
+              isExpanded={isSearchTypeExpanded}
+              className="fctl_device-toolbar-filters__typeselect"
+            >
+              {selectedSearchType === NAME_SEARCH ? t('Name and alias') : t('Labels and fleets')}
+            </MenuToggle>
+          )}
+          onSelect={onSearchTypeSelect}
+          onOpenChange={(isOpen) => setIsSearchTypeExpanded(isOpen)}
+          selected={selectedSearchType}
+          isOpen={isSearchTypeExpanded}
+        >
+          <SelectList>
+            <SelectOption id={NAME_SEARCH} value={NAME_SEARCH}>
+              {t('Name and alias')}
+            </SelectOption>
+          </SelectList>
+          <SelectOption id={LABEL_SEARCH} value={LABEL_SEARCH}>
+            {t('Labels and fleets')}
+          </SelectOption>
+        </Select>
+      )}
+      {setNameOrAlias && selectedSearchType === NAME_SEARCH ? (
+        <TableTextSearch value={typingText} setValue={setTypingText} />
+      ) : (
+        <LabelFleetSelector
+          placeholder={setNameOrAlias ? undefined : t('Filter by labels and fleets')}
+          allLabels={allLabels}
+          fleets={fleets}
+          selectedFleetNames={selectedFleetNames}
+          selectedLabels={selectedLabels}
+          onSelect={onSelectFleetOrLabel}
+        />
+      )}
+    </>
+  );
+};
+
+export default DeviceToolbarFilter;

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

@@ -0,0 +1,279 @@
+import * as React from 'react';
+import {
+  Button,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  PageSection,
+  PageSectionVariants,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import { Tbody, ThProps } from '@patternfly/react-table';
+import { MicrochipIcon } from '@patternfly/react-icons/dist/js/icons/microchip-icon';
+import { Trans } from 'react-i18next';
+import { TFunction } from 'i18next';
+
+import { useFetch } from '../../../hooks/useFetch';
+import { Device, Fleet, FleetList } from '@flightctl/types';
+
+import ListPage from '../../ListPage/ListPage';
+import ListPageBody from '../../ListPage/ListPageBody';
+import { useDeleteListAction } from '../../ListPage/ListPageActions';
+import AddDeviceModal from '../AddDeviceModal/AddDeviceModal';
+import Table, { ApiSortTableColumn } from '../../Table/Table';
+import DeviceTableToolbar from './DeviceTableToolbar';
+import DeviceTableRow from './DeviceTableRow';
+import { FlightCtlLabel } from '../../../types/extraTypes';
+import MassDeleteDeviceModal from '../../modals/massModals/MassDeleteDeviceModal/MassDeleteDeviceModal';
+import ResourceListEmptyState from '../../common/ResourceListEmptyState';
+import { useTableSelect } from '../../../hooks/useTableSelect';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { Link, ROUTE } from '../../../hooks/useNavigate';
+import { useDevices } from './useDevices';
+import { useDeviceBackendFilters } from './useDeviceBackendFilters';
+import {
+  getApplicationStatusHelperText,
+  getDeviceStatusHelperText,
+  getUpdateStatusHelperText,
+} from '../../Status/utils';
+import EnrollmentRequestList from './EnrollmentRequestList';
+import { FilterStatusMap } from './types';
+import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
+import { useApiTableSort } from '../../../hooks/useApiTableSort';
+
+type DeviceEmptyStateProps = {
+  onAddDevice: VoidFunction;
+};
+
+const DeviceEmptyState: React.FC<DeviceEmptyStateProps> = ({ onAddDevice }) => {
+  const { t } = useTranslation();
+  return (
+    <ResourceListEmptyState icon={MicrochipIcon} titleText={t('No devices here!')}>
+      <EmptyStateBody>
+        <Trans t={t}>
+          You can add devices and label them to match fleets, or your can{' '}
+          <Link to={ROUTE.FLEET_CREATE}>start with a fleet</Link> and add devices into it.
+        </Trans>
+      </EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button onClick={onAddDevice}>{t('Add devices')}</Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </ResourceListEmptyState>
+  );
+};
+
+const getDeviceColumns = (t: TFunction): ApiSortTableColumn[] => [
+  {
+    name: t('Alias'),
+    // Sorting works on this field even though "alias" is actually a label
+    sortableField: 'metadata.alias',
+  },
+  {
+    name: t('Name'),
+    sortableField: 'metadata.name',
+  },
+  {
+    name: t('Fleet'),
+    sortableField: 'metadata.owner',
+  },
+  {
+    name: t('Application status'),
+    helperText: getApplicationStatusHelperText(t),
+    sortableField: 'status.applicationsSummary.status',
+  },
+  {
+    name: t('Device status'),
+    helperText: getDeviceStatusHelperText(t),
+    sortableField: 'status.summary.status',
+    defaultSort: true,
+  },
+  {
+    name: t('Update status'),
+    helperText: getUpdateStatusHelperText(t),
+    sortableField: 'status.updated.status',
+  },
+  {
+    name: t('Last seen'),
+    sortableField: 'status.lastSeen',
+  },
+];
+
+interface DeviceTableProps {
+  devices: Array<Device>;
+  refetch: VoidFunction;
+  ownerFleets: string[];
+  activeStatuses: FilterStatusMap;
+  hasFiltersEnabled: boolean;
+  nameOrAlias: string | undefined;
+  setNameOrAlias: (text: string) => void;
+  setOwnerFleets: (ownerFleets: string[]) => void;
+  setActiveStatuses: (activeStatuses: FilterStatusMap) => void;
+  allLabels: FlightCtlLabel[];
+  selectedLabels: FlightCtlLabel[];
+  setSelectedLabels: (labels: FlightCtlLabel[]) => void;
+  fleets: Fleet[];
+  isFilterUpdating: boolean;
+  deviceColumns: ApiSortTableColumn[];
+  getSortParams: (columnIndex: number) => ThProps['sort'];
+}
+
+export const DeviceTable = ({
+  devices,
+  refetch,
+  nameOrAlias,
+  setNameOrAlias,
+  ownerFleets,
+  setOwnerFleets,
+  activeStatuses,
+  setActiveStatuses,
+  allLabels,
+  selectedLabels,
+  setSelectedLabels,
+  hasFiltersEnabled,
+  fleets,
+  isFilterUpdating,
+  deviceColumns,
+  getSortParams,
+}: DeviceTableProps) => {
+  const { t } = useTranslation();
+  const [addDeviceModal, setAddDeviceModal] = React.useState(false);
+  const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
+  const { remove } = useFetch();
+
+  const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
+
+  const { deleteAction: deleteDeviceAction, deleteModal: deleteDeviceModal } = useDeleteListAction({
+    resourceType: 'Device',
+    onDelete: async (resourceId: string) => {
+      await remove(`devices/${resourceId}`);
+      refetch();
+    },
+  });
+
+  return (
+    <>
+      <DeviceTableToolbar
+        nameOrAlias={nameOrAlias}
+        setNameOrAlias={setNameOrAlias}
+        ownerFleets={ownerFleets}
+        setOwnerFleets={setOwnerFleets}
+        activeStatuses={activeStatuses}
+        setActiveStatuses={setActiveStatuses}
+        allLabels={allLabels}
+        selectedLabels={selectedLabels}
+        setSelectedLabels={setSelectedLabels}
+        fleets={fleets}
+        isFilterUpdating={isFilterUpdating}
+      >
+        <ToolbarItem>
+          <Button onClick={() => setAddDeviceModal(true)}>{t('Add devices')}</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button isDisabled={!hasSelectedRows} onClick={() => setIsMassDeleteModalOpen(true)} variant="secondary">
+            {t('Delete devices')}
+          </Button>
+        </ToolbarItem>
+      </DeviceTableToolbar>
+      <Table
+        aria-label={t('Devices table')}
+        loading={isFilterUpdating}
+        columns={deviceColumns}
+        emptyFilters={!hasFiltersEnabled}
+        emptyData={devices.length === 0}
+        getSortParams={getSortParams}
+        isAllSelected={isAllSelected}
+        onSelectAll={setAllSelected}
+      >
+        <Tbody>
+          {devices.map((device, index) => (
+            <DeviceTableRow
+              key={device.metadata.name || ''}
+              device={device}
+              deleteAction={deleteDeviceAction}
+              onRowSelect={onRowSelect}
+              isRowSelected={isRowSelected}
+              rowIndex={index}
+            />
+          ))}
+        </Tbody>
+      </Table>
+      {!hasFiltersEnabled && devices.length === 0 && <DeviceEmptyState onAddDevice={() => setAddDeviceModal(true)} />}
+      {deleteDeviceModal}
+      {addDeviceModal && <AddDeviceModal onClose={() => setAddDeviceModal(false)} />}
+      {isMassDeleteModalOpen && (
+        <MassDeleteDeviceModal
+          onClose={() => setIsMassDeleteModalOpen(false)}
+          resources={devices.filter(isRowSelected)}
+          onDeleteSuccess={() => {
+            setIsMassDeleteModalOpen(false);
+            refetch();
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+const DevicesPage = () => {
+  const { t } = useTranslation();
+  const deviceColumns = React.useMemo(() => getDeviceColumns(t), [t]);
+
+  const {
+    nameOrAlias,
+    setNameOrAlias,
+    ownerFleets,
+    activeStatuses,
+    hasFiltersEnabled,
+    setOwnerFleets,
+    setActiveStatuses,
+    selectedLabels,
+    setSelectedLabels,
+  } = useDeviceBackendFilters();
+  const { getSortParams, sortField, direction } = useApiTableSort(deviceColumns);
+
+  const [data, loading, error, updating, refetch, allLabels] = useDevices({
+    nameOrAlias,
+    ownerFleets,
+    activeStatuses,
+    labels: selectedLabels,
+    sortField,
+    direction,
+  });
+
+  const [fleetsList, flLoading, flError] = useFetchPeriodically<FleetList>({
+    endpoint: 'fleets',
+  });
+
+  return (
+    <PageSection variant={PageSectionVariants.light}>
+      <EnrollmentRequestList refetchDevices={refetch} />
+
+      <ListPage title={t('Devices')}>
+        <ListPageBody error={error || flError} loading={loading || flLoading}>
+          <DeviceTable
+            devices={data}
+            allLabels={allLabels}
+            refetch={refetch}
+            nameOrAlias={nameOrAlias}
+            setNameOrAlias={setNameOrAlias}
+            hasFiltersEnabled={hasFiltersEnabled || updating}
+            ownerFleets={ownerFleets}
+            activeStatuses={activeStatuses}
+            setOwnerFleets={setOwnerFleets}
+            setActiveStatuses={setActiveStatuses}
+            selectedLabels={selectedLabels}
+            setSelectedLabels={setSelectedLabels}
+            fleets={fleetsList?.items || []}
+            isFilterUpdating={updating}
+            deviceColumns={deviceColumns}
+            getSortParams={getSortParams}
+          />
+        </ListPageBody>
+      </ListPage>
+    </PageSection>
+  );
+};
+
+export default DevicesPage;