Improve task manager etc

This commit is contained in:
syuilo
2020-11-01 22:09:16 +09:00
parent 21b6e23e98
commit 7060625adf
7 changed files with 108 additions and 23 deletions

View File

@ -169,15 +169,15 @@ export default defineComponent({
font-size: 32px;
&.success {
color: var(--accent);
color: var(--success);
}
&.error {
color: #ec4137;
color: var(--error);
}
&.warning {
color: #ecb637;
color: var(--warn);
}
> * {

View File

@ -7,7 +7,7 @@
<MkTab v-model:value="tab" :items="[{ label: 'Windows', value: 'windows', }, { label: 'Stream', value: 'stream', }, { label: 'Stream (Pool)', value: 'streamPool', }, { label: 'API', value: 'api', }]" style="border-bottom: solid 1px var(--divider);"/>
<div class="content">
<div v-if="tab === 'windows'" class="windows">
<div v-if="tab === 'windows'" class="windows" v-follow>
<div class="header">
<div>#ID</div>
<div>Component</div>
@ -19,7 +19,7 @@
<div><button class="_textButton" @click="killPopup(p)">Kill</button></div>
</div>
</div>
<div v-if="tab === 'stream'" class="stream">
<div v-if="tab === 'stream'" class="stream" v-follow>
<div class="header">
<div>#ID</div>
<div>Ch</div>
@ -36,7 +36,7 @@
<div>{{ c.out }}</div>
</div>
</div>
<div v-if="tab === 'streamPool'" class="streamPool">
<div v-if="tab === 'streamPool'" class="streamPool" v-follow>
<div class="header">
<div>#ID</div>
<div>Ch</div>
@ -48,6 +48,18 @@
<div>{{ p.users }}</div>
</div>
</div>
<div v-if="tab === 'api'" class="api" v-follow>
<div class="header">
<div>#ID</div>
<div>Endpoint</div>
<div>State</div>
</div>
<div v-for="req in apiRequests">
<div>#{{ req.id }}</div>
<div>{{ req.endpoint }}</div>
<div class="state" :class="req.state">{{ req.state }}</div>
</div>
</div>
</div>
<footer>
@ -65,6 +77,7 @@ import { faTerminal } from '@fortawesome/free-solid-svg-icons';
import XWindow from '@/components/ui/window.vue';
import MkTab from '@/components/tab.vue';
import MkButton from '@/components/ui/button.vue';
import follow from '@/directives/follow-append';
import * as os from '@/os';
export default defineComponent({
@ -74,6 +87,10 @@ export default defineComponent({
MkButton,
},
directives: {
follow
},
props: {
},
@ -105,6 +122,7 @@ export default defineComponent({
return {
tab: ref('stream'),
popups: os.popups,
apiRequests: os.apiRequests,
connections,
pools,
killPopup,
@ -125,9 +143,7 @@ export default defineComponent({
flex: 1;
overflow: auto;
> .windows,
> .stream,
> .streamPool {
> div {
display: table;
width: 100%;
padding: 16px;
@ -140,8 +156,31 @@ export default defineComponent({
opacity: 0.7;
}
> * {
> div {
display: table-cell;
white-space: nowrap;
&:not(:last-child) {
padding-right: 8px;
}
}
}
&.api {
> div {
> .state {
&.pending {
color: var(--warn);
}
&.success {
color: var(--success);
}
&.failed {
color: var(--error);
}
}
}
}
}