Improve task manager etc

2 files changed, 49 insertions, 10 deletions

diff --git a/src/client/components/dialog.vue b/src/client/components/dialog.vue
index f157a37eac..f8d700202a 100644
--- a/src/client/components/dialog.vue
+++ b/src/client/components/dialog.vue
@@ -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);
 		}
 
 		> * {
diff --git a/src/client/components/taskmanager.vue b/src/client/components/taskmanager.vue
index 29b054d0fa..704e2d3e89 100644
--- a/src/client/components/taskmanager.vue
+++ b/src/client/components/taskmanager.vue
@@ -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);
+						}
+					}
 				}
 			}
 		}