Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-05 05:45:22 +02:00
Code Issues Releases Activity

refactor(ui/box-selector): replace all selectors [EE-3856] (#7902)

Browse source
This commit is contained in:
Chaim Lev-Ari 2023-02-07 09:03:57 +05:30 • committed by GitHub
parent c9253319d9
commit 2dddc1c6b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
80 changed files with 1267 additions and 1011 deletions
Download patch file Download diff file Expand all files Collapse all files

22
app/edge/components/edge-job-form/cron-method-options.tsx Normal file
View file

@ -0,0 +1,22 @@
import { Calendar, Edit } from 'lucide-react';
import { BoxSelectorOption } from '@@/BoxSelector';
export const cronMethodOptions: ReadonlyArray<BoxSelectorOption<string>> = [
{
id: 'config_basic',
value: 'basic',
icon: Calendar,
iconType: 'badge',
label: 'Basic configuration',
description: 'Select date from calendar',
},
{
id: 'config_advanced',
value: 'advanced',
icon: Edit,
iconType: 'badge',
label: 'Advanced configuration',
description: 'Write your own cron rule',
},
] as const;

58
app/edge/components/edge-job-form/edgeJobForm.html
View file

@ -34,33 +34,9 @@
<!-- cron-input -->
<!-- edge-job-method-select -->
<div class="col-sm-12 form-section-title"> Edge job configuration </div>
<div class="form-group"></div>
<div class="form-group">
<div class="col-sm-12">
<div class="boxselector_wrapper !mt-0">
<div>
<input type="radio" id="config_basic" ng-model="$ctrl.formValues.cronMethod" value="basic" />
<label for="config_basic">
<div class="boxselector_header vertical-center">
<pr-icon icon="'calendar'"></pr-icon>
Basic configuration
</div>
<p>Select date from calendar</p>
</label>
</div>
<div>
<input type="radio" id="config_advanced" ng-model="$ctrl.formValues.cronMethod" value="advanced" />
<label for="config_advanced">
<div class="boxselector_header vertical-center">
<pr-icon icon="'edit'"></pr-icon>
Advanced configuration
</div>
<p>Write your own cron rule</p>
</label>
</div>
</div>
</div>
</div>
<box-selector slim="true" radio-name="'configuration'" value="$ctrl.formValues.cronMethod" options="$ctrl.cronMethods" on-change="($ctrl.onCronMethodChange)"></box-selector>
<!-- !edge-job-method-select -->
<!-- basic-edge-job -->
<div ng-if="$ctrl.formValues.cronMethod === 'basic'">
@ -154,34 +130,10 @@
<!-- execution-method -->
<div ng-if="!$ctrl.model.Id">
<div class="col-sm-12 form-section-title"> Job content </div>
<div class="form-group">
<div class="col-sm-12">
<div class="boxselector_wrapper">
<div>
<input type="radio" id="method_editor" ng-model="$ctrl.formValues.method" value="editor" />
<label for="method_editor">
<div class="boxselector_header vertical-center">
<pr-icon icon="'edit'"></pr-icon>
Web editor
</div>
<p>Use our Web editor</p>
</label>
</div>
<div>
<input type="radio" id="method_upload" ng-model="$ctrl.formValues.method" value="upload" />
<label for="method_upload">
<div class="boxselector_header vertical-center">
<pr-icon icon="'upload'"></pr-icon>
Upload
</div>
<p>Upload from your computer</p>
</label>
</div>
</div>
</div>
</div>
<box-selector value="$ctrl.formValues.method" options="$ctrl.buildMethods" radio-name="buildMethod" on-change="($ctrl.onBuildMethodChange)" slim="true"></box-selector>
</div>
<!-- !execution-method -->
<!-- web-editor -->
<div ng-show="$ctrl.formValues.method === 'editor'">
<div class="col-sm-12 form-section-title"> Web editor </div>

35
app/edge/components/edge-job-form/edgeJobFormController.js
View file

@ -1,9 +1,20 @@
import _ from 'lodash-es';
import moment from 'moment';
import { editor, upload } from '@@/BoxSelector/common-options/build-methods';
import { cronMethodOptions } from './cron-method-options';
export class EdgeJobFormController {
/* @ngInject */
constructor($async, $scope, EdgeGroupService, Notifications) {
this.$scope = $scope;
this.$async = $async;
this.EdgeGroupService = EdgeGroupService;
this.Notifications = Notifications;
this.cronMethods = cronMethodOptions;
this.buildMethods = [editor, upload];
this.state = {
formValidationError: '',
};
@ -34,17 +45,31 @@ export class EdgeJobFormController {
this.cronRegex =
/(@(annually|yearly|monthly|weekly|daily|hourly|reboot))|(@every (\d+(ns|us|µs|ms|s|m|h))+)|((((\d+,)+\d+|(\d+(\/|-)\d+)|\d+|\*) ){4,6}((\d+,)+\d+|(\d+(\/|-)\d+)|\d+|\*))/;
this.$async = $async;
this.$scope = $scope;
this.action = this.action.bind(this);
this.editorUpdate = this.editorUpdate.bind(this);
this.associateEndpoint = this.associateEndpoint.bind(this);
this.dissociateEndpoint = this.dissociateEndpoint.bind(this);
this.onChangeGroups = this.onChangeGroups.bind(this);
this.onChange = this.onChange.bind(this);
this.onCronMethodChange = this.onCronMethodChange.bind(this);
this.onBuildMethodChange = this.onBuildMethodChange.bind(this);
}
this.EdgeGroupService = EdgeGroupService;
this.Notifications = Notifications;
onChange(values) {
this.$scope.$evalAsync(() => {
this.formValues = {
...this.formValues,
...values,
};
});
}
onBuildMethodChange(value) {
this.onChange({ method: value });
}
onCronMethodChange(value) {
this.onChange({ cronMethod: value });
}
onChangeModel(model) {