mirror of https://github.com/shunfei/cronsun
250 lines
8.7 KiB
Vue
250 lines
8.7 KiB
Vue
<template>
|
||
<form class="ui form" v-bind:class="{loading:loading}" v-on:submit.prevent>
|
||
<h3 class="ui header">{{$L(action == 'CREATE' ? 'create job' : 'update job')}}
|
||
<em v-if="job.id"> ID# {{job.id}}</em>
|
||
<div class="ui toggle checkbox" ref="pause">
|
||
<input type="checkbox" class="hidden" v-bind:checked="!job.pause">
|
||
<label v-bind:style="{color: (job.pause?'red':'green')+' !important'}">{{$L(job.pause ? 'pause' : 'open')}}</label>
|
||
</div>
|
||
<div class="ui toggle checkbox" ref="fail_notify" v-if="$appConfig.alarm">
|
||
<input type="checkbox" class="hidden" v-bind:checked="job.fail_notify">
|
||
<label>{{$L(job.fail_notify ? 'warning on' : 'warning off')}}</label>
|
||
</div>
|
||
</h3>
|
||
<div class="inline fields" ref="kind">
|
||
<label>{{$L('job type')}}</label>
|
||
<div class="field">
|
||
<div class="ui radio checkbox">
|
||
<input type="radio" v-model="job.kind" name="kind" value="0" tabindex="0" class="hidden"/>
|
||
<label>{{$L('common job')}}</label>
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="ui radio checkbox">
|
||
<input type="radio" v-model="job.kind" name="kind" value="1" tabindex="0" class="hidden"/>
|
||
<label>{{$L('single node single process')}}</label>
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="ui radio checkbox">
|
||
<input type="radio" v-model="job.kind" name="kind" value="2" tabindex="0" class="hidden"/>
|
||
<label>{{$L('group level common')}}
|
||
<i class="help circle link icon" data-position="top right" :data-html="$L('group level common help')" data-variation="wide"></i>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="two fields">
|
||
<div class="field">
|
||
<label>{{$L('job name')}}</label>
|
||
<input type="text" ref="name" v-bind:value="job.name" v-on:input="updateValue($event.target.value)" :placeholder="$L('job name')">
|
||
</div>
|
||
<div class="field">
|
||
<label>{{$L('job group')}}</label>
|
||
<Dropdown :title="$L('select a group')" v-bind:allowAdditions="true" v-bind:items="groups" v-bind:selected="job.group" v-on:change="changeGroup"></Dropdown>
|
||
</div>
|
||
</div>
|
||
<div class="fields">
|
||
<div class="twelve wide field">
|
||
<label>{{$L('script path')}} {{allowSuffixsTip}}</label>
|
||
<input type="text" v-model="job.cmd" :placeholder="$L('script path')">
|
||
</div>
|
||
<div class="four wide field">
|
||
<label>{{$L($appConfig.security.open ? 'user(required)' : 'user(optional)')}}</label>
|
||
<Dropdown v-if="$appConfig.security.open" :title="$L('the user which to execute the command')" v-bind:items="$appConfig.security.users" v-bind:selected="job.user" v-on:change="changeUser"></Dropdown>
|
||
<input v-else type="text" v-model="job.user" :placeholder="$L('the user which to execute the command')">
|
||
</div>
|
||
</div>
|
||
<div class="field" v-if="$appConfig.alarm && job.fail_notify">
|
||
<label>{{$L('warning receiver')}}</label>
|
||
<Dropdown :title="$L('e-mail address')" v-bind:items="alarmReceivers" v-bind:selected="job.to" v-on:change="changeAlarmReceiver" v-bind:multiple="true" v-bind:allowAdditions="true"/>
|
||
</div>
|
||
<div class="two fields">
|
||
<div class="field">
|
||
<label>{{$L('timeout(in seconds, 0 for no limits)')}}</label>
|
||
<input type="number" ref="timeout" v-model.number="job.timeout">
|
||
</div>
|
||
<div class="field" v-show="job.kind === 0">
|
||
<label>{{$L('parallel number in one node(0 for no limits)')}}</label>
|
||
<input type="number" ref="parallels" v-model.number="job.parallels">
|
||
</div>
|
||
</div>
|
||
<div class="two fields">
|
||
<div class="field">
|
||
<label>{{$L('retries(number of retries when failed, 0 means no retry)')}}</label>
|
||
<input type="number" ref="retry" v-model.number="job.retry">
|
||
</div>
|
||
<div class="field">
|
||
<label>{{$L('retry interval(in seconds)')}}</label>
|
||
<input type="number" ref="interval" v-model.number="job.interval">
|
||
</div>
|
||
</div>
|
||
<div class="two fields" v-if="$appConfig.log_expiration_days>0">
|
||
<div class="field">
|
||
<label>{{$L('log expiration(log expired after N days, 0 will use default setting: {n} days)', $appConfig.log_expiration_days)}}</label>
|
||
<input type="number" ref="log_expiration" v-model.number="job.log_expiration">
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<span v-if="!job.rules || job.rules.length == 0"><i class="warning circle icon"></i>{{$L('the job dose not have a timer currently, please click the button below to add a timer')}}</span>
|
||
</div>
|
||
<JobEditRule v-for="(rule, index) in job.rules" :key="rule.id" v-bind:rule="rule" :index="index" v-on:remove="removeRule" v-on:change="changeRule"/>
|
||
<div class="two fields">
|
||
<div class="field">
|
||
<button class="fluid ui button" v-on:click="addNewTimer" type="button"><i class="history icon"></i> {{$L('add timer')}}</button>
|
||
</div>
|
||
<div class="field">
|
||
<button class="fluid blue ui button" type="button" v-on:click="submit"><i class="upload icon"></i> {{$L('save job')}}</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</template>
|
||
|
||
<script>
|
||
import JobEditRule from './JobEditRule.vue';
|
||
import Dropdown from './basic/Dropdown.vue';
|
||
import {split} from '../libraries/functions';
|
||
|
||
export default {
|
||
name: 'job-edit-form',
|
||
data: function(){
|
||
return {
|
||
action: 'CREATE',
|
||
groups: [],
|
||
alarmReceivers: [],
|
||
loading: false,
|
||
allowSuffixsTip: '',
|
||
job: {
|
||
id: '',
|
||
kind: 0, // 0 == 普通任务，1 == 单机任务
|
||
name: '',
|
||
oldGroup: '',
|
||
group: '',
|
||
user: '',
|
||
cmd: '',
|
||
pause: false,
|
||
parallels: 0,
|
||
timeout: 0,
|
||
interval: 0,
|
||
retry: 0,
|
||
rules: [],
|
||
fail_notify: false,
|
||
log_expiration: 0,
|
||
to: []
|
||
}
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
updateValue: function(v){
|
||
var tv = v.replace(/[\*\/]/g, '');
|
||
this.job.name = tv;
|
||
if (tv !== v) {
|
||
this.$refs.name.value = tv;
|
||
}
|
||
},
|
||
|
||
addNewTimer: function(){
|
||
if (!this.job.rules) this.job.rules = [];
|
||
this.job.rules.push({id: this.newRandomRuleId()});
|
||
},
|
||
|
||
changeGroup: function(val, text){
|
||
this.job.group = val;
|
||
},
|
||
|
||
changeUser: function(val, text){
|
||
this.job.user = val;
|
||
},
|
||
|
||
changeAlarmReceiver: function(val, text){
|
||
this.job.to = split(val, ',');
|
||
},
|
||
|
||
removeRule: function(index){
|
||
this.job.rules.splice(index, 1);
|
||
},
|
||
|
||
changeRule: function(index, key, val){
|
||
this.job.rules[index][key] = val;
|
||
},
|
||
|
||
submit: function(){
|
||
var exceptCode = this.action == 'CREATE' ? 201 : 200;
|
||
this.loading = true;
|
||
var vm = this;
|
||
this.$rest.PUT('job', this.job)
|
||
.onsucceed(exceptCode, ()=>{vm.$router.push({path:'/job',query:vm.$route.query})})
|
||
.onfailed((resp)=>{vm.$bus.$emit('error', resp)})
|
||
.onend(()=>{vm.loading=false})
|
||
.do();
|
||
},
|
||
|
||
newRandomRuleId: function(){
|
||
return 'NEW'+Math.random().toString();
|
||
}
|
||
},
|
||
|
||
mounted: function(){
|
||
var vm = this;
|
||
var secCnf = vm.$appConfig.security;
|
||
if (secCnf.open) {
|
||
if (secCnf.ext && secCnf.ext.length > 0) {
|
||
vm.allowSuffixsTip = vm.$L('(only [{.suffixs}] files can be allowed)', secCnf.ext.join(' '));
|
||
}
|
||
}
|
||
|
||
if (vm.$route.path.indexOf('/job/create') === 0) {
|
||
vm.action = 'CREATE';
|
||
} else {
|
||
vm.action = 'UPDATE';
|
||
vm.$rest.GET('job/'+vm.$route.params.group+'-'+vm.$route.params.id).
|
||
onsucceed(200, (resp)=>{
|
||
vm.job = resp;
|
||
vm.alarmReceivers = resp.to;
|
||
vm.job.oldGroup = resp.group;
|
||
if (vm.job.rules) {
|
||
for (var i in vm.job.rules) {
|
||
if (vm.job.rules[i].id.length == 0) {
|
||
vm.job.rules[i].id = vm.newRandomRuleId();
|
||
}
|
||
}
|
||
}
|
||
}).
|
||
onfailed((msg)=> vm.$bus.$emit('error', msg)).
|
||
do();
|
||
}
|
||
|
||
vm.$rest.GET('job/groups').onsucceed(200, (resp)=>{
|
||
!resp.includes('default') && resp.unshift('default');
|
||
vm.groups = resp;
|
||
}).do();
|
||
|
||
$(vm.$refs.pause).checkbox({
|
||
onChange: function(){
|
||
vm.job.pause = !vm.job.pause;
|
||
}
|
||
});
|
||
|
||
$(vm.$refs.fail_notify).checkbox({
|
||
onChange: function(){
|
||
vm.job.fail_notify = !vm.job.fail_notify;
|
||
}
|
||
});
|
||
|
||
$(vm.$refs.kind).find('.checkbox').checkbox({
|
||
onChange: function(){
|
||
vm.job.kind = +$(vm.$refs.kind).find('input[type=radio]:checked').val();
|
||
}
|
||
});
|
||
|
||
$(vm.$el).find('i.help.icon').popup();
|
||
},
|
||
|
||
components: {
|
||
JobEditRule,
|
||
Dropdown
|
||
}
|
||
}
|
||
</script>
|