[Client] Improve admin panel

This commit is contained in:
syuilo 2018-11-03 22:21:20 +09:00
parent 1061e1f7ae
commit f5d53d784d
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
2 changed files with 23 additions and 1 deletions
src/client/app/admin/views

View file

@ -138,6 +138,10 @@ export default Vue.extend({
}, },
methods: { methods: {
setSrc(src) {
this.src = src;
},
render() { render() {
if (this.chartInstance) { if (this.chartInstance) {
this.chartInstance.destroy(); this.chartInstance.destroy();

View file

@ -19,6 +19,7 @@
</div> </div>
<div> <div>
<span>%fa:home% %i18n:@this-instance%</span> <span>%fa:home% %i18n:@this-instance%</span>
<span @click="setChartSrc('users')">%fa:chart-bar R%</span>
</div> </div>
</div> </div>
<div> <div>
@ -31,6 +32,7 @@
</div> </div>
<div> <div>
<span>%fa:home% %i18n:@this-instance%</span> <span>%fa:home% %i18n:@this-instance%</span>
<span @click="setChartSrc('notes')">%fa:chart-bar R%</span>
</div> </div>
</div> </div>
<div> <div>
@ -43,6 +45,7 @@
</div> </div>
<div> <div>
<span>%fa:home% %i18n:@this-instance%</span> <span>%fa:home% %i18n:@this-instance%</span>
<span @click="setChartSrc('drive')">%fa:chart-bar R%</span>
</div> </div>
</div> </div>
<div> <div>
@ -55,12 +58,13 @@
</div> </div>
<div> <div>
<span>%fa:globe% %i18n:@federated%</span> <span>%fa:globe% %i18n:@federated%</span>
<span @click="setChartSrc('federation-instances-total')">%fa:chart-bar R%</span>
</div> </div>
</div> </div>
</div> </div>
<div class="charts"> <div class="charts">
<x-charts/> <x-charts ref="charts"/>
</div> </div>
<div class="cpu-memory"> <div class="cpu-memory">
@ -85,6 +89,7 @@ export default Vue.extend({
XCharts, XCharts,
XApLog XApLog
}, },
data() { data() {
return { return {
stats: null, stats: null,
@ -92,6 +97,7 @@ export default Vue.extend({
meta: null meta: null
}; };
}, },
created() { created() {
this.connection = (this as any).os.stream.useSharedConnection('serverStats'); this.connection = (this as any).os.stream.useSharedConnection('serverStats');
@ -103,8 +109,15 @@ export default Vue.extend({
this.stats = stats; this.stats = stats;
}); });
}, },
beforeDestroy() { beforeDestroy() {
this.connection.dispose(); this.connection.dispose();
},
methods: {
setChartSrc(src) {
this.$refs.charts.setSrc(src);
}
} }
}); });
</script> </script>
@ -177,6 +190,7 @@ export default Vue.extend({
color var(--primary) color var(--primary)
> div:last-child > div:last-child
display flex
padding 6px 16px padding 6px 16px
border-top solid 1px #eee border-top solid 1px #eee
@ -184,6 +198,10 @@ export default Vue.extend({
font-size 70% font-size 70%
opacity 0.7 opacity 0.7
&:last-child
margin-left auto
cursor pointer
> .charts > .charts
margin-bottom 16px margin-bottom 16px