[Client] Improve admin panel
This commit is contained in:
parent
1061e1f7ae
commit
f5d53d784d
2 changed files with 23 additions and 1 deletions
|
@ -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();
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue