@arkxos/arkos-system 0.1.0

package/src/views/monitor/database.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="page-container">
+    <iframe
+      src="druid/index.html"
+      style="border: none; box-shadow: none;"
+      allowtransparency="yes"
+      width="100%"
+      height="100%"
+    ></iframe>
+  </div>
+</template>

package/src/views/monitor/details-diskspace.vue

@@ -0,0 +1,56 @@
+<template>
+  <panel title="硬盘" v-if="current">
+    <div class="content">
+      <div class="text-center">
+        <p class="font-bold">总计</p>
+        <p v-text="prettyBytes(current.total)" />
+      </div>
+      <div class="text-center">
+        <p class="font-bold">可用</p>
+        <p v-text="prettyBytes(current.free)" />
+      </div>
+      <div class="text-center">
+        <p class="font-bold">阈值</p>
+        <p v-text="prettyBytes(current.threshold)" />
+      </div>
+    </div>
+  </panel>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import panel from './panel.vue';
+import api from '@/http/api';
+import prettyBytes from 'pretty-bytes';
+
+const current = ref(null);
+
+const fetchMetrics = async() => {
+  const res = await api.get('/actuator/health');
+  current.value = res.data.components?.diskSpace?.details || {};
+};
+
+onMounted(() => {
+  fetchMetrics();
+});
+</script>
+
+<style scoped>
+.content {
+  display: flex;
+  flex-direction: row;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  .text-center {
+    text-align: center;
+    flex-grow: 1;
+  }
+  .font-bold {
+    margin-bottom: 5px;
+  }
+}
+</style>

package/src/views/monitor/details-gc.vue

@@ -0,0 +1,93 @@
+<template>
+  <panel title="垃圾回收" v-if="current">
+    <div class="content">
+      <div class="text-center">
+        <p class="font-bold">总计</p>
+        <p v-text="current.count" />
+      </div>
+      <div class="text-center">
+        <p class="font-bold">总耗时</p>
+        <p v-text="`${current.total_time.asSeconds().toFixed(4)}s`" />
+      </div>
+      <div class="text-center">
+        <p class="font-bold">最大耗时</p>
+        <p v-text="`${current.max.asSeconds().toFixed(4)}s`" />
+      </div>
+    </div>
+  </panel>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import moment from 'moment';
+import panel from './panel.vue';
+import api from '@/http/api';
+
+const current = ref(null);
+
+const fetchMetrics = async() => {
+  const res = await api.get('/actuator/metrics/jvm.gc.pause');
+  const measurements = res.data.measurements.reduce(
+    (current, measurement) => ({
+      ...current,
+      [measurement.statistic.toLowerCase()]: measurement.value,
+    }),
+    {},
+  );
+  current.value = {
+    ...measurements,
+    total_time: moment.duration(toMillis(measurements.total_time, res.baseUnit)),
+    max: moment.duration(toMillis(measurements.max, res.baseUnit)),
+  };
+};
+
+const toMillis = (value, baseUnit) => {
+  switch (baseUnit) {
+    case 'nanoseconds':
+      return value / 1000000;
+    case 'microseconds':
+      return value / 1000;
+    case 'milliseconds':
+      return value;
+    case 'seconds':
+    default:
+      return value * 1000;
+  }
+};
+
+const shutdown = ref(false);
+const loopWithDelay = async(taskFn, interval = 1000) => {
+  while (!shutdown.value) {
+    await taskFn();
+    await new Promise(res => setTimeout(res, interval));
+  }
+}
+
+onMounted(() => {
+  loopWithDelay(fetchMetrics);
+});
+
+onUnmounted(() => {
+  shutdown.value = true;
+});
+</script>
+
+<style scoped>
+.content {
+  display: flex;
+  flex-direction: row;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  .text-center {
+    text-align: center;
+    flex-grow: 1;
+  }
+  .font-bold {
+    margin-bottom: 5px;
+  }
+}
+</style>

package/src/views/monitor/details-memory.vue

@@ -0,0 +1,143 @@
+<template>
+  <panel :title="`内存：${name}`">
+    <div>
+      <div v-if="current" class="content">
+        <div v-if="current.metaspace" class="text-center">
+          <p class="font-bold metaspace" v-text="'初始空间'" />
+          <p v-text="prettyBytes(current.metaspace)" />
+        </div>
+        <div class="text-center">
+          <p class="font-bold used" v-text="'已用'" />
+          <p v-text="prettyBytes(current.used)" />
+        </div>
+        <div class="text-center">
+          <p class="font-bold current" v-text="'当前可用'" />
+          <p v-text="prettyBytes(current.committed)" />
+        </div>
+        <div v-if="current.max >= 0" class="text-center">
+          <p class="font-bold" v-text="'最大'" />
+          <p v-text="prettyBytes(current.max)" />
+        </div>
+      </div>
+
+      <mem-chart v-if="chartData.length > 0" :data="chartData" />
+    </div>
+  </panel>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import prettyBytes from 'pretty-bytes';
+import panel from './panel.vue';
+import api from '@/http/api';
+import MemChart from './mem-chart.vue';
+
+const props = defineProps({
+  type: String
+});
+
+const current = ref(null);
+const chartData = ref([]);
+const tempData = ref([]);
+
+const name = computed(() => {
+  switch (props.type) {
+    case 'heap':
+      return 'Heap';
+    case 'nonheap':
+      return 'Non heap';
+    default:
+      return props.type;
+  }
+});
+
+const fetchMetrics = async() => {
+  const responseMax = api.get(`/actuator/metrics/jvm.memory.max?tag=area:${props.type}&tag=area:${props.type}`);
+  const responseUsed = api.get(`/actuator/metrics/jvm.memory.used?tag=area:${props.type}&tag=area:${props.type}`);
+  const hasMetaspace = (await responseUsed).data.availableTags.some(
+    (tag) => tag.tag === 'id' && tag.values.includes('Metaspace'),
+  );
+  const responseMetaspace =
+    props.type === 'nonheap' && hasMetaspace
+      ? api.get(`/actuator/metrics/jvm.memory.used?tag=area:${props.type}&tag=area:${props.type}&tag=id:Metaspace`)
+      : null;
+  const responseCommitted = api.get(`/actuator/metrics/jvm.memory.committed?tag=area:${props.type}&tag=area:${props.type}`)
+  const data = {
+    max: (await responseMax).data.measurements[0].value,
+    used: (await responseUsed).data.measurements[0].value,
+    metaspace: responseMetaspace
+      ? (await responseMetaspace).data.measurements[0].value
+      : null,
+    committed: (await responseCommitted).data.measurements[0].value,
+  };
+
+  const date = new Date();
+  const timestamp = `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
+  tempData.value.push({ ...data, timestamp: timestamp });
+  if (chartData.value.length <= 2 || tempData.value.length >= 5) {
+    chartData.value.push(...tempData.value);
+    current.value = tempData.value[tempData.value.length - 1];
+    tempData.value = [];
+  }
+};
+
+const shutdown = ref(false);
+const loopWithDelay = async(taskFn, interval = 1000) => {
+  while (!shutdown.value) {
+    await taskFn();
+    await new Promise(res => setTimeout(res, interval));
+  }
+}
+
+onMounted(() => {
+  loopWithDelay(fetchMetrics);
+});
+
+onUnmounted(() => {
+  shutdown.value = true;
+});
+</script>
+
+<style scoped>
+.content {
+  display: flex;
+  flex-direction: row;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  .text-center {
+    text-align: center;
+    flex-grow: 1;
+  }
+  .font-bold {
+    margin-bottom: 5px;
+  }
+  .used::before {
+    background-color: #65A5D9;
+    content: "";
+    width: .75em;
+    height: .75em;
+    display: inline-block;
+    margin-right: .25em;
+  }
+  .current::before {
+    background-color: #FFE6A1;
+    content: "";
+    width: .75em;
+    height: .75em;
+    display: inline-block;
+    margin-right: .25em;
+  }
+  .metaspace::before {
+    background-color: #68DCB7;
+    content: "";
+    width: .75em;
+    height: .75em;
+    display: inline-block;
+    margin-right: .25em;
+  }
+}
+</style>

package/src/views/monitor/details-process.vue

@@ -0,0 +1,132 @@
+<template>
+  <panel title="进程">
+    <div class="content">
+      <div class="text-center">
+        <p class="font-bold">运行时间</p>
+        <p v-text="uptime" />
+      </div>
+      <div class="text-center">
+        <p class="font-bold">进程CPU使用率</p>
+        <p v-text="isNaN(processCpuLoad) ? '-' : `${(processCpuLoad * 100).toFixed(2)}%`" />
+      </div>
+      <div class="text-center">
+        <p class="font-bold">系统CPU使用率</p>
+        <p v-text="isNaN(systemCpuLoad) ? '-' : `${(systemCpuLoad * 100).toFixed(2)}%`" />
+      </div>
+      <div class="text-center">
+        <p class="font-bold">CPU核心数</p>
+        <p v-text="systemCpuCount" />
+      </div>
+    </div>
+  </panel>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import panel from './panel.vue';
+import api from '@/http/api';
+import moment from 'moment';
+
+const uptime = ref(null);
+const systemCpuLoad = ref(null);
+const processCpuLoad = ref(null);
+const systemCpuCount = ref(null);
+
+const fetchMetric = async (name) => {
+  const res = await api.get('/actuator/metrics/' + name);
+  return res.data;
+};
+
+const fetchUptime = async() => {
+  try {
+    const res = await fetchMetric('process.uptime');
+    const duration = moment.duration(toMillis(res.measurements[0].value, res.baseUnit));
+    uptime.value = `${Math.floor(
+      duration.asDays(),
+    )}d ${duration.hours()}h ${duration.minutes()}m ${duration.seconds()}s`;
+  } catch (err) {
+    console.warn('Fetching Uptime failed:', err);
+  }
+};
+
+const fetchCpuCount = async() => {
+  try {
+    const res = await fetchMetric('system.cpu.count');
+    systemCpuCount.value = res.measurements[0].value;
+  } catch (err) {
+    console.warn('Fetching Cpu Count failed:', err);
+  }
+};
+
+const fetchCpuLoadMetrics = async() => {
+  try {
+    const res = await fetchMetric('process.cpu.usage');
+    processCpuLoad.value = res.measurements[0].value;
+  } catch (err) {
+    console.warn('Fetching Process CPU Load failed:', err);
+  }
+
+  try {
+    const res = await fetchMetric('system.cpu.usage');
+    systemCpuLoad.value = res.measurements[0].value;
+  } catch (err) {
+    console.warn('Fetching System CPU Load failed:', err);
+  }
+};
+
+const toMillis = (value, baseUnit) => {
+  switch (baseUnit) {
+    case 'nanoseconds':
+      return value / 1000000;
+    case 'microseconds':
+      return value / 1000;
+    case 'milliseconds':
+      return value;
+    case 'seconds':
+    default:
+      return value * 1000;
+  }
+};
+
+const fetchInfo = async() => {
+  await fetchUptime();
+  await fetchCpuCount();
+  await fetchCpuLoadMetrics();
+};
+
+const shutdown = ref(false);
+const loopWithDelay = async(taskFn, interval = 1000) => {
+  while (!shutdown.value) {
+    await taskFn();
+    await new Promise(res => setTimeout(res, interval));
+  }
+}
+
+onMounted(() => {
+  loopWithDelay(fetchInfo);
+});
+
+onUnmounted(() => {
+  shutdown.value = true;
+});
+</script>
+
+<style scoped>
+.content {
+  display: flex;
+  flex-direction: row;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  .text-center {
+    text-align: center;
+    flex-grow: 1;
+  }
+  .font-bold {
+    margin-bottom: 5px;
+  }
+}
+</style>

package/src/views/monitor/details-threads.vue

@@ -0,0 +1,106 @@
+<template>
+  <panel title="线程">
+    <div>
+      <div v-if="current" class="content">
+        <div class="text-center">
+          <p class="font-bold first">活动线程</p>
+          <p v-text="current.live" />
+        </div>
+        <div class="text-center">
+          <p class="font-bold second">守护进程</p>
+          <p v-text="current.daemon" />
+        </div>
+        <div class="text-center">
+          <p class="font-bold">线程峰值</p>
+          <p v-text="current.peak" />
+        </div>
+      </div>
+
+      <threads-chart v-if="chartData.length > 0" :data="chartData" />
+    </div>
+  </panel>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import panel from './panel.vue';
+import threadsChart from './threads-chart.vue';
+import api from '@/http/api';
+
+const current = ref({});
+const chartData = ref([]);
+const tempData = ref([]);
+
+const fetchMetrics = async() => {
+  const responseLive = api.get('/actuator/metrics/jvm.threads.live');
+  const responsePeak = api.get('/actuator/metrics/jvm.threads.peak');
+  const responseDaemon = api.get('/actuator/metrics/jvm.threads.daemon');
+
+  const data = {
+    live: (await responseLive).data.measurements[0].value,
+    peak: (await responsePeak).data.measurements[0].value,
+    daemon: (await responseDaemon).data.measurements[0].value,
+  };
+
+  current.value = data;
+  const date = new Date();
+  const timestamp = `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
+  tempData.value.push({ ...data, timestamp: timestamp });
+  if (chartData.value.length <= 2 || tempData.value.length >= 5) {
+    chartData.value.push(...tempData.value);
+    tempData.value = [];
+  }
+};
+
+const shutdown = ref(false);
+const loopWithDelay = async(taskFn, interval = 1000) => {
+  while (!shutdown.value) {
+    await taskFn();
+    await new Promise(res => setTimeout(res, interval));
+  }
+}
+
+onMounted(() => {
+  loopWithDelay(fetchMetrics);
+});
+
+onUnmounted(() => {
+  shutdown.value = true;
+});
+</script>
+
+<style scoped>
+.content {
+  display: flex;
+  flex-direction: row;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  .text-center {
+    text-align: center;
+    flex-grow: 1;
+  }
+  .font-bold {
+    margin-bottom: 5px;
+  }
+  .first::before {
+    background-color: #FFE6A1;
+    content: "";
+    width: .75em;
+    height: .75em;
+    display: inline-block;
+    margin-right: .25em;
+  }
+  .second::before {
+    background-color: #65A5D9;
+    content: "";
+    width: .75em;
+    height: .75em;
+    display: inline-block;
+    margin-right: .25em;
+  }
+}
+</style>

package/src/views/monitor/line-chart.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    ref="chartDiv"
+    :style="'width: 100%;height: ' + (height ? height : '200px')"
+  ></div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick, markRaw, watch } from 'vue';
+import * as echarts from 'echarts';
+import prettyBytes from 'pretty-bytes';
+
+const props = defineProps({
+  label: String,
+  datasets: Array,
+  data: Array,
+  formatter: Boolean,
+  height: String
+});
+const chartDiv = ref();
+const currChart = ref(null);
+const zLevel = ref(100);
+
+const init = async() => {
+  const color = props.datasets.length >= 3
+    ? ['#68DCB7', '#65A5D9', '#FFE6A1']
+    : ['#65A5D9', '#FFE6A1']
+  const labels = props.data.map(d => d[props.label]);
+  const series = props.datasets.map(id => {
+    return {
+      name: id,
+      type: 'line',
+      areaStyle: {
+        origin: 'start',
+        opacity: 1
+      },
+      emphasis: { disabled: true },
+      showSymbol: false,
+      zlevel: zLevel.value--,
+      data: props.data.map(d => d[id])
+    };
+  });
+
+  const option = {
+    color: color,
+    grid: {
+      top: '20px',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: labels
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisLabel: {
+          formatter: (value) => {
+            return props.formatter ? prettyBytes(value) : value;
+          }
+        }
+      }
+    ],
+    series: series
+  };
+
+  if (!currChart.value) {
+    currChart.value = markRaw(echarts.init(chartDiv.value));
+  }
+  currChart.value.setOption(option);
+  await nextTick(() => {
+    try {
+      currChart.value.resize();
+    } catch (e) {
+      console.log(e);
+    }
+  });
+};
+
+watch(() => props.data, () => {
+  init();
+}, { deep: true });
+
+onMounted(() => {
+  init();
+});
+</script>

package/src/views/monitor/mem-chart.vue

@@ -0,0 +1,22 @@
+<template>
+  <LineChart
+    label="timestamp"
+    :datasets="datasets"
+    :data="data"
+    :formatter="true"
+  />
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import LineChart from './line-chart.vue';
+
+const props = defineProps({
+  data: Array
+});
+
+const datasets = computed(() => {
+  const hasMetaspace = Object.values(props.data).some((d) => d.metaspace !== null);
+  return hasMetaspace ? ['metaspace', 'used', 'committed'] : ['used', 'committed'];
+});
+</script>