Sharkey/src/client/app/common/views/widgets/posts-monitor.vue

212 lines
5.8 KiB
Vue
Raw Normal View History

2018-06-08 22:14:26 +03:00
<template>
<div class="mkw-posts-monitor">
<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2">
<template slot="header">%fa:chart-line%%i18n:@title%</template>
<button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button>
<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }" :data-darkmode="$store.state.device.darkmode">
2018-06-09 05:29:50 +03:00
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2">
2018-06-08 22:14:26 +03:00
<defs>
2018-06-09 00:27:12 +03:00
<linearGradient :id="localGradientId" x1="0" x2="0" y1="1" y2="0">
2018-06-08 22:14:26 +03:00
<stop offset="0%" stop-color="hsl(200, 80%, 70%)"></stop>
<stop offset="100%" stop-color="hsl(90, 80%, 70%)"></stop>
</linearGradient>
2018-06-09 00:27:12 +03:00
<mask :id="localMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
2018-06-09 00:21:13 +03:00
<polygon
2018-06-09 00:27:12 +03:00
:points="localPolygonPoints"
2018-06-09 00:21:13 +03:00
fill="#fff"
fill-opacity="0.5"/>
2018-06-08 22:14:26 +03:00
<polyline
2018-06-09 00:27:12 +03:00
:points="localPolylinePoints"
2018-06-08 22:14:26 +03:00
fill="none"
stroke="#fff"
stroke-width="1"/>
2018-06-09 05:29:50 +03:00
<circle
:cx="localHeadX"
:cy="localHeadY"
r="1.5"
fill="#fff"/>
2018-06-08 22:14:26 +03:00
</mask>
</defs>
<rect
2018-06-09 05:29:50 +03:00
x="-2" y="-2"
:width="viewBoxX + 4" :height="viewBoxY + 4"
2018-06-09 00:27:12 +03:00
:style="`stroke: none; fill: url(#${ localGradientId }); mask: url(#${ localMaskId })`"/>
<text x="1" y="5">Local</text>
2018-06-08 22:14:26 +03:00
</svg>
2018-06-09 05:29:50 +03:00
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 1">
2018-06-08 22:14:26 +03:00
<defs>
2018-06-09 00:27:12 +03:00
<linearGradient :id="fediGradientId" x1="0" x2="0" y1="1" y2="0">
2018-06-08 22:14:26 +03:00
<stop offset="0%" stop-color="hsl(200, 80%, 70%)"></stop>
<stop offset="100%" stop-color="hsl(90, 80%, 70%)"></stop>
</linearGradient>
2018-06-09 00:27:12 +03:00
<mask :id="fediMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
2018-06-09 00:21:13 +03:00
<polygon
2018-06-09 00:27:12 +03:00
:points="fediPolygonPoints"
2018-06-09 00:21:13 +03:00
fill="#fff"
fill-opacity="0.5"/>
2018-06-08 22:14:26 +03:00
<polyline
2018-06-09 00:27:12 +03:00
:points="fediPolylinePoints"
2018-06-08 22:14:26 +03:00
fill="none"
stroke="#fff"
stroke-width="1"/>
2018-06-09 05:29:50 +03:00
<circle
:cx="fediHeadX"
:cy="fediHeadY"
r="1.5"
fill="#fff"/>
2018-06-08 22:14:26 +03:00
</mask>
</defs>
<rect
2018-06-09 05:29:50 +03:00
x="-2" y="-2"
:width="viewBoxX + 4" :height="viewBoxY + 4"
2018-06-09 00:27:12 +03:00
:style="`stroke: none; fill: url(#${ fediGradientId }); mask: url(#${ fediMaskId })`"/>
<text x="1" y="5">Fedi</text>
2018-06-08 22:14:26 +03:00
</svg>
</div>
</mk-widget-container>
</div>
</template>
<script lang="ts">
import define from '../../../common/define-widget';
import * as uuid from 'uuid';
export default define({
name: 'server',
props: () => ({
design: 0,
view: 0
})
}).extend({
data() {
return {
connection: null,
connectionId: null,
viewBoxY: 30,
stats: [],
fediGradientId: uuid(),
fediMaskId: uuid(),
localGradientId: uuid(),
localMaskId: uuid(),
fediPolylinePoints: '',
localPolylinePoints: '',
fediPolygonPoints: '',
2018-06-09 05:29:50 +03:00
localPolygonPoints: '',
fediHeadX: null,
fediHeadY: null,
localHeadX: null,
localHeadY: null
2018-06-08 22:14:26 +03:00
};
},
computed: {
viewBoxX(): number {
return this.props.view == 0 ? 50 : 100;
}
},
watch: {
viewBoxX() {
this.draw();
}
},
mounted() {
this.connection = (this as any).os.streams.notesStatsStream.getConnection();
this.connectionId = (this as any).os.streams.notesStatsStream.use();
this.connection.on('stats', this.onStats);
this.connection.on('statsLog', this.onStatsLog);
this.connection.send({
type: 'requestLog',
id: Math.random().toString()
});
},
beforeDestroy() {
this.connection.off('stats', this.onStats);
this.connection.off('statsLog', this.onStatsLog);
(this as any).os.streams.notesStatsStream.dispose(this.connectionId);
},
methods: {
toggle() {
if (this.props.view == 2) {
this.props.view = 0;
} else {
this.props.view++;
}
this.save();
},
func() {
if (this.props.design == 2) {
this.props.design = 0;
} else {
this.props.design++;
}
this.save();
},
draw() {
2018-06-09 00:21:13 +03:00
const stats = this.props.view == 0 ? this.stats.slice(-50) : this.stats;
2018-06-09 00:04:41 +03:00
const fediPeak = Math.max.apply(null, stats.map(x => x.all)) || 1;
const localPeak = Math.max.apply(null, stats.map(x => x.local)) || 1;
2018-06-08 22:14:26 +03:00
2018-06-09 05:29:50 +03:00
const fediPolylinePoints = stats.map((s, i) => [this.viewBoxX - ((stats.length - 1) - i), (1 - (s.all / fediPeak)) * this.viewBoxY]);
const localPolylinePoints = stats.map((s, i) => [this.viewBoxX - ((stats.length - 1) - i), (1 - (s.local / localPeak)) * this.viewBoxY]);
this.fediPolylinePoints = fediPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
this.localPolylinePoints = localPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
2018-06-08 22:14:26 +03:00
2018-06-09 00:04:41 +03:00
this.fediPolygonPoints = `${this.viewBoxX - (stats.length - 1)},${ this.viewBoxY } ${ this.fediPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
this.localPolygonPoints = `${this.viewBoxX - (stats.length - 1)},${ this.viewBoxY } ${ this.localPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
2018-06-09 05:29:50 +03:00
this.fediHeadX = fediPolylinePoints[fediPolylinePoints.length - 1][0];
this.fediHeadY = fediPolylinePoints[fediPolylinePoints.length - 1][1];
this.localHeadX = localPolylinePoints[localPolylinePoints.length - 1][0];
this.localHeadY = localPolylinePoints[localPolylinePoints.length - 1][1];
2018-06-08 22:14:26 +03:00
},
onStats(stats) {
this.stats.push(stats);
if (this.stats.length > 100) this.stats.shift();
this.draw();
},
onStatsLog(statsLog) {
statsLog.forEach(stats => this.onStats(stats));
}
}
});
</script>
<style lang="stylus" scoped>
root(isDark)
&.dual
> svg
width 50%
float left
&:first-child
padding-right 5px
&:last-child
padding-left 5px
> svg
display block
padding 10px
width 100%
> text
font-size 5px
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
> tspan
opacity 0.5
&:after
content ""
display block
clear both
.qpdmibaztplkylerhdbllwcokyrfxeyj[data-darkmode]
root(true)
.qpdmibaztplkylerhdbllwcokyrfxeyj:not([data-darkmode])
root(false)
</style>