@flightctl/ui-components 0.0.5 → 0.4.0-rc1

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

@@ -6,13 +6,21 @@ import { useWebSocket } from '../../../hooks/useWebSocket';
 import ErrorAlert from '../../ErrorAlert/ErrorAlert';
 import { useTranslation } from '../../../hooks/useTranslation';
 import Terminal, { ImperativeTerminalType } from '../../Terminal/Terminal';
+import PageWithPermissions from '../../common/PageWithPermissions';
+import { useAccessReview } from '../../../hooks/useAccessReview';
+import { RESOURCE, VERB } from '../../../types/rbac';
 
-const TerminalTab = ({ device }: { device: Device }) => {
+type TerminalTabProps = {
+  device: Device;
+};
+
+const TerminalTab = ({ device }: TerminalTabProps) => {
   const { t } = useTranslation();
   const terminal = React.useRef<ImperativeTerminalType>(null);
 
-  const onMsgReceived = React.useCallback((message: string) => {
-    terminal.current?.onDataReceived(message);
+  const onMsgReceived = React.useCallback(async (message: Blob) => {
+    const msg = await message.text();
+    terminal.current?.onDataReceived(msg);
   }, []);
 
   const { sendMessage, isClosed, error, reconnect } = useWebSocket(
@@ -50,4 +58,13 @@ const TerminalTab = ({ device }: { device: Device }) => {
   );
 };
 
-export default TerminalTab;
+const TerminalTabWithPermissions = (props: TerminalTabProps) => {
+  const [allowed, loading] = useAccessReview(RESOURCE.DEVICE_CONSOLE, VERB.GET);
+  return (
+    <PageWithPermissions allowed={allowed} loading={loading}>
+      <TerminalTab {...props} />
+    </PageWithPermissions>
+  );
+};
+
+export default TerminalTabWithPermissions;

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

@@ -4,8 +4,7 @@ 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 { FilterStatusMap, UpdateStatus } from './types';
 import StatusDisplay from '../../Status/StatusDisplay';
 import { DeviceSummaryStatus, FilterSearchParams, getDeviceStatusItems } from '../../../utils/status/devices';
 import { StatusItem } from '../../../utils/status/common';
@@ -38,29 +37,6 @@ export const getStatusItem = (
   }
 };
 
-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;
@@ -69,7 +45,6 @@ type DeviceStatusFilterProps = {
 
 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;
@@ -80,8 +55,6 @@ const DeviceStatusFilter = ({ activeStatuses, updateStatus, isFilterUpdating }:
     <FilterSelect
       selectedFilters={selectedFilters}
       placeholder={t('Filter by status')}
-      filter={filter}
-      setFilter={setFilter}
       isFilterUpdating={isFilterUpdating}
     >
       <SelectList>
@@ -89,15 +62,21 @@ const DeviceStatusFilter = ({ activeStatuses, updateStatus, isFilterUpdating }:
           {Object.keys(activeStatuses).map((k) => {
             const key = k as keyof FilterStatusMap;
             const { title, items } = getStatusItem(t, key);
+            const currentItems = activeStatuses[key] as unknown as DeviceSummaryStatus[];
             return (
               <GridItem key={key} span={4}>
                 <FilterSelectGroup label={title}>
-                  <FilterOption
-                    filter={filter}
-                    items={items}
-                    selectedFilters={activeStatuses[key]}
-                    onClick={(value) => updateStatus(key, value)}
-                  />
+                  {items.map((statusItem) => (
+                    <SelectOption
+                      onClick={() => updateStatus(key, statusItem.id)}
+                      key={statusItem.id}
+                      hasCheckbox
+                      value={statusItem.id}
+                      isSelected={currentItems.includes(statusItem.id)}
+                    >
+                      <StatusDisplay item={statusItem} />
+                    </SelectOption>
+                  ))}
                 </FilterSelectGroup>
               </GridItem>
             );

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

@@ -19,6 +19,8 @@ type DeviceTableRowProps = {
   rowIndex: number;
   onRowSelect: (device: Device) => OnSelect;
   isRowSelected: (device: Device) => boolean;
+  canDelete: boolean;
+  canEdit: boolean;
 };
 
 const DeviceTableRow: React.FC<DeviceTableRowProps> = ({
@@ -27,6 +29,8 @@ const DeviceTableRow: React.FC<DeviceTableRowProps> = ({
   rowIndex,
   onRowSelect,
   isRowSelected,
+  canDelete,
+  canEdit,
 }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -72,19 +76,27 @@ const DeviceTableRow: React.FC<DeviceTableRowProps> = ({
       <Td isActionCell>
         <ActionsColumn
           items={[
-            {
-              title: t('Edit device configurations'),
-              onClick: () => navigate({ route: ROUTE.DEVICE_EDIT, postfix: deviceName }),
-              ...editActionProps,
-            },
+            ...(canEdit
+              ? [
+                  {
+                    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,
-            }),
+            ...(canDelete
+              ? [
+                  deleteAction({
+                    resourceId: deviceName,
+                    resourceName: deviceAlias,
+                  }),
+                ]
+              : []),
           ]}
         />
       </Td>

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

@@ -11,7 +11,6 @@ import {
   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';
@@ -21,16 +20,14 @@ import { labelToString } from '../../../utils/labels';
 import DeviceTableToolbarFilters from './DeviceToolbarFilters';
 
 type DeviceTableToolbarProps = {
-  search: TableTextSearchProps['value'];
-  setSearch: TableTextSearchProps['setValue'];
-  allLabels: FlightCtlLabel[];
+  nameOrAlias: TableTextSearchProps['value'];
+  setNameOrAlias: TableTextSearchProps['setValue'];
   ownerFleets: string[];
   setOwnerFleets: (ownerFleets: string[]) => void;
   activeStatuses: FilterStatusMap;
   setActiveStatuses: (statuses: FilterStatusMap) => void;
   selectedLabels: FlightCtlLabel[];
   setSelectedLabels: (labels: FlightCtlLabel[]) => void;
-  fleets: Fleet[];
   isFilterUpdating: boolean;
 };
 
@@ -38,14 +35,12 @@ const DeviceTableToolbar: React.FC<React.PropsWithChildren<DeviceTableToolbarPro
   const {
     ownerFleets,
     setOwnerFleets,
-    search,
-    setSearch,
+    nameOrAlias,
+    setNameOrAlias,
     activeStatuses,
     setActiveStatuses,
-    allLabels,
     selectedLabels,
     setSelectedLabels,
-    fleets,
     isFilterUpdating,
   } = rest;
 
@@ -86,14 +81,12 @@ const DeviceTableToolbar: React.FC<React.PropsWithChildren<DeviceTableToolbarPro
             </ToolbarItem>
             <ToolbarItem variant="search-filter">
               <DeviceTableToolbarFilters
-                allLabels={allLabels}
                 selectedLabels={selectedLabels}
                 selectedFleetNames={ownerFleets}
                 setSelectedLabels={setSelectedLabels}
                 setSelectedFleets={setOwnerFleets}
-                fleets={fleets}
-                search={search}
-                setSearch={setSearch}
+                nameOrAlias={nameOrAlias}
+                setNameOrAlias={setNameOrAlias}
               />
             </ToolbarItem>
           </ToolbarGroup>
@@ -112,10 +105,10 @@ type DeviceToolbarChipsProps = Omit<DeviceTableToolbarProps, 'setActiveStatuses'
 const DeviceToolbarChips = ({
   activeStatuses,
   updateStatus,
+  nameOrAlias,
+  setNameOrAlias,
   ownerFleets,
-  search,
   setOwnerFleets,
-  setSearch,
   selectedLabels,
   setSelectedLabels,
 }: DeviceToolbarChipsProps) => {
@@ -149,10 +142,10 @@ const DeviceToolbarChips = ({
           </ChipGroup>
         </SplitItem>
       )}
-      {search && (
+      {nameOrAlias && (
         <SplitItem>
-          <ChipGroup categoryName={t('Name / Alias')} isClosable onClick={() => setSearch('')}>
-            <Chip onClick={() => setSearch('')}>{search}</Chip>
+          <ChipGroup categoryName={t('Name / Alias')} isClosable onClick={() => setNameOrAlias('')}>
+            <Chip onClick={() => setNameOrAlias('')}>{nameOrAlias}</Chip>
           </ChipGroup>
         </SplitItem>
       )}
@@ -173,14 +166,14 @@ const DeviceToolbarChips = ({
           </ChipGroup>
         </SplitItem>
       )}
-      {(!!statusKeys.length || !!ownerFleets.length || !!search || !!selectedLabels.length) && (
+      {(!!statusKeys.length || !!ownerFleets.length || !!nameOrAlias || !!selectedLabels.length) && (
         <SplitItem>
           <Button
             variant="link"
             onClick={() => {
               updateStatus();
               setOwnerFleets([]);
-              setSearch('');
+              setNameOrAlias('');
               setSelectedLabels([]);
             }}
           >

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import debounce from 'lodash/debounce';
 import {
   Button,
   Icon,
@@ -8,6 +9,7 @@ import {
   SelectGroup,
   SelectList,
   SelectOption,
+  Spinner,
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
@@ -15,13 +17,16 @@ import {
 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 { DeviceList, Fleet, FleetList } from '@flightctl/types';
 import { FlightCtlLabel } from '../../../types/extraTypes';
+import { isPromiseFulfilled } from '../../../types/typeUtils';
 
 import TableTextSearch, { TableTextSearchProps } from '../../Table/TableTextSearch';
 import { useTranslation } from '../../../hooks/useTranslation';
-import { fuzzySeach, getSearchResultsCount } from '../../../utils/search';
-import { filterDevicesLabels, labelToString } from '../../../utils/labels';
+import { useFetch } from '../../../hooks/useFetch';
+import { commonQueries as queries } from '../../../utils/query';
+import { MAX_TOTAL_SEARCH_RESULTS, getSearchResultsCount } from '../../../utils/search';
+import { labelToString, stringToLabel } from '../../../utils/labels';
 
 import './DeviceToolbarFilters.css';
 
@@ -29,8 +34,6 @@ 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;
@@ -39,18 +42,25 @@ type LabelFleetSelectorProps = {
 
 const LabelFleetResults = ({
   allLabels,
-  fleets,
-  selectedLabels,
-  filterText,
-}: Omit<LabelFleetSelectorProps, 'onSelect' | 'devices'> & { filterText: string }) => {
+  fleetNames,
+  isUpdating,
+}: {
+  isUpdating: boolean;
+  fleetNames: string[];
+  allLabels: FlightCtlLabel[];
+}) => {
   const { t } = useTranslation();
 
-  const availableFleetNames = fleets
-    .filter((f) => fuzzySeach(filterText, f.metadata.name))
-    .map((f) => f.metadata.name || '');
+  if (isUpdating) {
+    return (
+      <div className="fctl-device-toolbar-filters__hint">
+        <Spinner size="md" className="pf-v5-u-mr-sm" />
+        {t('Searching...')}
+      </div>
+    );
+  }
 
-  const filteredLabels = filterDevicesLabels(allLabels, selectedLabels, filterText);
-  const [visibleLabels, visibleFleets] = getSearchResultsCount(filteredLabels.length, availableFleetNames.length);
+  const [visibleLabels, visibleFleets] = getSearchResultsCount(allLabels.length, fleetNames.length);
   if (visibleLabels + visibleFleets === 0) {
     return <div className="fctl-device-toolbar-filters__hint">{t('No results')}</div>;
   }
@@ -60,9 +70,10 @@ const LabelFleetResults = ({
       {visibleLabels > 0 && (
         <SelectGroup label={t('Labels')}>
           <SelectList id="select-typeahead-labels-listbox">
-            {filteredLabels
+            {allLabels
               .filter((_, index) => index < visibleLabels)
-              .map((labelStr) => {
+              .map((label) => {
+                const labelStr = labelToString(label);
                 return (
                   <SelectOption key={`label@@${labelStr}`} value={`label@@${labelStr}`}>
                     {labelStr}
@@ -75,7 +86,7 @@ const LabelFleetResults = ({
       {visibleFleets > 0 && (
         <SelectGroup label={t('Fleets')}>
           <SelectList id="select-typeahead-fleets-listbox">
-            {availableFleetNames
+            {fleetNames
               .filter((_, index) => index < visibleFleets)
               .map((fleetName) => (
                 <SelectOption key={`fleet@@${fleetName}`} value={`fleet@@${fleetName}`}>
@@ -89,24 +100,24 @@ const LabelFleetResults = ({
   );
 };
 
-const LabelFleetSelector = ({
-  fleets,
-  selectedFleetNames,
-  allLabels,
-  selectedLabels,
-  onSelect,
-  placeholder,
-}: LabelFleetSelectorProps) => {
+const LabelFleetSelector = ({ selectedFleetNames, selectedLabels, onSelect, placeholder }: LabelFleetSelectorProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [filterText, setFilterText] = React.useState<string>('');
+  const [fleetNameResults, setFleetNameResults] = React.useState<string[]>([]);
+  const [labelResults, setLabelResults] = React.useState<FlightCtlLabel[]>([]);
+  const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
+
+  const { get } = useFetch();
 
   const textInputRef = React.useRef<HTMLInputElement>();
 
   const { t } = useTranslation();
 
   const onToggleClick = () => {
+    if (!isOpen) {
+      textInputRef?.current?.focus();
+    }
     setIsOpen(!isOpen);
-    textInputRef?.current?.focus();
   };
 
   const onClearButtonClick = () => {
@@ -126,8 +137,61 @@ const LabelFleetSelector = ({
     }
   };
 
+  const fetchTextMatches = async (val: string) => {
+    const labelMatches = get<DeviceList>(
+      // We ask for more items since can't get a precise amount of labels while querying for devices
+      queries.getDevicesWithExactLabelMatching([stringToLabel(val)], { limit: MAX_TOTAL_SEARCH_RESULTS * 2 }),
+    );
+
+    const fleetMatches = get<FleetList>(queries.getFleetsWithNameMatching(val, { limit: MAX_TOTAL_SEARCH_RESULTS }));
+
+    const [labelMatchResult, fleetMatchResult] = await Promise.allSettled([labelMatches, fleetMatches]);
+
+    let newLabels: FlightCtlLabel[] = [];
+    if (isPromiseFulfilled(labelMatchResult)) {
+      // In case we somehow still receive partial label matches, we extract the actual labels
+      const matchingLabels = labelMatchResult.value.items.reduce((prevLabels, newDevice) => {
+        const deviceLabels = newDevice.metadata.labels || {};
+        Object.entries(deviceLabels).forEach(([key, value]) => {
+          const labelText = labelToString({ key, value });
+          if (labelText.includes(val) && !prevLabels.includes(labelText)) {
+            prevLabels.push(labelText);
+          }
+        });
+        return prevLabels;
+      }, [] as string[]);
+
+      newLabels = matchingLabels.map(stringToLabel).sort();
+    }
+
+    let newFleets: string[] = [];
+    if (isPromiseFulfilled(fleetMatchResult)) {
+      newFleets = fleetMatchResult.value.items?.map((fleet: Fleet) => fleet.metadata.name || '') || [];
+    }
+    setLabelResults(newLabels);
+    setFleetNameResults(newFleets);
+    setIsUpdating(false);
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedUpdate = React.useCallback(
+    debounce((val: string) => {
+      fetchTextMatches(val);
+    }, 800),
+    [],
+  );
+
   const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setFilterText(value);
+    if (value) {
+      setFilterText(value);
+      if (!isUpdating) {
+        // Start showing the spinner before the debounced function is triggered
+        setIsUpdating(true);
+      }
+      void debouncedUpdate(value);
+    } else {
+      setFilterText('');
+    }
   };
 
   const selectedIds = selectedFleetNames
@@ -193,42 +257,57 @@ const LabelFleetSelector = ({
       }}
       toggle={toggle}
     >
-      <LabelFleetResults
-        fleets={fleets}
-        filterText={filterText}
-        selectedFleetNames={selectedFleetNames}
-        allLabels={allLabels}
-        selectedLabels={selectedLabels}
-      />
+      {filterText && (
+        <LabelFleetResults isUpdating={isUpdating} fleetNames={fleetNameResults} allLabels={labelResults} />
+      )}
     </Select>
   );
 };
 
 type DeviceToolbarFilterProps = {
-  fleets: Fleet[];
   selectedFleetNames: string[];
   setSelectedFleets: (ownerFleets: string[]) => void;
-  allLabels: FlightCtlLabel[];
   selectedLabels: FlightCtlLabel[];
   setSelectedLabels: (labels: FlightCtlLabel[]) => void;
-  search?: TableTextSearchProps['value'];
-  setSearch?: TableTextSearchProps['setValue'];
+  nameOrAlias?: TableTextSearchProps['value'];
+  setNameOrAlias?: TableTextSearchProps['setValue'];
 };
 
 const DeviceToolbarFilter = ({
-  fleets,
   selectedFleetNames,
   setSelectedFleets,
-  allLabels,
   selectedLabels,
   setSelectedLabels,
-  search,
-  setSearch,
+  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);
   };
@@ -239,6 +318,9 @@ const DeviceToolbarFilter = ({
   ) => {
     setSelectedSearchType(selection as string);
     setIsSearchTypeExpanded(false);
+    if (selection === LABEL_SEARCH) {
+      setTypingText('');
+    }
   };
 
   const onSelectFleetOrLabel = (type: 'fleet' | 'label', id: string) => {
@@ -259,7 +341,7 @@ const DeviceToolbarFilter = ({
 
   return (
     <>
-      {setSearch && (
+      {setNameOrAlias && (
         <Select
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
@@ -286,13 +368,11 @@ const DeviceToolbarFilter = ({
           </SelectOption>
         </Select>
       )}
-      {setSearch && selectedSearchType === NAME_SEARCH ? (
-        <TableTextSearch value={search} setValue={setSearch} />
+      {setNameOrAlias && selectedSearchType === NAME_SEARCH ? (
+        <TableTextSearch value={typingText} setValue={setTypingText} />
       ) : (
         <LabelFleetSelector
-          placeholder={setSearch ? undefined : t('Filter by labels and fleets')}
-          allLabels={allLabels}
-          fleets={fleets}
+          placeholder={setNameOrAlias ? undefined : t('Filter by labels and fleets')}
           selectedFleetNames={selectedFleetNames}
           selectedLabels={selectedLabels}
           onSelect={onSelectFleetOrLabel}