sharkey/packages/client/src/components/taskmanager.vue

<template>
<XWindow ref="window" :initial-width="650" :initial-height="420" :can-resize="true" @closed="$emit('closed')">
	<template #header>
		<i class="fas fa-terminal" style="margin-right: 0.5em;"></i>Task Manager
	</template>
	<div class="qljqmnzj _monospace">
		<MkTab v-model="tab" style="border-bottom: solid 0.5px var(--divider);">
			<option value="windows">Windows</option>
			<option value="stream">Stream</option>
			<option value="streamPool">Stream (Pool)</option>
			<option value="api">API</option>
		</MkTab>

		<div class="content">
			<div v-if="tab === 'windows'" v-follow 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'" v-follow class="stream">
				<div class="header">
					<div>#ID</div>
					<div>Ch</div>
					<div>Handle</div>
					<div>In</div>
					<div>Out</div>
				</div>
				<div v-for="c in connections">
					<div>#{{ c.id }}</div>
					<div>{{ c.channel }}</div>
					<div v-if="c.users !== null">(shared)<span v-if="c.name">{{ ' ' + c.name }}</span></div>
					<div v-else>{{ c.name ? c.name : '<anonymous>' }}</div>
					<div>{{ c.in }}</div>
					<div>{{ c.out }}</div>
				</div>
			</div>
			<div v-if="tab === 'streamPool'" v-follow 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 v-if="tab === 'api'" v-follow class="api">
				<div class="header">
					<div>#ID</div>
					<div>Endpoint</div>
					<div>State</div>
				</div>
				<div v-for="req in apiRequests" @click="showReq(req)">
					<div>#{{ req.id }}</div>
					<div>{{ req.endpoint }}</div>
					<div class="state" :class="req.state">{{ req.state }}</div>
				</div>
			</div>
		</div>

		<footer>
			<div><span class="label">Windows</span>{{ popups.length }}</div>
			<div><span class="label">Stream</span>{{ connections.length }}</div>
			<div><span class="label">Stream (Pool)</span>{{ pools.length }}</div>
		</footer>
	</div>
</XWindow>
</template>

<script lang="ts">
import { defineComponent, markRaw, onBeforeUnmount, ref, shallowRef } from 'vue';
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({
	components: {
		XWindow,
		MkTab,
		MkButton,
	},

	directives: {
		follow
	},

	props: {
	},

	emits: ['closed'],

	setup() {
		const connections = shallowRef([]);
		const pools = shallowRef([]);
		const refreshStreamInfo = () => {
			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,
			})));
			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);
		};

		const showReq = req => {
			os.popup(import('./taskmanager.api-window.vue'), {
				req: req
			}, {
			}, 'closed');
		};

		return {
			tab: ref('stream'),
			popups: os.popups,
			apiRequests: os.apiRequests,
			connections,
			pools,
			killPopup,
			showReq,
		};
	},
});
</script>

<style lang="scss" scoped>
.qljqmnzj {
	display: flex;
	flex-direction: column;
	height: 100%;

	> .content {
		flex: 1;
		overflow: auto;

		> div {
			display: table;
			width: 100%;
			padding: 16px;
			box-sizing: border-box;

			> div {
				display: table-row;

				&:nth-child(even) {
					//background: rgba(0, 0, 0, 0.1);
				}

				&.header {
					opacity: 0.7;
				}

				> div {
					display: table-cell;
					white-space: nowrap;

					&:not(:last-child) {
						padding-right: 8px;
					}
				}
			}

			&.api {
				> div {
					&:not(.header) {
						cursor: pointer;

						&:hover {
							color: var(--accent);
						}
					}

					> .state {
						&.pending {
							color: var(--warn);
						}

						&.success {
							color: var(--success);
						}

						&.failed {
							color: var(--error);
						}
					}
				}
			}
		}
	}

	> footer {
		display: flex;
		width: 100%;
		padding: 8px 16px;
		box-sizing: border-box;
		border-top: solid 0.5px var(--divider);
		font-size: 0.9em;

		> div {
			flex: 1;

			> .label {
				opacity: 0.7;
				margin-right: 0.5em;

				&:after {
					content: ":";
				}
			}
		}
	}
}
</style>