Better queue chart
This commit is contained in:
		
							parent
							
								
									bf5d43054b
								
							
						
					
					
						commit
						09e25e6a02
					
				
					 2 changed files with 9 additions and 7 deletions
				
			
		| 
						 | 
					@ -9,7 +9,7 @@
 | 
				
			||||||
				<ui-input :value="latestStats.deliver.activeSincePrevTick | number" type="text" readonly>
 | 
									<ui-input :value="latestStats.deliver.activeSincePrevTick | number" type="text" readonly>
 | 
				
			||||||
					<span>Process</span>
 | 
										<span>Process</span>
 | 
				
			||||||
					<template #prefix><fa :icon="fasPlayCircle"/></template>
 | 
										<template #prefix><fa :icon="fasPlayCircle"/></template>
 | 
				
			||||||
					<template #suffix>jobs/s</template>
 | 
										<template #suffix>jobs/tick</template>
 | 
				
			||||||
				</ui-input>
 | 
									</ui-input>
 | 
				
			||||||
				<ui-input :value="latestStats.deliver.active | number" type="text" readonly>
 | 
									<ui-input :value="latestStats.deliver.active | number" type="text" readonly>
 | 
				
			||||||
					<span>Active</span>
 | 
										<span>Active</span>
 | 
				
			||||||
| 
						 | 
					@ -36,7 +36,7 @@
 | 
				
			||||||
				<ui-input :value="latestStats.inbox.activeSincePrevTick | number" type="text" readonly>
 | 
									<ui-input :value="latestStats.inbox.activeSincePrevTick | number" type="text" readonly>
 | 
				
			||||||
					<span>Process</span>
 | 
										<span>Process</span>
 | 
				
			||||||
					<template #prefix><fa :icon="fasPlayCircle"/></template>
 | 
										<template #prefix><fa :icon="fasPlayCircle"/></template>
 | 
				
			||||||
					<template #suffix>jobs/s</template>
 | 
										<template #suffix>jobs/tick</template>
 | 
				
			||||||
				</ui-input>
 | 
									</ui-input>
 | 
				
			||||||
				<ui-input :value="latestStats.inbox.active | number" type="text" readonly>
 | 
									<ui-input :value="latestStats.inbox.active | number" type="text" readonly>
 | 
				
			||||||
					<span>Active</span>
 | 
										<span>Active</span>
 | 
				
			||||||
| 
						 | 
					@ -131,8 +131,10 @@ export default Vue.extend({
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	mounted() {
 | 
						mounted() {
 | 
				
			||||||
		const chartOpts = {
 | 
							const chartOpts = id => ({
 | 
				
			||||||
			chart: {
 | 
								chart: {
 | 
				
			||||||
 | 
									id,
 | 
				
			||||||
 | 
									group: 'queue',
 | 
				
			||||||
				type: 'area',
 | 
									type: 'area',
 | 
				
			||||||
				height: 200,
 | 
									height: 200,
 | 
				
			||||||
				animations: {
 | 
									animations: {
 | 
				
			||||||
| 
						 | 
					@ -186,10 +188,10 @@ export default Vue.extend({
 | 
				
			||||||
				show: false,
 | 
									show: false,
 | 
				
			||||||
				min: 0,
 | 
									min: 0,
 | 
				
			||||||
			}
 | 
								}
 | 
				
			||||||
		};
 | 
							});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		this.inboxChart = new ApexCharts(this.$refs.inboxChart, chartOpts);
 | 
							this.inboxChart = new ApexCharts(this.$refs.inboxChart, chartOpts('a'));
 | 
				
			||||||
		this.deliverChart = new ApexCharts(this.$refs.deliverChart, chartOpts);
 | 
							this.deliverChart = new ApexCharts(this.$refs.deliverChart, chartOpts('b'));
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		this.inboxChart.render();
 | 
							this.inboxChart.render();
 | 
				
			||||||
		this.deliverChart.render();
 | 
							this.deliverChart.render();
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -4,7 +4,7 @@ import { deliverQueue, inboxQueue } from '../queue';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const ev = new Xev();
 | 
					const ev = new Xev();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const interval = 1000;
 | 
					const interval = 2000;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/**
 | 
					/**
 | 
				
			||||||
 * Report queue stats regularly
 | 
					 * Report queue stats regularly
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue