Merge branch 'refactor-task-submitter' into 'v3'

Refactor task submitter

See merge request openflexure/openflexure-microscope-server!168
This commit is contained in:
Richard Bowman 2024-01-10 20:49:10 +00:00
commit b6b1fd06bf
5 changed files with 383 additions and 280 deletions

View file

@ -0,0 +1,61 @@
<template>
<div ref="logContainer" class="log-container">
<div v-if="log">
<div v-for="(item, index) in log" :key="`log_entry_${index}`">
{{ item.message }}
</div>
</div>
<div v-if="taskStatus == 'error'" class="uk-alert uk-alert-danger">
The task failed due to an error. There may be more information in the log.
</div>
<div v-if="taskStatus == 'cancelled'" class="uk-alert uk-alert-warning">
The task was cancelled.
</div>
<div v-if="taskStatus == 'completed'" class="uk-alert uk-alert-success">
The task completed successfully.
</div>
</div>
</template>
<script>
export default {
name: "ActionLogDisplay",
props: {
taskStatus: {
type: String,
required: true
},
log: {
type: Array,
required: true
}
},
watch: {
log: function() {
this.scrollToBottom();
},
taskStatus: function() {
this.scrollToBottom();
}
},
methods: {
scrollToBottom() {
this.$nextTick(function() {
let viewer = this.$refs.logContainer;
viewer.scrollTop = viewer.scrollHeight;
});
}
}
};
</script>
<style scoped>
.log-container {
position: relative;
overflow-y: auto;
overflow-x: auto;
}
</style>

View file

@ -0,0 +1,161 @@
<template>
<div class="progress uk-margin-small">
<div v-if="indeterminateProgressBar" class="indeterminate"></div>
<div v-else class="determinate" :style="barWidthFromProgress"></div>
</div>
</template>
<script>
export default {
name: "ActionProgressBar",
props: {
progress: {
type: Number,
required: false,
default: null
},
taskStatus: {
type: String,
required: true
}
},
computed: {
barWidthFromProgress: function() {
var progress = this.progress <= 100 ? this.progress : 100;
var styleString = `width: ${progress}%`;
return styleString;
},
indeterminateProgressBar: function() {
if (this.taskStatus == "pending") return true;
if ((this.taskStatus == "running") & !this.progress) {
return true;
}
return false;
}
}
};
</script>
<style lang="less" scoped>
@import "../../assets/less/theme.less";
.progress {
position: relative;
height: 5px;
display: block;
width: 100%;
background-color: rgba(180, 180, 180, 0.15);
border-radius: 2px;
background-clip: padding-box;
margin: 0.5rem 0 1rem 0;
overflow: hidden;
}
.progress .determinate {
position: absolute;
background-color: inherit;
top: 0;
bottom: 0;
transition: width 0.3s linear;
}
.progress .indeterminate,
.progress .determinate {
background-color: @global-primary-background;
}
.hook-inverse() {
.progress .indeterminate,
.progress .determinate {
background-color: @inverse-primary-muted-color;
}
}
.progress .indeterminate:before {
content: "";
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
infinite;
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress .indeterminate:after {
content: "";
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
infinite;
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s;
}
@-webkit-keyframes indeterminate {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@keyframes indeterminate {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@-webkit-keyframes indeterminate-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
</style>

View file

@ -4,30 +4,7 @@
class="uk-margin-remove uk-padding-remove"
>
<div v-if="taskStarted" ref="isPollingElement">
<div class="progress uk-margin-small">
<div
v-if="progress & (taskStatus == 'running')"
class="determinate"
:style="barWidthFromProgress"
></div>
<div
v-else-if="taskStatus == 'cancelled'"
class="determinate"
:style="barWidthFromProgress"
></div>
<div
v-else-if="taskStatus == 'completed'"
class="determinate"
style="width:100%"
></div>
<div
v-else-if="taskStatus == 'error'"
class="determinate"
style="width:0%"
></div>
<div v-else class="indeterminate"></div>
</div>
<action-progress-bar :progress="progress" :task-status="taskStatus" />
<button
v-if="canTerminate && taskRunning"
type="button"
@ -56,33 +33,18 @@
class=""
uk-modal="bg-close: false; esc-close: false; stack: true;"
>
<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
<div
id="status-modal"
class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical"
>
<h2>{{ submitLabel }}</h2>
<div id="log-container" ref="logContainer">
<div v-for="(item, index) in log" :key="`log_entry_${index}`">
{{ item.message }}
</div>
<div v-if="taskStatus == 'error'" class="uk-alert-danger">
The task failed due to an error. There may be more information in
the log.
</div>
<div v-if="taskStatus == 'cancelled'" class="uk-alert-warning">
The task was cancelled.
</div>
<div v-if="taskStatus == 'completed'" class="uk-alert-success">
The task completed successfully.
</div>
</div>
<action-log-display :log="log" :task-status="taskStatus" />
<div id="progress-and-cancel-row">
<div class="stretchy">
<div class="progress uk-margin-small">
<div v-if="indeterminateProgressBar" class="indeterminate"></div>
<div
v-else
class="determinate"
:style="barWidthFromProgress"
></div>
</div>
<action-progress-bar
:progress="progress"
:task-status="taskStatus"
/>
</div>
<button
@ -110,9 +72,12 @@
<script>
import axios from "axios";
import UIkit from "uikit";
import actionProgressBar from "./actionProgressBar.vue";
import ActionLogDisplay from "./actionLogDisplay.vue";
export default {
name: "TaskSubmitter",
components: { actionProgressBar, ActionLogDisplay },
props: {
submitUrl: {
@ -177,27 +142,21 @@ export default {
};
},
computed: {
barWidthFromProgress: function() {
var progress = this.progress <= 100 ? this.progress : 100;
var styleString = `width: ${progress}%`;
return styleString;
},
indeterminateProgressBar: function() {
if (this.taskStatus == "pending") return true;
if ((this.taskStatus == "running") & !this.progress) {
return true;
}
return false;
}
},
watch: {
log: function() {
this.$nextTick(function() {
let viewer = this.$refs.logContainer;
viewer.scrollTop = viewer.scrollHeight;
});
progress(newval) {
this.$emit("update:progress", newval);
},
taskStarted(newval) {
this.$emit("update:taskStarted", newval);
},
taskRunning(newval) {
this.$emit("update:taskRunning", newval);
},
log(newval) {
this.$emit("update:log", newval);
},
taskStatus(newval) {
this.$emit("update:taskStatus", newval);
}
},
@ -235,7 +194,7 @@ export default {
this.$emit("taskStarted");
this.startPolling(
task.id,
task.links.find(t => t.rel == self).href
task.links.find(t => t.rel == "self").href
);
}
}
@ -352,6 +311,7 @@ export default {
},
terminateTask: function() {
console.log(`deleting task at ${this.taskUrl}`);
axios.delete(this.taskUrl);
}
}
@ -361,13 +321,6 @@ export default {
<style lang="less" scoped>
@import "../../assets/less/theme.less";
#log-container {
position: relative;
height: 6em;
overflow-y: auto;
overflow-x: auto;
}
#progress-and-cancel-row {
display: flex;
flex-flow: row wrap;
@ -387,121 +340,8 @@ export default {
margin-left: 5px;
margin-right: 5px;
}
.progress {
position: relative;
height: 5px;
display: block;
width: 100%;
background-color: rgba(180, 180, 180, 0.15);
border-radius: 2px;
background-clip: padding-box;
margin: 0.5rem 0 1rem 0;
overflow: hidden;
}
.progress .determinate {
position: absolute;
background-color: inherit;
top: 0;
bottom: 0;
transition: width 0.3s linear;
}
.progress .indeterminate,
.progress .determinate {
background-color: @global-primary-background;
}
.hook-inverse() {
.progress .indeterminate,
.progress .determinate {
background-color: @inverse-primary-muted-color;
}
}
.progress .indeterminate:before {
content: "";
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
infinite;
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress .indeterminate:after {
content: "";
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
infinite;
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s;
}
@-webkit-keyframes indeterminate {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@keyframes indeterminate {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@-webkit-keyframes indeterminate-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
#status-modal .log-container {
height: 10em;
}
</style>

View file

@ -1,83 +0,0 @@
<template>
<div class="uk-padding-small">
<div v-show="!backendOK" class="uk-alert-danger">
No scan back-end found.
</div>
<div v-show="backendOK">
<ul uk-accordion="multiple: true">
<li>
<a class="uk-accordion-title" href="#">Configure</a>
<div class="uk-accordion-content">
<div class="uk-margin">
<propertyControl
thing-name="smart_scan"
property-name="max_range"
label="Maximum Distance (steps)"
/>
<div class="uk-margin">
<propertyControl
thing-name="smart_scan"
property-name="autofocus_dz"
label="Autofocus range (steps)"
/>
</div>
<div class="uk-margin">
<propertyControl
thing-name="smart_scan"
property-name="overlap"
label="Image overlap (0-1)"
/>
</div>
</div>
</div>
</li>
</ul>
<div class="uk-margin">
<taskSubmitter
:submit-url="smartScanUri"
:submit-data="{ sample_check: true }"
submit-label="Start smart scan"
:can-terminate="true"
:modal-progress="true"
/>
</div>
<div class="uk-margin">
<taskSubmitter
:submit-url="smartScanUri"
:submit-data="{ sample_check: false }"
submit-label="Start manual scan"
:can-terminate="true"
:modal-progress="true"
/>
</div>
</div>
</div>
</template>
<script>
import taskSubmitter from "../../genericComponents/taskSubmitter";
import propertyControl from "../../labThingsComponents/propertyControl.vue";
export default {
components: {
taskSubmitter,
propertyControl
},
computed: {
backendOK() {
return this.thingAvailable("smart_scan");
},
smartScanUri() {
return this.thingActionUrl("smart_scan", "sample_scan");
}
},
methods: {
onScanError: function(error) {
this.scanRunning = false;
this.modalError(error);
}
}
};
</script>

View file

@ -1,8 +1,88 @@
<template>
<div v-if="!backendOK" class="uk-alert-danger">
No scan back-end found.
</div>
<!-- Grid managing tab content -->
<div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
<div class="control-component">
<paneSlideScan />
<div v-else uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
<div class="control-component uk-padding-small">
<div v-show="!scanning">
<ul uk-accordion="multiple: true">
<li>
<a class="uk-accordion-title" href="#">Configure</a>
<div class="uk-accordion-content">
<div class="uk-margin">
<propertyControl
thing-name="smart_scan"
property-name="max_range"
label="Maximum Distance (steps)"
/>
<div class="uk-margin">
<propertyControl
thing-name="smart_scan"
property-name="autofocus_dz"
label="Autofocus range (steps)"
/>
</div>
<div class="uk-margin">
<propertyControl
thing-name="smart_scan"
property-name="overlap"
label="Image overlap (0-1)"
/>
</div>
</div>
</div>
</li>
</ul>
<div class="uk-margin">
<taskSubmitter
ref="smartScanTaskSubmitter"
:submit-url="smartScanUri"
submit-label="Start smart scan"
:can-terminate="true"
:submit-data="{ sample_check: true }"
@taskStarted="scanning = true"
@update:taskStatus="taskStatus = $event"
@update:progress="progress = $event"
@update:log="log = $event"
/>
</div>
<div class="uk-margin">
<taskSubmitter
:submit-url="smartScanUri"
submit-label="Start manual scan"
:can-terminate="true"
:submit-data="{ sample_check: false }"
@update:taskStatus="taskStatus = $event"
@update:progress="progress = $event"
@update:log="log = $event"
/>
</div>
</div>
<div v-show="scanning">
<action-log-display
id="log-display"
:log="log"
:task-status="taskStatus"
/>
<action-progress-bar :progress="progress" :task-status="taskStatus" />
<button
v-if="cancellable"
type="button"
class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1"
@click="$refs.smartScanTaskSubmitter.terminateTask()"
>
Cancel
</button>
<button
v-if="!cancellable"
type="button"
class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1"
@click="scanning = false"
>
Close
</button>
</div>
</div>
<div class="view-component uk-width-expand">
<streamDisplay />
@ -11,15 +91,59 @@
</template>
<script>
import paneSlideScan from "./slideScanComponents/paneSlideScan";
import streamDisplay from "./streamContent.vue";
import taskSubmitter from "../genericComponents/taskSubmitter";
import propertyControl from "../labThingsComponents/propertyControl.vue";
import actionLogDisplay from "../genericComponents/actionLogDisplay.vue";
import actionProgressBar from "../genericComponents/actionProgressBar.vue";
export default {
name: "SlideScanContent",
components: {
paneSlideScan,
streamDisplay
streamDisplay,
taskSubmitter,
propertyControl,
actionLogDisplay,
actionProgressBar
},
data() {
return {
lastScanName: null,
scanning: false,
taskStatus: "pending",
progress: null,
log: []
};
},
computed: {
backendOK() {
return this.thingAvailable("smart_scan");
},
smartScanUri() {
return this.thingActionUrl("smart_scan", "sample_scan");
},
cancellable() {
return (this.taskStatus == "running") | (this.taskStatus == "pending");
}
},
methods: {
onScanError: function(error) {
this.scanRunning = false;
this.modalError(error);
}
}
};
</script>
<style scoped>
#log-display {
height: 20em;
}
.control-component {
width: 33%;
}
</style>