clean up
This commit is contained in:
		
							parent
							
								
									6558cd2f27
								
							
						
					
					
						commit
						82854236f3
					
				
					 4 changed files with 1 additions and 338 deletions
				
			
		|  | @ -1,72 +0,0 @@ | ||||||
| <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> |  | ||||||
|  | @ -1,234 +0,0 @@ | ||||||
| <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 { EventEmitter } from 'eventemitter3'; | ||||||
| import insertTextAtCursor from 'insert-text-at-cursor'; | import insertTextAtCursor from 'insert-text-at-cursor'; | ||||||
| import * as Misskey from 'misskey-js'; | 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 MkPostFormDialog from '@/components/post-form-dialog.vue'; | ||||||
| import MkWaitingDialog from '@/components/waiting-dialog.vue'; | import MkWaitingDialog from '@/components/waiting-dialog.vue'; | ||||||
| import { resolve } from '@/router'; | import { resolve } from '@/router'; | ||||||
| import { $i } from '@/account'; | import { $i } from '@/account'; | ||||||
| import { defaultStore } from '@/store'; |  | ||||||
| 
 | 
 | ||||||
| export const pendingApiRequestsCount = ref(0); | export const pendingApiRequestsCount = ref(0); | ||||||
| let apiRequestsCount = 0; // for debug
 |  | ||||||
| export const apiRequests = ref([]); // for debug
 |  | ||||||
| 
 | 
 | ||||||
| const apiClient = new Misskey.api.APIClient({ | const apiClient = new Misskey.api.APIClient({ | ||||||
| 	origin: url, | 	origin: url, | ||||||
|  | @ -26,18 +23,6 @@ export const api = ((endpoint: string, data: Record<string, any> = {}, token?: s | ||||||
| 		pendingApiRequestsCount.value--; | 		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) => { | 	const promise = new Promise((resolve, reject) => { | ||||||
| 		// Append a credential
 | 		// Append a credential
 | ||||||
| 		if ($i) (data as any).i = $i.token; | 		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) { | 			if (res.status === 200) { | ||||||
| 				resolve(body); | 				resolve(body); | ||||||
| 				if (debug) { |  | ||||||
| 					log!.res = markRaw(JSON.parse(JSON.stringify(body))); |  | ||||||
| 					log!.state = 'success'; |  | ||||||
| 				} |  | ||||||
| 			} else if (res.status === 204) { | 			} else if (res.status === 204) { | ||||||
| 				resolve(); | 				resolve(); | ||||||
| 				if (debug) { |  | ||||||
| 					log!.state = 'success'; |  | ||||||
| 				} |  | ||||||
| 			} else { | 			} else { | ||||||
| 				reject(body.error); | 				reject(body.error); | ||||||
| 				if (debug) { |  | ||||||
| 					log!.res = markRaw(body.error); |  | ||||||
| 					log!.state = 'failed'; |  | ||||||
| 				} |  | ||||||
| 			} | 			} | ||||||
| 		}).catch(reject); | 		}).catch(reject); | ||||||
| 	}); | 	}); | ||||||
|  |  | ||||||
|  | @ -63,11 +63,6 @@ export default defineComponent({ | ||||||
| 				injectFeaturedNote: v | 				injectFeaturedNote: v | ||||||
| 			}); | 			}); | ||||||
| 		}, | 		}, | ||||||
| 
 |  | ||||||
| 		taskmanager() { |  | ||||||
| 			os.popup(import('@/components/taskmanager.vue'), { |  | ||||||
| 			}, {}, 'closed'); |  | ||||||
| 		}, |  | ||||||
| 	} | 	} | ||||||
| }); | }); | ||||||
| </script> | </script> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue