Added execute tab to webpanel
This commit is contained in:
Fabio Manganiello
parent
f378fa8832
commit
be5c5d365c
17 changed files with 866 additions and 10 deletions
|
|
@ -67,6 +67,7 @@ def index():
|
|||
websocket_port=get_websocket_port(),
|
||||
template_folder=template_folder, static_folder=static_folder,
|
||||
plugins=Config.get_plugins(), backends=Config.get_backends(),
|
||||
procedures=Config.get_procedures(),
|
||||
has_ssl=http_conf.get('ssl_cert') is not None)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -33,4 +33,5 @@ select:-moz-focusring {
|
|||
@import 'common/elements/slider';
|
||||
@import 'common/elements/text';
|
||||
@import 'common/elements/dropdown';
|
||||
@import 'common/elements/autocomplete';
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
.autocomplete {
|
||||
/*the container must be positioned relative:*/
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.autocomplete-items {
|
||||
position: absolute;
|
||||
border: $default-border-2;
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
z-index: 99;
|
||||
/*position the autocomplete items to be the same width as the container:*/
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.autocomplete-items div {
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
border-bottom: $default-border-2;
|
||||
background-color: $autocomplete-bg;
|
||||
}
|
||||
|
||||
.autocomplete-items div:hover {
|
||||
background-color: $hover-bg;
|
||||
}
|
||||
|
||||
.autocomplete-active {
|
||||
background-color: $selected-bg !important;
|
||||
}
|
||||
|
||||
|
|
@ -7,6 +7,6 @@ button[disabled],
|
|||
|
||||
.btn-primary {
|
||||
background-color: #d8ffe0 !important;
|
||||
border: 1px solid #98efb0 !important;
|
||||
border: 1px solid #c2f0cf !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -107,3 +107,6 @@ $modal-header-bg: #f0f0f0 !default;
|
|||
$modal-header-border: 1px solid #ccc !default;
|
||||
$modal-body-bg: white !default;
|
||||
|
||||
//// Autocomplete element
|
||||
$autocomplete-bg: white !default;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,173 @@
|
|||
@import 'common/vars';
|
||||
@import 'common/layout';
|
||||
@import 'webpanel/plugins/execute/vars';
|
||||
|
||||
.execute-container {
|
||||
height: 99%;
|
||||
color: $default-fg-2;
|
||||
font-weight: 400;
|
||||
//line-height: 3.8rem;
|
||||
//letter-spacing: .1rem;
|
||||
border-bottom: $default-border-2;
|
||||
border-radius: 0 0 1em 1em;
|
||||
|
||||
.title {
|
||||
background: $title-bg;
|
||||
padding: .2em;
|
||||
border: $title-border;
|
||||
box-shadow: $title-shadow;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.request-type-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
margin: 1em 0 0 1em;
|
||||
|
||||
label {
|
||||
margin: 0 1em 0 .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.request {
|
||||
margin: 0 .5em;
|
||||
|
||||
form {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
width: 80%;
|
||||
max-width: 60em;
|
||||
}
|
||||
|
||||
.action-name {
|
||||
box-shadow: $action-name-shadow;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[type=submit] {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
margin-top: .5em;
|
||||
margin-bottom: 1.5em;
|
||||
padding-top: .5em;
|
||||
}
|
||||
|
||||
.params {
|
||||
margin-right: 1.5em;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
|
||||
.param {
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
.action-param-value {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.add-param {
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
background: $extra-params-btn-bg;
|
||||
border: $title-border;
|
||||
}
|
||||
}
|
||||
|
||||
.extra-param {
|
||||
display: flex;
|
||||
margin-bottom: .5em;
|
||||
|
||||
.action-extra-param-del {
|
||||
border: 0;
|
||||
text-align: right;
|
||||
padding: 0 .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.output-container {
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
|
||||
.response,
|
||||
.error,
|
||||
.doc {
|
||||
padding: .5em .5em 0 .5em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.response {
|
||||
background: $response-bg;
|
||||
border: $response-border;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: $error-bg;
|
||||
border: $error-border;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: $doc-bg;
|
||||
border: $doc-border;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 80%;
|
||||
max-width: 60em;
|
||||
height: 10em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.raw-request {
|
||||
.first-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.procedures-container {
|
||||
.procedure {
|
||||
border-bottom: $default-border-2;
|
||||
padding: 1.5em .5em;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $selected-bg;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
margin-bottom: 0 !important;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
button {
|
||||
background: $procedure-submit-btn-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
$title-bg: #eee;
|
||||
$title-border: 1px solid #ddd;
|
||||
$title-shadow: 0 3px 3px 0 rgba(187,187,187,0.75);
|
||||
$action-name-shadow: 1px 1px 1px 1px #ddd;
|
||||
$extra-params-btn-bg: #eee;
|
||||
$response-bg: #edfff2;
|
||||
$response-border: 1px dashed #98ff98;
|
||||
$error-bg: #ffbcbc;
|
||||
$error-border: 1px dashed #ff5353;
|
||||
$doc-bg: #e8feff;
|
||||
$doc-border: 1px dashed #84f9ff;
|
||||
$procedure-submit-btn-bg: #ebffeb;
|
||||
|
||||
|
||||
110
platypush/backend/http/static/js/autocomplete.js
Normal file
110
platypush/backend/http/static/js/autocomplete.js
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
function autocomplete(inp, arr, listener) {
|
||||
/*the autocomplete function takes two arguments,
|
||||
the text field element and an array of possible autocompleted values:*/
|
||||
var currentFocus;
|
||||
/*execute a function when someone writes in the text field:*/
|
||||
inp.addEventListener("input", function(e) {
|
||||
var a, b, i, val = this.value;
|
||||
/*close any already open lists of autocompleted values*/
|
||||
closeAllLists();
|
||||
if (!val) { return false;}
|
||||
currentFocus = -1;
|
||||
/*create a DIV element that will contain the items (values):*/
|
||||
a = document.createElement("DIV");
|
||||
a.setAttribute("id", this.id + "autocomplete-list");
|
||||
a.setAttribute("class", "autocomplete-items");
|
||||
/*append the DIV element as a child of the autocomplete container:*/
|
||||
this.parentNode.appendChild(a);
|
||||
/*for each item in the array...*/
|
||||
for (i = 0; i < arr.length; i++) {
|
||||
/*check if the item starts with the same letters as the text field value:*/
|
||||
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
|
||||
/*create a DIV element for each matching element:*/
|
||||
b = document.createElement("DIV");
|
||||
/*make the matching letters bold:*/
|
||||
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
|
||||
b.innerHTML += arr[i].substr(val.length);
|
||||
/*insert a input field that will hold the current array item's value:*/
|
||||
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
|
||||
/*execute a function when someone clicks on the item value (DIV element):*/
|
||||
b.addEventListener("click", function(e) {
|
||||
/*insert the value for the autocomplete text field:*/
|
||||
inp.value = this.getElementsByTagName("input")[0].value;
|
||||
/*trigger event listener if any:*/
|
||||
if (listener) {
|
||||
listener(e, inp.value);
|
||||
}
|
||||
/*close the list of autocompleted values,
|
||||
(or any other open lists of autocompleted values:*/
|
||||
closeAllLists();
|
||||
});
|
||||
a.appendChild(b);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
inp.addEventListener("keydown", function(e) {
|
||||
if (e.keyCode == 9) {
|
||||
/*Reset the list if tab has been pressed*/
|
||||
closeAllLists();
|
||||
}
|
||||
});
|
||||
|
||||
/*execute a function presses a key on the keyboard:*/
|
||||
inp.addEventListener("keydown", function(e) {
|
||||
var x = document.getElementById(this.id + "autocomplete-list");
|
||||
if (x) x = x.getElementsByTagName("div");
|
||||
if (e.keyCode == 40) {
|
||||
/*If the arrow DOWN key is pressed,
|
||||
increase the currentFocus variable:*/
|
||||
currentFocus++;
|
||||
/*and and make the current item more visible:*/
|
||||
addActive(x);
|
||||
} else if (e.keyCode == 38) { //up
|
||||
/*If the arrow UP key is pressed,
|
||||
decrease the currentFocus variable:*/
|
||||
currentFocus--;
|
||||
/*and and make the current item more visible:*/
|
||||
addActive(x);
|
||||
} else if (e.keyCode == 13) {
|
||||
/*If the ENTER key is pressed, prevent the form from being submitted,*/
|
||||
if (currentFocus > -1 && x && x.length) {
|
||||
e.preventDefault();
|
||||
/*and simulate a click on the "active" item:*/
|
||||
x[currentFocus].click();
|
||||
/*and restore the focus on the input element:*/
|
||||
this.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
function addActive(x) {
|
||||
/*a function to classify an item as "active":*/
|
||||
if (!x) return false;
|
||||
/*start by removing the "active" class on all items:*/
|
||||
removeActive(x);
|
||||
if (currentFocus >= x.length) currentFocus = 0;
|
||||
if (currentFocus < 0) currentFocus = (x.length - 1);
|
||||
/*add class "autocomplete-active":*/
|
||||
x[currentFocus].classList.add("autocomplete-active");
|
||||
}
|
||||
function removeActive(x) {
|
||||
/*a function to remove the "active" class from all autocomplete items:*/
|
||||
for (var i = 0; i < x.length; i++) {
|
||||
x[i].classList.remove("autocomplete-active");
|
||||
}
|
||||
}
|
||||
function closeAllLists(elmnt) {
|
||||
/*close all autocomplete lists in the document,
|
||||
except the one passed as an argument:*/
|
||||
var x = document.getElementsByClassName("autocomplete-items");
|
||||
for (var i = 0; i < x.length; i++) {
|
||||
if (elmnt != x[i] && elmnt != inp) {
|
||||
x[i].parentNode.removeChild(x[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*execute a function when someone clicks in the document:*/
|
||||
document.addEventListener("click", function (e) {
|
||||
closeAllLists(e.target);
|
||||
});
|
||||
}
|
||||
215
platypush/backend/http/static/js/plugins/execute/index.js
Normal file
215
platypush/backend/http/static/js/plugins/execute/index.js
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
Vue.component('execute', {
|
||||
template: '#tmpl-execute',
|
||||
props: ['config'],
|
||||
data: function() {
|
||||
return {
|
||||
loading: false,
|
||||
running: false,
|
||||
structuredInput: true,
|
||||
actionChanged: false,
|
||||
selectedDoc: undefined,
|
||||
selectedProcedure: {
|
||||
name: undefined,
|
||||
args: {},
|
||||
},
|
||||
|
||||
response: undefined,
|
||||
error: undefined,
|
||||
htmlDoc: false,
|
||||
rawRequest: undefined,
|
||||
actions: {},
|
||||
plugins: {},
|
||||
procedures: {},
|
||||
action: {
|
||||
name: undefined,
|
||||
args: {},
|
||||
extraArgs: [],
|
||||
supportsExtraArgs: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
refresh: async function() {
|
||||
this.loading = true;
|
||||
this.procedures = JSON.parse(this.config);
|
||||
this.plugins = await request('inspect.get_all_plugins', {html_doc: true});
|
||||
|
||||
for (const plugin of Object.values(this.plugins)) {
|
||||
if (plugin.html_doc)
|
||||
this.htmlDoc = true;
|
||||
|
||||
for (const action of Object.values(plugin.actions)) {
|
||||
action.name = plugin.name + '.' + action.name;
|
||||
action.supportsExtraArgs = !!action.has_kwargs;
|
||||
delete action.has_kwargs;
|
||||
this.actions[action.name] = action;
|
||||
}
|
||||
}
|
||||
|
||||
const self = this;
|
||||
autocomplete(this.$refs.actionName, Object.keys(this.actions).sort(), (evt, value) => {
|
||||
this.action.name = value;
|
||||
self.updateAction();
|
||||
});
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
updateAction: function() {
|
||||
if (!this.actionChanged || !(this.action.name in this.actions))
|
||||
return;
|
||||
|
||||
this.loading = true;
|
||||
this.action = {
|
||||
...this.actions[this.action.name],
|
||||
args: Object.entries(this.actions[this.action.name].args).reduce((args, entry) => {
|
||||
args[entry[0]] = {
|
||||
...entry[1],
|
||||
value: entry[1].default,
|
||||
};
|
||||
|
||||
return args;
|
||||
}, {}),
|
||||
extraArgs: [],
|
||||
};
|
||||
|
||||
this.selectedDoc = this.action.doc;
|
||||
this.actionChanged = false;
|
||||
this.response = undefined;
|
||||
this.error = undefined;
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
updateProcedure: function(name) {
|
||||
if (event.target.getAttribute('type') === 'submit') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.selectedProcedure.name === name) {
|
||||
this.selectedProcedure = {
|
||||
name: undefined,
|
||||
args: {},
|
||||
};
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!(name in this.procedures)) {
|
||||
console.warn('Procedure not found: ' + name);
|
||||
return;
|
||||
}
|
||||
|
||||
this.selectedProcedure = {
|
||||
name: name,
|
||||
args: this.procedures[name].args.reduce((args, arg) => {
|
||||
args[arg] = undefined;
|
||||
return args;
|
||||
}, {}),
|
||||
};
|
||||
},
|
||||
|
||||
addParameter: function() {
|
||||
this.action.extraArgs.push({
|
||||
name: undefined,
|
||||
value: undefined,
|
||||
})
|
||||
},
|
||||
|
||||
removeParameter: function(i) {
|
||||
this.action.extraArgs.pop(i);
|
||||
},
|
||||
|
||||
selectAttrDoc: function(name) {
|
||||
this.response = undefined;
|
||||
this.error = undefined;
|
||||
this.selectedDoc = this.action.args[name].doc;
|
||||
},
|
||||
|
||||
resetDoc: function() {
|
||||
this.response = undefined;
|
||||
this.error = undefined;
|
||||
this.selectedDoc = this.action.doc;
|
||||
},
|
||||
|
||||
onInputTypeChange: function(structuredInput) {
|
||||
this.structuredInput = structuredInput;
|
||||
this.response = undefined;
|
||||
this.error = undefined;
|
||||
},
|
||||
|
||||
onResponse: function(response) {
|
||||
this.response = '<pre>' + JSON.stringify(response, null, 2) + '</pre>';
|
||||
this.error = undefined;
|
||||
},
|
||||
|
||||
onError: function(error) {
|
||||
this.response = undefined;
|
||||
this.error = '<pre>' + error + '</pre>';
|
||||
},
|
||||
|
||||
onDone: function() {
|
||||
this.running = false;
|
||||
},
|
||||
|
||||
executeAction: function() {
|
||||
if (!this.action.name && !this.rawRequest || this.running)
|
||||
return;
|
||||
|
||||
this.running = true;
|
||||
if (this.structuredInput) {
|
||||
const args = {
|
||||
...Object.entries(this.action.args).reduce((args, param) => {
|
||||
if (param[1].value != null) {
|
||||
let value = param[1].value;
|
||||
try {value = JSON.parse(value);}
|
||||
catch (e) {}
|
||||
args[param[0]] = value;
|
||||
}
|
||||
return args;
|
||||
}, {}),
|
||||
|
||||
...this.action.extraArgs.reduce((args, param) => {
|
||||
let value = args[param.value];
|
||||
try {value = JSON.parse(value);}
|
||||
catch (e) {}
|
||||
|
||||
args[param.name] = value;
|
||||
return args;
|
||||
}, {})
|
||||
};
|
||||
|
||||
request(this.action.name, args).then(this.onResponse).catch(this.onError).finally(this.onDone);
|
||||
} else {
|
||||
execute(JSON.parse(this.rawRequest)).then(this.onResponse).catch(this.onError).finally(this.onDone);
|
||||
}
|
||||
},
|
||||
|
||||
executeProcedure: function(event) {
|
||||
if (!this.selectedProcedure.name || this.running)
|
||||
return;
|
||||
|
||||
event.stopPropagation();
|
||||
this.running = true;
|
||||
const args = {
|
||||
...Object.entries(this.selectedProcedure.args).reduce((args, param) => {
|
||||
if (param[1] != null) {
|
||||
let value = param[1];
|
||||
try {value = JSON.parse(value);}
|
||||
catch (e) {}
|
||||
args[param[0]] = value;
|
||||
}
|
||||
return args;
|
||||
}, {}),
|
||||
};
|
||||
|
||||
request('procedure.' + this.selectedProcedure.name, args)
|
||||
.then(this.onResponse).catch(this.onError).finally(this.onDone);
|
||||
},
|
||||
},
|
||||
|
||||
created: function() {
|
||||
this.refresh();
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
<link rel="stylesheet" href="{{ url_for('static', filename='css/normalize.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='font-awesome/css/all.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/dist/webpanel.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/dist/webpanel/plugins/execute.css') }}">
|
||||
|
||||
<script type="text/javascript">
|
||||
if (!window.config) {
|
||||
|
|
@ -43,12 +44,14 @@
|
|||
<script type="text/javascript" src="{{ url_for('static', filename='js/api.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/events.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/notifications.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/autocomplete.js') }}"></script>
|
||||
|
||||
{% for style in styles.values() %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename=style['_style_file']) }}">
|
||||
{% endfor %}
|
||||
|
||||
{% include 'elements.html' %}
|
||||
{% include 'plugins/execute/index.html' %}
|
||||
|
||||
{% for plugin, conf in templates.items() %}
|
||||
{% with configuration=templates[plugin] %}
|
||||
|
|
@ -56,6 +59,7 @@
|
|||
{% endwith %}
|
||||
{% endfor %}
|
||||
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/plugins/execute/index.js') }}"></script>
|
||||
{% for script in scripts.values() %}
|
||||
<script type="text/javascript" src="{{ url_for('static', filename=script['_script_file']) }}"></script>
|
||||
{% endfor %}
|
||||
|
|
@ -69,6 +73,9 @@
|
|||
|
||||
<main>
|
||||
<div class="plugins-container">
|
||||
<plugin tag="execute" key="execute" :class="{hidden: selectedPlugin != 'execute'}"
|
||||
config="{{ utils.to_json(procedures) }}"></plugin>
|
||||
|
||||
<plugin v-for="(conf, plugin) in {{ utils.to_json(templates) }}"
|
||||
:tag="plugin.replace(/\./g, '-')"
|
||||
:key="plugin"
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
with pluginIcons = {
|
||||
'camera': 'fas fa-camera',
|
||||
'camera.ir.mlx90640': 'fas fa-sun',
|
||||
'execute': 'fas fa-play',
|
||||
'light.hue': 'fa fa-lightbulb',
|
||||
'media.mplayer': 'fa fa-film',
|
||||
'media.mpv': 'fa fa-film',
|
||||
|
|
@ -19,6 +20,12 @@
|
|||
|
||||
<nav>
|
||||
<ul>
|
||||
<li :class="{selected: 'execute' == selectedPlugin}" title="execute">
|
||||
<a href="#execute" @click="selectedPlugin = 'execute'">
|
||||
<i class="{{ pluginIcons['execute'] }}"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{% for plugin in plugins|sort %}
|
||||
<li :class="{selected: '{{ plugin }}' == selectedPlugin}" title="{{ plugin }}">
|
||||
<a href="#{{ plugin }}" @click="selectedPlugin = '{{ plugin }}'">
|
||||
|
|
|
|||
112
platypush/backend/http/templates/plugins/execute/index.html
Normal file
112
platypush/backend/http/templates/plugins/execute/index.html
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
<script type="text/x-template" id="tmpl-execute">
|
||||
<div class="row plugin execute-container">
|
||||
<div class="command-container">
|
||||
<div class="title">Execute Action</div>
|
||||
<form ref="actionForm" autocomplete="off" @submit.prevent="executeAction">
|
||||
<div class="request-type-container">
|
||||
<input type="radio" id="action-structured-input"
|
||||
:checked="structuredInput" @change="onInputTypeChange(true)">
|
||||
<label for="action-structured-input">Structured request</label>
|
||||
<input type="radio" id="action-raw-input"
|
||||
:checked="!structuredInput" @change="onInputTypeChange(false)">
|
||||
<label for="action-raw-input">Raw request</label>
|
||||
</div>
|
||||
|
||||
<div class="request structured-request" :class="structuredInput ? '' : 'hidden'">
|
||||
<div class="autocomplete">
|
||||
<input ref="actionName" type="text" class="action-name"
|
||||
placeholder="Action Name" :disabled="loading" v-model="action.name"
|
||||
@change="actionChanged=true" @blur="updateAction">
|
||||
</div>
|
||||
<button type="submit" class="btn-primary" :disabled="running" title="Run">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
|
||||
<div class="options" v-if="action.name in actions">
|
||||
<div class="params col-6" ref="params"
|
||||
v-if="Object.keys(action.args).length || action.supportsExtraArgs">
|
||||
<div class="param" :key="name" v-for="(param, name) in action.args">
|
||||
<input type="text" class="action-param-value"
|
||||
:placeholder="name" v-model="action.args[name].value"
|
||||
@focus="selectAttrDoc(name)"
|
||||
@blur="resetDoc">
|
||||
</div>
|
||||
|
||||
<div class="extra-params" ref="extraParams" v-if="Object.keys(action.extraArgs).length">
|
||||
<div class="param extra-param" :key="i" v-for="(param, i) in action.extraArgs">
|
||||
<input type="text" class="action-extra-param-name col-5"
|
||||
placeholder="Name" v-model="action.extraArgs[i].name">
|
||||
<input type="text" class="action-extra-param-value col-6"
|
||||
placeholder="Value" v-model="action.extraArgs[i].value">
|
||||
<button type="button" class="action-extra-param-del col-1" title="Remove parameter"
|
||||
@click="removeParameter(i)">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="add-param" v-if="action.supportsExtraArgs">
|
||||
<button type="button" title="Add a parameter" @click="addParameter">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="output-container"
|
||||
:class="Object.keys(action.args).length || action.supportsExtraArgs ? 'col-6' : 'col-12'">
|
||||
<div class="response" v-html="response" v-if="response != null"></div>
|
||||
<div class="error" v-html="error" v-else-if="error != null"></div>
|
||||
<div class="doc-container" v-else-if="selectedDoc">
|
||||
<div class="doc" v-html="selectedDoc" v-if="htmlDoc"></div>
|
||||
<div class="doc" v-text="selectedDoc" v-else></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="request raw-request" :class="structuredInput ? 'hidden' : ''">
|
||||
<div class="first-row">
|
||||
<textarea v-model="rawRequest" placeholder="Raw JSON request"></textarea>
|
||||
<button type="submit" :disabled="running" class="btn-primary" title="Run">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="output-container" v-if="response != null || error != null">
|
||||
<div class="response" v-html="response" v-if="response != null"></div>
|
||||
<div class="error" v-html="error" v-else="error != null"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="procedures-container">
|
||||
<div class="title">Execute Procedure</div>
|
||||
<div class="procedure" :class="selectedProcedure.name === name ? 'selected' : ''"
|
||||
v-for="(procedure, name) in procedures" :key="name" @click="updateProcedure(name)">
|
||||
<form ref="procedureForm" autocomplete="off" @submit.prevent="executeProcedure">
|
||||
<div class="head">
|
||||
<div class="name col-no-margin-11" v-text="name"></div>
|
||||
<div class="btn-container col-no-margin-1">
|
||||
<button type="submit" class="btn-default" :disabled="running" title="Run"
|
||||
v-if="selectedProcedure.name === name">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="params" v-if="selectedProcedure.name === name">
|
||||
<div class="param"
|
||||
v-for="(argvalue, argname) in selectedProcedure.args"
|
||||
:key="argname">
|
||||
<input type="text" class="action-param-value" @click="$event.stopPropagation()"
|
||||
:placeholder="argname" v-model="selectedProcedure.args[argname]">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import datetime
|
||||
import logging
|
||||
import os
|
||||
import re
|
||||
import socket
|
||||
import sys
|
||||
import yaml
|
||||
|
|
@ -157,7 +158,6 @@ class Config(object):
|
|||
|
||||
return config
|
||||
|
||||
|
||||
def _init_components(self):
|
||||
for key in self._config.keys():
|
||||
if key.startswith('backend.'):
|
||||
|
|
@ -173,9 +173,21 @@ class Config(object):
|
|||
tokens = key.split('.')
|
||||
_async = True if len(tokens) > 2 and tokens[1] == 'async' else False
|
||||
procedure_name = '.'.join(tokens[2:] if len(tokens) > 2 else tokens[1:])
|
||||
args = []
|
||||
m = re.match(r'^([^(]+)\(([^)]+)\)\s*', procedure_name)
|
||||
|
||||
if m:
|
||||
procedure_name = m.group(1).strip()
|
||||
args = [
|
||||
arg.strip()
|
||||
for arg in m.group(2).strip().split(',')
|
||||
if arg.strip()
|
||||
]
|
||||
|
||||
self.procedures[procedure_name] = {
|
||||
'_async': _async,
|
||||
'actions': self._config[key]
|
||||
'actions': self._config[key],
|
||||
'args': args,
|
||||
}
|
||||
elif not self._is_special_token(key):
|
||||
self.plugins[key] = self._config[key]
|
||||
|
|
|
|||
|
|
@ -209,7 +209,10 @@ class Request(Message):
|
|||
args = self.expand_value_from_context(args, **context)
|
||||
response = plugin.run(method=method_name, **args)
|
||||
|
||||
if response and response.is_error():
|
||||
if not response:
|
||||
logger.warning('Received null response from action {}'.format(action))
|
||||
else:
|
||||
if response.is_error():
|
||||
logger.warning(('Response processed with errors from ' +
|
||||
'action {}: {}').format(
|
||||
action, str(response)))
|
||||
|
|
|
|||
160
platypush/plugins/inspect.py
Normal file
160
platypush/plugins/inspect.py
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
import importlib
|
||||
import inspect
|
||||
import json
|
||||
import pkgutil
|
||||
import re
|
||||
import threading
|
||||
|
||||
import platypush.plugins
|
||||
|
||||
from platypush.plugins import Plugin, action
|
||||
from platypush.utils import get_decorators
|
||||
|
||||
|
||||
# noinspection PyTypeChecker
|
||||
class Model:
|
||||
def __str__(self):
|
||||
return json.dumps(dict(self), indent=2, sort_keys=True)
|
||||
|
||||
def __repr__(self):
|
||||
return json.dumps(dict(self))
|
||||
|
||||
@staticmethod
|
||||
def to_html(doc):
|
||||
try:
|
||||
import docutils.core
|
||||
except ImportError:
|
||||
# docutils not found
|
||||
return doc
|
||||
|
||||
return docutils.core.publish_parts(doc, writer_name='html')['html_body']
|
||||
|
||||
|
||||
class PluginModel(Model):
|
||||
def __init__(self, plugin, prefix='', html_doc: bool = False):
|
||||
self.name = plugin.__module__[len(prefix):]
|
||||
self.html_doc = html_doc
|
||||
self.doc = self.to_html(plugin.__doc__) if html_doc and plugin.__doc__ else plugin.__doc__
|
||||
self.actions = {action_name: ActionModel(getattr(plugin, action_name), html_doc=html_doc)
|
||||
for action_name in get_decorators(plugin, climb_class_hierarchy=True).get('action', [])}
|
||||
|
||||
def __iter__(self):
|
||||
for attr in ['name', 'actions', 'doc', 'html_doc']:
|
||||
if attr == 'actions':
|
||||
# noinspection PyShadowingNames
|
||||
yield attr, {name: dict(action) for name, action in self.actions.items()},
|
||||
else:
|
||||
yield attr, getattr(self, attr)
|
||||
|
||||
|
||||
class ActionModel(Model):
|
||||
# noinspection PyShadowingNames
|
||||
def __init__(self, action, html_doc: bool = False):
|
||||
self.name = action.__name__
|
||||
self.doc, argsdoc = self._parse_docstring(action.__doc__, html_doc=html_doc)
|
||||
self.args = {}
|
||||
self.has_kwargs = False
|
||||
|
||||
for arg in list(inspect.signature(action).parameters.values())[1:]:
|
||||
if arg.kind == arg.VAR_KEYWORD:
|
||||
self.has_kwargs = True
|
||||
continue
|
||||
|
||||
self.args[arg.name] = {
|
||||
'default': arg.default if not issubclass(arg.default.__class__, type) else None,
|
||||
'doc': argsdoc.get(arg.name)
|
||||
}
|
||||
|
||||
@classmethod
|
||||
def _parse_docstring(cls, docstring: str, html_doc: bool = False):
|
||||
new_docstring = ''
|
||||
params = {}
|
||||
cur_param = None
|
||||
cur_param_docstring = ''
|
||||
|
||||
if not docstring:
|
||||
return None, {}
|
||||
|
||||
for line in docstring.split('\n'):
|
||||
m = re.match(r'^\s*:param ([^:]+):\s*(.*)', line)
|
||||
if m:
|
||||
if cur_param:
|
||||
params[cur_param] = cls.to_html(cur_param_docstring) if html_doc else cur_param_docstring
|
||||
|
||||
cur_param = m.group(1)
|
||||
cur_param_docstring = m.group(2)
|
||||
elif re.match(r'^\s*:[^:]+:\s*.*', line):
|
||||
continue
|
||||
else:
|
||||
if cur_param:
|
||||
if not line.strip():
|
||||
params[cur_param] = cls.to_html(cur_param_docstring) if html_doc else cur_param_docstring
|
||||
cur_param = None
|
||||
cur_param_docstring = ''
|
||||
else:
|
||||
cur_param_docstring += '\n' + line.strip()
|
||||
else:
|
||||
new_docstring += line.rstrip() + '\n'
|
||||
|
||||
if cur_param:
|
||||
params[cur_param] = cls.to_html(cur_param_docstring) if html_doc else cur_param_docstring
|
||||
|
||||
return new_docstring.strip() if not html_doc else cls.to_html(new_docstring), params
|
||||
|
||||
def __iter__(self):
|
||||
for attr in ['name', 'args', 'doc', 'has_kwargs']:
|
||||
yield attr, getattr(self, attr)
|
||||
|
||||
|
||||
class InspectPlugin(Plugin):
|
||||
"""
|
||||
This plugin can be used to inspect platypush plugins and backends
|
||||
|
||||
Requires:
|
||||
|
||||
* **docutils** (``pip install docutils``) - optional, for HTML doc generation
|
||||
|
||||
"""
|
||||
|
||||
def __init__(self, **kwargs):
|
||||
super().__init__(**kwargs)
|
||||
self._plugins = {}
|
||||
self._plugins_lock = threading.RLock()
|
||||
self._html_doc = False
|
||||
|
||||
def _init_plugins(self):
|
||||
package = platypush.plugins
|
||||
prefix = package.__name__ + '.'
|
||||
|
||||
for _, modname, _ in pkgutil.walk_packages(path=package.__path__,
|
||||
prefix=prefix,
|
||||
onerror=lambda x: None):
|
||||
# noinspection PyBroadException
|
||||
try:
|
||||
module = importlib.import_module(modname)
|
||||
except:
|
||||
continue
|
||||
|
||||
for _, obj in inspect.getmembers(module):
|
||||
if inspect.isclass(obj) and issubclass(obj, Plugin):
|
||||
model = PluginModel(plugin=obj, prefix=prefix, html_doc=self._html_doc)
|
||||
if model.name:
|
||||
self._plugins[model.name] = model
|
||||
|
||||
@action
|
||||
def get_all_plugins(self, html_doc: bool = None):
|
||||
"""
|
||||
:param html_doc: If True then the docstring will be parsed into HTML (default: False)
|
||||
"""
|
||||
with self._plugins_lock:
|
||||
if not self._plugins or (html_doc is not None and html_doc != self._html_doc):
|
||||
self._html_doc = html_doc
|
||||
self._init_plugins()
|
||||
|
||||
return json.dumps({
|
||||
name: dict(plugin)
|
||||
for name, plugin in self._plugins.items()
|
||||
})
|
||||
|
||||
|
||||
# vim:sw=4:ts=4:et:
|
||||
|
|
@ -181,3 +181,6 @@ croniter
|
|||
|
||||
# Support for clipboard manipulation
|
||||
# pyperclip
|
||||
|
||||
# Support for RST->HTML docstring conversion
|
||||
# docutils
|
||||
|
|
|
|||
2
setup.py
2
setup.py
|
|
@ -246,6 +246,8 @@ setup(
|
|||
'mlx90640': ['Pillow'],
|
||||
# Support for machine learning and CV plugin
|
||||
'cv': ['cv2', 'numpy'],
|
||||
# Support for the generation of HTML documentation from docstring
|
||||
'htmldoc': ['docutils'],
|
||||
},
|
||||
)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue