refactor(containers): migrate restart policy tab to react [EE-5213] (#10347)

app/docker/react/components/containers.ts

@@ -34,6 +34,10 @@ import {
   CapabilitiesTab,
   capabilitiesTabUtils,
 } from '@/react/docker/containers/CreateView/CapabilitiesTab';
+import {
+  RestartPolicyTab,
+  restartPolicyTabUtils,
+} from '@/react/docker/containers/CreateView/RestartPolicyTab';
 
 const ngModule = angular
   .module('portainer.docker.react.components.containers', [])
@@ -103,3 +107,10 @@ withFormValidation(
   [],
   capabilitiesTabUtils.validation
 );
+withFormValidation(
+  ngModule,
+  RestartPolicyTab,
+  'dockerCreateContainerRestartPolicyTab',
+  [],
+  restartPolicyTabUtils.validation
+);

app/docker/views/containers/create/createContainerController.js

@@ -17,6 +17,7 @@ import './createcontainer.css';
 import { envVarsTabUtils } from '@/react/docker/containers/CreateView/EnvVarsTab';
 import { getContainers } from '@/react/docker/containers/queries/containers';
 import { resourcesTabUtils } from '@/react/docker/containers/CreateView/ResourcesTab';
+import { restartPolicyTabUtils } from '@/react/docker/containers/CreateView/RestartPolicyTab';
 
 angular.module('portainer.docker').controller('CreateContainerController', [
   '$q',
@@ -86,12 +87,14 @@ angular.module('portainer.docker').controller('CreateContainerController', [
       AccessControlData: new AccessControlFormData(),
       NodeName: null,
       RegistryModel: new PorImageRegistryModel(),
+
       commands: commandsTabUtils.getDefaultViewModel(),
       envVars: envVarsTabUtils.getDefaultViewModel(),
       volumes: volumesTabUtils.getDefaultViewModel(),
       network: networkTabUtils.getDefaultViewModel(),
       resources: resourcesTabUtils.getDefaultViewModel(),
       capabilities: capabilitiesTabUtils.getDefaultViewModel(),
+      restartPolicy: restartPolicyTabUtils.getDefaultViewModel(),
     };
 
     $scope.state = {
@@ -146,6 +149,12 @@ angular.module('portainer.docker').controller('CreateContainerController', [
       });
     };
 
+    $scope.onRestartPolicyChange = function (restartPolicy) {
+      return $scope.$evalAsync(() => {
+        $scope.formValues.restartPolicy = restartPolicy;
+      });
+    };
+
     function onAlwaysPullChange(checked) {
       return $scope.$evalAsync(() => {
         $scope.formValues.alwaysPull = checked;
@@ -315,6 +324,7 @@ angular.module('portainer.docker').controller('CreateContainerController', [
       config = networkTabUtils.toRequest(config, $scope.formValues.network, $scope.fromContainer.Id);
       config = resourcesTabUtils.toRequest(config, $scope.formValues.resources);
       config = capabilitiesTabUtils.toRequest(config, $scope.formValues.capabilities);
+      config = restartPolicyTabUtils.toRequest(config, $scope.formValues.restartPolicy);
 
       prepareImageConfig(config);
       preparePortBindings(config);
@@ -372,6 +382,8 @@ angular.module('portainer.docker').controller('CreateContainerController', [
           $scope.formValues.resources = resourcesTabUtils.toViewModel(d);
           $scope.formValues.capabilities = capabilitiesTabUtils.toViewModel(d);
 
+          $scope.formValues.restartPolicy = restartPolicyTabUtils.toViewModel(d);
+
           loadFromContainerPortBindings(d);
           loadFromContainerLabels(d);
           loadFromContainerImageConfig(d);

app/docker/views/containers/create/createcontainer.html

@@ -264,23 +264,11 @@
               ></docker-create-container-env-vars-tab>
             </div>
             <!-- !tab-env -->
-            <!-- tab-restart-policy -->
+
             <div class="tab-pane" id="restart-policy">
-              <form class="form-horizontal" style="margin-top: 15px">
+              <docker-create-container-restart-policy-tab values="formValues.restartPolicy" on-change="(onRestartPolicyChange)"></docker-create-container-restart-policy-tab>
-                <div class="form-group">
-                  <div class="col-sm-12">
-                    <label class="control-label text-left"> Restart policy </label>
-                    <div class="btn-group btn-group-sm" style="margin-left: 20px">
-                      <label class="btn btn-light" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'no'"> Never </label>
-                      <label class="btn btn-light" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'always'"> Always </label>
-                      <label class="btn btn-light" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'on-failure'"> On failure </label>
-                      <label class="btn btn-light" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'unless-stopped'"> Unless stopped </label>
-                    </div>
-                  </div>
-                </div>
-              </form>
             </div>
-            <!-- !tab-restart-policy -->
+
             <!-- tab-runtime-resources -->
             <div class="tab-pane" id="runtime-resources">
               <docker-create-container-resources-tab

app/react/docker/containers/CreateView/RestartPolicyTab/RestartPolicyTab.tsx

@@ -0,0 +1,27 @@
+import { ButtonSelector } from '@@/form-components/ButtonSelector/ButtonSelector';
+import { FormControl } from '@@/form-components/FormControl';
+
+import { RestartPolicy } from './types';
+
+export function RestartPolicyTab({
+  values,
+  onChange,
+}: {
+  values: RestartPolicy;
+  onChange: (values: RestartPolicy) => void;
+}) {
+  return (
+    <FormControl label="Restart Policy">
+      <ButtonSelector
+        options={[
+          { label: 'Never', value: RestartPolicy.No },
+          { label: 'Always', value: RestartPolicy.Always },
+          { label: 'On failure', value: RestartPolicy.OnFailure },
+          { label: 'Unless stopped', value: RestartPolicy.UnlessStopped },
+        ]}
+        value={values}
+        onChange={onChange}
+      />
+    </FormControl>
+  );
+}

app/react/docker/containers/CreateView/RestartPolicyTab/index.ts

@@ -0,0 +1,13 @@
+import { validation } from './validation';
+import { toViewModel, getDefaultViewModel } from './toViewModel';
+import { toRequest } from './toRequest';
+
+export { RestartPolicyTab } from './RestartPolicyTab';
+export { RestartPolicy } from './types';
+
+export const restartPolicyTabUtils = {
+  toViewModel,
+  toRequest,
+  validation,
+  getDefaultViewModel,
+};

app/react/docker/containers/CreateView/RestartPolicyTab/toRequest.ts

@@ -0,0 +1,19 @@
+import { CreateContainerRequest } from '../types';
+
+import { RestartPolicy } from './types';
+
+export function toRequest(
+  config: CreateContainerRequest,
+  value: RestartPolicy
+): CreateContainerRequest {
+  return {
+    ...config,
+    HostConfig: {
+      ...config.HostConfig,
+      RestartPolicy: {
+        ...config.HostConfig.RestartPolicy,
+        Name: value,
+      },
+    },
+  };
+}

app/react/docker/containers/CreateView/RestartPolicyTab/toViewModel.ts

@@ -0,0 +1,21 @@
+import { ContainerJSON } from '../../queries/container';
+
+import { RestartPolicy } from './types';
+
+export function toViewModel(config: ContainerJSON): RestartPolicy {
+  switch (config.HostConfig?.RestartPolicy?.Name) {
+    case 'always':
+      return RestartPolicy.Always;
+    case 'on-failure':
+      return RestartPolicy.OnFailure;
+    case 'unless-stopped':
+      return RestartPolicy.UnlessStopped;
+    case 'no':
+    default:
+      return RestartPolicy.No;
+  }
+}
+
+export function getDefaultViewModel(): RestartPolicy {
+  return RestartPolicy.No;
+}

app/react/docker/containers/CreateView/RestartPolicyTab/types.ts

@@ -0,0 +1,7 @@
+// Enum version of RestartPolicy
+export enum RestartPolicy {
+  No = 'no',
+  Always = 'always',
+  OnFailure = 'on-failure',
+  UnlessStopped = 'unless-stopped',
+}

app/react/docker/containers/CreateView/RestartPolicyTab/validation.ts

@@ -0,0 +1,9 @@
+import { mixed, SchemaOf } from 'yup';
+
+import { RestartPolicy } from './types';
+
+export function validation(): SchemaOf<RestartPolicy> {
+  return mixed<RestartPolicy>()
+    .oneOf(Object.values(RestartPolicy))
+    .default(RestartPolicy.No) as SchemaOf<RestartPolicy>;
+}