refactor(edge): use react poll freq field [EE-2614] (#6757)

app/edge/components/EdgeCheckInIntervalField.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react';
+
+import { FormControl } from '@/portainer/components/form-components/FormControl';
+import { Select } from '@/portainer/components/form-components/Input';
+import { useSettings } from '@/portainer/settings/settings.service';
+import { r2a } from '@/react-tools/react2angular';
+
+interface Props {
+  value: number;
+  onChange(value: number): void;
+  isDefaultHidden?: boolean;
+  label?: string;
+  tooltip?: string;
+}
+
+export const checkinIntervalOptions = [
+  { label: 'Use default interval', value: 0 },
+  {
+    label: '5 seconds',
+    value: 5,
+  },
+  {
+    label: '10 seconds',
+    value: 10,
+  },
+  {
+    label: '30 seconds',
+    value: 30,
+  },
+  { label: '5 minutes', value: 300 },
+  { label: '1 hour', value: 3600 },
+  { label: '1 day', value: 86400 },
+];
+
+export function EdgeCheckinIntervalField({
+  value,
+  onChange,
+  isDefaultHidden = false,
+  label = 'Poll frequency',
+  tooltip = 'Interval used by this Edge agent to check in with the Portainer instance. Affects Edge environment management and Edge compute features.',
+}: Props) {
+  const options = useOptions(isDefaultHidden);
+
+  return (
+    <FormControl inputId="edge_checkin" label={label} tooltip={tooltip}>
+      <Select
+        value={value}
+        onChange={(e) => {
+          onChange(parseInt(e.currentTarget.value, 10));
+        }}
+        options={options}
+      />
+    </FormControl>
+  );
+}
+
+export const EdgeCheckinIntervalFieldAngular = r2a(EdgeCheckinIntervalField, [
+  'value',
+  'onChange',
+]);
+
+function useOptions(isDefaultHidden: boolean) {
+  const [options, setOptions] = useState(checkinIntervalOptions);
+
+  const settingsQuery = useSettings(
+    (settings) => settings.EdgeAgentCheckinInterval
+  );
+
+  useEffect(() => {
+    if (isDefaultHidden) {
+      setOptions(checkinIntervalOptions.filter((option) => option.value !== 0));
+    }
+
+    if (!isDefaultHidden && typeof settingsQuery.data !== 'undefined') {
+      setOptions((options) => {
+        let label = `${settingsQuery.data} seconds`;
+        const option = options.find((o) => o.value === settingsQuery.data);
+        if (option) {
+          label = option.label;
+        }
+
+        return [
+          {
+            value: 0,
+            label: `Use default interval (${label})`,
+          },
+          ...options.slice(1),
+        ];
+      });
+    }
+  }, [settingsQuery.data, setOptions, isDefaultHidden]);
+
+  return options;
+}

app/edge/components/index.ts

@@ -1,7 +1,9 @@
 import angular from 'angular';
 
+import { EdgeCheckinIntervalFieldAngular } from './EdgeCheckInIntervalField';
 import { EdgeScriptFormAngular } from './EdgeScriptForm';
 
 export const componentsModule = angular
   .module('app.edge.components', [])
+  .component('edgeCheckinIntervalField', EdgeCheckinIntervalFieldAngular)
   .component('edgeScriptForm', EdgeScriptFormAngular).name;

app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.tsx

@@ -2,10 +2,11 @@ import { Formik, Form } from 'formik';
 
 import { Switch } from '@/portainer/components/form-components/SwitchField/Switch';
 import { FormControl } from '@/portainer/components/form-components/FormControl';
-import { Select } from '@/portainer/components/form-components/Input/Select';
 import { Widget, WidgetBody, WidgetTitle } from '@/portainer/components/widget';
 import { LoadingButton } from '@/portainer/components/Button/LoadingButton';
 import { TextTip } from '@/portainer/components/Tip/TextTip';
+import { EdgeCheckinIntervalField } from '@/edge/components/EdgeCheckInIntervalField';
+import { FormSectionTitle } from '@/portainer/components/form-components/FormSectionTitle';
 
 import { Settings } from '../types';
 
@@ -23,39 +24,18 @@ interface Props {
   onSubmit(values: FormValues): void;
 }
 
-const checkinIntervalOptions = [
-  {
-    value: 5,
-    label: '5 seconds',
-  },
-  {
-    value: 10,
-    label: '10 seconds',
-  },
-  {
-    value: 30,
-    label: '30 seconds',
-  },
-];
-
 export function EdgeComputeSettings({ settings, onSubmit }: Props) {
   if (!settings) {
     return null;
   }
 
-  const initialValues: FormValues = {
-    EdgeAgentCheckinInterval: settings.EdgeAgentCheckinInterval,
-    EnableEdgeComputeFeatures: settings.EnableEdgeComputeFeatures,
-    EnforceEdgeID: settings.EnforceEdgeID,
-  };
-
   return (
     <div className="row">
       <Widget>
         <WidgetTitle icon="fa-laptop" title="Edge Compute settings" />
         <WidgetBody>
           <Formik
-            initialValues={initialValues}
+            initialValues={settings}
             enableReinitialize
             validationSchema={() => validationSchema()}
             onSubmit={onSubmit}
@@ -76,26 +56,7 @@ export function EdgeComputeSettings({ settings, onSubmit }: Props) {
                 noValidate
               >
                 <FormControl
-                  inputId="edge_checkin"
+                  inputId="edge_enable"
-                  label="Edge agent default poll frequency"
-                  size="medium"
-                  tooltip="Interval used by default by each Edge agent to check in with the Portainer instance. Affects Edge environment management and Edge compute features."
-                  errors={errors.EdgeAgentCheckinInterval}
-                >
-                  <Select
-                    value={values.EdgeAgentCheckinInterval}
-                    onChange={(e) =>
-                      setFieldValue(
-                        'EdgeAgentCheckinInterval',
-                        parseInt(e.currentTarget.value, 10)
-                      )
-                    }
-                    options={checkinIntervalOptions}
-                  />
-                </FormControl>
-
-                <FormControl
-                  inputId="edge_checkin"
                   label="Enable Edge Compute features"
                   size="medium"
                   errors={errors.EnableEdgeComputeFeatures}
@@ -134,6 +95,18 @@ export function EdgeComputeSettings({ settings, onSubmit }: Props) {
                   />
                 </FormControl>
 
+                <FormSectionTitle>Check-in Intervals</FormSectionTitle>
+
+                <EdgeCheckinIntervalField
+                  value={values.EdgeAgentCheckinInterval}
+                  onChange={(value) =>
+                    setFieldValue('EdgeAgentCheckinInterval', value)
+                  }
+                  isDefaultHidden
+                  label="Edge agent default poll frequency"
+                  tooltip="Interval used by default by each Edge agent to check in with the Portainer instance. Affects Edge environment management and Edge compute features."
+                />
+
                 <div className="form-group">
                   <div className="col-sm-12">
                     <LoadingButton

app/portainer/settings/settings.service.ts

@@ -31,7 +31,6 @@ export interface Settings {
   AuthenticationMethod: AuthenticationMethod;
   SnapshotInterval: string;
   TemplatesURL: string;
-  EdgeAgentCheckinInterval: number;
   EnableEdgeComputeFeatures: boolean;
   UserSessionTimeout: string;
   KubeconfigExpiry: string;
@@ -42,6 +41,10 @@ export interface Settings {
   EnforceEdgeID: boolean;
   AgentSecret: string;
   EdgePortainerUrl: string;
+  EdgeAgentCheckinInterval: number;
+  EdgePingInterval: string;
+  EdgeSnapshotInterval: string;
+  EdgeCommandInterval: string;
 }
 
 export async function getSettings() {

app/portainer/views/endpoints/create/createEndpointController.js

@@ -23,6 +23,9 @@ angular
       Authentication,
       StateManager
     ) {
+      $scope.onChangeCheckInInterval = onChangeCheckInInterval;
+      $scope.setFieldValue = setFieldValue;
+
       $scope.state = {
         EnvironmentType: $state.params.isEdgeDevice ? 'edge_agent' : 'agent',
         PlatformType: 'linux',
@@ -30,24 +33,6 @@ angular
         deploymentTab: 0,
         allowCreateTag: Authentication.isAdmin(),
         isEdgeDevice: $state.params.isEdgeDevice,
-        availableEdgeAgentCheckinOptions: [
-          { key: 'Use default interval', value: 0 },
-          {
-            key: '5 seconds',
-            value: 5,
-          },
-          {
-            key: '10 seconds',
-            value: 10,
-          },
-          {
-            key: '30 seconds',
-            value: 30,
-          },
-          { key: '5 minutes', value: 300 },
-          { key: '1 hour', value: 3600 },
-          { key: '1 day', value: 86400 },
-        ],
       };
 
       const agentVersion = StateManager.getState().application.version;
@@ -71,7 +56,7 @@ angular
         AzureTenantId: '',
         AzureAuthenticationKey: '',
         TagIds: [],
-        CheckinInterval: $scope.state.availableEdgeAgentCheckinOptions[0].value,
+        CheckinInterval: 0,
       };
 
       $scope.copyAgentCommand = function () {
@@ -120,6 +105,19 @@ angular
         }
       }
 
+      function onChangeCheckInInterval(value) {
+        setFieldValue('EdgeCheckinInterval', value);
+      }
+
+      function setFieldValue(name, value) {
+        return $scope.$evalAsync(() => {
+          $scope.formValues = {
+            ...$scope.formValues,
+            [name]: value,
+          };
+        });
+      }
+
       $scope.addDockerEndpoint = function () {
         var name = $scope.formValues.Name;
         var URL = $filter('stripprotocol')($scope.formValues.URL);
@@ -320,7 +318,7 @@ angular
             $scope.availableTags = data.tags;
 
             const settings = data.settings;
-            $scope.state.availableEdgeAgentCheckinOptions[0].key += ` (${settings.EdgeAgentCheckinInterval} seconds)`;
+
             $scope.agentSecret = settings.AgentSecret;
           })
           .catch(function error(err) {

app/portainer/views/endpoints/create/createendpoint.html

@@ -315,24 +315,10 @@
               </div>
             </div>
             <!-- !portainer-instance-input -->
-            <div class="form-group">
+
-              <label for="edge_checkin" class="col-sm-2 control-label text-left">
+            <div>
-                Poll frequency
+              <div class="col-sm-12 form-section-title"> Check-in Intervals </div>
-                <portainer-tooltip
+              <edge-checkin-interval-field value="formValues.EdgeCheckinInterval" on-change="(onChangeCheckInInterval)"></edge-checkin-interval-field>
-                  position="bottom"
-                  message="Interval used by this Edge agent to check in with the Portainer instance. Affects Edge environment management and Edge compute features."
-                >
-                </portainer-tooltip>
-              </label>
-              <div class="col-sm-10">
-                <select
-                  id="edge_checkin"
-                  class="form-control"
-                  ng-model="formValues.CheckinInterval"
-                  ng-options="+(opt.value) as opt.key for opt in state.availableEdgeAgentCheckinOptions"
-                  data-cy="endpointCreate-pollFrequencySelect"
-                ></select>
-              </div>
             </div>
           </div>
           <!-- endpoint-public-url-input -->

app/portainer/views/endpoints/edit/endpoint.html

@@ -137,23 +137,12 @@
               <input type="text" class="form-control" id="endpoint_public_url" ng-model="endpoint.PublicURL" placeholder="e.g. 10.0.0.10 or mydocker.mydomain.com" />
             </div>
           </div>
-          <div class="form-group" ng-if="state.edgeEndpoint">
+
-            <label for="edge_checkin" class="col-sm-2 control-label text-left">
+          <div ng-if="endpoint && state.edgeEndpoint">
-              Poll frequency
+            <div class="col-sm-12 form-section-title"> Check-in Intervals </div>
-              <portainer-tooltip
+            <edge-checkin-interval-field value="endpoint.EdgeCheckinInterval" on-change="(onChangeCheckInInterval)"></edge-checkin-interval-field>
-                position="bottom"
-                message="Interval used by this Edge agent to check in with the Portainer instance. Affects Edge environment management and Edge compute features."
-              ></portainer-tooltip>
-            </label>
-            <div class="col-sm-10">
-              <select
-                id="edge_checkin"
-                class="form-control"
-                ng-model="endpoint.EdgeCheckinInterval"
-                ng-options="+(opt.value) as opt.key for opt in state.availableEdgeAgentCheckinOptions"
-              ></select>
-            </div>
           </div>
+
           <!-- !endpoint-public-url-input -->
           <azure-endpoint-config
             ng-if="state.azureEndpoint"

app/portainer/views/endpoints/edit/endpointController.js

@@ -24,6 +24,9 @@ function EndpointController(
   SettingsService,
   ModalService
 ) {
+  $scope.onChangeCheckInInterval = onChangeCheckInInterval;
+  $scope.setFieldValue = setFieldValue;
+
   $scope.state = {
     uploadInProgress: false,
     actionInProgress: false,
@@ -33,24 +36,6 @@ function EndpointController(
     edgeEndpoint: false,
     edgeAssociated: false,
     allowCreate: Authentication.isAdmin(),
-    availableEdgeAgentCheckinOptions: [
-      { key: 'Use default interval', value: 0 },
-      {
-        key: '5 seconds',
-        value: 5,
-      },
-      {
-        key: '10 seconds',
-        value: 10,
-      },
-      {
-        key: '30 seconds',
-        value: 30,
-      },
-      { key: '5 minutes', value: 300 },
-      { key: '1 hour', value: 3600 },
-      { key: '1 day', value: 86400 },
-    ],
     allowSelfSignedCerts: true,
     showAMTInfo: false,
   };
@@ -107,6 +92,19 @@ function EndpointController(
     }
   }
 
+  function onChangeCheckInInterval(value) {
+    setFieldValue('EdgeCheckinInterval', value);
+  }
+
+  function setFieldValue(name, value) {
+    return $scope.$evalAsync(() => {
+      $scope.endpoint = {
+        ...$scope.endpoint,
+        [name]: value,
+      };
+    });
+  }
+
   $scope.updateEndpoint = function () {
     var endpoint = $scope.endpoint;
     var securityData = $scope.formValues.SecurityFormData;
@@ -120,7 +118,6 @@ function EndpointController(
       PublicURL: endpoint.PublicURL,
       GroupID: endpoint.GroupId,
       TagIds: endpoint.TagIds,
-      EdgeCheckinInterval: endpoint.EdgeCheckinInterval,
       TLS: TLS,
       TLSSkipVerify: TLSSkipVerify,
       TLSSkipClientVerify: TLSSkipClientVerify,
@@ -130,6 +127,7 @@ function EndpointController(
       AzureApplicationID: endpoint.AzureCredentials.ApplicationID,
       AzureTenantID: endpoint.AzureCredentials.TenantID,
       AzureAuthenticationKey: endpoint.AzureCredentials.AuthenticationKey,
+      EdgeCheckinInterval: endpoint.EdgeCheckinInterval,
     };
 
     if (
@@ -228,8 +226,6 @@ function EndpointController(
 
           $scope.state.edgeAssociated = !!endpoint.EdgeID;
           endpoint.EdgeID = endpoint.EdgeID || uuidv4();
-
-          $scope.state.availableEdgeAgentCheckinOptions[0].key += ` (${settings.EdgeAgentCheckinInterval} seconds)`;
         }
 
         $scope.endpoint = endpoint;