@flightctl/ui-components 0.0.10 → 0.4.0-rc1

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  Alert,
   CardTitle,
   DescriptionListDescription,
   DescriptionListGroup,
@@ -13,52 +12,36 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 
-import { Device, TemplateVersion } from '@flightctl/types';
+import { Device } from '@flightctl/types';
 import { timeSinceText } from '../../../utils/dates';
-import ApplicationsTable from '../../DetailsPage/Tables/ApplicationsTable';
 import DeviceStatus from '../../Status/DeviceStatus';
 import { useTranslation } from '../../../hooks/useTranslation';
 import EditLabelsForm from '../../modals/EditLabelsModal/EditLabelsForm';
 import ResourceLink from '../../common/ResourceLink';
-import DeviceFleet from './DeviceFleet';
-import DeviceOs from './DeviceOs';
 import DetailsPageCard, { DetailsPageCardBody } from '../../DetailsPage/DetailsPageCard';
-import SystemdTable from './SystemdTable';
 import FlightControlDescriptionList from '../../common/FlightCtlDescriptionList';
 import RepositorySourceList from '../../Repository/RepositoryDetails/RepositorySourceList';
-import { getErrorMessage } from '../../../utils/error';
 import ApplicationSummaryStatus from '../../Status/ApplicationSummaryStatus';
 import WithHelperText from '../../common/WithHelperText';
 import SystemUpdateStatus from '../../Status/SystemUpdateStatus';
 import DeviceResourceStatus from '../../Status/DeviceResourceStatus';
+import DeviceFleet from './DeviceFleet';
+import DeviceOs from './DeviceOs';
+import DeviceApplications from './DeviceApplications';
 
 import './DeviceDetailsTab.css';
 
 type DeviceDetailsTabProps = {
   device: Required<Device>;
   refetch: VoidFunction;
-  tv: TemplateVersion | undefined;
-  errorTv: unknown;
+  canEdit: boolean;
 };
 
-const DeviceDetailsTab = ({
-  device,
-  refetch,
-  tv,
-  errorTv,
-  children,
-}: React.PropsWithChildren<DeviceDetailsTabProps>) => {
+const DeviceDetailsTab = ({ device, refetch, children, canEdit }: React.PropsWithChildren<DeviceDetailsTabProps>) => {
   const { t } = useTranslation();
 
   return (
     <Grid hasGutter>
-      {!!errorTv && (
-        <GridItem md={12}>
-          <Alert isInline variant="warning" title={t('Some device details could not be loaded.')}>
-            {getErrorMessage(errorTv)}
-          </Alert>
-        </GridItem>
-      )}
       <GridItem md={12}>
         <DetailsPageCard>
           <DetailsPageCardBody>
@@ -85,7 +68,7 @@ const DeviceDetailsTab = ({
                   <StackItem className="fctl-device-details-tab__label">{t('Labels')}</StackItem>
                 </Stack>
                 <StackItem>
-                  <EditLabelsForm device={device} onDeviceUpdate={refetch} />
+                  <EditLabelsForm device={device} onDeviceUpdate={refetch} canEdit={canEdit} />
                 </StackItem>
               </FlexItem>
             </Flex>
@@ -194,20 +177,7 @@ const DeviceDetailsTab = ({
         </DetailsPageCard>
       </GridItem>
       <GridItem md={12} lg={6}>
-        <DetailsPageCard>
-          <CardTitle>{t('Applications')}</CardTitle>
-          <DetailsPageCardBody>
-            <ApplicationsTable appsStatus={device.status.applications} />
-          </DetailsPageCardBody>
-        </DetailsPageCard>
-      </GridItem>
-      <GridItem md={12} lg={6}>
-        <DetailsPageCard>
-          <CardTitle>{t('System services')}</CardTitle>
-          <DetailsPageCardBody>
-            <SystemdTable device={device} templateVersion={tv} onSystemdUnitsUpdate={refetch} />
-          </DetailsPageCardBody>
-        </DetailsPageCard>
+        <DeviceApplications device={device} refetch={refetch} canEdit={canEdit} />
       </GridItem>
     </Grid>
   );

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';
@@ -23,14 +22,12 @@ import DeviceTableToolbarFilters from './DeviceToolbarFilters';
 type DeviceTableToolbarProps = {
   nameOrAlias: TableTextSearchProps['value'];
   setNameOrAlias: 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;
 };
 
@@ -42,10 +39,8 @@ const DeviceTableToolbar: React.FC<React.PropsWithChildren<DeviceTableToolbarPro
     setNameOrAlias,
     activeStatuses,
     setActiveStatuses,
-    allLabels,
     selectedLabels,
     setSelectedLabels,
-    fleets,
     isFilterUpdating,
   } = rest;
 
@@ -86,12 +81,10 @@ 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}
                 nameOrAlias={nameOrAlias}
                 setNameOrAlias={setNameOrAlias}
               />

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

@@ -9,6 +9,7 @@ import {
   SelectGroup,
   SelectList,
   SelectOption,
+  Spinner,
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
@@ -16,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';
 
@@ -30,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;
@@ -40,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>;
   }
@@ -61,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}
@@ -76,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}`}>
@@ -90,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 = () => {
@@ -127,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
@@ -194,22 +257,16 @@ 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;
   nameOrAlias?: TableTextSearchProps['value'];
@@ -217,10 +274,8 @@ type DeviceToolbarFilterProps = {
 };
 
 const DeviceToolbarFilter = ({
-  fleets,
   selectedFleetNames,
   setSelectedFleets,
-  allLabels,
   selectedLabels,
   setSelectedLabels,
   nameOrAlias,
@@ -318,8 +373,6 @@ const DeviceToolbarFilter = ({
       ) : (
         <LabelFleetSelector
           placeholder={setNameOrAlias ? undefined : t('Filter by labels and fleets')}
-          allLabels={allLabels}
-          fleets={fleets}
           selectedFleetNames={selectedFleetNames}
           selectedLabels={selectedLabels}
           onSelect={onSelectFleetOrLabel}