mirror of
https://github.com/paricafe/misskey.git
synced 2024-11-24 23:26:44 -06:00
enhance: Use SI prefixes for job queue widget, extends bytes (#12896)
* Use SI prefixes for job queue widget * a * bytes * lint
This commit is contained in:
parent
f8d5a46dbf
commit
6598d320d6
3 changed files with 20 additions and 11 deletions
|
@ -5,10 +5,10 @@
|
||||||
|
|
||||||
export default (v, digits = 0) => {
|
export default (v, digits = 0) => {
|
||||||
if (v == null) return '?';
|
if (v == null) return '?';
|
||||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB', 'RB', 'QB'];
|
||||||
if (v === 0) return '0';
|
if (v === 0) return '0';
|
||||||
const isMinus = v < 0;
|
const isMinus = v < 0;
|
||||||
if (isMinus) v = -v;
|
if (isMinus) v = -v;
|
||||||
const i = Math.floor(Math.log(v) / Math.log(1024));
|
const i = Math.floor(Math.log(v) / Math.log(1024));
|
||||||
return (isMinus ? '-' : '') + (v / Math.pow(1024, i)).toFixed(digits).replace(/\.0+$/, '') + sizes[i];
|
return (isMinus ? '-' : '') + (v / Math.pow(1024, i)).toFixed(digits).replace(/(\.[1-9]*)0+$/, '$1').replace(/\.$/, '') + (sizes[i] ?? `e+${ i * 3 }B`);
|
||||||
};
|
};
|
||||||
|
|
9
packages/frontend/src/filters/kmg.ts
Normal file
9
packages/frontend/src/filters/kmg.ts
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
export default (v, fractionDigits = 0) => {
|
||||||
|
if (v == null) return 'N/A';
|
||||||
|
if (v === 0) return '0';
|
||||||
|
const sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y', 'R', 'Q'];
|
||||||
|
const isMinus = v < 0;
|
||||||
|
if (isMinus) v = -v;
|
||||||
|
const i = Math.floor(Math.log(v) / Math.log(1000));
|
||||||
|
return (isMinus ? '-' : '') + (v / Math.pow(1000, i)).toFixed(fractionDigits).replace(/(\.[1-9]*)0+$/, '$1').replace(/\.$/, '') + (sizes[i] ?? `e+${ i * 3 }`);
|
||||||
|
};
|
|
@ -10,19 +10,19 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<div class="values">
|
<div class="values">
|
||||||
<div>
|
<div>
|
||||||
<div>Process</div>
|
<div>Process</div>
|
||||||
<div :class="{ inc: current.inbox.activeSincePrevTick > prev.inbox.activeSincePrevTick, dec: current.inbox.activeSincePrevTick < prev.inbox.activeSincePrevTick }">{{ number(current.inbox.activeSincePrevTick) }}</div>
|
<div :class="{ inc: current.inbox.activeSincePrevTick > prev.inbox.activeSincePrevTick, dec: current.inbox.activeSincePrevTick < prev.inbox.activeSincePrevTick }" :title="`${current.inbox.activeSincePrevTick}`">{{ kmg(current.inbox.activeSincePrevTick, 2) }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>Active</div>
|
<div>Active</div>
|
||||||
<div :class="{ inc: current.inbox.active > prev.inbox.active, dec: current.inbox.active < prev.inbox.active }">{{ number(current.inbox.active) }}</div>
|
<div :class="{ inc: current.inbox.active > prev.inbox.active, dec: current.inbox.active < prev.inbox.active }" :title="`${current.inbox.active}`">{{ kmg(current.inbox.active, 2) }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>Delayed</div>
|
<div>Delayed</div>
|
||||||
<div :class="{ inc: current.inbox.delayed > prev.inbox.delayed, dec: current.inbox.delayed < prev.inbox.delayed }">{{ number(current.inbox.delayed) }}</div>
|
<div :class="{ inc: current.inbox.delayed > prev.inbox.delayed, dec: current.inbox.delayed < prev.inbox.delayed }" :title="`${current.inbox.delayed}`">{{ kmg(current.inbox.delayed, 2) }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>Waiting</div>
|
<div>Waiting</div>
|
||||||
<div :class="{ inc: current.inbox.waiting > prev.inbox.waiting, dec: current.inbox.waiting < prev.inbox.waiting }">{{ number(current.inbox.waiting) }}</div>
|
<div :class="{ inc: current.inbox.waiting > prev.inbox.waiting, dec: current.inbox.waiting < prev.inbox.waiting }" :title="`${current.inbox.waiting}`">{{ kmg(current.inbox.waiting, 2) }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -31,19 +31,19 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<div class="values">
|
<div class="values">
|
||||||
<div>
|
<div>
|
||||||
<div>Process</div>
|
<div>Process</div>
|
||||||
<div :class="{ inc: current.deliver.activeSincePrevTick > prev.deliver.activeSincePrevTick, dec: current.deliver.activeSincePrevTick < prev.deliver.activeSincePrevTick }">{{ number(current.deliver.activeSincePrevTick) }}</div>
|
<div :class="{ inc: current.deliver.activeSincePrevTick > prev.deliver.activeSincePrevTick, dec: current.deliver.activeSincePrevTick < prev.deliver.activeSincePrevTick }" :title="`${current.deliver.activeSincePrevTick}`">{{ kmg(current.deliver.activeSincePrevTick, 2) }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>Active</div>
|
<div>Active</div>
|
||||||
<div :class="{ inc: current.deliver.active > prev.deliver.active, dec: current.deliver.active < prev.deliver.active }">{{ number(current.deliver.active) }}</div>
|
<div :class="{ inc: current.deliver.active > prev.deliver.active, dec: current.deliver.active < prev.deliver.active }" :title="`${current.deliver.active}`">{{ kmg(current.deliver.active, 2) }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>Delayed</div>
|
<div>Delayed</div>
|
||||||
<div :class="{ inc: current.deliver.delayed > prev.deliver.delayed, dec: current.deliver.delayed < prev.deliver.delayed }">{{ number(current.deliver.delayed) }}</div>
|
<div :class="{ inc: current.deliver.delayed > prev.deliver.delayed, dec: current.deliver.delayed < prev.deliver.delayed }" :title="`${current.deliver.delayed}`">{{ kmg(current.deliver.delayed, 2) }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>Waiting</div>
|
<div>Waiting</div>
|
||||||
<div :class="{ inc: current.deliver.waiting > prev.deliver.waiting, dec: current.deliver.waiting < prev.deliver.waiting }">{{ number(current.deliver.waiting) }}</div>
|
<div :class="{ inc: current.deliver.waiting > prev.deliver.waiting, dec: current.deliver.waiting < prev.deliver.waiting }" :title="`${current.deliver.waiting}`">{{ kmg(current.deliver.waiting, 2) }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -55,7 +55,7 @@ import { onUnmounted, reactive, ref } from 'vue';
|
||||||
import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
|
import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
|
||||||
import { GetFormResultType } from '@/scripts/form.js';
|
import { GetFormResultType } from '@/scripts/form.js';
|
||||||
import { useStream } from '@/stream.js';
|
import { useStream } from '@/stream.js';
|
||||||
import number from '@/filters/number.js';
|
import kmg from '@/filters/kmg.js';
|
||||||
import * as sound from '@/scripts/sound.js';
|
import * as sound from '@/scripts/sound.js';
|
||||||
import { deepClone } from '@/scripts/clone.js';
|
import { deepClone } from '@/scripts/clone.js';
|
||||||
import { defaultStore } from '@/store.js';
|
import { defaultStore } from '@/store.js';
|
||||||
|
|
Loading…
Reference in a new issue