@flightctl/ui-components 0.5.1 → 0.6.0-rc1

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Alert, AlertActionLink, Stack, StackItem } from '@patternfly/react-core';
+import { Alert, AlertActionLink, Bullseye, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import { Device } from '@flightctl/types';
 
-import { useWebSocket } from '../../../hooks/useWebSocket';
+import { WsMetadata, useWebSocket } from '../../../hooks/useWebSocket';
 import ErrorAlert from '../../ErrorAlert/ErrorAlert';
 import { useTranslation } from '../../../hooks/useTranslation';
 import Terminal, { ImperativeTerminalType } from '../../Terminal/Terminal';
@@ -14,16 +14,54 @@ type TerminalTabProps = {
   device: Device;
 };
 
+const wsMeta: WsMetadata = {
+  tty: true,
+  term: 'xterm-256color',
+};
+
 const TerminalTab = ({ device }: TerminalTabProps) => {
   const { t } = useTranslation();
   const terminal = React.useRef<ImperativeTerminalType>(null);
 
   const onMsgReceived = React.useCallback(async (message: Blob) => {
-    const msg = await message.text();
-    terminal.current?.onDataReceived(msg);
+    try {
+      const bytes = new Uint8Array(await message.arrayBuffer());
+      const msgType = bytes[0];
+      const decoder = new TextDecoder();
+      let str = decoder.decode(bytes.slice(1));
+
+      if (msgType === 3) {
+        try {
+          const err = JSON.parse(str) as { code: number; status: string };
+          if (err.status === 'Failure') {
+            str = `command terminated with non-zero exit code: exit status ${err.code}`;
+          } else {
+            return;
+          }
+        } catch {
+          // Nothing to do
+        }
+      }
+      terminal.current?.onDataReceived(str);
+    } catch (err) {
+      // eslint-disable-next-line
+      console.error(err);
+    }
   }, []);
 
-  const { sendMessage, isClosed, error, reconnect } = useWebSocket(device.metadata.name || '', onMsgReceived);
+  const { sendMessage, isClosed, error, reconnect, isConnecting } = useWebSocket(
+    device.metadata.name || '',
+    onMsgReceived,
+    wsMeta,
+  );
+
+  if (isConnecting) {
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
 
   if (error) {
     return <ErrorAlert error={error} />;

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

@@ -115,7 +115,8 @@ const DecommissionedDevicesTable = ({
         aria-label={t('Devices table')}
         loading={isFilterUpdating}
         columns={deviceColumns}
-        emptyFilters={!hasFiltersEnabled}
+        hasFilters={hasFiltersEnabled}
+        clearFilters={() => setNameOrAlias('')}
         emptyData={devices.length === 0}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}

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

@@ -17,7 +17,7 @@ import {
 import { TimesIcon } from '@patternfly/react-icons/dist/js/icons/times-icon';
 import { SearchIcon } from '@patternfly/react-icons/dist/js/icons/search-icon';
 
-import { DeviceList, Fleet, FleetList } from '@flightctl/types';
+import { Fleet, FleetList, LabelList } from '@flightctl/types';
 import { FlightCtlLabel } from '../../../types/extraTypes';
 import { isPromiseFulfilled } from '../../../types/typeUtils';
 
@@ -25,7 +25,7 @@ import TableTextSearch, { TableTextSearchProps } from '../../Table/TableTextSear
 import { useTranslation } from '../../../hooks/useTranslation';
 import { useFetch } from '../../../hooks/useFetch';
 import { commonQueries as queries } from '../../../utils/query';
-import { MAX_TOTAL_SEARCH_RESULTS, getSearchResultsCount } from '../../../utils/search';
+import { MAX_TOTAL_SEARCH_RESULTS, getEmptyFleetSearch, getSearchResultsCount } from '../../../utils/search';
 import { labelToString, stringToLabel } from '../../../utils/labels';
 
 import './DeviceToolbarFilters.css';
@@ -41,15 +41,32 @@ type LabelFleetSelectorProps = {
 };
 
 const LabelFleetResults = ({
+  filterText,
   allLabels,
   fleetNames,
   isUpdating,
+  selectedFleetNames,
+  selectedLabels,
 }: {
+  filterText: string;
   isUpdating: boolean;
   fleetNames: string[];
+  selectedLabels: FlightCtlLabel[];
+  selectedFleetNames: string[];
   allLabels: FlightCtlLabel[];
 }) => {
   const { t } = useTranslation();
+  const regexp = React.useMemo(() => new RegExp(`(${filterText})`, 'g'), [filterText]);
+
+  const searchHighlighter = React.useCallback(
+    (text: string) => {
+      return text
+        .split(regexp)
+        .filter(Boolean)
+        .map((part, index) => (part.trim() === filterText ? <strong key={`part-${index}`}>{part}</strong> : part));
+    },
+    [filterText, regexp],
+  );
 
   if (isUpdating) {
     return (
@@ -74,9 +91,16 @@ const LabelFleetResults = ({
               .filter((_, index) => index < visibleLabels)
               .map((label) => {
                 const labelStr = labelToString(label);
+                const labelStrParts = searchHighlighter(labelStr);
+                const isSelected = selectedLabels.map(labelToString).includes(labelStr);
                 return (
-                  <SelectOption key={`label@@${labelStr}`} value={`label@@${labelStr}`}>
-                    {labelStr}
+                  <SelectOption
+                    key={`label@@${labelStr}`}
+                    value={`label@@${labelStr}`}
+                    hasCheckbox
+                    isSelected={isSelected}
+                  >
+                    <span>{labelStrParts}</span>
                   </SelectOption>
                 );
               })}
@@ -88,11 +112,19 @@ const LabelFleetResults = ({
           <SelectList id="select-typeahead-fleets-listbox">
             {fleetNames
               .filter((_, index) => index < visibleFleets)
-              .map((fleetName) => (
-                <SelectOption key={`fleet@@${fleetName}`} value={`fleet@@${fleetName}`}>
-                  {fleetName}
-                </SelectOption>
-              ))}
+              .map((fleetName) => {
+                const fleetNameParts = searchHighlighter(fleetName);
+                return (
+                  <SelectOption
+                    key={`fleet@@${fleetName}`}
+                    value={`fleet@@${fleetName}`}
+                    hasCheckbox
+                    isSelected={selectedFleetNames.includes(fleetName)}
+                  >
+                    <span>{fleetNameParts}</span>
+                  </SelectOption>
+                );
+              })}
           </SelectList>
         </SelectGroup>
       )}
@@ -127,6 +159,7 @@ const LabelFleetSelector = ({ selectedFleetNames, selectedLabels, onSelect, plac
 
   const closeMenu = () => {
     setIsOpen(false);
+    setFilterText('');
   };
 
   const onInputClick = () => {
@@ -138,30 +171,20 @@ const LabelFleetSelector = ({ selectedFleetNames, selectedLabels, onSelect, plac
   };
 
   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 searchOnlyLabels = val.includes('=');
+    const labelMatches = get<LabelList>(
+      queries.getDevicesWithPartialLabelMatching(val, { limit: MAX_TOTAL_SEARCH_RESULTS }),
     );
 
-    const fleetMatches = get<FleetList>(queries.getFleetsWithNameMatching(val, { limit: MAX_TOTAL_SEARCH_RESULTS }));
+    const fleetMatches = searchOnlyLabels
+      ? Promise.resolve(getEmptyFleetSearch())
+      : 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();
+      newLabels = labelMatchResult.value.map(stringToLabel);
     }
 
     let newFleets: string[] = [];
@@ -194,10 +217,6 @@ const LabelFleetSelector = ({ selectedFleetNames, selectedLabels, onSelect, plac
     }
   };
 
-  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"
@@ -240,7 +259,6 @@ const LabelFleetSelector = ({ selectedFleetNames, selectedLabels, onSelect, plac
     <Select
       id="fleet-label-typeahead-select-listbox"
       isOpen={isOpen}
-      selected={selectedIds}
       onSelect={(_event, value) => {
         const valStr = value as string;
         const id = valStr.split('@@')[1];
@@ -249,8 +267,6 @@ const LabelFleetSelector = ({ selectedFleetNames, selectedLabels, onSelect, plac
         } else {
           onSelect('label', id);
         }
-        setIsOpen(false);
-        setFilterText('');
       }}
       onOpenChange={(isOpen) => {
         !isOpen && closeMenu();
@@ -258,7 +274,14 @@ const LabelFleetSelector = ({ selectedFleetNames, selectedLabels, onSelect, plac
       toggle={toggle}
     >
       {filterText && (
-        <LabelFleetResults isUpdating={isUpdating} fleetNames={fleetNameResults} allLabels={labelResults} />
+        <LabelFleetResults
+          isUpdating={isUpdating}
+          filterText={filterText}
+          fleetNames={fleetNameResults}
+          selectedFleetNames={selectedFleetNames}
+          allLabels={labelResults}
+          selectedLabels={selectedLabels}
+        />
       )}
     </Select>
   );
@@ -324,16 +347,21 @@ const DeviceToolbarFilter = ({
   };
 
   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) {
+
+      if (isSelected) {
+        setSelectedFleets(selectedFleetNames.filter((name) => name !== id));
+      } else {
         setSelectedFleets(selectedFleetNames.concat([id]));
       }
     } else {
       const isSelected = selectedLabels.some((label) => labelToString(label) === id);
-      if (!isSelected) {
-        const [key, val] = id.split('=');
+      const [key, val] = id.split('=');
+
+      if (isSelected) {
+        setSelectedLabels(selectedLabels.filter((label) => label.key !== key || label.value !== val));
+      } else {
         setSelectedLabels(selectedLabels.concat([{ key, value: val }]));
       }
     }

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

@@ -36,6 +36,15 @@ const DevicesPage = ({ canListER }: { canListER: boolean }) => {
     setSelectedLabels,
   } = useDeviceBackendFilters();
   const [onlyDecommissioned, setOnlyDecommissioned] = React.useState<boolean>(false);
+  const [showDeviceListBadge, setShowDeviceListBadge] = React.useState<boolean>(true);
+
+  const onEmptyErChanged = React.useCallback((isEmpty: boolean) => {
+    if (isEmpty) {
+      setShowDeviceListBadge(true);
+    } else {
+      setShowDeviceListBadge(false);
+    }
+  }, []);
 
   const { currentPage, setCurrentPage, onPageFetched, nextContinue, itemCount } = useTablePagination<DeviceList>(
     onlyDecommissioned ? undefined : removeDecommissionedDevices,
@@ -62,9 +71,9 @@ const DevicesPage = ({ canListER }: { canListER: boolean }) => {
 
   return (
     <>
-      {canListER && <EnrollmentRequestList refetchDevices={refetch} />}
+      {canListER && <EnrollmentRequestList onEmptyListChanged={onEmptyErChanged} refetchDevices={refetch} />}
 
-      <ListPage title={t('Devices')}>
+      <ListPage title={t('Devices')} withBadge={showDeviceListBadge}>
         {/* When searching for decommissioned devices we want to avoid showing the enrolled devices */}
         <ListPageBody error={error} loading={loading || (onlyDecommissioned && updating && !hasFiltersEnabled)}>
           {onlyDecommissioned ? (

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

@@ -110,6 +110,19 @@ const EnrolledDevicesTable = ({
   const [canEdit] = useAccessReview(RESOURCE.DEVICE, VERB.PATCH);
   const [canDecommission] = useAccessReview(RESOURCE.DEVICE_DECOMMISSION, VERB.UPDATE);
 
+  const clearAllFilters = () => {
+    if (hasFiltersEnabled) {
+      setActiveStatuses({
+        [FilterSearchParams.AppStatus]: [],
+        [FilterSearchParams.DeviceStatus]: [],
+        [FilterSearchParams.UpdatedStatus]: [],
+      });
+      setOwnerFleets([]);
+      setNameOrAlias('');
+      setSelectedLabels([]);
+    }
+  };
+
   return (
     <>
       <DeviceTableToolbar
@@ -145,16 +158,7 @@ const EnrolledDevicesTable = ({
             label={t('Show only decommissioned devices')}
             isChecked={false}
             onChange={() => {
-              if (hasFiltersEnabled) {
-                setActiveStatuses({
-                  [FilterSearchParams.AppStatus]: [],
-                  [FilterSearchParams.DeviceStatus]: [],
-                  [FilterSearchParams.UpdatedStatus]: [],
-                });
-                setOwnerFleets([]);
-                setNameOrAlias('');
-                setSelectedLabels([]);
-              }
+              clearAllFilters();
               setOnlyDecommissioned(true);
             }}
             ouiaId={t('Show only decommissioned devices')}
@@ -165,7 +169,8 @@ const EnrolledDevicesTable = ({
         aria-label={t('Enrolled devices table')}
         loading={isFilterUpdating}
         columns={deviceColumns}
-        emptyFilters={!hasFiltersEnabled}
+        hasFilters={hasFiltersEnabled}
+        clearFilters={clearAllFilters}
         emptyData={devices.length === 0}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}

package/src/components/Device/EditDeviceWizard/EditDeviceWizard.tsx

@@ -14,7 +14,8 @@ import {
 } from '@patternfly/react-core';
 
 import { Device } from '@flightctl/types';
-import { EditDeviceFormValues } from './types';
+import { getUpdatePolicyValues } from '../../Fleet/CreateFleet/fleetSpecUtils';
+import { EditDeviceFormValues } from './../../../types/deviceSpec';
 import { getErrorMessage } from '../../../utils/error';
 import { fromAPILabel } from '../../../utils/labels';
 import { getEditDisabledReason } from '../../../utils/devices';
@@ -24,6 +25,7 @@ import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
 import ErrorBoundary from '../../common/ErrorBoundary';
 import GeneralInfoStep, { generalInfoStepId, isGeneralInfoStepValid } from './steps/GeneralInfoStep';
 import DeviceTemplateStep, { deviceTemplateStepId, isDeviceTemplateStepValid } from './steps/DeviceTemplateStep';
+import DeviceUpdateStep, { deviceUpdatePolicyStepId, isUpdatePolicyStepValid } from './steps/DeviceUpdateStep';
 import ReviewDeviceStep, { reviewDeviceStepId } from './steps/ReviewDeviceStep';
 import { getDevicePatches, getValidationSchema } from './utils';
 import { getApplicationValues, getConfigTemplatesValues, hasMicroshiftRegistrationConfig } from './deviceSpecUtils';
@@ -82,6 +84,7 @@ const EditDeviceWizard = () => {
           applications: getApplicationValues(device.spec),
           systemdUnits: [],
           registerMicroShift,
+          updatePolicy: getUpdatePolicyValues(device.spec?.updatePolicy),
         }}
         validationSchema={getValidationSchema(t)}
         validateOnMount
@@ -101,9 +104,12 @@ const EditDeviceWizard = () => {
         {({ values, errors: formikErrors }) => {
           const generalStepValid = isGeneralInfoStepValid(formikErrors);
           const templateStepValid = isDeviceTemplateStepValid(formikErrors);
+          const updateStepValid = isUpdatePolicyStepValid(formikErrors);
 
           const canEditTemplate = !values.fleetMatch;
           const isTemplateStepDisabled = !(generalStepValid && canEditTemplate);
+          const isUpdateStepDisabled = !templateStepValid;
+
           return (
             <>
               <LeaveFormConfirmation />
@@ -123,7 +129,10 @@ const EditDeviceWizard = () => {
                 <WizardStep name={t('Device template')} id={deviceTemplateStepId} isDisabled={isTemplateStepDisabled}>
                   <DeviceTemplateStep isFleet={false} />
                 </WizardStep>
-                <WizardStep name={t('Review and save')} id={reviewDeviceStepId} isDisabled={!templateStepValid}>
+                <WizardStep name={t('Updates')} id={deviceUpdatePolicyStepId} isDisabled={isUpdateStepDisabled}>
+                  <DeviceUpdateStep />
+                </WizardStep>
+                <WizardStep name={t('Review and save')} id={reviewDeviceStepId} isDisabled={!updateStepValid}>
                   <ReviewDeviceStep error={submitError} />
                 </WizardStep>
               </Wizard>

package/src/components/Device/EditDeviceWizard/EditDeviceWizardFooter.tsx

@@ -2,34 +2,50 @@ import * as React from 'react';
 import { useFormikContext } from 'formik';
 import { Button, WizardFooterWrapper, useWizardContext } from '@patternfly/react-core';
 
-import { EditDeviceFormValues } from './types';
+import { EditDeviceFormValues } from '../../../types/deviceSpec';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { useNavigate } from '../../../hooks/useNavigate';
 import { generalInfoStepId, isGeneralInfoStepValid } from './steps/GeneralInfoStep';
 import { deviceTemplateStepId, isDeviceTemplateStepValid } from './steps/DeviceTemplateStep';
 import { reviewDeviceStepId } from './steps/ReviewDeviceStep';
+import { deviceUpdatePolicyStepId, isUpdatePolicyStepValid } from './steps/DeviceUpdateStep';
 
 const EditDeviceWizardFooter = () => {
   const { t } = useTranslation();
   const { goToNextStep, goToPrevStep, activeStep } = useWizardContext();
   const { submitForm, isSubmitting, errors } = useFormikContext<EditDeviceFormValues>();
   const navigate = useNavigate();
+  const buttonRef = React.useRef<HTMLButtonElement>();
 
   const isSubmitStep = activeStep.id === reviewDeviceStepId;
 
   let isStepValid = true;
-  if (activeStep.id === generalInfoStepId) {
-    isStepValid = isGeneralInfoStepValid(errors);
-  } else if (activeStep.id === deviceTemplateStepId) {
-    isStepValid = isDeviceTemplateStepValid(errors);
+  switch (activeStep.id) {
+    case generalInfoStepId:
+      isStepValid = isGeneralInfoStepValid(errors);
+      break;
+    case deviceTemplateStepId:
+      isStepValid = isDeviceTemplateStepValid(errors);
+      break;
+    case deviceUpdatePolicyStepId:
+      isStepValid = isUpdatePolicyStepValid(errors);
+      break;
+    default:
+      break;
   }
 
+  const onMoveNext = () => {
+    goToNextStep();
+    // Blur the button, otherwise it keeps the focus from the previous click
+    buttonRef.current?.blur();
+  };
+
   const primaryBtn = isSubmitStep ? (
     <Button variant="primary" onClick={submitForm} isDisabled={isSubmitting} isLoading={isSubmitting}>
       {t('Save')}
     </Button>
   ) : (
-    <Button variant="primary" onClick={goToNextStep} isDisabled={!isStepValid}>
+    <Button variant="primary" onClick={onMoveNext} isDisabled={!isStepValid} ref={buttonRef}>
       {t('Next')}
     </Button>
   );

package/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx

@@ -7,7 +7,8 @@ import { TFunction } from 'react-i18next';
 
 const generalInfoStepIndex = 0;
 const deviceTemplateStepIndex = 1;
-const reviewDeviceStepIndex = 2;
+const deviceUpdatesStepIndex = 2;
+const reviewDeviceStepIndex = 3;
 
 const disabledTemplateReason = (t: TFunction) =>
   t('The device will be bound to a fleet. As a result, its configurations cannot be edited directly.');
@@ -17,6 +18,7 @@ const EditDeviceWizardNav = () => {
   const { activeStep, steps, goToStepByIndex } = useWizardContext();
 
   const isEditTemplateDisabled = steps[deviceTemplateStepIndex]?.isDisabled;
+  const isDeviceUpdatesDisabled = steps[deviceUpdatesStepIndex]?.isDisabled;
   const isReviewDeviceDisabled = steps[reviewDeviceStepIndex]?.isDisabled;
 
   return (
@@ -39,8 +41,19 @@ const EditDeviceWizardNav = () => {
             goToStepByIndex(deviceTemplateStepIndex + 1);
           }
         }}
+      />
+      <WizardNavItem
+        stepIndex={deviceUpdatesStepIndex}
+        content={t('Updates')}
+        isCurrent={activeStep?.index === deviceUpdatesStepIndex + 1}
+        isDisabled={isDeviceUpdatesDisabled}
+        onClick={() => {
+          if (!isDeviceUpdatesDisabled) {
+            goToStepByIndex(deviceUpdatesStepIndex + 1);
+          }
+        }}
       >
-        {isEditTemplateDisabled && (
+        {isDeviceUpdatesDisabled && (
           <Tooltip content={disabledTemplateReason(t)}>
             <Icon status="info" size="sm">
               <InfoCircleIcon />