EDM-2925: Adding helm application type

libs/i18n/locales/en/translation.json

@@ -374,6 +374,24 @@
   "Set the maximum memory usage for your container using Podman format. You can specify a number with an optional unit: \"b\" (bytes), \"k\" (kibibytes), \"m\" (mebibytes), \"g\" (gibibytes). Examples: \"512\", \"512m\", \"1g\", \"2048k\". Ensure the limit fits within your device's available memory and accounts for other applications and system processes.": "Set the maximum memory usage for your container using Podman format. You can specify a number with an optional unit: \"b\" (bytes), \"k\" (kibibytes), \"m\" (mebibytes), \"g\" (gibibytes). Examples: \"512\", \"512m\", \"1g\", \"2048k\". Ensure the limit fits within your device's available memory and accounts for other applications and system processes.",
   "Enter numeric value with optional unit": "Enter numeric value with optional unit",
   "Provide a valid memory value (e.g., \"512\", \"512m\", \"2g\", \"1024k\").": "Provide a valid memory value (e.g., \"512\", \"512m\", \"2g\", \"1024k\").",
+  "OCI reference URL": "OCI reference URL",
+  "Reference to the OCI image or artifact containing the Helm chart.": "Reference to the OCI image or artifact containing the Helm chart.",
+  "Namespace": "Namespace",
+  "The namespace to install the Helm chart into.": "The namespace to install the Helm chart into.",
+  "Type namespace here": "Type namespace here",
+  "If you do not specify a namespace, the agent uses a namespace based on the application name.": "If you do not specify a namespace, the agent uses a namespace based on the application name.",
+  "Values file names": "Values file names",
+  "Reference values files that are defined within the Helm application package. Files are applied in the specified order, before user-provided values.": "Reference values files that are defined within the Helm application package. Files are applied in the specified order, before user-provided values.",
+  "Values file {{ number }}": "Values file {{ number }}",
+  "Enter a file path relative to the Helm chart root. For example, values.yaml": "Enter a file path relative to the Helm chart root. For example, values.yaml",
+  "Type values file name here": "Type values file name here",
+  "Delete values file": "Delete values file",
+  "Fill in the existing values files before you can add more values files.": "Fill in the existing values files before you can add more values files.",
+  "Add values file": "Add values file",
+  "Order of precedence: Files are applied in the ordered listed. If the same parameter is defined in multiple files, the value in the last file takes precedence and overrides previous values.": "Order of precedence: Files are applied in the ordered listed. If the same parameter is defined in multiple files, the value in the last file takes precedence and overrides previous values.",
+  "Inline values": "Inline values",
+  "Provide a valid YAML file": "Provide a valid YAML file",
+  "Enter configuration values in YAML format to be applied to the Helm chart. These values take precedence over those defined in the files listed above.": "Enter configuration values in YAML format to be applied to the Helm chart. These values take precedence over those defined in the files listed above.",
   "The application image. Learn how to create one": "The application image. Learn how to create one",
   "here": "here",
   "File {{ fileNum }}": "File {{ fileNum }}",
@@ -382,9 +400,6 @@
   "Content is base64 encoded": "Content is base64 encoded",
   "Delete file": "Delete file",
   "Add file": "Add file",
-  "Single Container application": "Single Container application",
-  "Quadlet application": "Quadlet application",
-  "Compose application": "Compose application",
   "Application {{ appNum }}": "Application {{ appNum }}",
   "Application type": "Application type",
   "Select an application type": "Select an application type",
@@ -394,7 +409,6 @@
   "Pull definitions from container registry (reusable, versioned).": "Pull definitions from container registry (reusable, versioned).",
   "Inline": "Inline",
   "Define application files directly in this interface (custom, one-off).": "Define application files directly in this interface (custom, one-off).",
-  "OCI reference URL": "OCI reference URL",
   "The unique identifier for this application.": "The unique identifier for this application.",
   "Variable {{ number }}": "Variable {{ number }}",
   "Delete variable": "Delete variable",
@@ -484,10 +498,6 @@
   "The device will download and apply updates as soon as they are available.": "The device will download and apply updates as soon as they are available.",
   "Device alias": "Device alias",
   "Device labels": "Device labels",
-  "Single Container": "Single Container",
-  "Quadlet": "Quadlet",
-  "Compose": "Compose",
-  "Unknown": "Unknown",
   "Unnamed": "Unnamed",
   "Device fleet": "Device fleet",
   "Edge Manager will not manage system image": "Edge Manager will not manage system image",
@@ -699,6 +709,7 @@
   "Add item": "Add item",
   "Resolved": "Resolved",
   "Name must be unique": "Name must be unique",
+  "Unknown": "Unknown",
   "Accessible": "Accessible",
   "Not accessible": "Not accessible",
   "Missing repository": "Missing repository",
@@ -755,6 +766,7 @@
   "Container port is required": "Container port is required",
   "CPU limit is invalid.": "CPU limit is invalid.",
   "Memory limit is invalid.": "Memory limit is invalid.",
+  "YAML content is invalid.": "YAML content is invalid.",
   "Name is required for quadlet applications.": "Name is required for quadlet applications.",
   "Name is required for compose applications.": "Name is required for compose applications.",
   "Application name must be unique.": "Application name must be unique.",
@@ -1161,6 +1173,14 @@
   "Product UUID": "Product UUID",
   "TPM vendor info": "TPM vendor info",
   "Websocket error occured": "Websocket error occured",
+  "Single Container application": "Single Container application",
+  "Quadlet application": "Quadlet application",
+  "Helm application": "Helm application",
+  "Compose application": "Compose application",
+  "Single Container": "Single Container",
+  "Quadlet": "Quadlet",
+  "Compose": "Compose",
+  "Helm": "Helm",
   "OpenShift": "OpenShift",
   "Kubernetes": "Kubernetes",
   "Ansible Automation Platform": "Ansible Automation Platform",

libs/types/models/AppType.ts

@@ -9,4 +9,5 @@ export enum AppType {
   AppTypeCompose = 'compose',
   AppTypeQuadlet = 'quadlet',
   AppTypeContainer = 'container',
+  AppTypeHelm = 'helm',
 }

libs/types/models/ImageApplicationProviderSpec.ts

@@ -10,6 +10,18 @@ export type ImageApplicationProviderSpec = (ApplicationVolumeProviderSpec & {
    * Reference to the OCI image or artifact for the application package.
    */
   image: string;
+  /**
+   * Kubernetes namespace for helm chart installation. Only applicable when appType is 'helm'.
+   */
+  namespace?: string;
+  /**
+   * Helm values to pass during install/upgrade. Supports arbitrarily nested YAML structures. Only applicable when appType is 'helm'.
+   */
+  values?: Record<string, any>;
+  /**
+   * List of values files from within the chart to use during install/upgrade. Files are relative to chart root and are applied in array order before user-provided values. Only applicable when appType is 'helm'.
+   */
+  valuesFiles?: Array<string>;
   /**
    * Port mappings.
    */

libs/ui-components/src/components/DetailsPage/Tables/ApplicationsTable.tsx

@@ -5,6 +5,7 @@ import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { DeviceApplicationStatus } from '@flightctl/types';
 import { useTranslation } from '../../../hooks/useTranslation';
 import ApplicationStatus from '../../Status/ApplicationStatus';
+import { getAppTypeLabel } from '../../../utils/apps';
 
 type ApplicationsTableProps = {
   appsStatus: DeviceApplicationStatus[];
@@ -39,7 +40,9 @@ const ApplicationsTable = ({ appsStatus }: ApplicationsTableProps) => {
               </Td>
               <Td dataLabel={t('Ready')}>{app.ready}</Td>
               <Td dataLabel={t('Restarts')}>{app.restarts}</Td>
-              <Td dataLabel={t('Type')}>{app.appType ? <Label variant="outline">{app.appType}</Label> : '-'}</Td>
+              <Td dataLabel={t('Type')}>
+                {app.appType ? <Label variant="outline">{getAppTypeLabel(app.appType, t)}</Label> : '-'}
+              </Td>
               <Td dataLabel={t('Embedded')}>{app.embedded ? t('Yes') : t('No')}</Td>
             </Tr>
           );

libs/ui-components/src/components/Device/EditDeviceWizard/deviceSpecUtils.ts

@@ -1,3 +1,4 @@
+import yaml from 'js-yaml';
 import {
   AppType,
   // eslint-disable-next-line no-restricted-imports
@@ -38,6 +39,7 @@ import {
   isComposeImageAppForm,
   isGitConfigTemplate,
   isGitProviderSpec,
+  isHelmImageAppForm,
   isHttpConfigTemplate,
   isHttpProviderSpec,
   isImageAppProvider,
@@ -215,6 +217,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 +293,7 @@ export const toAPIApplication = (app: AppForm): ApplicationProviderSpec => {
         limits: appLimits,
       };
     }
-    return data as ApplicationProviderSpec;
+    return data;
   }
 
   if (isQuadletImageAppForm(app) || isComposeImageAppForm(app)) {
@@ -433,15 +461,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;
@@ -595,8 +646,8 @@ export const getApplicationValues = (deviceSpec?: DeviceSpec): AppForm[] => {
         }) || [];
 
       return {
-        specType: AppSpecType.OCI_IMAGE,
         appType: AppType.AppTypeContainer,
+        specType: AppSpecType.OCI_IMAGE,
         name: app.name || '',
         image: app.image,
         variables: getAppFormVariables(app),
@@ -611,23 +662,36 @@ export const getApplicationValues = (deviceSpec?: DeviceSpec): AppForm[] => {
       };
     }
 
+    // Helm application
+    if (app.appType === AppType.AppTypeHelm && isImageAppProvider(app)) {
+      return {
+        appType: AppType.AppTypeHelm,
+        specType: AppSpecType.OCI_IMAGE,
+        name: app.name || '',
+        image: app.image,
+        namespace: app.namespace,
+        valuesYaml: app.values && Object.keys(app.values).length > 0 ? yaml.dump(app.values) : undefined,
+        valuesFiles: app.valuesFiles || [''],
+      };
+    }
+
     // Compose or Quadlet image application
     if (isImageAppProvider(app)) {
       return {
+        appType: app.appType,
         specType: AppSpecType.OCI_IMAGE,
         name: app.name || '',
         image: app.image,
-        appType: app.appType,
         variables: getAppFormVariables(app),
         volumes: convertVolumesToForm(app.volumes),
-      };
+      } as QuadletImageAppForm | ComposeImageAppForm;
     }
 
     // Compose or Quadlet inline application
     const inlineApp = app as InlineApplicationProviderSpec;
     return {
-      specType: AppSpecType.INLINE,
       appType: app.appType,
+      specType: AppSpecType.INLINE,
       name: app.name || '',
       files: inlineApp.inline,
       variables: getAppFormVariables(app),

libs/ui-components/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);
+}