fix(docker/services): show cred spec configs [EE-5276] (#10082)

app/docker/helpers/configHelper.js

@@ -7,10 +7,8 @@ angular.module('portainer.docker').factory('ConfigHelper', [
           return {
             Id: config.ConfigID,
             Name: config.ConfigName,
-            FileName: config.File.Name,
+            ...(config.File ? { FileName: config.File.Name, Uid: config.File.UID, Gid: config.File.GID, Mode: config.File.Mode } : {}),
-            Uid: config.File.UID,
+            credSpec: !!config.Runtime,
-            Gid: config.File.GID,
-            Mode: config.File.Mode,
           };
         }
         return {};
@@ -20,12 +18,15 @@ angular.module('portainer.docker').factory('ConfigHelper', [
           return {
             ConfigID: config.Id,
             ConfigName: config.Name,
-            File: {
+            File: config.credSpec
-              Name: config.FileName || config.Name,
+              ? null
-              UID: config.Uid || '0',
+              : {
-              GID: config.Gid || '0',
+                  Name: config.FileName || config.Name,
-              Mode: config.Mode || 292,
+                  UID: config.Uid || '0',
-            },
+                  GID: config.Gid || '0',
+                  Mode: config.Mode || 292,
+                },
+            Runtime: config.credSpec ? {} : null,
           };
         }
         return {};

app/docker/views/services/edit/includes/configs.html

@@ -4,7 +4,7 @@
     <rd-widget-body classes="no-padding">
       <div class="form-inline" style="padding: 10px" authorization="DockerServiceUpdate">
         Add a config:
-        <select class="form-control !h-[30px] !text-[13px]" ng-options="config.Name for config in configs | orderBy: 'Name'" ng-model="newConfig">
+        <select class="form-control !h-[30px] !text-[13px]" ng-options="config.Name for config in filterConfigs(configs) | orderBy: 'Name'" ng-model="newConfig">
           <option selected disabled hidden value="">Select a config</option>
         </select>
         <a class="btn btn-default btn-sm" ng-click="addConfig(service, newConfig)"> <pr-icon icon="'plus'"></pr-icon> add config </a>
@@ -22,10 +22,10 @@
         </thead>
         <tbody>
           <tr ng-repeat="config in service.ServiceConfigs">
-            <td
-              ><a ui-sref="docker.configs.config({id: config.Id})">{{ config.Name }}</a></td
-            >
             <td>
+              <a ui-sref="docker.configs.config({id: config.Id})">{{ config.Name }}</a>
+            </td>
+            <td ng-if="!config.credSpec">
               <input
                 class="form-control"
                 ng-model="config.FileName"
@@ -33,11 +33,13 @@
                 placeholder="e.g. /path/in/container"
                 required
                 disable-authorization="DockerServiceUpdate"
+                ng-disabled="config.credSpec"
               />
             </td>
-            <td>{{ config.Uid }}</td>
+            <td ng-if="!config.credSpec">{{ config.Uid }}</td>
-            <td>{{ config.Gid }}</td>
+            <td ng-if="!config.credSpec">{{ config.Gid }}</td>
-            <td>{{ config.Mode }}</td>
+            <td ng-if="!config.credSpec">{{ config.Mode }}</td>
+            <td ng-if="config.credSpec" colspan="4">Credential Spec</td>
             <td authorization="DockerServiceUpdate">
               <button class="btn btn-dangerlight pull-right" type="button" ng-click="removeConfig(service, $index)" ng-disabled="isUpdating">
                 <pr-icon icon="'trash-2'" size="'md'"></pr-icon>

app/docker/views/services/edit/serviceController.js

@@ -91,6 +91,7 @@ angular.module('portainer.docker').controller('ServiceController', [
     endpoint
   ) {
     $scope.resourceType = ResourceControlType.Service;
+    $scope.WebhookExists = false;
 
     $scope.onUpdateResourceControlSuccess = function () {
       $state.reload();
@@ -462,6 +463,27 @@ angular.module('portainer.docker').controller('ServiceController', [
 
       config.TaskTemplate.ContainerSpec.Secrets = service.ServiceSecrets ? service.ServiceSecrets.map(SecretHelper.secretConfig) : [];
       config.TaskTemplate.ContainerSpec.Configs = service.ServiceConfigs ? service.ServiceConfigs.map(ConfigHelper.configConfig) : [];
+
+      // support removal and (future) editing of credential specs
+      const credSpec = service.ServiceConfigs.find((config) => config.credSpec);
+      const credSpecId = credSpec ? credSpec.Id : '';
+      const oldCredSpecId =
+        (config.TaskTemplate.ContainerSpec.Privileges &&
+          config.TaskTemplate.ContainerSpec.Privileges.CredentialSpec &&
+          config.TaskTemplate.ContainerSpec.Privileges.CredentialSpec.Config) ||
+        '';
+      if (oldCredSpecId && !credSpecId) {
+        delete config.TaskTemplate.ContainerSpec.Privileges.CredentialSpec;
+      } else if (oldCredSpecId !== credSpec) {
+        config.TaskTemplate.ContainerSpec.Privileges = {
+          ...(config.TaskTemplate.ContainerSpec.Privileges || {}),
+          CredentialSpec: {
+            ...((config.TaskTemplate.ContainerSpec.Privileges && config.TaskTemplate.ContainerSpec.Privileges.CredentialSpec) || {}),
+            Config: credSpec,
+          },
+        };
+      }
+
       config.TaskTemplate.ContainerSpec.Hosts = service.Hosts ? ServiceHelper.translateHostnameIPToHostsEntries(service.Hosts) : [];
 
       if (service.Mode === 'replicated') {
@@ -582,8 +604,7 @@ angular.module('portainer.docker').controller('ServiceController', [
     }
 
     $scope.updateService = function updateService(service) {
-      let config = {};
+      const config = buildChanges(service);
-      service, (config = buildChanges(service));
       ServiceService.update(service, config).then(
         function (data) {
           if (data.message && data.message.match(/^rpc error:/)) {
@@ -735,7 +756,6 @@ angular.module('portainer.docker').controller('ServiceController', [
           $scope.isAdmin = Authentication.isAdmin();
           $scope.availableNetworks = data.availableNetworks;
           $scope.swarmNetworks = _.filter($scope.availableNetworks, (network) => network.Scope === 'swarm');
-          $scope.WebhookExists = false;
 
           const serviceNetworks = _.uniqBy(_.concat($scope.service.Model.Spec.Networks || [], $scope.service.Model.Spec.TaskTemplate.Networks || []), 'Target');
           const networks = _.filter(
@@ -832,6 +852,11 @@ angular.module('portainer.docker').controller('ServiceController', [
       return networks.filter((network) => !network.Ingress && (network.Id === current.Id || $scope.service.Networks.every((serviceNetwork) => network.Id !== serviceNetwork.Id)));
     }
 
+    $scope.filterConfigs = filterConfigs;
+    function filterConfigs(configs) {
+      return configs.filter((config) => $scope.service.ServiceConfigs.every((serviceConfig) => config.Id !== serviceConfig.Id));
+    }
+
     function updateServiceArray(service, name) {
       previousServiceValues.push(name);
       service.hasChanges = true;