一部Revert "サーバー内部情報を表示するAPI等を削除"

This reverts commit c4da460.
mei23 · Jul 12, 2020 · 67bc78d · 67bc78d
1 parent 61488b8
commit 67bc78d
Show file tree

Hide file tree

Showing 8 changed files with 415 additions and 2 deletions.
diff --git a/src/client/app/common/scripts/format-uptime.ts b/src/client/app/common/scripts/format-uptime.ts
@@ -0,0 +1,25 @@
+
+/**
+ * Format like the uptime command
+ */
+export default function(sec) {
+	if (!sec) return sec;
+
+	const day = Math.floor(sec / 86400);
+	const tod = sec % 86400;
+
+	// Days part in string: 2 days, 1 day, null
+	const d = day >= 2 ? `${day} days` : day >= 1 ? `${day} day` : null;
+
+	// Time part in string: 1 sec, 1 min, 1:01
+	const t
+		= tod < 60 ? `${Math.floor(tod)} sec`
+		: tod < 3600 ? `${Math.floor(tod / 60)} min`
+		: `${Math.floor(tod / 60 / 60)}:${Math.floor((tod / 60) % 60).toString().padStart(2, '0')}`;
+
+	let str = '';
+	if (d) str += `${d}, `;
+	str += t;
+
+	return str;
+}
diff --git a/src/client/app/common/views/widgets/server.cpu.vue b/src/client/app/common/views/widgets/server.cpu.vue
@@ -0,0 +1,68 @@
+<template>
+<div class="cpu">
+	<x-pie class="pie" :value="usage"/>
+	<div>
+		<p><fa icon="microchip"/>CPU</p>
+		<p>{{ meta.cpu.cores }} Logical cores</p>
+		<p>{{ meta.cpu.model }}</p>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XPie from './server.pie.vue';
+
+export default Vue.extend({
+	components: {
+		XPie
+	},
+	props: ['connection', 'meta'],
+	data() {
+		return {
+			usage: 0
+		};
+	},
+	mounted() {
+		this.connection.on('stats', this.onStats);
+	},
+	beforeDestroy() {
+		this.connection.off('stats', this.onStats);
+	},
+	methods: {
+		onStats(stats) {
+			this.usage = stats.cpu_usage;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.cpu
+	> .pie
+		padding 10px
+		height 100px
+		float left
+
+	> div
+		float left
+		width calc(100% - 100px)
+		padding 10px 10px 10px 0
+
+		> p
+			margin 0
+			font-size 12px
+			color var(--chartCaption)
+
+			&:first-child
+				font-weight bold
+
+				> [data-icon]
+					margin-right 4px
+
+	&:after
+		content ""
+		display block
+		clear both
+
+</style>
diff --git a/src/client/app/common/views/widgets/server.disk.vue b/src/client/app/common/views/widgets/server.disk.vue
@@ -0,0 +1,76 @@
+<template>
+<div class="disk">
+	<x-pie class="pie" :value="usage"/>
+	<div>
+		<p><fa :icon="['far', 'hdd']"/>Storage</p>
+		<p>Total: {{ total | bytes(1) }}</p>
+		<p>Free: {{ available | bytes(1) }}</p>
+		<p>Used: {{ used | bytes(1) }}</p>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XPie from './server.pie.vue';
+
+export default Vue.extend({
+	components: {
+		XPie
+	},
+	props: ['connection'],
+	data() {
+		return {
+			usage: 0,
+			total: 0,
+			used: 0,
+			available: 0
+		};
+	},
+	mounted() {
+		this.connection.on('stats', this.onStats);
+	},
+	beforeDestroy() {
+		this.connection.off('stats', this.onStats);
+	},
+	methods: {
+		onStats(stats) {
+			stats.disk.used = stats.disk.total - stats.disk.free;
+			this.usage = stats.disk.used / stats.disk.total;
+			this.total = stats.disk.total;
+			this.used = stats.disk.used;
+			this.available = stats.disk.available;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.disk
+	> .pie
+		padding 10px
+		height 100px
+		float left
+
+	> div
+		float left
+		width calc(100% - 100px)
+		padding 10px 10px 10px 0
+
+		> p
+			margin 0
+			font-size 12px
+			color var(--chartCaption)
+
+			&:first-child
+				font-weight bold
+
+				> [data-icon]
+					margin-right 4px
+
+	&:after
+		content ""
+		display block
+		clear both
+
+</style>
diff --git a/src/client/app/common/views/widgets/server.info.vue b/src/client/app/common/views/widgets/server.info.vue
@@ -0,0 +1,26 @@
+<template>
+<div class="info">
+	<p>Maintainer: <b><a :href="'mailto:' + meta.maintainer.email" target="_blank">{{ meta.maintainer.name }}</a></b></p>
+	<p>Machine: {{ meta.machine }}</p>
+	<p>Node: {{ meta.node }}</p>
+	<p>Version: {{ meta.version }} </p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['meta']
+});
+</script>
+
+<style lang="stylus" scoped>
+.info
+	padding 10px 14px
+
+	> p
+		margin 0
+		font-size 12px
+		color var(--text)
+</style>
diff --git a/src/client/app/common/views/widgets/server.memory.vue b/src/client/app/common/views/widgets/server.memory.vue
@@ -0,0 +1,76 @@
+<template>
+<div class="memory">
+	<x-pie class="pie" :value="usage"/>
+	<div>
+		<p><fa icon="memory"/>Memory</p>
+		<p>Total: {{ total | bytes(1) }}</p>
+		<p>Used: {{ used | bytes(1) }}</p>
+		<p>Free: {{ free | bytes(1) }}</p>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XPie from './server.pie.vue';
+
+export default Vue.extend({
+	components: {
+		XPie
+	},
+	props: ['connection'],
+	data() {
+		return {
+			usage: 0,
+			total: 0,
+			used: 0,
+			free: 0
+		};
+	},
+	mounted() {
+		this.connection.on('stats', this.onStats);
+	},
+	beforeDestroy() {
+		this.connection.off('stats', this.onStats);
+	},
+	methods: {
+		onStats(stats) {
+			stats.mem.free = stats.mem.total - stats.mem.used;
+			this.usage = stats.mem.used / stats.mem.total;
+			this.total = stats.mem.total;
+			this.used = stats.mem.used;
+			this.free = stats.mem.free;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.memory
+	> .pie
+		padding 10px
+		height 100px
+		float left
+
+	> div
+		float left
+		width calc(100% - 100px)
+		padding 10px 10px 10px 0
+
+		> p
+			margin 0
+			font-size 12px
+			color var(--chartCaption)
+
+			&:first-child
+				font-weight bold
+
+				> [data-icon]
+					margin-right 4px
+
+	&:after
+		content ""
+		display block
+		clear both
+
+</style>
diff --git a/src/client/app/common/views/widgets/server.pie.vue b/src/client/app/common/views/widgets/server.pie.vue
@@ -0,0 +1,61 @@
+<template>
+<svg viewBox="0 0 1 1" preserveAspectRatio="none">
+	<circle
+		:r="r"
+		cx="50%" cy="50%"
+		fill="none"
+		stroke-width="0.1"
+		stroke="rgba(0, 0, 0, 0.05)"/>
+	<circle
+		:r="r"
+		cx="50%" cy="50%"
+		:stroke-dasharray="Math.PI * (r * 2)"
+		:stroke-dashoffset="strokeDashoffset"
+		fill="none"
+		stroke-width="0.1"
+		:stroke="color"/>
+	<text x="50%" y="50%" dy="0.05" text-anchor="middle">{{ (value * 100).toFixed(0) }}%</text>
+</svg>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			type: Number,
+			required: true
+		}
+	},
+	data() {
+		return {
+			r: 0.4
+		};
+	},
+	computed: {
+		color(): string {
+			return `hsl(${180 - (this.value * 180)}, 80%, 70%)`;
+		},
+		strokeDashoffset(): number {
+			return (1 - this.value) * (Math.PI * (this.r * 2));
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+svg
+	display block
+	height 100%
+
+	> circle
+		transform-origin center
+		transform rotate(-90deg)
+		transition stroke-dashoffset 0.5s ease
+
+	> text
+		font-size 0.15px
+		fill var(--chartCaption)
+
+</style>
diff --git a/src/client/app/common/views/widgets/server.uptimes.vue b/src/client/app/common/views/widgets/server.uptimes.vue
@@ -0,0 +1,47 @@
+<template>
+<div class="uptimes">
+	<p>Uptimes</p>
+	<p>Process: {{ process }}</p>
+	<p>OS: {{ os }}</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import formatUptime from '../../scripts/format-uptime';
+
+export default Vue.extend({
+	props: ['connection'],
+	data() {
+		return {
+			process: 0,
+			os: 0
+		};
+	},
+	mounted() {
+		this.connection.on('stats', this.onStats);
+	},
+	beforeDestroy() {
+		this.connection.off('stats', this.onStats);
+	},
+	methods: {
+		onStats(stats) {
+			this.process = formatUptime(stats.process_uptime);
+			this.os = formatUptime(stats.os_uptime);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.uptimes
+	padding 10px 14px
+
+	> p
+		margin 0
+		font-size 12px
+		color var(--text)
+
+		&:first-child
+			font-weight bold
+</style>