Skip to content
Snippets Groups Projects
Commit 82854236 authored by syuilo's avatar syuilo
Browse files

clean up

parent 6558cd2f
No related branches found
No related tags found
No related merge requests found
<template>
<XWindow ref="window"
:initial-width="370"
:initial-height="450"
:can-resize="true"
@close="$refs.window.close()"
@closed="$emit('closed')"
>
<template #header>Req Viewer</template>
<div class="rlkneywz">
<MkTab v-model="tab" style="border-bottom: solid 0.5px var(--divider);">
<option value="req">Request</option>
<option value="res">Response</option>
</MkTab>
<code v-if="tab === 'req'" class="_monospace">{{ reqStr }}</code>
<code v-if="tab === 'res'" class="_monospace">{{ resStr }}</code>
</div>
</XWindow>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import * as JSON5 from 'json5';
import XWindow from '@/components/ui/window.vue';
import MkTab from '@/components/tab.vue';
export default defineComponent({
components: {
XWindow,
MkTab,
},
props: {
req: {
required: true,
}
},
emits: ['closed'],
data() {
return {
tab: 'req',
reqStr: JSON5.stringify(this.req.req, null, '\t'),
resStr: JSON5.stringify(this.req.res, null, '\t'),
}
},
methods: {
}
});
</script>
<style lang="scss" scoped>
.rlkneywz {
display: flex;
flex-direction: column;
height: 100%;
> code {
display: block;
flex: 1;
padding: 8px;
overflow: auto;
font-size: 0.9em;
tab-size: 2;
white-space: pre;
}
}
</style>
<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';
import { stream } from '@/stream';
export default defineComponent({
components: {
XWindow,
MkTab,
MkButton,
},
directives: {
follow
},
props: {
},
emits: ['closed'],
setup() {
const connections = shallowRef([]);
const pools = shallowRef([]);
const refreshStreamInfo = () => {
console.log(stream.sharedConnectionPools, stream.sharedConnections, stream.nonSharedConnections);
const conn = stream.sharedConnections.map(c => ({
id: c.id, name: c.name, channel: c.channel, users: c.pool.users, in: c.inCount, out: c.outCount,
})).concat(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 = 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>
......@@ -4,16 +4,13 @@ import { Component, defineAsyncComponent, markRaw, reactive, Ref, ref } from 'vu
import { EventEmitter } from 'eventemitter3';
import insertTextAtCursor from 'insert-text-at-cursor';
import * as Misskey from 'misskey-js';
import { apiUrl, debug, url } from '@/config';
import { apiUrl, url } from '@/config';
import MkPostFormDialog from '@/components/post-form-dialog.vue';
import MkWaitingDialog from '@/components/waiting-dialog.vue';
import { resolve } from '@/router';
import { $i } from '@/account';
import { defaultStore } from '@/store';
export const pendingApiRequestsCount = ref(0);
let apiRequestsCount = 0; // for debug
export const apiRequests = ref([]); // for debug
const apiClient = new Misskey.api.APIClient({
origin: url,
......@@ -26,18 +23,6 @@ export const api = ((endpoint: string, data: Record<string, any> = {}, token?: s
pendingApiRequestsCount.value--;
};
const log = debug ? reactive({
id: ++apiRequestsCount,
endpoint,
req: markRaw(data),
res: null,
state: 'pending',
}) : null;
if (debug) {
apiRequests.value.push(log);
if (apiRequests.value.length > 128) apiRequests.value.shift();
}
const promise = new Promise((resolve, reject) => {
// Append a credential
if ($i) (data as any).i = $i.token;
......@@ -54,21 +39,10 @@ export const api = ((endpoint: string, data: Record<string, any> = {}, token?: s
if (res.status === 200) {
resolve(body);
if (debug) {
log!.res = markRaw(JSON.parse(JSON.stringify(body)));
log!.state = 'success';
}
} else if (res.status === 204) {
resolve();
if (debug) {
log!.state = 'success';
}
} else {
reject(body.error);
if (debug) {
log!.res = markRaw(body.error);
log!.state = 'failed';
}
}
}).catch(reject);
});
......
......@@ -63,11 +63,6 @@ export default defineComponent({
injectFeaturedNote: v
});
},
taskmanager() {
os.popup(import('@/components/taskmanager.vue'), {
}, {}, 'closed');
},
}
});
</script>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment