Improve task manager

1 files changed, 46 insertions, 9 deletions

diff --git a/src/client/components/taskmanager.vue b/src/client/components/taskmanager.vue
index c5f9510f38..c7f91d082c 100644
--- a/src/client/components/taskmanager.vue
+++ b/src/client/components/taskmanager.vue
@@ -4,7 +4,20 @@
 		<Fa :icon="faTerminal" style="margin-right: 0.5em;"/>Task Manager
 	</template>
 	<div class="qljqmnzj">
-		<MkTab v-model:value="tab" :items="[{ label: 'Stream', value: 'stream', }, { label: 'API', value: 'api', }]" style="border-bottom: solid 1px var(--divider);"/>
+		<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 v-if="tab === 'windows'" class="windows">
+			<div class="header">
+				<div>#ID</div>
+				<div>Component</div>
+				<div>Action</div>
+			</div>
+			<div v-for="p in popups">
+				<div>#{{ p.id }}</div>
+				<div>{{ p.component.name ? p.component.name : '<anonymous>' }}</div>
+				<div><button class="_textButton" @click="killPopup(p)">Kill</button></div>
+			</div>
+		</div>
 		<div v-if="tab === 'stream'" class="stream">
 			<div class="header">
 				<div>#ID</div>
@@ -22,12 +35,24 @@
 				<div>{{ c.out }}</div>
 			</div>
 		</div>
+		<div v-if="tab === 'streamPool'" class="streamPool">
+			<div class="header">
+				<div>#ID</div>
+				<div>Ch</div>
+				<div>Users</div>
+			</div>
+			<div v-for="p in pools">
+				<div>#{{ p.id }}</div>
+				<div>{{ p.channel }}</div>
+				<div>{{ p.users }}</div>
+			</div>
+		</div>
 	</div>
 </XWindow>
 </template>
 
 <script lang="ts">
-import { defineComponent, markRaw, onBeforeUnmount, ref } from 'vue';
+import { defineComponent, markRaw, onBeforeUnmount, ref, shallowRef } from 'vue';
 import { faTerminal } from '@fortawesome/free-solid-svg-icons';
 import XWindow from '@/components/ui/window.vue';
 import MkTab from '@/components/tab.vue';
@@ -47,24 +72,34 @@ export default defineComponent({
 	emits: ['closed'],
 
 	setup() {
-		const connections = ref([]);
+		const connections = shallowRef([]);
+		const pools = shallowRef([]);
 		const refreshStreamInfo = () => {
-			console.log(os.stream.sharedConnections, os.stream.nonSharedConnections);
-			connections.value = markRaw(os.stream.sharedConnections.map(c => ({
+			console.log(os.stream.sharedConnectionPools, os.stream.sharedConnections, os.stream.nonSharedConnections);
+			const conn = os.stream.sharedConnections.map(c => ({
 				id: c.id, name: c.name, channel: c.channel, users: c.pool.users, in: c.inCount, out: c.outCount,
 			})).concat(os.stream.nonSharedConnections.map(c => ({
 				id: c.id, name: c.name, channel: c.channel, users: null, in: c.inCount, out: c.outCount,
-			}))));
-			connections.value.sort((a, b) => (a.id > b.id) ? 1 : -1);
+			})));
+			conn.sort((a, b) => (a.id > b.id) ? 1 : -1);
+			connections.value = conn;
+			pools.value = os.stream.sharedConnectionPools;
 		};
 		const interval = setInterval(refreshStreamInfo, 1000);
 		onBeforeUnmount(() => {
 			clearInterval(interval);
 		});
 
+		const killPopup = p => {
+			os.popups.value = os.popups.value.filter(x => x !== p);
+		};
+
 		return {
-			tab: 'stream',
+			tab: ref('stream'),
+			popups: os.popups,
 			connections,
+			pools,
+			killPopup,
 			faTerminal,
 		};
 	},
@@ -73,7 +108,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .qljqmnzj {
-	> .stream {
+	> .windows,
+	> .stream,
+	> .streamPool {
 		display: table;
 		width: 100%;
 		padding: 16px;