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

2022-04-26 08:14:48 +03:00 · 2022-04-26 08:14:48 +03:00 · d08b498cb9
parent bebee78152
commit d08b498cb9
8 changed files with 160 additions and 119 deletions
--- a/app/edge/components/EdgeCheckInIntervalField.tsx
+++ b/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;
+}
--- a/app/edge/components/index.ts
+++ b/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;
--- a/app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.tsx
+++ b/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"
-                  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"
+                  inputId="edge_enable"
                  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
--- a/app/portainer/settings/settings.service.ts
+++ b/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() {
--- a/app/portainer/views/endpoints/create/createEndpointController.js
+++ b/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) {
--- a/app/portainer/views/endpoints/create/createendpoint.html
+++ b/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">
-                Poll frequency
-                <portainer-tooltip
-                  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 class="col-sm-12 form-section-title"> Check-in Intervals </div>
+              <edge-checkin-interval-field value="formValues.EdgeCheckinInterval" on-change="(onChangeCheckInInterval)"></edge-checkin-interval-field>
            </div>
          </div>
          <!-- endpoint-public-url-input -->
--- a/app/portainer/views/endpoints/edit/endpoint.html
+++ b/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">
-              Poll frequency
-              <portainer-tooltip
-                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 ng-if="endpoint && state.edgeEndpoint">
+            <div class="col-sm-12 form-section-title"> Check-in Intervals </div>
+            <edge-checkin-interval-field value="endpoint.EdgeCheckinInterval" on-change="(onChangeCheckInInterval)"></edge-checkin-interval-field>
          </div>
+
          <!-- !endpoint-public-url-input -->
          <azure-endpoint-config
            ng-if="state.azureEndpoint"
--- a/app/portainer/views/endpoints/edit/endpointController.js
+++ b/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;