mirror of https://github.com/portainer/portainer
feat(edge/jobs): migrate item view to react [EE-2220] (#11887)
Chaim Lev-Ari
6 months ago
committed by
GitHub
parent
62c2bf86aa
commit
eb6d251a73
@ -1,206 +0,0 @@
|
||||
<form class="form-horizontal -mt-4" name="edgeJobForm">
|
||||
<div class="col-sm-12 form-section-title"> Edge job configuration </div>
|
||||
<!-- name-input -->
|
||||
<div class="form-group mt-4">
|
||||
<label for="edgejob_name" class="col-sm-2 control-label required text-left">Name </label>
|
||||
<div class="col-sm-10">
|
||||
<input
|
||||
type="text"
|
||||
data-cy="edgejob-name-input"
|
||||
class="form-control"
|
||||
ng-model="$ctrl.model.Name"
|
||||
ng-pattern="/^[a-zA-Z0-9][a-zA-Z0-9_.-]+$/"
|
||||
id="edgejob_name"
|
||||
name="edgejob_name"
|
||||
placeholder="e.g. backup-app-prod"
|
||||
required
|
||||
auto-focus
|
||||
/>
|
||||
<div class="help-block" ng-show="edgeJobForm.edgejob_name.$invalid">
|
||||
<div class="small text-warning">
|
||||
<div ng-messages="edgeJobForm.edgejob_name.$error">
|
||||
<p ng-message="required" class="vertical-center">
|
||||
<span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon></span> This field is required.
|
||||
</p>
|
||||
<p ng-message="pattern" class="vertical-center">
|
||||
<span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon></span> Allowed characters are: [a-zA-Z0-9_.-]
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- !name-input -->
|
||||
<!-- cron-input -->
|
||||
<!-- edge-job-method-select -->
|
||||
<div class="col-sm-12 form-section-title"> Edge job configuration </div>
|
||||
|
||||
<box-selector slim="true" radio-name="'configurationold'" 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'">
|
||||
<div class="form-group">
|
||||
<label for="recurring" class="col-sm-2 control-label text-left">Recurring Edge job</label>
|
||||
<div class="col-sm-10">
|
||||
<label class="switch">
|
||||
<input type="checkbox" name="recurring" ng-model="$ctrl.model.Recurring" id="recurring" data-cy="recurring-edge-job-checkbox" />
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- not-recurring -->
|
||||
<div ng-if="!$ctrl.model.Recurring">
|
||||
<div class="form-group">
|
||||
<label for="edgejob_cron" class="col-sm-2 control-label text-left">Schedule date</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" moment-picker ng-model="$ctrl.formValues.datetime" format="YYYY-MM-DD HH:mm" data-cy="edge-job-date-time-picker" />
|
||||
</div>
|
||||
<div class="col-sm-12 small text-muted mt-2.5"> Time should be set according to the chosen environments' timezone. </div>
|
||||
<div ng-show="edgeJobForm.datepicker.$invalid">
|
||||
<div class="col-sm-12 small text-warning">
|
||||
<div ng-messages="edgeJobForm.datepicker.$error">
|
||||
<p ng-message="required" class="vertical-center">
|
||||
<span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon></span> This field is required.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !not-recurring -->
|
||||
<!-- recurring -->
|
||||
<div ng-if="$ctrl.model.Recurring">
|
||||
<div class="form-group">
|
||||
<label for="edgejob_value" class="col-sm-2 control-label text-left">Edge job time</label>
|
||||
<div class="col-sm-10">
|
||||
<select
|
||||
id="edgejob_value"
|
||||
data-cy="edge-job-time-select"
|
||||
name="edgejob_value"
|
||||
class="form-control"
|
||||
ng-model="$ctrl.formValues.scheduleValue"
|
||||
ng-options="value.displayed for value in $ctrl.scheduleValues"
|
||||
required
|
||||
></select>
|
||||
</div>
|
||||
<div ng-show="edgeJobForm.edgejob_value.$invalid">
|
||||
<div class="col-sm-12 small text-warning">
|
||||
<div ng-messages="edgeJobForm.edgejob_value.$error">
|
||||
<p ng-message="required" class="vertical-center">
|
||||
<span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon></span> This field is required.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !recurring -->
|
||||
</div>
|
||||
<!-- !basic-edge-job -->
|
||||
<!-- advanced-schedule -->
|
||||
<div ng-if="$ctrl.formValues.cronMethod === 'advanced'">
|
||||
<div class="form-group">
|
||||
<label for="edgejob_cron" class="col-sm-2 control-label text-left">Cron rule</label>
|
||||
<div class="col-sm-10">
|
||||
<input
|
||||
type="text"
|
||||
data-cy="edge-job-cron-input"
|
||||
class="form-control"
|
||||
ng-model="$ctrl.model.CronExpression"
|
||||
id="edgejob_cron"
|
||||
name="edgejob_cron"
|
||||
placeholder="e.g. 0 2 * * *"
|
||||
required
|
||||
ng-pattern="$ctrl.cronRegex"
|
||||
/>
|
||||
<div class="help-block" ng-show="edgeJobForm.edgejob_cron.$invalid && edgeJobForm.edgejob_cron.$dirty">
|
||||
<div class="small text-warning">
|
||||
<div ng-messages="edgeJobForm.edgejob_cron.$error">
|
||||
<p ng-message="required" class="vertical-center">
|
||||
<span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon></span> This field is required.
|
||||
</p>
|
||||
<p ng-message="pattern" class="vertical-center">
|
||||
<span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon></span> This field format is invalid.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 small text-muted mt-2.5"> Time should be set according to the chosen environments' timezone. </div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !advanced-schedule -->
|
||||
|
||||
<!-- execution-method -->
|
||||
<div ng-if="!$ctrl.model.Id">
|
||||
<div class="col-sm-12 form-section-title"> Job content </div>
|
||||
<box-selector value="$ctrl.formValues.method" options="$ctrl.buildMethods" radio-name="'buildMethodolds'" on-change="($ctrl.onBuildMethodChange)" slim="true"></box-selector>
|
||||
</div>
|
||||
<!-- !execution-method -->
|
||||
|
||||
<!-- web-editor -->
|
||||
<!-- TODO use web-editor-form component -->
|
||||
<div ng-show="$ctrl.formValues.method === 'editor'">
|
||||
<div class="col-sm-12 form-section-title"> Web editor </div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<code-editor
|
||||
identifier="execute-edge-job-editor"
|
||||
placeholder="Define or paste the content of your script file here"
|
||||
on-change="($ctrl.editorUpdate)"
|
||||
value="$ctrl.model.FileContent"
|
||||
shell="true"
|
||||
></code-editor>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !web-editor -->
|
||||
<!-- upload -->
|
||||
<div ng-show="$ctrl.formValues.method === 'upload'">
|
||||
<div class="col-sm-12 form-section-title"> Upload </div>
|
||||
<div class="form-group">
|
||||
<span class="col-sm-12 text-muted small"> You can upload a script file from your computer. </span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<button type="button" class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.model.File">Select file</button>
|
||||
<span class="space-left">
|
||||
{{ $ctrl.model.File.name }}
|
||||
<span ng-if="!$ctrl.model.File"><pr-icon icon="'x'" class-name="'icon icon-danger'"></pr-icon></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !upload -->
|
||||
|
||||
<edge-groups-selector ng-if="$ctrl.model.EdgeGroups" value="$ctrl.model.EdgeGroups" on-change="($ctrl.onChangeGroups)"></edge-groups-selector>
|
||||
|
||||
<div class="col-sm-12 form-section-title"> Target environments </div>
|
||||
<!-- node-selection -->
|
||||
<associated-edge-environments-selector value="$ctrl.model.Endpoints" on-change="($ctrl.onChangeEnvironments)"></associated-edge-environments-selector>
|
||||
<!-- !node-selection -->
|
||||
<!-- actions -->
|
||||
<div class="col-sm-12 form-section-title"> Actions </div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm"
|
||||
ng-disabled="$ctrl.actionInProgress || !edgeJobForm.$valid
|
||||
|| ($ctrl.model.Endpoints.length === 0 && $ctrl.model.EdgeGroups.length === 0)
|
||||
|| ($ctrl.formValues.method === 'upload' && !$ctrl.model.File)
|
||||
|| ($ctrl.formValues.method === 'editor' && !$ctrl.model.FileContent)
|
||||
"
|
||||
ng-click="$ctrl.action()"
|
||||
button-spinner="$ctrl.actionInProgress"
|
||||
>
|
||||
<span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
|
||||
<span ng-show="$ctrl.actionInProgress">In progress...</span>
|
||||
</button>
|
||||
<span class="text-danger space-left" ng-if="$ctrl.state.formValidationError"> {{ $ctrl.state.formValidationError }} </span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !actions -->
|
||||
</form>
|
||||
@ -1,142 +0,0 @@
|
||||
import moment from 'moment';
|
||||
import { editor, upload } from '@@/BoxSelector/common-options/build-methods';
|
||||
|
||||
import { cronMethodOptions } from '@/react/edge/edge-jobs/CreateView/cron-method-options';
|
||||
|
||||
export class EdgeJobFormController {
|
||||
/* @ngInject */
|
||||
constructor($async, $scope) {
|
||||
this.$scope = $scope;
|
||||
this.$async = $async;
|
||||
|
||||
this.cronMethods = cronMethodOptions.map((o) => ({ ...o, id: o.id + '-old' }));
|
||||
this.buildMethods = [editor, upload].map((o) => ({ ...o, id: o.id + '-old' }));
|
||||
|
||||
this.state = {
|
||||
formValidationError: '',
|
||||
};
|
||||
|
||||
this.scheduleValues = [
|
||||
{
|
||||
displayed: 'Every hour',
|
||||
cron: '0 * * * *',
|
||||
},
|
||||
{
|
||||
displayed: 'Every 2 hours',
|
||||
cron: '0 */2 * * *',
|
||||
},
|
||||
{
|
||||
displayed: 'Every day',
|
||||
cron: '0 0 * * *',
|
||||
},
|
||||
];
|
||||
|
||||
this.formValues = {
|
||||
datetime: moment(),
|
||||
scheduleValue: this.scheduleValues[0],
|
||||
cronMethod: 'basic',
|
||||
method: 'editor',
|
||||
};
|
||||
|
||||
// see https://regexr.com/573i2
|
||||
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.action = this.action.bind(this);
|
||||
this.editorUpdate = this.editorUpdate.bind(this);
|
||||
this.onChangeEnvironments = this.onChangeEnvironments.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);
|
||||
}
|
||||
|
||||
onChange(values) {
|
||||
this.$scope.$evalAsync(() => {
|
||||
this.formValues = {
|
||||
...this.formValues,
|
||||
...values,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
onBuildMethodChange(value) {
|
||||
this.onChange({ method: value });
|
||||
}
|
||||
|
||||
onCronMethodChange(value) {
|
||||
this.onChange({ cronMethod: value });
|
||||
}
|
||||
|
||||
onChangeModel(model) {
|
||||
const defaultTime = moment().add('hours', 1);
|
||||
const scheduled = this.scheduleValues.find((v) => v.cron === model.CronExpression);
|
||||
|
||||
this.formValues = {
|
||||
datetime: model.CronExpression ? cronToDatetime(model.CronExpression, defaultTime) : defaultTime,
|
||||
scheduleValue: scheduled || this.scheduleValues[0],
|
||||
cronMethod: model.Recurring && !scheduled ? 'advanced' : 'basic',
|
||||
method: this.formValues.method,
|
||||
};
|
||||
}
|
||||
|
||||
onChangeGroups(groups) {
|
||||
return this.$scope.$evalAsync(() => {
|
||||
this.model.EdgeGroups = groups ? groups : [];
|
||||
});
|
||||
}
|
||||
|
||||
action() {
|
||||
this.state.formValidationError = '';
|
||||
|
||||
if (this.formValues.method === 'editor' && this.model.FileContent === '') {
|
||||
this.state.formValidationError = 'Script file content must not be empty';
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.formValues.cronMethod === 'basic') {
|
||||
if (!this.model.Recurring && (this.formValues.datetime === undefined || !this.formValues.datetime.isValid())) {
|
||||
this.state.formValidationError = 'Schedule date must not be empty';
|
||||
return;
|
||||
} else if (!this.model.Recurring) {
|
||||
this.model.CronExpression = datetimeToCron(this.formValues.datetime);
|
||||
} else {
|
||||
this.model.CronExpression = this.formValues.scheduleValue.cron;
|
||||
}
|
||||
} else {
|
||||
this.model.Recurring = true;
|
||||
}
|
||||
|
||||
this.formAction(this.formValues.method);
|
||||
}
|
||||
|
||||
editorUpdate(value) {
|
||||
this.model.FileContent = value;
|
||||
this.isEditorDirty = true;
|
||||
}
|
||||
|
||||
onChangeEnvironments(value) {
|
||||
return this.$scope.$evalAsync(() => {
|
||||
this.model.Endpoints = value;
|
||||
});
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
this.onChangeModel(this.model);
|
||||
}
|
||||
}
|
||||
|
||||
function cronToDatetime(cron, defaultTime = moment()) {
|
||||
var strings = cron.split(' ');
|
||||
if (strings.length > 4) {
|
||||
strings = strings.slice(0, 4);
|
||||
} else {
|
||||
return defaultTime;
|
||||
}
|
||||
return moment(cron, 'm H D M');
|
||||
}
|
||||
|
||||
function datetimeToCron(datetime) {
|
||||
var date = moment(datetime);
|
||||
return [date.minutes(), date.hours(), date.date(), date.month() + 1, '*'].join(' ');
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import angular from 'angular';
|
||||
|
||||
import { EdgeJobFormController } from './edgeJobFormController';
|
||||
|
||||
angular.module('portainer.edge').component('edgeJobForm', {
|
||||
templateUrl: './edgeJobForm.html',
|
||||
controller: EdgeJobFormController,
|
||||
bindings: {
|
||||
model: '=',
|
||||
groups: '<',
|
||||
tags: '<',
|
||||
edgeGroups: '<',
|
||||
addLabelAction: '<',
|
||||
removeLabelAction: '<',
|
||||
formAction: '<',
|
||||
formActionLabel: '@',
|
||||
actionInProgress: '<',
|
||||
isEditorDirty: '=',
|
||||
},
|
||||
});
|
||||
@ -1,18 +0,0 @@
|
||||
import angular from 'angular';
|
||||
|
||||
import { r2a } from '@/react-tools/react2angular';
|
||||
import { withUIRouter } from '@/react-tools/withUIRouter';
|
||||
import { ResultsDatatable } from '@/react/edge/edge-jobs/ItemView/ResultsDatatable/ResultsDatatable';
|
||||
|
||||
export const edgeJobsModule = angular
|
||||
.module('portainer.edge.react.components.edge-jobs', [])
|
||||
.component(
|
||||
'edgeJobResultsDatatable',
|
||||
r2a(withUIRouter(ResultsDatatable), [
|
||||
'dataset',
|
||||
'onClearLogs',
|
||||
'onCollectLogs',
|
||||
'onDownloadLogs',
|
||||
'onRefresh',
|
||||
])
|
||||
).name;
|
||||
@ -1,14 +0,0 @@
|
||||
angular.module('portainer.edge').factory('EdgeJobResults', EdgeJobResultsFactory);
|
||||
|
||||
function EdgeJobResultsFactory($resource, API_ENDPOINT_EDGE_JOBS) {
|
||||
return $resource(
|
||||
API_ENDPOINT_EDGE_JOBS + '/:id/tasks/:taskId/:action',
|
||||
{},
|
||||
{
|
||||
query: { method: 'GET', isArray: true, params: { id: '@id' } },
|
||||
logFile: { method: 'GET', params: { id: '@id', taskId: '@taskId', action: 'logs' } },
|
||||
clearLogs: { method: 'DELETE', params: { id: '@id', taskId: '@taskId', action: 'logs' } },
|
||||
collectLogs: { method: 'POST', params: { id: '@id', taskId: '@taskId', action: 'logs' } },
|
||||
}
|
||||
);
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
angular.module('portainer.edge').factory('EdgeJobs', EdgeJobsFactory);
|
||||
|
||||
function EdgeJobsFactory($resource, API_ENDPOINT_EDGE_JOBS) {
|
||||
return $resource(
|
||||
API_ENDPOINT_EDGE_JOBS + '/:id/:action',
|
||||
{},
|
||||
{
|
||||
create: { method: 'POST', params: { id: 'create', action: '@method' } },
|
||||
query: { method: 'GET', isArray: true },
|
||||
get: { method: 'GET', params: { id: '@id' } },
|
||||
update: { method: 'PUT', params: { id: '@id' } },
|
||||
remove: { method: 'DELETE', params: { id: '@id' } },
|
||||
file: { method: 'GET', params: { id: '@id', action: 'file' } },
|
||||
tasks: { method: 'GET', isArray: true, params: { id: '@id', action: 'tasks' } },
|
||||
}
|
||||
);
|
||||
}
|
||||
@ -1,79 +0,0 @@
|
||||
import angular from 'angular';
|
||||
import _ from 'lodash-es';
|
||||
|
||||
import { ScheduleCreateRequest, ScheduleUpdateRequest } from '@/portainer/models/schedule';
|
||||
|
||||
function EdgeJobService(EdgeJobs, EdgeJobResults, FileUploadService) {
|
||||
var service = {};
|
||||
|
||||
service.edgeJob = edgeJob;
|
||||
async function edgeJob(edgeJobId) {
|
||||
try {
|
||||
return await EdgeJobs.get({ id: edgeJobId }).$promise;
|
||||
} catch (err) {
|
||||
throw { msg: 'Unable to retrieve edgeJob', err: err };
|
||||
}
|
||||
}
|
||||
|
||||
service.edgeJobs = edgeJobs;
|
||||
async function edgeJobs() {
|
||||
try {
|
||||
return await EdgeJobs.query().$promise;
|
||||
} catch (err) {
|
||||
throw { msg: 'Unable to retrieve edgeJobs', err: err };
|
||||
}
|
||||
}
|
||||
|
||||
service.jobResults = jobResults;
|
||||
async function jobResults(edgeJobId) {
|
||||
try {
|
||||
const results = await EdgeJobResults.query({ id: edgeJobId }).$promise;
|
||||
|
||||
return _.sortBy(results, ['Id']);
|
||||
} catch (err) {
|
||||
throw { msg: 'Unable to retrieve results associated to the edgeJob', err: err };
|
||||
}
|
||||
}
|
||||
|
||||
service.logFile = logFile;
|
||||
function logFile(id, taskId) {
|
||||
return EdgeJobResults.logFile({ id, taskId }).$promise;
|
||||
}
|
||||
|
||||
service.collectLogs = collectLogs;
|
||||
function collectLogs(id, taskId) {
|
||||
return EdgeJobResults.collectLogs({ id, taskId }).$promise;
|
||||
}
|
||||
|
||||
service.clearLogs = clearLogs;
|
||||
function clearLogs(id, taskId) {
|
||||
return EdgeJobResults.clearLogs({ id, taskId }).$promise;
|
||||
}
|
||||
|
||||
service.createEdgeJobFromFileContent = function (model) {
|
||||
var payload = new ScheduleCreateRequest(model);
|
||||
return EdgeJobs.create({}, { method: 'string', ...payload }).$promise;
|
||||
};
|
||||
|
||||
service.createEdgeJobFromFileUpload = function (model) {
|
||||
var payload = new ScheduleCreateRequest(model);
|
||||
return FileUploadService.createSchedule(payload);
|
||||
};
|
||||
|
||||
service.updateEdgeJob = function (model) {
|
||||
var payload = new ScheduleUpdateRequest(model);
|
||||
return EdgeJobs.update(payload).$promise;
|
||||
};
|
||||
|
||||
service.remove = function (edgeJobId) {
|
||||
return EdgeJobs.remove({ id: edgeJobId }).$promise;
|
||||
};
|
||||
|
||||
service.getScriptFile = function (edgeJobId) {
|
||||
return EdgeJobs.file({ id: edgeJobId }).$promise;
|
||||
};
|
||||
|
||||
return service;
|
||||
}
|
||||
|
||||
angular.module('portainer.edge').factory('EdgeJobService', EdgeJobService);
|
||||
@ -1,46 +0,0 @@
|
||||
<page-header title="'Edge job details'" breadcrumbs="[{label:'Edge jobs', link:'edge.jobs'}, $ctrl.edgeJob.Name]" reload="true"> </page-header>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<uib-tabset active="$ctrl.state.activeTab">
|
||||
<uib-tab index="0" select="$ctrl.showEditor()">
|
||||
<uib-tab-heading>
|
||||
<span><pr-icon icon="'wrench'"></pr-icon></span> Configuration
|
||||
</uib-tab-heading>
|
||||
|
||||
<edge-job-form
|
||||
ng-if="$ctrl.edgeJob && $ctrl.state.showEditorTab"
|
||||
model="$ctrl.edgeJob"
|
||||
endpoints="endpoints"
|
||||
groups="$ctrl.groups"
|
||||
tags="$ctrl.tags"
|
||||
edge-groups="$ctrl.edgeGroups"
|
||||
form-action="$ctrl.update"
|
||||
form-action-label="Update Edge job"
|
||||
action-in-progress="$ctrl.state.actionInProgress"
|
||||
is-editor-dirty="$ctrl.state.isEditorDirty"
|
||||
></edge-job-form>
|
||||
</uib-tab>
|
||||
|
||||
<uib-tab index="1">
|
||||
<uib-tab-heading>
|
||||
<span><pr-icon icon="'list'"></pr-icon></span> Results
|
||||
</uib-tab-heading>
|
||||
|
||||
<edge-job-results-datatable
|
||||
class="mt-4 block"
|
||||
ng-if="$ctrl.results"
|
||||
dataset="$ctrl.results"
|
||||
on-refresh="($ctrl.refresh)"
|
||||
on-download-logs="($ctrl.downloadLogs)"
|
||||
on-collect-logs="($ctrl.collectLogs)"
|
||||
on-clear-logs="($ctrl.clearLogs)"
|
||||
></edge-job-results-datatable>
|
||||
</uib-tab>
|
||||
</uib-tabset>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,192 +0,0 @@
|
||||
import _ from 'lodash-es';
|
||||
import { getEnvironments } from '@/react/portainer/environments/environment.service';
|
||||
import { confirmWebEditorDiscard } from '@@/modals/confirm';
|
||||
|
||||
export class EdgeJobController {
|
||||
/* @ngInject */
|
||||
constructor($async, $q, $state, $window, EdgeJobService, FileSaver, GroupService, HostBrowserService, Notifications, TagService) {
|
||||
this.state = {
|
||||
actionInProgress: false,
|
||||
showEditorTab: false,
|
||||
isEditorDirty: false,
|
||||
};
|
||||
|
||||
this.$async = $async;
|
||||
this.$q = $q;
|
||||
this.$state = $state;
|
||||
this.$window = $window;
|
||||
this.EdgeJobService = EdgeJobService;
|
||||
this.FileSaver = FileSaver;
|
||||
this.GroupService = GroupService;
|
||||
this.HostBrowserService = HostBrowserService;
|
||||
this.Notifications = Notifications;
|
||||
this.TagService = TagService;
|
||||
|
||||
this.update = this.update.bind(this);
|
||||
this.updateAsync = this.updateAsync.bind(this);
|
||||
this.downloadLogs = this.downloadLogs.bind(this);
|
||||
this.downloadLogsAsync = this.downloadLogsAsync.bind(this);
|
||||
this.collectLogs = this.collectLogs.bind(this);
|
||||
this.collectLogsAsync = this.collectLogsAsync.bind(this);
|
||||
this.clearLogs = this.clearLogs.bind(this);
|
||||
this.clearLogsAsync = this.clearLogsAsync.bind(this);
|
||||
this.refresh = this.refresh.bind(this);
|
||||
this.refreshAsync = this.refreshAsync.bind(this);
|
||||
this.showEditor = this.showEditor.bind(this);
|
||||
}
|
||||
|
||||
update() {
|
||||
return this.$async(this.updateAsync);
|
||||
}
|
||||
|
||||
async updateAsync() {
|
||||
const model = this.edgeJob;
|
||||
this.state.actionInProgress = true;
|
||||
|
||||
try {
|
||||
await this.EdgeJobService.updateEdgeJob(model);
|
||||
this.Notifications.success('Success', 'Edge job successfully updated');
|
||||
this.state.isEditorDirty = false;
|
||||
this.$state.go('edge.jobs', {}, { reload: true });
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to update Edge job');
|
||||
}
|
||||
|
||||
this.state.actionInProgress = false;
|
||||
}
|
||||
|
||||
downloadLogs(endpointId) {
|
||||
return this.$async(this.downloadLogsAsync, endpointId);
|
||||
}
|
||||
async downloadLogsAsync(endpointId) {
|
||||
try {
|
||||
const data = await this.EdgeJobService.logFile(this.edgeJob.Id, endpointId);
|
||||
const downloadData = new Blob([data.FileContent], {
|
||||
type: 'text/plain;charset=utf-8',
|
||||
});
|
||||
const logFileName = `job_${this.edgeJob.Id}_task_${endpointId}.log`;
|
||||
this.FileSaver.saveAs(downloadData, logFileName);
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to download file');
|
||||
}
|
||||
}
|
||||
|
||||
associateEndpointsToResults(results, endpoints) {
|
||||
return _.map(results, (result) => {
|
||||
const endpoint = _.find(endpoints, (endpoint) => endpoint.Id === result.EndpointId);
|
||||
result.Endpoint = endpoint;
|
||||
return result;
|
||||
});
|
||||
}
|
||||
|
||||
collectLogs(endpointId) {
|
||||
return this.$async(this.collectLogsAsync, endpointId);
|
||||
}
|
||||
|
||||
async collectLogsAsync(endpointId) {
|
||||
try {
|
||||
await this.EdgeJobService.collectLogs(this.edgeJob.Id, endpointId);
|
||||
this.results = this.results.map((result) =>
|
||||
result.EndpointId === endpointId
|
||||
? {
|
||||
...result,
|
||||
LogsStatus: 2,
|
||||
}
|
||||
: result
|
||||
);
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to collect logs');
|
||||
}
|
||||
}
|
||||
|
||||
clearLogs(endpointId) {
|
||||
return this.$async(this.clearLogsAsync, endpointId);
|
||||
}
|
||||
async clearLogsAsync(endpointId) {
|
||||
try {
|
||||
await this.EdgeJobService.clearLogs(this.edgeJob.Id, endpointId);
|
||||
this.results = this.results.map((result) =>
|
||||
result.EndpointId === endpointId
|
||||
? {
|
||||
...result,
|
||||
LogsStatus: 1,
|
||||
}
|
||||
: result
|
||||
);
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to clear logs');
|
||||
}
|
||||
}
|
||||
|
||||
refresh() {
|
||||
return this.$async(this.refreshAsync);
|
||||
}
|
||||
async refreshAsync() {
|
||||
const { id } = this.$state.params;
|
||||
const results = await this.EdgeJobService.jobResults(id);
|
||||
if (results.length > 0) {
|
||||
const endpointIds = _.map(results, (result) => result.EndpointId);
|
||||
const endpoints = await getEnvironments({ query: { endpointIds } });
|
||||
this.results = this.associateEndpointsToResults(results, endpoints.value);
|
||||
} else {
|
||||
this.results = results;
|
||||
}
|
||||
}
|
||||
|
||||
showEditor() {
|
||||
this.state.showEditorTab = true;
|
||||
}
|
||||
|
||||
async uiCanExit() {
|
||||
if (this.edgeJob && this.edgeJob.FileContent !== this.oldFileContent && this.state.isEditorDirty) {
|
||||
return confirmWebEditorDiscard();
|
||||
}
|
||||
}
|
||||
|
||||
async $onInit() {
|
||||
const { id, tab } = this.$state.params;
|
||||
this.state.activeTab = tab;
|
||||
if (!tab || tab === 0) {
|
||||
this.state.showEditorTab = true;
|
||||
}
|
||||
|
||||
try {
|
||||
const [edgeJob, file, results, groups, tags] = await Promise.all([
|
||||
this.EdgeJobService.edgeJob(id),
|
||||
this.EdgeJobService.getScriptFile(id),
|
||||
this.EdgeJobService.jobResults(id),
|
||||
this.GroupService.groups(),
|
||||
this.TagService.tags(),
|
||||
]);
|
||||
|
||||
edgeJob.FileContent = file.FileContent;
|
||||
this.oldFileContent = edgeJob.FileContent;
|
||||
this.edgeJob = edgeJob;
|
||||
this.groups = groups;
|
||||
this.tags = tags;
|
||||
|
||||
this.edgeJob.EdgeGroups = this.edgeJob.EdgeGroups ? this.edgeJob.EdgeGroups : [];
|
||||
this.edgeJob.Endpoints = this.edgeJob.Endpoints ? this.edgeJob.Endpoints : [];
|
||||
|
||||
if (results.length > 0) {
|
||||
const endpointIds = _.map(results, (result) => result.EndpointId);
|
||||
const endpoints = await getEnvironments({ query: { endpointIds } });
|
||||
this.results = this.associateEndpointsToResults(results, endpoints.value);
|
||||
} else {
|
||||
this.results = results;
|
||||
}
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to retrieve environment list');
|
||||
}
|
||||
|
||||
this.$window.onbeforeunload = () => {
|
||||
if (this.edgeJob && this.edgeJob.FileContent !== this.oldFileContent && this.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
$onDestroy() {
|
||||
this.state.isEditorDirty = false;
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import angular from 'angular';
|
||||
import { EdgeJobController } from './edgeJobController';
|
||||
|
||||
angular.module('portainer.edge').component('edgeJobView', {
|
||||
templateUrl: './edgeJob.html',
|
||||
controller: EdgeJobController,
|
||||
});
|
||||
@ -1,22 +0,0 @@
|
||||
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;
|
||||
@ -1,7 +1,7 @@
|
||||
import { EdgeGroup } from '@/react/edge/edge-groups/types';
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
|
||||
import { timeOptions } from './RecurringFieldset';
|
||||
import { timeOptions } from '../components/EdgeJobForm/RecurringFieldset';
|
||||
|
||||
export interface FormValues {
|
||||
name: string;
|
||||
@ -0,0 +1,75 @@
|
||||
import { ListIcon, WrenchIcon } from 'lucide-react';
|
||||
|
||||
import { useIdParam } from '@/react/hooks/useIdParam';
|
||||
import { useParamState } from '@/react/hooks/useParamState';
|
||||
|
||||
import { PageHeader } from '@@/PageHeader';
|
||||
import { Widget } from '@@/Widget';
|
||||
import { NavTabs } from '@@/NavTabs';
|
||||
|
||||
import { useEdgeJob } from '../queries/useEdgeJob';
|
||||
|
||||
import { UpdateEdgeJobForm } from './UpdateEdgeJobForm/UpdateEdgeJobForm';
|
||||
import { ResultsDatatable } from './ResultsDatatable/ResultsDatatable';
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: 0,
|
||||
label: 'Configuration',
|
||||
icon: WrenchIcon,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
label: 'Results',
|
||||
icon: ListIcon,
|
||||
},
|
||||
] as const;
|
||||
|
||||
export function ItemView() {
|
||||
const id = useIdParam();
|
||||
|
||||
const [tabId = 0, setTabId] = useParamState('tab', (param) =>
|
||||
param ? parseInt(param, 10) : 0
|
||||
);
|
||||
|
||||
const edgeJobQuery = useEdgeJob(id);
|
||||
|
||||
if (!edgeJobQuery.data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const edgeJob = edgeJobQuery.data;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="Edge job details"
|
||||
breadcrumbs={[{ label: 'Edge jobs', link: 'edge.jobs' }, edgeJob.Name]}
|
||||
/>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-sm-12">
|
||||
<Widget>
|
||||
<Widget.Body>
|
||||
<NavTabs
|
||||
selectedId={tabId}
|
||||
onSelect={(id) => {
|
||||
setTabId(id);
|
||||
}}
|
||||
options={tabs}
|
||||
/>
|
||||
|
||||
{tabId === tabs[0].id && <UpdateEdgeJobForm edgeJob={edgeJob} />}
|
||||
|
||||
{tabId === tabs[1].id && (
|
||||
<div className="mt-4">
|
||||
<ResultsDatatable jobId={edgeJob.Id} />
|
||||
</div>
|
||||
)}
|
||||
</Widget.Body>
|
||||
</Widget>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,67 +1,93 @@
|
||||
import { List } from 'lucide-react';
|
||||
import { useEffect } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
import { Environment } from '@/react/portainer/environments/types';
|
||||
import { useEnvironmentList } from '@/react/portainer/environments/queries';
|
||||
|
||||
import { Datatable } from '@@/datatables';
|
||||
import { useTableState } from '@@/datatables/useTableState';
|
||||
import { withMeta } from '@@/datatables/extend-options/withMeta';
|
||||
import { useRepeater } from '@@/datatables/useRepeater';
|
||||
|
||||
import { LogsStatus } from '../../types';
|
||||
import { EdgeJob, JobResult, LogsStatus } from '../../types';
|
||||
import { useJobResults } from '../../queries/jobResults/useJobResults';
|
||||
|
||||
import { DecoratedJobResult } from './types';
|
||||
import { columns } from './columns';
|
||||
import { createStore } from './datatable-store';
|
||||
|
||||
const tableKey = 'edge-job-results';
|
||||
const store = createStore(tableKey);
|
||||
|
||||
export function ResultsDatatable({
|
||||
dataset,
|
||||
onCollectLogs,
|
||||
onClearLogs,
|
||||
onDownloadLogs,
|
||||
onRefresh,
|
||||
}: {
|
||||
dataset: Array<DecoratedJobResult>;
|
||||
export function ResultsDatatable({ jobId }: { jobId: EdgeJob['Id'] }) {
|
||||
const tableState = useTableState(store, tableKey);
|
||||
|
||||
const jobResultsQuery = useJobResults(jobId, {
|
||||
refetchInterval(dataset) {
|
||||
const anyCollecting = dataset?.some(
|
||||
(r) => r.LogsStatus === LogsStatus.Pending
|
||||
);
|
||||
|
||||
if (anyCollecting) {
|
||||
return 5000;
|
||||
}
|
||||
|
||||
return tableState.autoRefreshRate * 1000;
|
||||
},
|
||||
});
|
||||
|
||||
onCollectLogs(envId: EnvironmentId): void;
|
||||
onDownloadLogs(envId: EnvironmentId): void;
|
||||
onClearLogs(envId: EnvironmentId): void;
|
||||
onRefresh(): void;
|
||||
}) {
|
||||
const anyCollecting = dataset.some(
|
||||
(r) => r.LogsStatus === LogsStatus.Pending
|
||||
const environmentIds = jobResultsQuery.data?.map(
|
||||
(result) => result.EndpointId
|
||||
);
|
||||
const tableState = useTableState(store, tableKey);
|
||||
|
||||
const { setAutoRefreshRate } = tableState;
|
||||
const environmentsQuery = useEnvironmentList(
|
||||
{ endpointIds: environmentIds },
|
||||
{ enabled: !!environmentIds && !jobResultsQuery.isLoading }
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setAutoRefreshRate(anyCollecting ? 5 : 0);
|
||||
}, [anyCollecting, setAutoRefreshRate]);
|
||||
const dataset = useMemo(
|
||||
() =>
|
||||
jobResultsQuery.isLoading || environmentsQuery.isLoading
|
||||
? []
|
||||
: associateEndpointsToResults(
|
||||
jobResultsQuery.data || [],
|
||||
environmentsQuery.environments
|
||||
),
|
||||
[
|
||||
environmentsQuery.environments,
|
||||
environmentsQuery.isLoading,
|
||||
jobResultsQuery.data,
|
||||
jobResultsQuery.isLoading,
|
||||
]
|
||||
);
|
||||
|
||||
useRepeater(tableState.autoRefreshRate, onRefresh);
|
||||
return (
|
||||
<Datatable
|
||||
disableSelect
|
||||
columns={columns}
|
||||
dataset={dataset}
|
||||
isLoading={jobResultsQuery.isLoading || environmentsQuery.isLoading}
|
||||
title="Results"
|
||||
titleIcon={List}
|
||||
settingsManager={tableState}
|
||||
extendTableOptions={withMeta({
|
||||
table: 'edge-job-results',
|
||||
collectLogs: handleCollectLogs,
|
||||
downloadLogs: onDownloadLogs,
|
||||
clearLogs: onClearLogs,
|
||||
jobId,
|
||||
})}
|
||||
data-cy="edge-job-results-datatable"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function handleCollectLogs(envId: EnvironmentId) {
|
||||
onCollectLogs(envId);
|
||||
}
|
||||
function associateEndpointsToResults(
|
||||
results: Array<JobResult>,
|
||||
environments: Array<Environment>
|
||||
) {
|
||||
return results.map((result) => {
|
||||
const environment = environments.find(
|
||||
(environment) => environment.Id === result.EndpointId
|
||||
);
|
||||
return {
|
||||
...result,
|
||||
Endpoint: environment,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
@ -0,0 +1,123 @@
|
||||
import { Form, Formik, useFormikContext } from 'formik';
|
||||
import { useRouter } from '@uirouter/react';
|
||||
|
||||
import { EdgeGroupsSelector } from '@/react/edge/edge-stacks/components/EdgeGroupsSelector';
|
||||
import { AssociatedEdgeEnvironmentsSelector } from '@/react/edge/components/AssociatedEdgeEnvironmentsSelector';
|
||||
import { notifySuccess } from '@/portainer/services/notifications';
|
||||
|
||||
import { FormActions } from '@@/form-components/FormActions';
|
||||
import { FormSection } from '@@/form-components/FormSection';
|
||||
import { WebEditorForm } from '@@/WebEditorForm';
|
||||
|
||||
import { NameField } from '../../components/EdgeJobForm/NameField';
|
||||
import { JobConfigurationFieldset } from '../../components/EdgeJobForm/JobConfigurationFieldset';
|
||||
import {
|
||||
UpdatePayload,
|
||||
useUpdateEdgeJobMutation,
|
||||
} from '../../queries/useUpdateEdgeJobMutation';
|
||||
import {
|
||||
toRecurringRequest,
|
||||
toRecurringViewModel,
|
||||
} from '../../components/EdgeJobForm/parseRecurringValues';
|
||||
import { EdgeJobResponse } from '../../queries/useEdgeJob';
|
||||
import { useEdgeJobFile } from '../../queries/useEdgeJobFile';
|
||||
import { useValidation } from '../useValidation';
|
||||
|
||||
import { FormValues } from './types';
|
||||
|
||||
export function UpdateEdgeJobForm({ edgeJob }: { edgeJob: EdgeJobResponse }) {
|
||||
const fileQuery = useEdgeJobFile(edgeJob.Id);
|
||||
const mutation = useUpdateEdgeJobMutation();
|
||||
const validation = useValidation({ id: edgeJob.Id });
|
||||
const router = useRouter();
|
||||
|
||||
if (!fileQuery.isSuccess) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Formik<FormValues>
|
||||
validationSchema={validation}
|
||||
validateOnMount
|
||||
initialValues={{
|
||||
name: edgeJob.Name,
|
||||
|
||||
edgeGroupIds: edgeJob.EdgeGroups || [],
|
||||
environmentIds: edgeJob.Endpoints || [],
|
||||
fileContent: fileQuery.data,
|
||||
...toRecurringViewModel({
|
||||
cronExpression: edgeJob.CronExpression,
|
||||
recurring: edgeJob.Recurring,
|
||||
}),
|
||||
}}
|
||||
onSubmit={(values) => {
|
||||
mutation.mutate(
|
||||
{ id: edgeJob.Id, payload: getPayload(values) },
|
||||
{
|
||||
onSuccess: () => {
|
||||
notifySuccess('Success', 'Edge job successfully updated');
|
||||
router.stateService.go('^');
|
||||
},
|
||||
}
|
||||
);
|
||||
}}
|
||||
>
|
||||
<InnerForm isLoading={mutation.isLoading} />
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
|
||||
function InnerForm({ isLoading }: { isLoading: boolean }) {
|
||||
const { values, setFieldValue, isValid, errors } =
|
||||
useFormikContext<FormValues>();
|
||||
|
||||
return (
|
||||
<Form className="form-horizontal">
|
||||
<NameField errors={errors.name} />
|
||||
|
||||
<JobConfigurationFieldset />
|
||||
|
||||
<WebEditorForm
|
||||
data-cy="edge-job-editor"
|
||||
id="edge-job-editor"
|
||||
onChange={(value) => setFieldValue('fileContent', value)}
|
||||
value={values.fileContent}
|
||||
placeholder="Define or paste the content of your script file here"
|
||||
shell
|
||||
error={errors.fileContent}
|
||||
/>
|
||||
|
||||
<EdgeGroupsSelector
|
||||
onChange={(value) => setFieldValue('edgeGroupIds', value)}
|
||||
value={values.edgeGroupIds}
|
||||
error={errors.edgeGroupIds}
|
||||
/>
|
||||
|
||||
<FormSection title="Target environments">
|
||||
<AssociatedEdgeEnvironmentsSelector
|
||||
onChange={(value) => setFieldValue('environmentIds', value)}
|
||||
value={values.environmentIds}
|
||||
/>
|
||||
</FormSection>
|
||||
|
||||
<FormActions
|
||||
submitLabel="Update edge job"
|
||||
isLoading={isLoading}
|
||||
isValid={isValid}
|
||||
data-cy="updateJobButton"
|
||||
loadingText="In progress..."
|
||||
errors={errors}
|
||||
/>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
function getPayload(values: FormValues): UpdatePayload {
|
||||
return {
|
||||
name: values.name,
|
||||
edgeGroups: values.edgeGroupIds,
|
||||
endpoints: values.environmentIds,
|
||||
fileContent: values.fileContent,
|
||||
...toRecurringRequest(values),
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
import { UpdatePayload } from '../../queries/useUpdateEdgeJobMutation';
|
||||
import { toRecurringRequest } from '../../components/EdgeJobForm/parseRecurringValues';
|
||||
|
||||
import { FormValues } from './types';
|
||||
|
||||
export function getPayload(values: FormValues): UpdatePayload {
|
||||
return {
|
||||
name: values.name,
|
||||
edgeGroups: values.edgeGroupIds,
|
||||
endpoints: values.environmentIds,
|
||||
fileContent: values.fileContent,
|
||||
...toRecurringRequest(values),
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import { EdgeGroup } from '@/react/edge/edge-groups/types';
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
|
||||
import { timeOptions } from '../../components/EdgeJobForm/RecurringFieldset';
|
||||
|
||||
export interface FormValues {
|
||||
name: string;
|
||||
recurring: boolean;
|
||||
edgeGroupIds: Array<EdgeGroup['Id']>;
|
||||
environmentIds: Array<EnvironmentId>;
|
||||
|
||||
fileContent: string;
|
||||
|
||||
cronMethod: 'basic' | 'advanced';
|
||||
dateTime: Date; // basic !recurring
|
||||
recurringOption: (typeof timeOptions)[number]['value']; // basic recurring
|
||||
cronExpression: string; // advanced
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
import {
|
||||
SchemaOf,
|
||||
array,
|
||||
boolean,
|
||||
date,
|
||||
mixed,
|
||||
number,
|
||||
object,
|
||||
string,
|
||||
} from 'yup';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { EdgeJob } from '../types';
|
||||
import { useNameValidation } from '../components/EdgeJobForm/NameField';
|
||||
import { cronValidation } from '../components/EdgeJobForm/AdvancedCronFieldset';
|
||||
import { timeOptions } from '../components/EdgeJobForm/RecurringFieldset';
|
||||
|
||||
import { FormValues } from './UpdateEdgeJobForm/types';
|
||||
|
||||
export function useValidation({
|
||||
id,
|
||||
}: {
|
||||
id: EdgeJob['Id'];
|
||||
}): SchemaOf<FormValues> {
|
||||
const nameValidation = useNameValidation(id);
|
||||
return useMemo(
|
||||
() =>
|
||||
object({
|
||||
name: nameValidation,
|
||||
recurring: boolean().default(false),
|
||||
cronExpression: string().default('').when('cronMethod', {
|
||||
is: 'advanced',
|
||||
then: cronValidation().required(),
|
||||
}),
|
||||
edgeGroupIds: array(number().required()),
|
||||
environmentIds: array(number().required()),
|
||||
|
||||
fileContent: string().required('This field is required.'),
|
||||
|
||||
cronMethod: mixed<'basic' | 'advanced'>()
|
||||
.oneOf(['basic', 'advanced'])
|
||||
.default('basic'),
|
||||
dateTime: date()
|
||||
.default(new Date())
|
||||
.when(['recurring', 'cronMethod'], {
|
||||
is: (recurring: boolean, cronMethod: 'basic' | 'advanced') =>
|
||||
!recurring && cronMethod === 'basic',
|
||||
then: (schema) => schema.required('This field is required.'),
|
||||
}),
|
||||
recurringOption: mixed()
|
||||
.oneOf(timeOptions.map((o) => o.value))
|
||||
.when(['recurring', 'cronMethod'], {
|
||||
is: (recurring: boolean, cronMethod: 'basic' | 'advanced') =>
|
||||
recurring && cronMethod === 'basic',
|
||||
then: (schema) => schema.required('This field is required.'),
|
||||
}),
|
||||
}),
|
||||
[nameValidation]
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
import { addHours, getDate, getHours, getMinutes, getMonth } from 'date-fns';
|
||||
import moment from 'moment';
|
||||
|
||||
import { defaultCronExpression, timeOptions } from './RecurringFieldset';
|
||||
|
||||
interface RecurringViewModel {
|
||||
cronMethod: 'basic' | 'advanced';
|
||||
cronExpression: string;
|
||||
recurring: boolean;
|
||||
recurringOption: (typeof timeOptions)[number]['value'];
|
||||
dateTime: Date;
|
||||
}
|
||||
|
||||
interface RecurringRequestModel {
|
||||
recurring: boolean;
|
||||
cronExpression: string;
|
||||
}
|
||||
|
||||
export function toRecurringRequest(
|
||||
values: RecurringViewModel
|
||||
): RecurringRequestModel {
|
||||
if (values.cronMethod !== 'basic') {
|
||||
return {
|
||||
recurring: true,
|
||||
cronExpression: values.cronExpression,
|
||||
};
|
||||
}
|
||||
|
||||
if (values.recurring) {
|
||||
return {
|
||||
recurring: true,
|
||||
cronExpression: values.recurringOption,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
recurring: false,
|
||||
cronExpression: dateTimeToCron(values.dateTime),
|
||||
};
|
||||
|
||||
function dateTimeToCron(date: Date) {
|
||||
return [
|
||||
getMinutes(date),
|
||||
getHours(date),
|
||||
getDate(date),
|
||||
getMonth(date) + 1,
|
||||
'*',
|
||||
].join(' ');
|
||||
}
|
||||
}
|
||||
|
||||
export function toRecurringViewModel(
|
||||
{ cronExpression, recurring }: RecurringRequestModel = {
|
||||
cronExpression: defaultCronExpression,
|
||||
recurring: true,
|
||||
}
|
||||
): RecurringViewModel {
|
||||
const defaultTime = addHours(new Date(), 1);
|
||||
const scheduled = timeOptions.find((v) => v.value === cronExpression);
|
||||
|
||||
return {
|
||||
recurring,
|
||||
cronExpression,
|
||||
recurringOption: scheduled?.value || defaultCronExpression,
|
||||
cronMethod: recurring && !scheduled ? 'advanced' : 'basic',
|
||||
dateTime: cronExpression
|
||||
? cronToDateTime(cronExpression, defaultTime)
|
||||
: defaultTime,
|
||||
};
|
||||
}
|
||||
|
||||
function cronToDateTime(cron: string, defaultTime: Date): Date {
|
||||
const strings = cron.split(' ');
|
||||
if (strings.length > 4) {
|
||||
return moment(cron, 'm H D M').toDate();
|
||||
}
|
||||
|
||||
return defaultTime;
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
|
||||
import { EdgeJob } from '../../types';
|
||||
import { buildUrl as buildEdgeJobUrl } from '../build-url';
|
||||
|
||||
export function buildUrl({
|
||||
action,
|
||||
id,
|
||||
taskId,
|
||||
}: {
|
||||
id: EdgeJob['Id'];
|
||||
action?: 'logs';
|
||||
taskId?: EnvironmentId;
|
||||
}) {
|
||||
const baseUrl = buildEdgeJobUrl({ id, action: 'tasks' });
|
||||
|
||||
if (taskId) {
|
||||
return `${baseUrl}/${taskId}/${action}`;
|
||||
}
|
||||
|
||||
return baseUrl;
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
import { EdgeJob } from '../../types';
|
||||
import { queryKeys as edgeJobQueryKeys } from '../query-keys';
|
||||
|
||||
export const queryKeys = {
|
||||
base: (id: EdgeJob['Id']) =>
|
||||
[...edgeJobQueryKeys.item(id), 'results'] as const,
|
||||
};
|
||||
@ -0,0 +1,30 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
import { withInvalidate } from '@/react-tools/react-query';
|
||||
|
||||
import { EdgeJob } from '../../types';
|
||||
|
||||
import { buildUrl } from './build-url';
|
||||
import { queryKeys } from './query-keys';
|
||||
|
||||
export function useClearLogsMutation(id: EdgeJob['Id']) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (environmentId: EnvironmentId) =>
|
||||
clearLogsMutation(id, environmentId),
|
||||
...withInvalidate(queryClient, [queryKeys.base(id)]),
|
||||
});
|
||||
}
|
||||
|
||||
async function clearLogsMutation(
|
||||
id: EdgeJob['Id'],
|
||||
environmentId: EnvironmentId
|
||||
) {
|
||||
try {
|
||||
await axios.delete(buildUrl({ id, action: 'logs', taskId: environmentId }));
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err, 'Failed clearing edge job result logs');
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
import { withInvalidate } from '@/react-tools/react-query';
|
||||
|
||||
import { EdgeJob } from '../../types';
|
||||
|
||||
import { buildUrl } from './build-url';
|
||||
import { queryKeys } from './query-keys';
|
||||
|
||||
export function useCollectLogsMutation(id: EdgeJob['Id']) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (environmentId: EnvironmentId) =>
|
||||
collectLogsMutation(id, environmentId),
|
||||
...withInvalidate(queryClient, [queryKeys.base(id)]),
|
||||
});
|
||||
}
|
||||
|
||||
async function collectLogsMutation(
|
||||
id: EdgeJob['Id'],
|
||||
environmentId: EnvironmentId
|
||||
) {
|
||||
try {
|
||||
await axios.post(buildUrl({ id, action: 'logs', taskId: environmentId }));
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err, 'Unable to collect logs');
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { saveAs } from 'file-saver';
|
||||
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
import { withInvalidate } from '@/react-tools/react-query';
|
||||
|
||||
import { EdgeJob } from '../../types';
|
||||
|
||||
import { buildUrl } from './build-url';
|
||||
import { queryKeys } from './query-keys';
|
||||
|
||||
export function useDownloadLogsMutation(id: EdgeJob['Id']) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (environmentId: EnvironmentId) =>
|
||||
downloadLogsMutation(id, environmentId),
|
||||
...withInvalidate(queryClient, [queryKeys.base(id)]),
|
||||
});
|
||||
}
|
||||
|
||||
async function downloadLogsMutation(
|
||||
id: EdgeJob['Id'],
|
||||
environmentId: EnvironmentId
|
||||
) {
|
||||
try {
|
||||
const { data } = await axios.get<{ FileContent: string }>(
|
||||
buildUrl({ id, action: 'logs', taskId: environmentId })
|
||||
);
|
||||
const downloadData = new Blob([data.FileContent], {
|
||||
type: 'text/plain;charset=utf-8',
|
||||
});
|
||||
const logFileName = `job_${id}_task_${environmentId}.log`;
|
||||
saveAs(downloadData, logFileName);
|
||||
return data;
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err, 'Unable to download file');
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
|
||||
import { EdgeJob, JobResult } from '../../types';
|
||||
|
||||
import { queryKeys } from './query-keys';
|
||||
import { buildUrl } from './build-url';
|
||||
|
||||
export function useJobResults(
|
||||
id: EdgeJob['Id'],
|
||||
{
|
||||
refetchInterval,
|
||||
}: {
|
||||
refetchInterval?:
|
||||
| number
|
||||
| false
|
||||
| ((data: Array<JobResult> | undefined) => number | false);
|
||||
} = {}
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: queryKeys.base(id),
|
||||
queryFn: () => getJobResults(id),
|
||||
refetchInterval,
|
||||
});
|
||||
}
|
||||
|
||||
async function getJobResults(id: EdgeJob['Id']) {
|
||||
try {
|
||||
const { data } = await axios.get<Array<JobResult>>(buildUrl({ id }));
|
||||
|
||||
return data;
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err, 'Failed fetching edge job results');
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,7 @@
|
||||
import { EdgeJob } from '../types';
|
||||
|
||||
export const queryKeys = {
|
||||
base: () => ['edge', 'jobs'] as const,
|
||||
item: (id: EdgeJob['Id']) => [...queryKeys.base(), id] as const,
|
||||
file: (id: EdgeJob['Id']) => [...queryKeys.item(id), 'file'] as const,
|
||||
};
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
|
||||
import { EdgeJob } from '../types';
|
||||
|
||||
import { buildUrl } from './build-url';
|
||||
import { queryKeys } from './query-keys';
|
||||
|
||||
export interface EdgeJobResponse extends Omit<EdgeJob, 'Endpoints'> {
|
||||
Endpoints: Array<EnvironmentId> | null;
|
||||
}
|
||||
|
||||
async function getEdgeJob(id: EdgeJobResponse['Id']) {
|
||||
try {
|
||||
const { data } = await axios.get<EdgeJobResponse>(buildUrl({ id }));
|
||||
return data;
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err, 'Failed fetching edge job');
|
||||
}
|
||||
}
|
||||
|
||||
export function useEdgeJob<T = EdgeJobResponse>(
|
||||
id: EdgeJobResponse['Id'],
|
||||
{
|
||||
select,
|
||||
}: {
|
||||
select?: (job: EdgeJobResponse) => T;
|
||||
} = {}
|
||||
) {
|
||||
return useQuery(queryKeys.item(id), () => getEdgeJob(id), { select });
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
|
||||
import { EdgeJob } from '../types';
|
||||
|
||||
import { buildUrl } from './build-url';
|
||||
import { queryKeys } from './query-keys';
|
||||
|
||||
export interface EdgeJobResponse extends Omit<EdgeJob, 'Endpoints'> {
|
||||
Endpoints: Array<EnvironmentId>;
|
||||
}
|
||||
|
||||
async function getEdgeJobFile(id: EdgeJobResponse['Id']) {
|
||||
try {
|
||||
const { data } = await axios.get<{ FileContent: string }>(
|
||||
buildUrl({ id, action: 'file' })
|
||||
);
|
||||
return data.FileContent;
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err, 'Failed fetching edge job file');
|
||||
}
|
||||
}
|
||||
|
||||
export function useEdgeJobFile(id: EdgeJobResponse['Id']) {
|
||||
return useQuery(queryKeys.file(id), () => getEdgeJobFile(id));
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import { withInvalidate } from '@/react-tools/react-query';
|
||||
|
||||
import { EdgeGroup } from '../../edge-groups/types';
|
||||
|
||||
import { queryKeys } from './query-keys';
|
||||
|
||||
export interface UpdatePayload {
|
||||
name?: string;
|
||||
cronExpression?: string;
|
||||
recurring?: boolean;
|
||||
endpoints?: Array<EnvironmentId>;
|
||||
edgeGroups?: Array<EdgeGroup['Id']>;
|
||||
fileContent?: string;
|
||||
}
|
||||
|
||||
export function useUpdateEdgeJobMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: updateEdgeJob,
|
||||
...withInvalidate(queryClient, [queryKeys.base()]),
|
||||
});
|
||||
}
|
||||
|
||||
async function updateEdgeJob({
|
||||
id,
|
||||
payload,
|
||||
}: {
|
||||
id: number;
|
||||
payload: UpdatePayload;
|
||||
}) {
|
||||
try {
|
||||
await axios.put(`/edge_jobs/${id}`, payload);
|
||||
} catch (error) {
|
||||
throw parseAxiosError(error);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue