refactor: Widgetのcomposition api移行 (#8125)
* wip * wip * wip * wip * wip * wip * fix
This commit is contained in:
syuilo
GitHub
parent
faef125b74
commit
0bbde336b3
23 changed files with 1389 additions and 1221 deletions
|
|
@ -1,134 +1,146 @@
|
|||
<template>
|
||||
<div class="mkw-jobQueue _monospace" :class="{ _panel: !props.transparent }">
|
||||
<div class="mkw-jobQueue _monospace" :class="{ _panel: !widgetProps.transparent }">
|
||||
<div class="inbox">
|
||||
<div class="label">Inbox queue<i v-if="inbox.waiting > 0" class="fas fa-exclamation-triangle icon"></i></div>
|
||||
<div class="label">Inbox queue<i v-if="current.inbox.waiting > 0" class="fas fa-exclamation-triangle icon"></i></div>
|
||||
<div class="values">
|
||||
<div>
|
||||
<div>Process</div>
|
||||
<div :class="{ inc: inbox.activeSincePrevTick > prev.inbox.activeSincePrevTick, dec: inbox.activeSincePrevTick < prev.inbox.activeSincePrevTick }">{{ number(inbox.activeSincePrevTick) }}</div>
|
||||
<div :class="{ inc: current.inbox.activeSincePrevTick > prev.inbox.activeSincePrevTick, dec: current.inbox.activeSincePrevTick < prev.inbox.activeSincePrevTick }">{{ number(current.inbox.activeSincePrevTick) }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Active</div>
|
||||
<div :class="{ inc: inbox.active > prev.inbox.active, dec: inbox.active < prev.inbox.active }">{{ number(inbox.active) }}</div>
|
||||
<div :class="{ inc: current.inbox.active > prev.inbox.active, dec: current.inbox.active < prev.inbox.active }">{{ number(current.inbox.active) }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Delayed</div>
|
||||
<div :class="{ inc: inbox.delayed > prev.inbox.delayed, dec: inbox.delayed < prev.inbox.delayed }">{{ number(inbox.delayed) }}</div>
|
||||
<div :class="{ inc: current.inbox.delayed > prev.inbox.delayed, dec: current.inbox.delayed < prev.inbox.delayed }">{{ number(current.inbox.delayed) }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Waiting</div>
|
||||
<div :class="{ inc: inbox.waiting > prev.inbox.waiting, dec: inbox.waiting < prev.inbox.waiting }">{{ number(inbox.waiting) }}</div>
|
||||
<div :class="{ inc: current.inbox.waiting > prev.inbox.waiting, dec: current.inbox.waiting < prev.inbox.waiting }">{{ number(current.inbox.waiting) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="deliver">
|
||||
<div class="label">Deliver queue<i v-if="deliver.waiting > 0" class="fas fa-exclamation-triangle icon"></i></div>
|
||||
<div class="label">Deliver queue<i v-if="current.deliver.waiting > 0" class="fas fa-exclamation-triangle icon"></i></div>
|
||||
<div class="values">
|
||||
<div>
|
||||
<div>Process</div>
|
||||
<div :class="{ inc: deliver.activeSincePrevTick > prev.deliver.activeSincePrevTick, dec: deliver.activeSincePrevTick < prev.deliver.activeSincePrevTick }">{{ number(deliver.activeSincePrevTick) }}</div>
|
||||
<div :class="{ inc: current.deliver.activeSincePrevTick > prev.deliver.activeSincePrevTick, dec: current.deliver.activeSincePrevTick < prev.deliver.activeSincePrevTick }">{{ number(current.deliver.activeSincePrevTick) }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Active</div>
|
||||
<div :class="{ inc: deliver.active > prev.deliver.active, dec: deliver.active < prev.deliver.active }">{{ number(deliver.active) }}</div>
|
||||
<div :class="{ inc: current.deliver.active > prev.deliver.active, dec: current.deliver.active < prev.deliver.active }">{{ number(current.deliver.active) }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Delayed</div>
|
||||
<div :class="{ inc: deliver.delayed > prev.deliver.delayed, dec: deliver.delayed < prev.deliver.delayed }">{{ number(deliver.delayed) }}</div>
|
||||
<div :class="{ inc: current.deliver.delayed > prev.deliver.delayed, dec: current.deliver.delayed < prev.deliver.delayed }">{{ number(current.deliver.delayed) }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Waiting</div>
|
||||
<div :class="{ inc: deliver.waiting > prev.deliver.waiting, dec: deliver.waiting < prev.deliver.waiting }">{{ number(deliver.waiting) }}</div>
|
||||
<div :class="{ inc: current.deliver.waiting > prev.deliver.waiting, dec: current.deliver.waiting < prev.deliver.waiting }">{{ number(current.deliver.waiting) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, markRaw } from 'vue';
|
||||
import define from './define';
|
||||
import * as os from '@/os';
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, reactive, ref } from 'vue';
|
||||
import { GetFormResultType } from '@/scripts/form';
|
||||
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
|
||||
import { stream } from '@/stream';
|
||||
import number from '@/filters/number';
|
||||
import * as sound from '@/scripts/sound';
|
||||
import * as os from '@/os';
|
||||
|
||||
const widget = define({
|
||||
name: 'jobQueue',
|
||||
props: () => ({
|
||||
transparent: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
},
|
||||
sound: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
const name = 'jobQueue';
|
||||
|
||||
const widgetPropsDef = {
|
||||
transparent: {
|
||||
type: 'boolean' as const,
|
||||
default: false,
|
||||
},
|
||||
sound: {
|
||||
type: 'boolean' as const,
|
||||
default: false,
|
||||
},
|
||||
};
|
||||
|
||||
type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
|
||||
|
||||
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
|
||||
//const props = defineProps<WidgetComponentProps<WidgetProps>>();
|
||||
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
|
||||
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
|
||||
const emit = defineEmits<{ (e: 'updateProps', props: WidgetProps); }>();
|
||||
|
||||
const { widgetProps, configure } = useWidgetPropsManager(name,
|
||||
widgetPropsDef,
|
||||
props,
|
||||
emit,
|
||||
);
|
||||
|
||||
const connection = stream.useChannel('queueStats');
|
||||
const current = reactive({
|
||||
inbox: {
|
||||
activeSincePrevTick: 0,
|
||||
active: 0,
|
||||
waiting: 0,
|
||||
delayed: 0,
|
||||
},
|
||||
deliver: {
|
||||
activeSincePrevTick: 0,
|
||||
active: 0,
|
||||
waiting: 0,
|
||||
delayed: 0,
|
||||
},
|
||||
});
|
||||
const prev = reactive({} as typeof current);
|
||||
const jammedSound = sound.setVolume(sound.getAudio('syuilo/queue-jammed'), 1);
|
||||
|
||||
for (const domain of ['inbox', 'deliver']) {
|
||||
prev[domain] = JSON.parse(JSON.stringify(current[domain]));
|
||||
}
|
||||
|
||||
const onStats = (stats) => {
|
||||
for (const domain of ['inbox', 'deliver']) {
|
||||
prev[domain] = JSON.parse(JSON.stringify(current[domain]));
|
||||
current[domain].activeSincePrevTick = stats[domain].activeSincePrevTick;
|
||||
current[domain].active = stats[domain].active;
|
||||
current[domain].waiting = stats[domain].waiting;
|
||||
current[domain].delayed = stats[domain].delayed;
|
||||
|
||||
if (current[domain].waiting > 0 && widgetProps.sound && jammedSound.paused) {
|
||||
jammedSound.play();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onStatsLog = (statsLog) => {
|
||||
for (const stats of [...statsLog].reverse()) {
|
||||
onStats(stats);
|
||||
}
|
||||
};
|
||||
|
||||
connection.on('stats', onStats);
|
||||
connection.on('statsLog', onStatsLog);
|
||||
|
||||
connection.send('requestLog', {
|
||||
id: Math.random().toString().substr(2, 8),
|
||||
length: 1,
|
||||
});
|
||||
|
||||
export default defineComponent({
|
||||
extends: widget,
|
||||
data() {
|
||||
return {
|
||||
connection: markRaw(stream.useChannel('queueStats')),
|
||||
inbox: {
|
||||
activeSincePrevTick: 0,
|
||||
active: 0,
|
||||
waiting: 0,
|
||||
delayed: 0,
|
||||
},
|
||||
deliver: {
|
||||
activeSincePrevTick: 0,
|
||||
active: 0,
|
||||
waiting: 0,
|
||||
delayed: 0,
|
||||
},
|
||||
prev: {},
|
||||
sound: sound.setVolume(sound.getAudio('syuilo/queue-jammed'), 1)
|
||||
};
|
||||
},
|
||||
created() {
|
||||
for (const domain of ['inbox', 'deliver']) {
|
||||
this.prev[domain] = JSON.parse(JSON.stringify(this[domain]));
|
||||
}
|
||||
|
||||
this.connection.on('stats', this.onStats);
|
||||
this.connection.on('statsLog', this.onStatsLog);
|
||||
onUnmounted(() => {
|
||||
connection.off('stats', onStats);
|
||||
connection.off('statsLog', onStatsLog);
|
||||
connection.dispose();
|
||||
});
|
||||
|
||||
this.connection.send('requestLog', {
|
||||
id: Math.random().toString().substr(2, 8),
|
||||
length: 1
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.connection.off('stats', this.onStats);
|
||||
this.connection.off('statsLog', this.onStatsLog);
|
||||
this.connection.dispose();
|
||||
},
|
||||
methods: {
|
||||
onStats(stats) {
|
||||
for (const domain of ['inbox', 'deliver']) {
|
||||
this.prev[domain] = JSON.parse(JSON.stringify(this[domain]));
|
||||
this[domain].activeSincePrevTick = stats[domain].activeSincePrevTick;
|
||||
this[domain].active = stats[domain].active;
|
||||
this[domain].waiting = stats[domain].waiting;
|
||||
this[domain].delayed = stats[domain].delayed;
|
||||
|
||||
if (this[domain].waiting > 0 && this.props.sound && this.sound.paused) {
|
||||
this.sound.play();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onStatsLog(statsLog) {
|
||||
for (const stats of [...statsLog].reverse()) {
|
||||
this.onStats(stats);
|
||||
}
|
||||
},
|
||||
|
||||
number
|
||||
}
|
||||
defineExpose<WidgetComponentExpose>({
|
||||
name,
|
||||
configure,
|
||||
id: props.widget ? props.widget.id : null,
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue