Format uptimes (#3629)

* Format uptime

* 逆だわ

* ザ

* 1個多い

* Fix comment

src/client/app/common/scripts/format-uptime.ts

+
+/**
+ * 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;
+}

src/client/app/common/views/widgets/server.uptimes.vue

 <template>
 <div class="uptimes">
 	<p>Uptimes</p>
-	<p>Process: {{ process ? process.toFixed(0) : '---' }}s</p>
-	<p>OS: {{ os ? os.toFixed(0) : '---' }}s</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'],
@@ -25,8 +26,8 @@ export default Vue.extend({
 	},
 	methods: {
 		onStats(stats) {
-			this.process = stats.process_uptime;
-			this.os = stats.os_uptime;
+			this.process = formatUptime(stats.process_uptime);
+			this.os = formatUptime(stats.os_uptime);
 		}
 	}
 });