@flightctl/ui-components 0.4.0 → 0.5.0-rc1

package/src/components/form/LabelsField.tsx

@@ -31,7 +31,7 @@ const LabelsField: React.FC<LabelsFieldProps> = ({
     const errors = await setLabels(newLabels, true);
     const hasErrors = Object.keys(errors || {}).length > 0;
 
-    onChangeCallback && onChangeCallback(newLabels, hasErrors);
+    onChangeCallback?.(newLabels, hasErrors);
   };
 
   const onDelete = async (_ev: React.MouseEvent<Element, MouseEvent>, index: number) => {
@@ -44,6 +44,9 @@ const LabelsField: React.FC<LabelsFieldProps> = ({
   };
 
   const onAdd = async (text: string) => {
+    if (!text) {
+      return;
+    }
     const split = text.split('=');
     let newLabel: FlightCtlLabel;
     if (split.length === 2) {

package/src/components/form/NumberField.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { FormGroup, NumberInput, NumberInputProps as PFNumberInputProps } from '@patternfly/react-core';
+import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
+
+export interface NumberFieldProps extends Omit<PFNumberInputProps, 'onChange'> {
+  name: string;
+  isRequired?: boolean;
+  helperText?: React.ReactNode;
+}
+
+const NumberField = React.forwardRef(
+  ({ helperText, min = 0, max, isRequired, ...props }: NumberFieldProps, ref: React.Ref<HTMLInputElement>) => {
+    const [field, meta, { setValue, setTouched }] = useField<number | ''>({
+      name: props.name,
+    });
+
+    const doChange = (value: number) => {
+      let newValue = value < (min || 0) ? min : value;
+      newValue = max && newValue > max ? max : newValue;
+      if (field.value !== newValue) {
+        setValue(newValue);
+      }
+    };
+
+    const onPlus: PFNumberInputProps['onPlus'] = () => {
+      doChange(field.value ? field.value + 1 : min);
+    };
+
+    const onMinus: PFNumberInputProps['onMinus'] = () => {
+      doChange(field.value ? field.value - 1 : min);
+    };
+
+    const handleChange: PFNumberInputProps['onChange'] = (event: React.FormEvent<HTMLInputElement>) => {
+      const valStr = (event.target as HTMLInputElement).value;
+      // Skip updating the value onBlur. Otherwise, when the field is cleared PF sets a numeric value onBlur.
+      if (event.type === 'change') {
+        if (!isRequired && valStr === '') {
+          setValue('');
+        } else {
+          const targetValue = valStr as unknown as number;
+          doChange(Number.isNaN(targetValue) ? min : Number(targetValue));
+          setTouched(true);
+        }
+      }
+    };
+
+    const fieldId = `numberfield-${props.name}`;
+    const hasError = meta.touched && !!meta.error;
+
+    return (
+      <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId}>
+        <NumberInput
+          className="fc-number-input"
+          {...field}
+          {...props}
+          // Prevent the NumberInput setting the value to 0 when it's not defined
+          value={field.value === undefined && !isRequired ? '' : field.value}
+          min={min}
+          max={max}
+          ref={ref}
+          inputName={fieldId}
+          onMinus={onMinus}
+          onChange={handleChange}
+          onPlus={onPlus}
+          validated={hasError ? 'error' : 'default'}
+        />
+
+        <DefaultHelperText helperText={helperText} />
+        <ErrorHelperText meta={meta} />
+      </FormGroup>
+    );
+  },
+);
+
+NumberField.displayName = 'NumberField';
+
+export default NumberField;

package/src/components/form/TextListField.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { Label, LabelGroup } from '@patternfly/react-core';
+
+import EditableLabelControl from '../common/EditableLabelControl';
+import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
+
+type TextListFieldProps = {
+  name: string;
+  isLoading?: boolean;
+  addButtonText?: string;
+  helperText?: React.ReactNode;
+  onChangeCallback?: (newList: string[], hasErrors: boolean) => void;
+  canEdit?: boolean;
+};
+
+const maxWidth = '16ch';
+
+const TextListField = ({ name, onChangeCallback, addButtonText, helperText }: TextListFieldProps) => {
+  const [{ value: valueList }, meta, { setValue: setValueList, setTouched }] = useField<string[]>(name);
+  const updateValueList = async (newValueList: string[]) => {
+    const errors = await setValueList(newValueList, true);
+    const hasErrors = Object.keys(errors || {}).length > 0;
+
+    setTouched(true);
+    onChangeCallback?.(newValueList, hasErrors);
+  };
+
+  const onDelete = async (_ev: React.MouseEvent<Element, MouseEvent>, index: number) => {
+    const newValueList = [...valueList];
+    newValueList.splice(index, 1);
+    await updateValueList(newValueList);
+  };
+
+  const onAdd = async (text: string) => {
+    if (text) {
+      await updateValueList([...valueList, text]);
+    } else {
+      setTouched(true);
+    }
+  };
+
+  const onEdit = async (index: number, newValue: string) => {
+    const newLabels = [...valueList];
+    newLabels.splice(index, 1, newValue);
+
+    await updateValueList(newLabels);
+  };
+
+  return (
+    <>
+      <LabelGroup
+        numLabels={5}
+        isEditable
+        addLabelControl={
+          <EditableLabelControl defaultLabel="" addButtonText={addButtonText} onAddLabel={onAdd} isEditable />
+        }
+      >
+        {valueList.map((text, index) => {
+          return (
+            <Label
+              key={`${text}_${index}`}
+              textMaxWidth={maxWidth}
+              onClose={(e) => onDelete(e, index)}
+              onEditCancel={(_, prevText) => onEdit(index, prevText)}
+              onEditComplete={(_, newText) => onEdit(index, newText)}
+              /* Add a basic tooltip as the PF tooltip doesn't work for editable labels */
+              title={text}
+              isEditable
+            >
+              {text}
+            </Label>
+          );
+        })}
+      </LabelGroup>
+      <DefaultHelperText helperText={helperText} />
+      <ErrorHelperText meta={meta} />
+    </>
+  );
+};
+
+export default TextListField;

package/src/components/form/validations.ts

@@ -17,8 +17,7 @@ import {
 import { labelToString } from '../../utils/labels';
 import { ApplicationFormSpec } from '../Device/EditDeviceWizard/types';
 import { SystemdUnitFormValue } from '../Device/SystemdUnitsModal/TrackSystemdUnitsForm';
-
-type UnvalidatedLabel = Partial<FlightCtlLabel>;
+import { BatchForm, BatchLimitType, DisruptionBudgetForm, RolloutPolicyForm } from '../Fleet/CreateFleet/types';
 
 const SYSTEMD_PATTERNS_REGEXP = /^[a-z][a-z0-9-_.]*$/;
 const SYSTEMD_UNITS_MAX_PATTERNS = 256;
@@ -40,6 +39,8 @@ const BASIC_FLEET_OS_IMAGE_REGEXP = /^[a-zA-Z0-9.\-\/:@_+{}\s]*$/;
 const absolutePathRegex = /^\/.*$/;
 export const MAX_TARGET_REVISION_LENGTH = 244;
 
+const isInteger = (val: number | undefined) => val === undefined || Number.isInteger(val);
+
 export const getLabelValueValidations = (t: TFunction) => [
   { key: 'labelValueStartAndEnd', message: t('Starts and ends with a letter or a number.') },
   {
@@ -92,12 +93,12 @@ export const getKubernetesDnsSubdomainErrors = (value: string) => {
   return errorKeys;
 };
 
-export const hasUniqueLabelKeys = (labels: UnvalidatedLabel[]) => {
+export const hasUniqueLabelKeys = (labels: FlightCtlLabel[]) => {
   const uniqueKeys = new Set(labels.map((label) => label.key));
   return uniqueKeys.size === labels.length;
 };
 
-export const getInvalidKubernetesLabels = (labels: UnvalidatedLabel[]) => {
+export const getInvalidKubernetesLabels = (labels: FlightCtlLabel[]) => {
   return labels.filter((unvalidatedLabel) => {
     const key = unvalidatedLabel.key || '';
     const value = unvalidatedLabel.value || '';
@@ -201,14 +202,13 @@ export const validOsImage = (t: TFunction, { isFleet }: { isFleet: boolean }) =>
 export const validLabelsSchema = (t: TFunction) =>
   Yup.array()
     .of(
-      Yup.object<UnvalidatedLabel>().shape({
-        // We'll define the mandatory key restriction for all labels, not individually
-        key: Yup.string(),
+      Yup.object<FlightCtlLabel>().shape({
+        key: Yup.string().required(),
         value: Yup.string(),
       }),
     )
     .required()
-    .test('missing keys', (labels: UnvalidatedLabel[], testContext) => {
+    .test('missing keys', (labels: FlightCtlLabel[], testContext) => {
       const missingKeyLabels = labels.filter((label) => !label.key).map((label) => label.value);
       return missingKeyLabels.length > 0
         ? testContext.createError({
@@ -219,18 +219,32 @@ export const validLabelsSchema = (t: TFunction) =>
         : true;
     })
     .test('unique keys', t('Label keys must be unique'), hasUniqueLabelKeys)
-    .test('invalid-labels', (labels: UnvalidatedLabel[], testContext) => {
+    .test('invalid-labels', (labels: FlightCtlLabel[], testContext) => {
       const invalidLabels = getInvalidKubernetesLabels(labels);
 
       return invalidLabels.length > 0
         ? testContext.createError({
             message: t('The following labels are not valid Kubernetes labels: {{invalidLabels}}', {
-              invalidLabels: `${invalidLabels.map((label) => labelToString(label as FlightCtlLabel)).join(', ')}`,
+              invalidLabels: `${invalidLabels.map(labelToString).join(', ')}`,
             }),
           })
         : true;
     });
 
+export const validGroupLabelKeysSchema = (t: TFunction) =>
+  Yup.array()
+    .of(
+      Yup.string()
+        .required()
+        .test('only-label-keys', t("Full labels are not allowed, use only the 'key' part."), (value?: string) => {
+          return !value?.includes('=');
+        }),
+    )
+    .test('unique keys', t('Label keys must be unique'), (labelKeys) => {
+      const uniqueKeys = new Set(labelKeys);
+      return uniqueKeys.size === labelKeys?.length;
+    });
+
 export const validApplicationsSchema = (t: TFunction) => {
   return Yup.array()
     .of(
@@ -287,6 +301,85 @@ export const validApplicationsSchema = (t: TFunction) => {
     });
 };
 
+export const validFleetRolloutPolicySchema = (t: TFunction) => {
+  return Yup.object()
+    .shape({
+      isAdvanced: Yup.boolean().required(),
+      updateTimeout: Yup.number()
+        .required('Update timeout is required')
+        .test('not-decimal', t('Cannot be decimal'), isInteger),
+      batches: Yup.array()
+        .of(
+          Yup.lazy((values: BatchForm) =>
+            Yup.object<BatchForm>().shape({
+              selector: validLabelsSchema(t),
+              limitType: Yup.string()
+                .oneOf([BatchLimitType.BatchLimitAbsoluteNumber, BatchLimitType.BatchLimitPercent])
+                .required(),
+              limit: Yup.number()
+                .test('correct-percentage', t('Percentage must be between 1 and 100.'), (num) => {
+                  if (num === undefined) {
+                    return true;
+                  }
+                  if (values.limitType === BatchLimitType.BatchLimitPercent && num > 100) {
+                    return false;
+                  }
+                  return true;
+                })
+                .test('not-decimal', t('Cannot be decimal'), isInteger)
+                // When an absolute number, we can only restrict the minimum value
+                .min(1, t('Value must be greater or equal than 1')),
+              successThreshold: Yup.number()
+                .required('Success threshold is required')
+                .min(1, t('Success threshold must be between 1 and 100'))
+                .max(100, t('Success threshold must be between 1 and 100'))
+                .test('not-decimal', t('Cannot be decimal'), isInteger),
+            }),
+          ),
+        )
+        .required(),
+    })
+    .test('valid-rollout', (rolloutPolicy: RolloutPolicyForm | undefined, testContext) => {
+      if (!rolloutPolicy || rolloutPolicy.batches.length === 0) {
+        return true;
+      }
+
+      const errors = rolloutPolicy.batches.reduce((errors, batch, batchIndex) => {
+        const hasError = batch.limit === undefined && Object.keys(batch.selector || {}).length === 0;
+        if (hasError) {
+          errors.push(
+            new Yup.ValidationError(
+              t('At least one of the label selector or numeric selector must be specified.'),
+              '',
+              `rolloutPolicy.batches[${batchIndex}]`,
+            ),
+          );
+        }
+        return errors;
+      }, [] as Yup.ValidationError[]);
+
+      return testContext.createError({
+        message: () => errors,
+      });
+    });
+};
+
+export const validFleetDisruptionBudgetSchema = (t: TFunction) => {
+  return Yup.object()
+    .shape({
+      isAdvanced: Yup.boolean().required(),
+      minAvailable: Yup.number().test('not-decimal', t('Number of devices cannot be decimal'), isInteger),
+      maxUnavailable: Yup.number().test('not-decimal', t('Number of devices cannot be decimal'), isInteger),
+      groupBy: validGroupLabelKeysSchema(t),
+    })
+    .test(
+      'has-min-or-max',
+      t('At least one of minimum available or maximum unavailable devices is required.'),
+      (value: DisruptionBudgetForm) =>
+        !(value.isAdvanced && value.minAvailable === undefined && value.maxUnavailable === undefined),
+    );
+};
+
 export const validConfigTemplatesSchema = (t: TFunction) =>
   Yup.array()
     .test('unique-names', t('Source names must be unique'), (templates: SpecConfigTemplate[] | undefined) => {

package/src/components/modals/DecommissionModal/DecommissionModal.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { Formik } from 'formik';
+import { Alert, Button, Modal, Stack, StackItem } from '@patternfly/react-core';
+
+import { DeviceDecommissionTargetType } from '@flightctl/types';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import { getErrorMessage } from '../../../utils/error';
+
+type DecommissionModalProps = {
+  onDecommission: (target: DeviceDecommissionTargetType) => Promise<unknown>;
+  onClose: VoidFunction;
+};
+
+type DecommissionFormValues = {
+  // Currently not implemented - no checkbox to select this option is visible in the UI
+  doFactoryReset: boolean;
+};
+
+const DecommissionModal = ({ onDecommission, onClose }: DecommissionModalProps) => {
+  const { t } = useTranslation();
+  const [isDecommissioning, setIsDecommissioning] = React.useState(false);
+  const [error, setError] = React.useState<string>();
+
+  React.useEffect(() => {
+    // Clean-up after the modal closes for any reason
+    return () => {
+      setIsDecommissioning(false);
+    };
+  }, []);
+
+  return (
+    <Modal title={t('Decommission device?')} isOpen onClose={onClose} variant="small" titleIconVariant="warning">
+      <Formik<DecommissionFormValues>
+        initialValues={{
+          doFactoryReset: false,
+        }}
+        onSubmit={({ doFactoryReset }) => {
+          const doSubmit = async () => {
+            setError(undefined);
+            try {
+              setIsDecommissioning(true);
+              await onDecommission(
+                doFactoryReset
+                  ? DeviceDecommissionTargetType.DeviceDecommissionTargetTypeFactoryReset
+                  : DeviceDecommissionTargetType.DeviceDecommissionTargetTypeUnenroll,
+              );
+              onClose();
+            } catch (err) {
+              setError(getErrorMessage(err));
+              setIsDecommissioning(false);
+            }
+          };
+          void doSubmit();
+        }}
+      >
+        {({ submitForm }) => {
+          return (
+            <Stack hasGutter>
+              <StackItem>{t('Are you sure you want to proceed with decommissioning this device?')}</StackItem>
+              <StackItem>
+                {t(
+                  'Decommissioned devices will not be able to communicate with the edge management system anymore, and they will be removed from any fleet they were associated to. Once decommissioned, the device cannot be managed further.',
+                )}
+              </StackItem>
+              {error && (
+                <StackItem>
+                  <Alert isInline variant="danger" title={t('An error occurred')}>
+                    {error}
+                  </Alert>
+                </StackItem>
+              )}
+              <StackItem>
+                <Button
+                  key="confirm"
+                  variant="danger"
+                  isDisabled={isDecommissioning}
+                  isLoading={isDecommissioning}
+                  onClick={submitForm}
+                >
+                  {t('Decommission device')}
+                </Button>
+                <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDecommissioning}>
+                  {t('Cancel')}
+                </Button>
+              </StackItem>
+            </Stack>
+          );
+        }}
+      </Formik>
+    </Modal>
+  );
+};
+
+export default DecommissionModal;

package/src/components/modals/EditLabelsModal/EditLabelsForm.tsx

@@ -15,6 +15,7 @@ import { fromAPILabel } from '../../../utils/labels';
 import { validLabelsSchema } from '../../form/validations';
 import { getErrorMessage } from '../../../utils/error';
 import { getLabelPatches } from '../../../utils/patch';
+import LabelsView from '../../common/LabelsView';
 
 type EditLabelsFormValues = {
   labels: FlightCtlLabel[];
@@ -23,7 +24,6 @@ type EditLabelsFormValues = {
 type EditLabelsFormContentProps = {
   isSubmitting: FormikProps<EditLabelsFormValues>['isSubmitting'];
   submitForm: (values: EditLabelsFormValues) => Promise<string>;
-  canEdit: boolean;
 };
 
 const getValidationSchema = (t: TFunction) => {
@@ -34,7 +34,7 @@ const getValidationSchema = (t: TFunction) => {
 
 const delayResponse = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-const EditLabelsFormContent = ({ isSubmitting, submitForm, canEdit }: EditLabelsFormContentProps) => {
+const EditLabelsFormContent = ({ isSubmitting, submitForm }: EditLabelsFormContentProps) => {
   const { t } = useTranslation();
   const [submitError, setSubmitError] = React.useState<string>();
 
@@ -56,7 +56,6 @@ const EditLabelsFormContent = ({ isSubmitting, submitForm, canEdit }: EditLabels
         addButtonText={isSubmitting ? t('Saving...') : undefined}
         isLoading={isSubmitting}
         onChangeCallback={debouncedSubmit}
-        canEdit={canEdit}
       />
       {submitError && <Alert isInline title={submitError} variant="danger" />}
     </FlightCtlForm>
@@ -66,10 +65,14 @@ const EditLabelsFormContent = ({ isSubmitting, submitForm, canEdit }: EditLabels
 type EditLabelsFormProps = {
   device: Device;
   onDeviceUpdate: () => void;
-  canEdit: boolean;
 };
 
-const EditLabelsForm = ({ device, onDeviceUpdate, canEdit }: EditLabelsFormProps) => {
+export const ViewLabels = ({ device }: { device: Device }) => {
+  const currentLabels = device.metadata.labels || {};
+  return <LabelsView prefix="read-only-labels" labels={currentLabels} />;
+};
+
+const EditLabelsForm = ({ device, onDeviceUpdate }: EditLabelsFormProps) => {
   const { t } = useTranslation();
   const { patch } = useFetch();
 
@@ -96,9 +99,7 @@ const EditLabelsForm = ({ device, onDeviceUpdate, canEdit }: EditLabelsFormProps
       }}
       validationSchema={getValidationSchema(t)}
     >
-      {({ isSubmitting, submitForm }) => (
-        <EditLabelsFormContent canEdit={canEdit} isSubmitting={isSubmitting} submitForm={submitForm} />
-      )}
+      {({ isSubmitting, submitForm }) => <EditLabelsFormContent isSubmitting={isSubmitting} submitForm={submitForm} />}
     </Formik>
   );
 };

package/src/components/modals/massModals/MassDecommissionDeviceModal/MassDecommissionDeviceModal.tsx

@@ -0,0 +1,130 @@
+import * as React from 'react';
+import { Alert, Button, Modal, Progress, ProgressMeasureLocation, Stack, StackItem } from '@patternfly/react-core';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+
+import { Device, DeviceDecommission, DeviceDecommissionTargetType } from '@flightctl/types';
+
+import { getErrorMessage } from '../../../../utils/error';
+import { useFetch } from '../../../../hooks/useFetch';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { isPromiseRejected } from '../../../../types/typeUtils';
+import ResourceLink from '../../../common/ResourceLink';
+
+type MassDecommissionDeviceModalProps = {
+  devices: Array<Device>;
+  onClose: VoidFunction;
+  onSuccess: VoidFunction;
+};
+
+const MassDecommissionDeviceModal = ({ onClose, devices, onSuccess }: MassDecommissionDeviceModalProps) => {
+  const { t } = useTranslation();
+  const [progress, setProgress] = React.useState(0);
+  const [totalProgress, setTotalProgress] = React.useState(0);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [errors, setErrors] = React.useState<string[]>();
+  const { put } = useFetch();
+
+  const decommissionDevices = async () => {
+    setProgress(0);
+    setIsSubmitting(true);
+    const promises = devices.map(async (dev) => {
+      await put<DeviceDecommission>(`devices/${dev.metadata.name}/decommission`, {
+        target: DeviceDecommissionTargetType.DeviceDecommissionTargetTypeUnenroll,
+      });
+      setProgress((p) => p + 1);
+    });
+    setTotalProgress(promises.length);
+    const results = await Promise.allSettled(promises);
+    setIsSubmitting(false);
+
+    const rejectedResults = results.filter(isPromiseRejected);
+
+    if (rejectedResults.length) {
+      setErrors(rejectedResults.map((r) => getErrorMessage(r.reason)));
+    } else {
+      onSuccess();
+    }
+  };
+
+  return (
+    <Modal
+      title={t('Decommission devices ?')}
+      isOpen
+      onClose={onClose}
+      showClose={!isSubmitting}
+      titleIconVariant="warning"
+      variant="medium"
+      actions={[
+        <Button
+          key="decommission"
+          variant="danger"
+          onClick={decommissionDevices}
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          {t('Decommission')}
+        </Button>,
+        <Button key="cancel" variant="link" onClick={onClose} isDisabled={isSubmitting}>
+          {t('Cancel')}
+        </Button>,
+      ]}
+    >
+      <Stack hasGutter>
+        <StackItem>{t('Are you sure you want to proceed with decommissioning these devices ?')}</StackItem>
+        <StackItem>
+          {t(
+            'Decommissioned devices will not be able to communicate with the edge management system anymore, and they will be removed from any fleet they were associated to. Once decommissioned, the devices cannot be managed further.',
+          )}
+        </StackItem>
+        <StackItem>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>{t('Name')}</Th>
+                <Th>{t('Alias')}</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {devices.map((device) => {
+                return (
+                  <Tr key={device.metadata.name}>
+                    <Td dataLabel={t('Name')}>
+                      <ResourceLink id={device.metadata.name as string} />
+                    </Td>
+                    <Td dataLabel={t('Alias')}>{device.metadata.labels?.alias || '-'}</Td>
+                  </Tr>
+                );
+              })}
+            </Tbody>
+          </Table>
+        </StackItem>
+        {isSubmitting && (
+          <StackItem>
+            <Progress
+              value={progress}
+              min={0}
+              max={totalProgress}
+              title={t('Decommissioning...')}
+              measureLocation={ProgressMeasureLocation.top}
+              label={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
+              valueText={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
+            />
+          </StackItem>
+        )}
+        {errors?.length && (
+          <StackItem>
+            <Alert isInline variant="danger" title={t('An error occurred')}>
+              <Stack hasGutter>
+                {errors.map((e, index) => (
+                  <StackItem key={index}>{e}</StackItem>
+                ))}
+              </Stack>
+            </Alert>
+          </StackItem>
+        )}
+      </Stack>
+    </Modal>
+  );
+};
+
+export default MassDecommissionDeviceModal;

package/src/constants.ts

@@ -1,4 +1,4 @@
-const APP_TITLE = 'Device management service';
+const APP_TITLE = 'Edge Manager';
 const API_VERSION = 'v1alpha1';
 const PAGE_SIZE = 15;
 

package/src/hooks/useAppContext.tsx

@@ -59,7 +59,7 @@ export type AppContextProps = {
     Prompt?: PromptFC;
   };
   fetch: {
-    getWsEndpoint: () => { wsEndpoint: string; protocols: string[] };
+    getWsEndpoint: (deviceId: string) => { wsEndpoint: string; protocols: string[] };
     get: <R>(kind: string, abortSignal?: AbortSignal) => Promise<R>;
     post: <R>(kind: string, data: R, abortSignal?: AbortSignal) => Promise<R>;
     put: <R>(kind: string, data: R, abortSignal?: AbortSignal) => Promise<R>;