2020-07-01 17:41:00 +02:00
|
|
|
<!--suppress HtmlFormInputWithoutLabel -->
|
2020-06-13 17:28:50 +02:00
|
|
|
<template>
|
|
|
|
<div class="page run">
|
|
|
|
<h2>Run a command on {{ host.name }}</h2>
|
2020-06-14 02:34:35 +02:00
|
|
|
|
2020-06-18 21:27:51 +02:00
|
|
|
<div class="mode-selector">
|
|
|
|
Action mode
|
|
|
|
|
|
|
|
<div class="buttons">
|
|
|
|
<input type="radio" value="request" id="_request" v-model="actionMode" />
|
|
|
|
<label for="_request"> Request</label>
|
|
|
|
<input type="radio" value="script" id="_script" v-model="actionMode" />
|
|
|
|
<label for="_script"> Script</label>
|
|
|
|
</div>
|
2020-06-14 02:34:35 +02:00
|
|
|
</div>
|
|
|
|
|
2020-06-18 21:27:51 +02:00
|
|
|
<div v-if="actionMode === 'request'">
|
|
|
|
<div class="help">
|
|
|
|
<a href="https://platypush.readthedocs.io/en/latest/plugins.html" target="_blank">Plugins reference</a>. Use <tt>$URL$</tt> as argument value to denote the current
|
|
|
|
URL. You can also call remotely stored procedure through <tt>procedure.<procedure_name></tt>.
|
2020-06-13 17:28:50 +02:00
|
|
|
</div>
|
|
|
|
|
2020-06-18 21:27:51 +02:00
|
|
|
<form ref="runForm" @submit.prevent="runAction">
|
|
|
|
<div class="row action-head">
|
|
|
|
<div class="action-name">
|
2020-06-29 20:26:58 +02:00
|
|
|
<Autocomplete
|
|
|
|
placeholder="Action"
|
|
|
|
:source="actionsAutocomplete"
|
|
|
|
:disableInput="loading"
|
|
|
|
:name="action.name || ''"
|
|
|
|
:initialValue="selectedAction ? selectedAction.name : null"
|
|
|
|
:initialDisplay="selectedAction ? selectedAction.name : null"
|
|
|
|
@input="onActionChange"
|
|
|
|
/>
|
2020-06-18 21:27:51 +02:00
|
|
|
</div>
|
|
|
|
<div class="action-doc" v-text="actionTemplate.doc" v-if="actionTemplate.doc" />
|
2020-06-14 02:34:35 +02:00
|
|
|
</div>
|
2020-06-18 21:27:51 +02:00
|
|
|
|
2020-06-26 23:43:37 +02:00
|
|
|
<div class="row" v-for="(arg, name) in action.defaultArgs" :key="name">
|
2020-06-18 21:27:51 +02:00
|
|
|
<div class="label">
|
|
|
|
<input type="text" :name="'arg_' + name" :value="name" autocomplete="off" disabled />
|
|
|
|
</div>
|
|
|
|
<div class="value">
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
data-type="arg"
|
|
|
|
autocomplete="off"
|
2020-06-26 23:43:37 +02:00
|
|
|
v-model="arg.value"
|
|
|
|
:name="name"
|
|
|
|
:placeholder="arg.doc && arg.doc.length ? arg.doc : 'Value'"
|
2020-06-18 21:27:51 +02:00
|
|
|
:disabled="loading"
|
|
|
|
/>
|
|
|
|
</div>
|
2020-06-13 17:28:50 +02:00
|
|
|
</div>
|
|
|
|
|
2020-06-18 21:27:51 +02:00
|
|
|
<div class="row" v-for="(arg, i) in action.args" :key="i">
|
|
|
|
<div class="label">
|
|
|
|
<input type="text" :name="'arg_' + i" v-model="arg.name" placeholder="Name" autocomplete="off" :disabled="loading" />
|
|
|
|
</div>
|
|
|
|
<div class="value">
|
|
|
|
<input type="text" :name="arg.name" v-model="arg.value" data-type="arg" placeholder="Value" autocomplete="off" :disabled="loading" />
|
2020-06-26 23:43:37 +02:00
|
|
|
<button type="button" @click="removeActionArgument(i)" :disabled="loading">
|
2020-06-18 21:27:51 +02:00
|
|
|
<i class="fas fa-trash" />
|
|
|
|
</button>
|
|
|
|
</div>
|
2020-06-14 02:34:35 +02:00
|
|
|
</div>
|
2020-06-18 21:27:51 +02:00
|
|
|
|
|
|
|
<div class="row buttons">
|
|
|
|
<button type="button" @click="addActionArgument" :disabled="loading"><i class="fas fa-plus" /> Add Argument</button>
|
|
|
|
<button type="button" @click="clearAction" :disabled="loading"><i class="fas fa-times" /> Clear Form</button>
|
|
|
|
<button type="submit" :disabled="loading"><i class="fas fa-play" /> Run</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="row buttons" v-if="!saveMode">
|
2020-06-26 23:43:37 +02:00
|
|
|
<button type="button" @click="toggleSaveMode" :disabled="loading || !(action.name && action.name.length && action.name in actions)">
|
2020-06-18 21:27:51 +02:00
|
|
|
<i class="fas fa-save" /> Save Action
|
2020-06-14 02:34:35 +02:00
|
|
|
</button>
|
2020-06-13 17:28:50 +02:00
|
|
|
</div>
|
2020-06-18 21:27:51 +02:00
|
|
|
</form>
|
|
|
|
</div>
|
2020-06-13 17:28:50 +02:00
|
|
|
|
2020-06-18 21:27:51 +02:00
|
|
|
<div v-else>
|
2020-06-19 00:26:39 +02:00
|
|
|
<form ref="runForm" @submit.prevent="runAction">
|
|
|
|
<PrismEditor v-model="script" language="js" />
|
2020-06-15 01:03:09 +02:00
|
|
|
|
2020-06-18 21:27:51 +02:00
|
|
|
<div class="row buttons">
|
2020-06-26 23:43:37 +02:00
|
|
|
<button type="button" @click="toggleSaveMode" :disabled="loading || script === scriptTemplate" v-if="!saveMode"><i class="fas fa-save" /> Save Script</button>
|
2020-06-18 21:27:51 +02:00
|
|
|
<button type="submit" :disabled="loading"><i class="fas fa-play" /> Run</button>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
2020-06-15 01:03:09 +02:00
|
|
|
|
2020-06-27 12:05:16 +02:00
|
|
|
<form class="save-form" @submit.prevent="save" v-if="saveMode">
|
2020-06-15 01:03:09 +02:00
|
|
|
<div class="row">
|
2020-06-27 12:05:16 +02:00
|
|
|
<input type="text" name="displayName" v-model="saveParams.name" placeholder="Display name" />
|
2020-06-15 01:03:09 +02:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="row">
|
2020-06-27 12:05:16 +02:00
|
|
|
<input type="text" name="iconClass" v-model="saveParams.iconClass" placeholder="FontAwesome icon class (e.g. 'fas fa-play')" />
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
<input type="text" ref="color" name="color" v-model="saveParams.color" placeholder="HTML/CSS color" />
|
2020-06-15 01:03:09 +02:00
|
|
|
</div>
|
|
|
|
|
2020-06-22 01:09:02 +02:00
|
|
|
<div class="row">
|
|
|
|
<vue-tags-input
|
|
|
|
v-model="selectedCategory"
|
|
|
|
:autocomplete-items="categoriesAutocomplete"
|
|
|
|
:disabled="loading"
|
|
|
|
:separators="[',', ';']"
|
2020-06-29 20:26:58 +02:00
|
|
|
:tags="selectedCategories.map(cat => (typeof cat === 'object' ? cat : { text: cat }))"
|
2020-07-01 17:41:00 +02:00
|
|
|
@tags-changed="onCategoriesChanged"
|
2020-06-22 01:09:02 +02:00
|
|
|
placeholder="Categories"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
2020-06-27 12:05:16 +02:00
|
|
|
<div class="row icon-preview" v-if="saveParams.iconClass && saveParams.iconClass.length">
|
|
|
|
<i :class="saveParams.iconClass" :style="{ color: saveParams.color && saveParams.color.length ? saveParams.color : 'initial' }" />
|
|
|
|
</div>
|
|
|
|
|
2020-06-17 00:45:33 +02:00
|
|
|
<div class="row multiple-host-selector">
|
|
|
|
<div class="desc">
|
2020-06-19 00:26:39 +02:00
|
|
|
Install script on these devices
|
2020-06-17 00:45:33 +02:00
|
|
|
</div>
|
|
|
|
|
2020-06-29 20:26:58 +02:00
|
|
|
<MultipleHostSelector :hosts="hosts" :selected="selectedHosts && selectedHosts.length ? selectedHosts : [host.name]" />
|
2020-06-17 00:45:33 +02:00
|
|
|
</div>
|
|
|
|
|
2020-06-15 01:03:09 +02:00
|
|
|
<div class="row buttons">
|
2020-06-19 21:34:44 +02:00
|
|
|
<button type="submit" :disabled="loading"><i class="fas fa-save" /> Save {{ actionMode === 'request' ? 'Action' : 'Script' }}</button>
|
2020-06-26 23:43:37 +02:00
|
|
|
<button type="button" @click="toggleSaveMode" :disabled="loading"><i class="fas fa-times" /> Cancel</button>
|
2020-06-15 01:03:09 +02:00
|
|
|
</div>
|
2020-06-13 17:28:50 +02:00
|
|
|
</form>
|
|
|
|
|
|
|
|
<div class="code response" v-text="actionResponse" v-if="actionResponse && (actionResponse.length || Object.keys(actionResponse).length)" />
|
|
|
|
<div class="code error" v-text="actionError" v-if="actionError && actionError.length" />
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-06-19 00:26:39 +02:00
|
|
|
import 'prismjs';
|
|
|
|
import 'prismjs/themes/prism.css';
|
|
|
|
import PrismEditor from 'vue-prism-editor';
|
|
|
|
|
2020-06-13 17:28:50 +02:00
|
|
|
import mixins from '../utils';
|
2020-06-22 01:09:02 +02:00
|
|
|
import Autocomplete from 'vuejs-auto-complete';
|
|
|
|
import VueTagsInput from '@johmun/vue-tags-input';
|
2020-06-17 00:45:33 +02:00
|
|
|
import MultipleHostSelector from './MultipleHostSelector';
|
2020-06-13 17:28:50 +02:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'Run',
|
|
|
|
mixins: [mixins],
|
|
|
|
props: {
|
|
|
|
host: Object,
|
2020-06-29 20:26:58 +02:00
|
|
|
selectedAction: Object,
|
|
|
|
selectedScript: Object,
|
2020-06-19 00:26:39 +02:00
|
|
|
scriptTemplate: {
|
|
|
|
type: String,
|
2020-07-04 00:53:14 +02:00
|
|
|
default: `async (app, args) => {
|
2020-06-19 00:26:39 +02:00
|
|
|
// Run some action on the host
|
2020-07-05 00:56:03 +02:00
|
|
|
const status = await app.run({ action: 'music.mpd.pause' }, args.host);
|
2020-06-19 00:26:39 +02:00
|
|
|
|
|
|
|
// Send notifications to the browser
|
|
|
|
app.notify(status.state, 'Music status changed');
|
|
|
|
|
|
|
|
// Return values back to the app
|
|
|
|
return status;
|
|
|
|
}`,
|
|
|
|
},
|
2020-06-13 17:28:50 +02:00
|
|
|
},
|
|
|
|
|
2020-06-17 00:45:33 +02:00
|
|
|
components: {
|
|
|
|
Autocomplete,
|
2020-06-22 01:09:02 +02:00
|
|
|
VueTagsInput,
|
2020-06-17 00:45:33 +02:00
|
|
|
MultipleHostSelector,
|
2020-06-19 00:26:39 +02:00
|
|
|
PrismEditor,
|
2020-06-17 00:45:33 +02:00
|
|
|
},
|
|
|
|
|
2020-06-13 17:28:50 +02:00
|
|
|
data() {
|
|
|
|
return {
|
2020-06-14 02:34:35 +02:00
|
|
|
plugins: {},
|
|
|
|
pluginsLoading: false,
|
2020-06-18 21:27:51 +02:00
|
|
|
procedures: {},
|
2020-06-15 01:03:09 +02:00
|
|
|
saveMode: false,
|
2020-06-13 17:28:50 +02:00
|
|
|
actionResponse: null,
|
|
|
|
actionError: null,
|
2020-06-17 00:45:33 +02:00
|
|
|
hosts: {},
|
2020-06-19 00:26:39 +02:00
|
|
|
script: this.scriptTemplate,
|
2020-06-22 01:09:02 +02:00
|
|
|
storedActions: {},
|
|
|
|
selectedCategory: '',
|
|
|
|
selectedCategories: [],
|
2020-06-29 20:26:58 +02:00
|
|
|
selectedHosts: null,
|
2020-06-18 21:27:51 +02:00
|
|
|
actionMode: 'request',
|
2020-06-13 17:28:50 +02:00
|
|
|
action: {
|
|
|
|
name: null,
|
|
|
|
args: [],
|
2020-06-26 23:43:37 +02:00
|
|
|
defaultArgs: {},
|
2020-06-13 17:28:50 +02:00
|
|
|
},
|
2020-06-27 12:05:16 +02:00
|
|
|
|
|
|
|
saveParams: {
|
|
|
|
name: null,
|
|
|
|
iconClass: null,
|
|
|
|
color: null,
|
|
|
|
},
|
2020-06-13 17:28:50 +02:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2020-06-14 02:34:35 +02:00
|
|
|
computed: {
|
|
|
|
actions() {
|
2020-06-18 21:27:51 +02:00
|
|
|
let plugins = {};
|
|
|
|
let procedures = {};
|
|
|
|
|
|
|
|
if (this.plugins) {
|
|
|
|
plugins = Object.values(this.plugins).reduce((obj, plugin) => {
|
|
|
|
return Object.values(plugin.actions).reduce((obj, action) => {
|
|
|
|
obj[plugin.name + '.' + action.name] = action;
|
|
|
|
return obj;
|
|
|
|
}, obj);
|
|
|
|
}, {});
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.procedures) {
|
|
|
|
procedures = Object.entries(this.procedures).reduce((obj, [name, args]) => {
|
|
|
|
obj['procedure.' + name] = args;
|
2020-06-14 02:34:35 +02:00
|
|
|
return obj;
|
2020-06-18 21:27:51 +02:00
|
|
|
}, {});
|
|
|
|
}
|
|
|
|
|
|
|
|
return { ...plugins, ...procedures };
|
2020-06-14 02:34:35 +02:00
|
|
|
},
|
|
|
|
|
2020-06-22 01:09:02 +02:00
|
|
|
actionsAutocomplete() {
|
|
|
|
return Object.keys(this.actions).map(action => {
|
|
|
|
return {
|
|
|
|
id: action,
|
|
|
|
name: action,
|
|
|
|
};
|
|
|
|
});
|
2020-06-14 02:34:35 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
actionTemplate() {
|
|
|
|
if (!(this.action.name in this.actions)) {
|
2020-06-15 22:33:06 +02:00
|
|
|
return { args: {} };
|
2020-06-14 02:34:35 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return this.actions[this.action.name];
|
|
|
|
},
|
2020-06-22 01:09:02 +02:00
|
|
|
|
|
|
|
categories() {
|
|
|
|
return Object.keys(
|
|
|
|
Object.values(this.storedActions).reduce((obj, action) => {
|
|
|
|
for (const category of action.categories || []) {
|
|
|
|
obj[category] = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
return obj;
|
|
|
|
}, {})
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
|
|
|
categoriesAutocomplete() {
|
|
|
|
return this.categories.map(cat => {
|
|
|
|
return {
|
|
|
|
text: cat,
|
|
|
|
};
|
|
|
|
});
|
|
|
|
},
|
2020-06-14 02:34:35 +02:00
|
|
|
},
|
|
|
|
|
2020-06-13 17:28:50 +02:00
|
|
|
methods: {
|
|
|
|
clearAction() {
|
|
|
|
this.action.name = null;
|
|
|
|
this.action.args = [];
|
2020-06-26 23:43:37 +02:00
|
|
|
this.action.defaultArgs = {};
|
2020-06-13 17:28:50 +02:00
|
|
|
this.actionResponse = null;
|
|
|
|
this.actionError = null;
|
|
|
|
},
|
|
|
|
|
2020-06-15 01:03:09 +02:00
|
|
|
getActionArgs() {
|
2020-06-15 22:33:06 +02:00
|
|
|
return [...this.$refs.runForm.querySelectorAll('[data-type="arg"]')].reduce((obj, el) => {
|
|
|
|
obj[el.name] = el.value;
|
|
|
|
return obj;
|
2020-06-14 02:34:35 +02:00
|
|
|
}, {});
|
2020-06-15 01:03:09 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
async runAction() {
|
|
|
|
this.loading = true;
|
2020-06-14 02:34:35 +02:00
|
|
|
|
2020-06-13 17:28:50 +02:00
|
|
|
try {
|
2020-06-19 00:26:39 +02:00
|
|
|
if (this.actionMode === 'request') {
|
|
|
|
this.actionResponse = await this.run(
|
|
|
|
{
|
2020-07-05 00:56:03 +02:00
|
|
|
action: this.action.name,
|
2020-06-19 00:26:39 +02:00
|
|
|
args: this.getActionArgs(),
|
|
|
|
},
|
|
|
|
this.host
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
this.actionResponse = await this.runScript(this.script, this.host);
|
|
|
|
}
|
2020-06-14 02:34:35 +02:00
|
|
|
|
2020-06-13 17:28:50 +02:00
|
|
|
this.actionError = null;
|
|
|
|
} catch (e) {
|
|
|
|
this.actionResponse = null;
|
|
|
|
this.actionError = e.toString();
|
|
|
|
} finally {
|
|
|
|
this.loading = false;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
addActionArgument() {
|
|
|
|
this.action.args.push({
|
|
|
|
name: '',
|
|
|
|
value: '',
|
|
|
|
});
|
|
|
|
},
|
2020-06-14 02:34:35 +02:00
|
|
|
|
2020-06-26 23:43:37 +02:00
|
|
|
removeActionArgument(i) {
|
|
|
|
this.action.args.splice(i, 1);
|
|
|
|
},
|
|
|
|
|
|
|
|
toggleSaveMode() {
|
|
|
|
this.saveMode = !this.saveMode;
|
2020-06-27 12:05:16 +02:00
|
|
|
|
|
|
|
if (!this.saveMode) {
|
|
|
|
this.saveParams = {
|
|
|
|
name: null,
|
|
|
|
iconClass: null,
|
|
|
|
color: null,
|
|
|
|
};
|
|
|
|
}
|
2020-06-26 23:43:37 +02:00
|
|
|
},
|
|
|
|
|
2020-06-14 02:34:35 +02:00
|
|
|
async loadPlugins() {
|
|
|
|
this.pluginsLoading = true;
|
|
|
|
|
|
|
|
try {
|
|
|
|
this.plugins = await this.run(
|
|
|
|
{
|
2020-07-05 00:56:03 +02:00
|
|
|
action: 'inspect.get_all_plugins',
|
2020-06-14 02:34:35 +02:00
|
|
|
args: {
|
|
|
|
html_doc: false,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
this.host
|
|
|
|
);
|
2020-06-18 21:27:51 +02:00
|
|
|
|
2020-07-05 00:56:03 +02:00
|
|
|
this.procedures = await this.run({ action: 'inspect.get_procedures' }, this.host);
|
2020-06-14 02:34:35 +02:00
|
|
|
} finally {
|
|
|
|
this.pluginsLoading = false;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2020-06-22 01:09:02 +02:00
|
|
|
async loadActions() {
|
|
|
|
this.storedActions = await this.getActions();
|
|
|
|
},
|
|
|
|
|
2020-06-19 21:34:44 +02:00
|
|
|
async save(event) {
|
|
|
|
return this.actionMode === 'request' ? await this.storeAction(event) : await this.storeScript(event);
|
|
|
|
},
|
|
|
|
|
2020-06-18 21:27:51 +02:00
|
|
|
async storeScript(event) {
|
|
|
|
const saveForm = event.target;
|
|
|
|
const displayName = saveForm.displayName.value.trim();
|
|
|
|
const iconClass = saveForm.iconClass.value.trim();
|
2020-06-27 12:05:16 +02:00
|
|
|
const color = saveForm.color.value.trim();
|
2020-06-18 21:27:51 +02:00
|
|
|
const hosts = [...saveForm.querySelectorAll('input[data-type="host"]:checked')].map(el => el.value);
|
|
|
|
|
|
|
|
if (!displayName.length) {
|
|
|
|
this.notify('Please specify an action name', 'No action name provided');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!hosts.length) {
|
|
|
|
this.notify('Please specify at least one device where the action should run', 'No devices provided');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const script = {
|
|
|
|
type: this.actionMode,
|
|
|
|
displayName: displayName,
|
|
|
|
iconClass: iconClass,
|
2020-06-27 12:05:16 +02:00
|
|
|
color: color.length ? color : null,
|
2020-06-18 21:27:51 +02:00
|
|
|
hosts: hosts,
|
|
|
|
script: this.script,
|
2020-06-22 01:09:02 +02:00
|
|
|
categories: this.selectedCategories.map(obj => obj.text),
|
2020-06-18 21:27:51 +02:00
|
|
|
};
|
|
|
|
|
2020-06-19 19:01:30 +02:00
|
|
|
await this.saveScript(script);
|
2020-06-18 21:27:51 +02:00
|
|
|
},
|
|
|
|
|
2020-06-15 01:03:09 +02:00
|
|
|
async storeAction(event) {
|
|
|
|
const saveForm = event.target;
|
|
|
|
const displayName = saveForm.displayName.value.trim();
|
|
|
|
const iconClass = saveForm.iconClass.value.trim();
|
2020-06-27 12:05:16 +02:00
|
|
|
const color = saveForm.color.value.trim();
|
2020-06-17 00:45:33 +02:00
|
|
|
const hosts = [...saveForm.querySelectorAll('input[data-type="host"]:checked')].map(el => el.value);
|
2020-06-15 01:03:09 +02:00
|
|
|
|
|
|
|
if (!displayName.length) {
|
|
|
|
this.notify('Please specify an action name', 'No action name provided');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-06-17 00:45:33 +02:00
|
|
|
if (!hosts.length) {
|
|
|
|
this.notify('Please specify at least one device where the action should run', 'No devices provided');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-06-15 01:03:09 +02:00
|
|
|
const action = {
|
2020-06-18 21:27:51 +02:00
|
|
|
type: this.actionMode,
|
2020-06-15 01:03:09 +02:00
|
|
|
displayName: displayName,
|
|
|
|
iconClass: iconClass,
|
2020-06-27 12:05:16 +02:00
|
|
|
color: color.length ? color : null,
|
2020-06-18 21:27:51 +02:00
|
|
|
hosts: hosts,
|
2020-07-05 00:56:03 +02:00
|
|
|
action: this.action.name,
|
2020-06-15 01:03:09 +02:00
|
|
|
args: this.getActionArgs(),
|
2020-06-22 01:09:02 +02:00
|
|
|
categories: this.selectedCategories.map(obj => obj.text),
|
2020-06-15 01:03:09 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
await this.saveAction(action);
|
|
|
|
},
|
|
|
|
|
2020-06-17 00:45:33 +02:00
|
|
|
async loadHosts() {
|
|
|
|
this.hosts = await this.getHosts();
|
|
|
|
},
|
|
|
|
|
2020-06-14 02:34:35 +02:00
|
|
|
onActionChange(action) {
|
2020-06-26 23:43:37 +02:00
|
|
|
if (action === this.action.name) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-06-14 02:34:35 +02:00
|
|
|
this.action.name = action;
|
|
|
|
this.action.args = [];
|
2020-06-22 01:09:02 +02:00
|
|
|
|
2020-06-26 23:43:37 +02:00
|
|
|
if (action in this.actions) {
|
|
|
|
this.action.defaultArgs = Object.entries(this.actions[action].args).reduce((obj, [name, arg]) => {
|
|
|
|
obj[name] = { ...arg, value: arg.default };
|
|
|
|
return obj;
|
|
|
|
}, {});
|
|
|
|
} else {
|
|
|
|
this.action.defaultArgs = {};
|
|
|
|
}
|
2020-06-22 01:09:02 +02:00
|
|
|
},
|
2020-06-29 20:26:58 +02:00
|
|
|
|
2020-07-01 17:41:00 +02:00
|
|
|
onCategoriesChanged(tags) {
|
|
|
|
this.selectedCategories = tags;
|
|
|
|
},
|
|
|
|
|
2020-06-29 20:26:58 +02:00
|
|
|
initAction() {
|
|
|
|
const action = this.selectedAction || this.selectedScript;
|
|
|
|
if (!action) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.saveMode = true;
|
|
|
|
this.saveParams.name = action.displayName;
|
|
|
|
this.saveParams.color = action.color;
|
|
|
|
this.saveParams.iconClass = action.iconClass;
|
2020-07-04 00:53:14 +02:00
|
|
|
this.selectedCategories = action.categories.map(cat => (typeof cat === 'string' ? { text: cat } : cat));
|
2020-06-29 20:26:58 +02:00
|
|
|
this.selectedHosts = action.hosts;
|
|
|
|
|
|
|
|
if (this.selectedAction) {
|
|
|
|
this.actionMode = 'request';
|
|
|
|
this.action.name = action.name;
|
|
|
|
this.action.defaultArgs = Object.entries(action.args).reduce((obj, [name, value]) => {
|
|
|
|
obj[name] = { value: value };
|
|
|
|
return obj;
|
|
|
|
}, {});
|
|
|
|
} else {
|
|
|
|
this.actionMode = 'script';
|
|
|
|
this.script = action.script.toString();
|
|
|
|
}
|
|
|
|
},
|
2020-06-13 17:28:50 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
created() {
|
|
|
|
this.clearAction();
|
2020-06-17 00:45:33 +02:00
|
|
|
this.loadHosts();
|
2020-06-14 02:34:35 +02:00
|
|
|
this.loadPlugins();
|
2020-06-22 01:09:02 +02:00
|
|
|
this.loadActions();
|
2020-06-29 20:26:58 +02:00
|
|
|
this.initAction();
|
2020-06-13 17:28:50 +02:00
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2020-06-18 21:27:51 +02:00
|
|
|
.mode-selector {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
margin: 1em 0;
|
|
|
|
|
|
|
|
.buttons {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
margin-left: 1em;
|
|
|
|
|
|
|
|
input[type='radio'] {
|
|
|
|
margin-left: 1em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-14 02:34:35 +02:00
|
|
|
.help {
|
|
|
|
margin-bottom: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-head {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
.action-name {
|
|
|
|
width: 20em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-doc {
|
|
|
|
width: 40em;
|
|
|
|
margin: 0.5em auto auto 1em;
|
|
|
|
white-space: pre;
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
|
border-radius: 1em;
|
|
|
|
padding: 1em;
|
|
|
|
max-height: 10em;
|
|
|
|
overflow: auto;
|
|
|
|
background: rgba(250, 255, 240, 0.5);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-13 17:28:50 +02:00
|
|
|
form {
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
.row {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
margin-bottom: 0.5em;
|
|
|
|
padding-bottom: 0.5em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.label {
|
|
|
|
width: 30%;
|
|
|
|
input[type='text'] {
|
|
|
|
width: 90%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.value {
|
|
|
|
width: 70%;
|
|
|
|
input[type='text'] {
|
|
|
|
width: 80%;
|
|
|
|
}
|
|
|
|
|
|
|
|
button {
|
|
|
|
background: white;
|
|
|
|
padding: 0.25em 1.5em;
|
|
|
|
margin-left: 0.5em;
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
|
|
border-radius: 1em;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
opacity: 0.8;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
input {
|
|
|
|
display: inline-flex !important;
|
|
|
|
margin-bottom: 0 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
[type='submit'] {
|
|
|
|
position: absolute;
|
|
|
|
right: 0.9em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-15 01:03:09 +02:00
|
|
|
.save-form {
|
|
|
|
margin-top: 2em;
|
|
|
|
|
|
|
|
input[type='text'] {
|
|
|
|
width: 60%;
|
|
|
|
min-width: 20em;
|
|
|
|
max-width: 35em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-17 00:45:33 +02:00
|
|
|
.multiple-host-selector {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: flex-start !important;
|
|
|
|
margin-top: 2em;
|
2020-06-13 17:28:50 +02:00
|
|
|
|
2020-06-17 00:45:33 +02:00
|
|
|
.desc {
|
|
|
|
margin-bottom: 0.75em;
|
2020-06-13 17:28:50 +02:00
|
|
|
}
|
|
|
|
}
|
2020-06-27 12:05:16 +02:00
|
|
|
|
|
|
|
.icon-preview {
|
|
|
|
font-size: 2em;
|
|
|
|
margin-left: 0.2em;
|
|
|
|
}
|
2020-06-13 17:28:50 +02:00
|
|
|
</style>
|
|
|
|
|
|
|
|
<!-- vim:sw=2:ts=2:et: -->
|