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

pull/6795/head
Chaim Lev-Ari 3 years ago committed by GitHub
parent bebee78152
commit d08b498cb9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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;
}

@ -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;

@ -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

@ -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() {

@ -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) {

@ -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 -->

@ -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"

@ -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;

Loading…
Cancel
Save