@flightctl/ui-components 1.0.2 → 1.1.0-rc1

package/src/components/Device/EditDeviceWizard/deviceSpecUtils.ts

@@ -1,3 +1,4 @@
+import yaml from 'js-yaml';
 import {
   AppType,
   // eslint-disable-next-line no-restricted-imports
@@ -27,17 +28,21 @@ import {
   ConfigSourceProvider,
   ConfigType,
   GitConfigTemplate,
+  HelmImageAppForm,
   HttpConfigTemplate,
   InlineConfigTemplate,
   KubeSecretTemplate,
   PortMapping,
   QuadletImageAppForm,
   QuadletInlineAppForm,
+  RUN_AS_DEFAULT_USER,
+  SingleContainerAppForm,
   SpecConfigTemplate,
   SystemdUnitFormValue,
   isComposeImageAppForm,
   isGitConfigTemplate,
   isGitProviderSpec,
+  isHelmImageAppForm,
   isHttpConfigTemplate,
   isHttpProviderSpec,
   isImageAppProvider,
@@ -45,9 +50,10 @@ import {
   isKubeProviderSpec,
   isKubeSecretTemplate,
   isQuadletImageAppForm,
+  isQuadletInlineAppForm,
   isSingleContainerAppForm,
 } from '../../../types/deviceSpec';
-import { ApplicationProviderSpecFixed, InlineApplicationFileFixed } from '../../../types/extraTypes';
+import { InlineApplicationFileFixed } from '../../../types/extraTypes';
 
 const DEFAULT_INLINE_FILE_MODE = 420; // In Octal: 0644
 const DEFAULT_INLINE_FILE_USER = 'root';
@@ -215,6 +221,32 @@ export const getDeviceSpecConfigPatches = (
 };
 
 export const toAPIApplication = (app: AppForm): ApplicationProviderSpec => {
+  if (isHelmImageAppForm(app)) {
+    const data: ImageApplicationProviderSpec & ApplicationProviderSpec = {
+      name: app.name,
+      image: app.image,
+      appType: app.appType,
+    };
+    if (app.namespace) {
+      data.namespace = app.namespace;
+    }
+    if (app.valuesYaml) {
+      try {
+        const values = yaml.load(app.valuesYaml) as Record<string, unknown>;
+        if (values && Object.keys(values).length > 0) {
+          data.values = values;
+        }
+      } catch (error) {
+        throw new Error('Values content is not valid YAML.');
+      }
+    }
+    const fileNames = app.valuesFiles.filter((file) => file && file.trim() !== '');
+    if (fileNames.length > 0) {
+      data.valuesFiles = fileNames;
+    }
+    return data;
+  }
+
   const envVars = app.variables.reduce((acc, variable) => {
     acc[variable.name] = variable.value;
     return acc;
@@ -265,7 +297,8 @@ export const toAPIApplication = (app: AppForm): ApplicationProviderSpec => {
         limits: appLimits,
       };
     }
-    return data as ApplicationProviderSpec;
+    data.runAs = app.runAs || RUN_AS_DEFAULT_USER;
+    return data;
   }
 
   if (isQuadletImageAppForm(app) || isComposeImageAppForm(app)) {
@@ -278,23 +311,24 @@ export const toAPIApplication = (app: AppForm): ApplicationProviderSpec => {
     if (app.name) {
       data.name = app.name;
     }
+    if (isQuadletImageAppForm(app) && app.runAs) {
+      data.runAs = app.runAs;
+    }
     return data;
   }
 
   // Inline applications (Quadlet or Compose)
-  return {
+  const inlineData: ApplicationProviderSpec = {
     name: app.name,
     appType: app.appType,
-    inline: app.files.map(
-      (file): InlineApplicationFileFixed => ({
-        path: file.path,
-        content: file.content || '',
-        contentEncoding: file.base64 ? EncodingType.EncodingBase64 : EncodingType.EncodingPlain,
-      }),
-    ),
+    inline: toAPIFiles(app.files),
     envVars,
     volumes,
   };
+  if (isQuadletInlineAppForm(app) && app.runAs) {
+    inlineData.runAs = app.runAs;
+  }
+  return inlineData;
 };
 
 const hasInlineApplicationChanged = (
@@ -316,6 +350,15 @@ const hasInlineApplicationChanged = (
   if (filesChanged) {
     return true;
   }
+
+  // Check runAs for Quadlet inline apps
+  if (isQuadletInlineAppForm(updatedApp)) {
+    const currentAppWithRunAs = currentApp as InlineApplicationProviderSpec & { runAs?: string };
+    if ((currentAppWithRunAs.runAs || RUN_AS_DEFAULT_USER) !== (updatedApp.runAs || RUN_AS_DEFAULT_USER)) {
+      return true;
+    }
+  }
+
   return !areVolumesEqual(currentApp.volumes || [], updatedApp.volumes || []);
 };
 
@@ -417,6 +460,9 @@ const hasSingleContainerAppChanged = (currentApp: ApplicationProviderSpec, updat
     return true;
   }
 
+  if ((imageApp.runAs || RUN_AS_DEFAULT_USER) !== (updatedApp.runAs || RUN_AS_DEFAULT_USER)) {
+    return true;
+  }
   return !areVolumesEqual(imageApp.volumes || [], updatedApp.volumes || []);
 };
 
@@ -433,15 +479,38 @@ const hasApplicationChanged = (currentApp: ApplicationProviderSpec, updatedApp:
     return true;
   }
 
-  if (!areEnvVariablesEqual(currentApp.envVars, updatedApp.variables)) {
-    return true;
-  }
-
   // The app is a single container application
   if (isSingleContainerAppForm(updatedApp)) {
     return hasSingleContainerAppChanged(currentApp, updatedApp);
   }
 
+  // The app is a Helm application
+  if (isHelmImageAppForm(updatedApp)) {
+    const imageApp = currentApp as ImageApplicationProviderSpec;
+    if (imageApp.image !== updatedApp.image || imageApp.namespace !== updatedApp.namespace) {
+      return true;
+    }
+
+    // Compare valuesFiles arrays
+    const currentValuesFiles = (imageApp.valuesFiles || []).filter((file) => file !== '');
+    const updatedValuesFiles = updatedApp.valuesFiles.filter((file) => file !== '');
+    if (currentValuesFiles.length !== updatedValuesFiles.length) {
+      return true;
+    }
+    if (!currentValuesFiles.every((file, index) => file === updatedValuesFiles[index])) {
+      return true;
+    }
+    const updatedValues = yaml.load(updatedApp.valuesYaml || '  ') as Record<string, unknown>;
+    if (JSON.stringify(imageApp.values || {}) !== JSON.stringify(updatedValues)) {
+      return true;
+    }
+    return false;
+  }
+
+  if (!areEnvVariablesEqual(currentApp.envVars, updatedApp.variables)) {
+    return true;
+  }
+
   // The app is an image application (Quadlet/Compose image apps)
   if (isCurrentImageApp) {
     const imageApp = currentApp as ImageApplicationProviderSpec;
@@ -450,6 +519,13 @@ const hasApplicationChanged = (currentApp: ApplicationProviderSpec, updatedApp:
       return true;
     }
 
+    // Check runAs for Quadlet image apps
+    if (isQuadletImageAppForm(updatedApp)) {
+      if ((currentApp.runAs || RUN_AS_DEFAULT_USER) !== (updatedApp.runAs || RUN_AS_DEFAULT_USER)) {
+        return true;
+      }
+    }
+
     return !areVolumesEqual(imageApp.volumes || [], updatedApp.volumes || []);
   }
 
@@ -559,8 +635,24 @@ export const getApiConfig = (ct: SpecConfigTemplate): ConfigSourceProvider => {
   };
 };
 
-const getAppFormVariables = (app: ApplicationProviderSpecFixed) =>
-  Object.entries(app.envVars || {}).map(([varName, varValue]) => ({ name: varName, value: varValue }));
+const getAppFormVariables = (envVars: Record<string, string> | undefined) =>
+  Object.entries(envVars || {}).map(([varName, varValue]) => ({ name: varName, value: varValue }));
+
+const toFormFiles = (files: InlineApplicationFileFixed[]) => {
+  return files.map((file) => ({
+    path: file.path || '',
+    content: file.content || '',
+    base64: file.contentEncoding === EncodingType.EncodingBase64,
+  }));
+};
+
+const toAPIFiles = (files: ComposeInlineAppForm['files']) => {
+  return files.map((file) => ({
+    path: file.path,
+    content: file.content || '',
+    contentEncoding: file.base64 ? EncodingType.EncodingBase64 : EncodingType.EncodingPlain,
+  }));
+};
 
 const convertVolumesToForm = (volumes?: ApplicationVolume[]) => {
   if (!volumes) return [];
@@ -579,60 +671,144 @@ const convertVolumesToForm = (volumes?: ApplicationVolume[]) => {
   });
 };
 
+const createContainerApp = (
+  containerApp: (ApplicationProviderSpec & ImageApplicationProviderSpec) | undefined,
+): SingleContainerAppForm => {
+  const ports =
+    containerApp?.ports?.map((portString) => {
+      const [hostPort, containerPort] = portString.split(':');
+      return { hostPort: hostPort || '', containerPort: containerPort || '' };
+    }) || [];
+
+  const limits = containerApp?.resources?.limits;
+  return {
+    appType: AppType.AppTypeContainer,
+    specType: AppSpecType.OCI_IMAGE,
+    name: containerApp?.name || '',
+    image: containerApp?.image || '',
+    variables: getAppFormVariables(containerApp?.envVars),
+    volumes: convertVolumesToForm(containerApp?.volumes),
+    ports,
+    limits: limits
+      ? {
+          cpu: limits.cpu || '',
+          memory: limits.memory || '',
+        }
+      : undefined,
+    runAs: containerApp?.runAs || RUN_AS_DEFAULT_USER,
+  };
+};
+
+const createHelmApp = (
+  helmApp: (ApplicationProviderSpec & ImageApplicationProviderSpec) | undefined,
+): HelmImageAppForm => {
+  const values = helmApp?.values || {};
+  return {
+    appType: AppType.AppTypeHelm,
+    specType: AppSpecType.OCI_IMAGE,
+    name: helmApp?.name || '',
+    image: helmApp?.image || '',
+    namespace: helmApp?.namespace,
+    valuesYaml: Object.keys(values).length > 0 ? yaml.dump(values) : '',
+    valuesFiles: helmApp?.valuesFiles || [''],
+  };
+};
+
+const createQuadletImageApp = (
+  quadletApp: (ApplicationProviderSpec & ImageApplicationProviderSpec) | undefined,
+): QuadletImageAppForm => {
+  return {
+    appType: AppType.AppTypeQuadlet,
+    specType: AppSpecType.OCI_IMAGE,
+    name: quadletApp?.name || '',
+    image: quadletApp?.image || '',
+    variables: getAppFormVariables(quadletApp?.envVars),
+    volumes: convertVolumesToForm(quadletApp?.volumes),
+    runAs: quadletApp?.runAs || RUN_AS_DEFAULT_USER,
+  };
+};
+
+const createQuadletInlineApp = (
+  quadletApp: (ApplicationProviderSpec & InlineApplicationProviderSpec) | undefined,
+): QuadletInlineAppForm => {
+  return {
+    appType: AppType.AppTypeQuadlet,
+    specType: AppSpecType.INLINE,
+    name: quadletApp?.name || '',
+    files: toFormFiles(quadletApp?.inline || []),
+    variables: getAppFormVariables(quadletApp?.envVars),
+    volumes: convertVolumesToForm(quadletApp?.volumes),
+    runAs: quadletApp?.runAs || RUN_AS_DEFAULT_USER,
+  };
+};
+
+const createComposeImageApp = (
+  composeApp: (ApplicationProviderSpec & ImageApplicationProviderSpec) | undefined,
+): ComposeImageAppForm => {
+  return {
+    appType: AppType.AppTypeCompose,
+    specType: AppSpecType.OCI_IMAGE,
+    name: composeApp?.name || '',
+    image: composeApp?.image || '',
+    variables: getAppFormVariables(composeApp?.envVars),
+    volumes: convertVolumesToForm(composeApp?.volumes),
+  };
+};
+
+const createComposeInlineApp = (
+  composeApp: (ApplicationProviderSpec & InlineApplicationProviderSpec) | undefined,
+): ComposeInlineAppForm => {
+  return {
+    appType: AppType.AppTypeCompose,
+    specType: AppSpecType.INLINE,
+    name: composeApp?.name || '',
+    files: toFormFiles(composeApp?.inline || []),
+    variables: getAppFormVariables(composeApp?.envVars),
+    volumes: convertVolumesToForm(composeApp?.volumes),
+  };
+};
+
+export const createInitialAppForm = (appType: AppType, specType: AppSpecType, name: string = ''): AppForm => {
+  let app: AppForm;
+  switch (appType) {
+    case AppType.AppTypeContainer:
+      app = createContainerApp(undefined);
+      break;
+    case AppType.AppTypeHelm:
+      app = createHelmApp(undefined);
+      break;
+    case AppType.AppTypeQuadlet:
+      app = specType === AppSpecType.OCI_IMAGE ? createQuadletImageApp(undefined) : createQuadletInlineApp(undefined);
+      break;
+    case AppType.AppTypeCompose:
+      app = specType === AppSpecType.OCI_IMAGE ? createComposeImageApp(undefined) : createComposeInlineApp(undefined);
+      break;
+  }
+  app.name = name;
+  return app;
+};
+
 export const getApplicationValues = (deviceSpec?: DeviceSpec): AppForm[] => {
   const apps = deviceSpec?.applications || [];
   return apps.map((app) => {
     if (!app.appType) {
       throw new Error('Application appType is required');
     }
-    // Single container application
-    if (app.appType === AppType.AppTypeContainer && isImageAppProvider(app)) {
-      const imageApp = app as ImageApplicationProviderSpec;
-      const ports =
-        imageApp.ports?.map((portString) => {
-          const [hostPort, containerPort] = portString.split(':');
-          return { hostPort: hostPort || '', containerPort: containerPort || '' };
-        }) || [];
 
-      return {
-        specType: AppSpecType.OCI_IMAGE,
-        appType: AppType.AppTypeContainer,
-        name: app.name || '',
-        image: app.image,
-        variables: getAppFormVariables(app),
-        volumes: convertVolumesToForm(app.volumes),
-        ports,
-        limits: imageApp.resources?.limits
-          ? {
-              cpu: imageApp.resources.limits.cpu || '',
-              memory: imageApp.resources.limits.memory || '',
-            }
-          : undefined,
-      };
+    switch (app.appType) {
+      case AppType.AppTypeContainer:
+        return createContainerApp(app as ApplicationProviderSpec & ImageApplicationProviderSpec);
+      case AppType.AppTypeHelm:
+        return createHelmApp(app as ApplicationProviderSpec & ImageApplicationProviderSpec);
+      case AppType.AppTypeQuadlet:
+        return isImageAppProvider(app)
+          ? createQuadletImageApp(app)
+          : createQuadletInlineApp(app as ApplicationProviderSpec & InlineApplicationProviderSpec & { runAs?: string });
+      case AppType.AppTypeCompose:
+        return isImageAppProvider(app)
+          ? createComposeImageApp(app)
+          : createComposeInlineApp(app as ApplicationProviderSpec & InlineApplicationProviderSpec);
     }
-
-    // Compose or Quadlet image application
-    if (isImageAppProvider(app)) {
-      return {
-        specType: AppSpecType.OCI_IMAGE,
-        name: app.name || '',
-        image: app.image,
-        appType: app.appType,
-        variables: getAppFormVariables(app),
-        volumes: convertVolumesToForm(app.volumes),
-      };
-    }
-
-    // Compose or Quadlet inline application
-    const inlineApp = app as InlineApplicationProviderSpec;
-    return {
-      specType: AppSpecType.INLINE,
-      appType: app.appType,
-      name: app.name || '',
-      files: inlineApp.inline,
-      variables: getAppFormVariables(app),
-      volumes: convertVolumesToForm(app.volumes),
-    } as QuadletInlineAppForm | ComposeInlineAppForm;
   });
 };
 

package/src/components/Device/EditDeviceWizard/steps/ApplicationContainerForm.css

@@ -3,3 +3,15 @@
   border: 1px solid gray !important;
   margin-top: 1rem;
 }
+
+/*
+The tooltip text has the same color as the background, making the text unreadable in light and dark modes.
+ Due to Patternfly targets the tooltip content ([class*='pf-v6-c-content']), just using the CSS variables does not work.
+ */
+.fctl-application-helm-form__tooltip [class*='pf-v6-c-content'] {
+  color: var(--pf-t--global--text--color--300, white);
+}
+
+.pf-v6-theme-dark .fctl-application-helm-form__tooltip [class*='pf-v6-c-content'] {
+  color: var(--pf-t--global--text--color--100, gray);
+}