OptimusX
/
OneAuth
mirror of https://github.com/veypi/OneAuth.git
4
0
Fork 0
Code Issues Projects Releases Wiki Activity

update

Browse Source
master
veypi 1 year ago
parent 583bca4817
commit 73e56ca8c5
19 changed files with 393 additions and 182 deletions
Show Stats Download Patch File Download Diff File

8
README.md
Unescape Escape View File

@ -4,3 +4,11 @@
[Demo](https://oa.veypi.com) [Demo](https://oa.veypi.com)
### 依赖库
```bash
docker run -dit --name=tsdb -v /Users/veypi/test/vdb:/victoria-metrics-data -p 8428:8428 victoriametrics/victoria-metrics -search.latencyOffset=1s
nats-server -c ./script/nats.cfg
```

7
oab/cfg-demo.yml
Unescape Escape View File

@ -21,9 +21,10 @@ nats_sys:
- UCOKXBGDAXXQOR4XUPUJ4O22HZ2A3KQN3JLCCYM3ISSKHLBZJXXQ3NLF - UCOKXBGDAXXQOR4XUPUJ4O22HZ2A3KQN3JLCCYM3ISSKHLBZJXXQ3NLF
- SUAEILQZDD2UT2ZNR6DCA44YCRKAZDYDOJRUPAUA7AOWFVGSSPFPCLXF24 - SUAEILQZDD2UT2ZNR6DCA44YCRKAZDYDOJRUPAUA7AOWFVGSSPFPCLXF24
info: info:
ws_url: 198.19.249.3:4221 ws_url: 127.0.0.1:4221
nats_url: 198.19.249.3:4222 nats_url: 127.0.0.1:4222
api_url: 198.19.249.3:4001 api_url: 127.0.0.1:4001
ts_url: 127.0.0.1:8428
user_init_space: 300 user_init_space: 300

4
oab/dist/index.html vendored
Unescape Escape View File

@ -1,3 +1,3 @@
<!DOCTYPE html><html><head><title>OA</title><meta charset=utf-8><meta name=description content=oneauth><meta name=format-detection content="telephone=no"><meta name=msapplication-tap-highlight content=no><meta name=viewport content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"><link rel=icon type=image/ico href="/favicon.ico"> <script type="module" crossorigin src="/assets/index.80ecf914.js"></script> <!DOCTYPE html><html><head><title>OA</title><meta charset=utf-8><meta name=description content=oneauth><meta name=format-detection content="telephone=no"><meta name=msapplication-tap-highlight content=no><meta name=viewport content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"><link rel=icon type=image/ico href="/favicon.ico"> <script type="module" crossorigin src="/assets/index.559d1c65.js"></script>
<link rel="stylesheet" href="/assets/index.45343e6a.css"> <link rel="stylesheet" href="/assets/index.4abc03f5.css">
</head><body><div id=v-msg></div><div id=q-app></div></body></html> </head><body><div id=v-msg></div><div id=q-app></div></body></html>

8
oab/src/cfg.rs
Unescape Escape View File

@ -114,6 +114,7 @@ pub struct InfoOpt {
pub nats_url: String, pub nats_url: String,
pub ws_url: String, pub ws_url: String,
pub api_url: String, pub api_url: String,
pub ts_url: String,
pub token: Option<String>, pub token: Option<String>,
} }
@ -193,9 +194,10 @@ impl AppState {
], ],
user_init_space: 300, user_init_space: 300,
info: InfoOpt { info: InfoOpt {
ws_url: "http://127.0.0.1:4221".to_string(), ws_url: "127.0.0.1:4221".to_string(),
nats_url: "http://127.0.0.1:4222".to_string(), nats_url: "127.0.0.1:4222".to_string(),
api_url: "http://127.0.0.1:4001".to_string(), api_url: "127.0.0.1:4001".to_string(),
ts_url: "127.0.0.1:8428".to_string(),
token: None, token: None,
}, },
} }

16
oab/src/libs/task.rs
Unescape Escape View File

@ -13,20 +13,20 @@ use std::sync::{Arc, Mutex};
use tracing::{info, warn}; use tracing::{info, warn};
#[derive(Debug, Clone, Deserialize, Serialize)] #[derive(Debug, Clone, Deserialize, Serialize)]
struct sysInfo { struct SysInfo {
client: clientInfo, client: ClientInfo,
id: String, id: String,
// server: String, // server: String,
} }
#[derive(Debug, Clone, Deserialize, Serialize)] #[derive(Debug, Clone, Deserialize, Serialize)]
struct clientInfo { struct ClientInfo {
id: i64, id: i64,
acc: String, acc: String,
name: String, name: String,
host: String, host: String,
} }
pub fn start_nats_online(client: async_nats::client::Client) { pub fn start_nats_online(client: async_nats::client::Client) {
let db: Arc<Mutex<HashMap<i64, clientInfo>>> = Arc::new(Mutex::new(HashMap::new())); let db: Arc<Mutex<HashMap<i64, ClientInfo>>> = Arc::new(Mutex::new(HashMap::new()));
{ {
let db = db.clone(); let db = db.clone();
let client = client.clone(); let client = client.clone();
@ -38,7 +38,7 @@ pub fn start_nats_online(client: async_nats::client::Client) {
while let Some(msg) = sub.next().await { while let Some(msg) = sub.next().await {
let s = String::from_utf8(msg.payload.to_vec()).unwrap(); let s = String::from_utf8(msg.payload.to_vec()).unwrap();
info!("{}", s); info!("{}", s);
let inf: sysInfo = serde_json::from_slice(&msg.payload.to_vec()).unwrap(); let inf: SysInfo = serde_json::from_slice(&msg.payload.to_vec()).unwrap();
info!("add {} {}", inf.client.id, inf.client.name); info!("add {} {}", inf.client.id, inf.client.name);
let mut db = db.lock().unwrap(); let mut db = db.lock().unwrap();
db.insert(inf.client.id, inf.client); db.insert(inf.client.id, inf.client);
@ -55,7 +55,7 @@ pub fn start_nats_online(client: async_nats::client::Client) {
.unwrap(); .unwrap();
while let Some(msg) = sub.next().await { while let Some(msg) = sub.next().await {
// let s = String::from_utf8(msg.payload.to_vec()).unwrap(); // let s = String::from_utf8(msg.payload.to_vec()).unwrap();
let inf: sysInfo = serde_json::from_slice(&msg.payload.to_vec()).unwrap(); let inf: SysInfo = serde_json::from_slice(&msg.payload.to_vec()).unwrap();
info!("remove {} {}", inf.client.id, inf.client.name); info!("remove {} {}", inf.client.id, inf.client.name);
let mut db = db.lock().unwrap(); let mut db = db.lock().unwrap();
db.remove(&inf.client.id); db.remove(&inf.client.id);
@ -66,14 +66,14 @@ pub fn start_nats_online(client: async_nats::client::Client) {
let mut sub = client.subscribe("sys.online".to_string()).await.unwrap(); let mut sub = client.subscribe("sys.online".to_string()).await.unwrap();
while let Some(msg) = sub.next().await { while let Some(msg) = sub.next().await {
// // let s = String::from_utf8(msg.payload.to_vec()).unwrap(); // // let s = String::from_utf8(msg.payload.to_vec()).unwrap();
// let inf: sysInfo = serde_json::from_slice(&msg.payload.to_vec()).unwrap(); // let inf: SysInfo = serde_json::from_slice(&msg.payload.to_vec()).unwrap();
// info!("remove {} {}", inf.client.id, inf.client.name); // info!("remove {} {}", inf.client.id, inf.client.name);
// let mut db = db.lock().unwrap(); // let mut db = db.lock().unwrap();
// db.remove(&inf.client.id); // db.remove(&inf.client.id);
if let Some(t) = msg.reply { if let Some(t) = msg.reply {
let d = { let d = {
let tmp = db.lock().unwrap(); let tmp = db.lock().unwrap();
let payload: Vec<clientInfo> = tmp.iter().map(|(_, c)| c.clone()).collect(); let payload: Vec<ClientInfo> = tmp.iter().map(|(_, c)| c.clone()).collect();
serde_json::to_string(&payload).unwrap() serde_json::to_string(&payload).unwrap()
}; };
match client.publish(t, d.into()).await { match client.publish(t, d.into()).await {

18
oab/src/main.rs
Unescape Escape View File

@ -5,12 +5,9 @@
// Distributed under terms of the Apache license. // Distributed under terms of the Apache license.
// //
use bytes::Bytes;
use actix_files as fs; use actix_files as fs;
use actix_web::{ use actix_web::{
dev::{self, Service}, dev::{self, Service},
get,
http::StatusCode, http::StatusCode,
middleware::{self, ErrorHandlerResponse, ErrorHandlers}, middleware::{self, ErrorHandlerResponse, ErrorHandlers},
web::{self}, web::{self},
@ -53,22 +50,7 @@ async fn main() -> Result<()> {
Ok(()) Ok(())
} }
async fn web(data: AppState) -> Result<()> { async fn web(data: AppState) -> Result<()> {
let client = match async_nats::ConnectOptions::new()
.nkey(data.nats_usr[1].clone())
.connect(data.info.nats_url.clone())
.await
{
Ok(r) => r,
Err(e) => {
info!("{}", e);
return Err(oab::Error::Unknown);
}
};
// libs::task::start_nats_online(client.clone()); // libs::task::start_nats_online(client.clone());
client
.publish("msg".to_string(), Bytes::from("asd"))
.await
.unwrap();
let url = data.server_url.clone(); let url = data.server_url.clone();
let dav = libs::fs::core(); let dav = libs::fs::core();
let serv = HttpServer::new(move || { let serv = HttpServer::new(move || {

1
oaweb/quasar.config.js
Unescape Escape View File

@ -40,7 +40,6 @@ module.exports = configure(function(/* ctx */) {
'i18n', 'i18n',
'api', 'api',
'pack', 'pack',
'oaer',
], ],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css

2
oaweb/src/assets/icon.js
View File

File diff suppressed because one or more lines are too long

24
oaweb/src/boot/oaer.ts
Unescape Escape View File

@ -1,24 +0,0 @@
/*
* oaer.ts
* Copyright (C) 2023 veypi <i@veypi.com>
* 2023-10-16 21:20
* Distributed under terms of the MIT license.
*/
// import '@veypi/oaer'
import oaer from '@veypi/oaer'
import '@veypi/oaer/dist/index.css'
import cfg from 'src/cfg'
import bus from 'src/libs/bus'
import util from 'src/libs/util'
oaer.set({
token: util.getToken(),
host: cfg.host,
uuid: cfg.id,
})
bus.on('token', (t: any) => {
oaer.set({ token: t })
})

18
oaweb/src/components/EssentialLink.vue
Unescape Escape View File

@ -1,18 +0,0 @@
<template>
<q-item class="flex items-center" v-ripple clickable tag="a" :href="link" :to="to">
<q-icon size="1.5rem" class="mr-2" :name="icon" />
<q-item-section>
<q-item-label>{{ title }}</q-item-label>
</q-item-section>
</q-item>
</template>
<script setup lang="ts">
import { MenuLink } from 'src/models'
withDefaults(defineProps<MenuLink>(), {
caption: '',
icon: '',
});
</script>

37
oaweb/src/components/ExampleComponent.vue
Unescape Escape View File

@ -1,37 +0,0 @@
<template>
<div>
<p>{{ title }}</p>
<ul>
<li v-for="todo in todos" :key="todo.id" @click="increment">
{{ todo.id }} - {{ todo.content }}
</li>
</ul>
<p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
<p>Active: {{ active ? 'yes' : 'no' }}</p>
<p>Clicks on todos: {{ clickCount }}</p>
</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { Todo, Meta } from './models';
interface Props {
title: string;
todos?: Todo[];
meta: Meta;
active: boolean;
}
const props = withDefaults(defineProps<Props>(), {
todos: () => [],
});
const clickCount = ref(0);
function increment() {
clickCount.value += 1;
return clickCount.value;
}
const todoCount = computed(() => props.todos.length);
</script>

2
oaweb/src/components/FsTree.vue
Unescape Escape View File

@ -10,7 +10,7 @@
class="cursor-pointer rounded-full h-8 pr-4 flex items-center hover:bg-gray-100" @click="toggle"> class="cursor-pointer rounded-full h-8 pr-4 flex items-center hover:bg-gray-100" @click="toggle">
<q-icon class="transition-all mx-2" :class="[expand ? 'rotate-90' : <q-icon class="transition-all mx-2" :class="[expand ? 'rotate-90' :
'']" style="font-size: 24px;" :name="root.type === '']" style="font-size: 24px;" :name="root.type ===
'directory' ? 'v-caret-right' : 'v-file'"> </q-icon> 'directory' ? 'v-right' : 'v-file'"> </q-icon>
<div> <div>
{{ root.basename || '/' }} {{ root.basename || '/' }}
</div> </div>

48
oaweb/src/components/tooltip.vue
Unescape Escape View File

@ -0,0 +1,48 @@
<!--
* tooltip.vue
* Copyright (C) 2023 veypi <i@veypi.com>
* 2023-10-23 21:49
* Distributed under terms of the MIT license.
-->
<template>
<div class="v-tooltip">
<slot></slot>
<div class="v-tooltip-text">
<slot name="text">
{{ text }}
</slot>
</div>
</div>
</template>
<script lang="ts" setup>
withDefaults(defineProps<{
text?: string
}>(),
{}
)
</script>
<style scoped>
.v-tooltip {
position: relative;
display: inline-block;
}
.v-tooltip .v-tooltip-text {
visibility: hidden;
visibility: hidden;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
padding: 5px 5px;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.v-tooltip:hover .v-tooltip-text {
visibility: visible;
}
</style>

11
oaweb/src/components/tschart/index.ts
Unescape Escape View File

@ -0,0 +1,11 @@
/*
* index.ts
* Copyright (C) 2023 veypi <i@veypi.com>
* 2023-10-22 05:11
* Distributed under terms of the MIT license.
*/
import tschart from './tschart.vue'
export default tschart

71
oaweb/src/components/tschart/params.ts
Unescape Escape View File

@ -0,0 +1,71 @@
/*
* params.ts
* Copyright (C) 2023 veypi <i@veypi.com>
* 2023-10-22 05:13
* Distributed under terms of the MIT license.
*/
import { ref } from 'vue'
let mode = ref(0)
let mode_label = ['近5分钟', '近1小时', '近24小时', '近7天', '近30天']
let change_mode = (m: number) => {
mode.value = m
let now = new Date()
switch (m) {
case 0: {
now.setMinutes(now.getMinutes() - 5)
params.value.start = now
params.value.step = "2s"
break
}
case 1: {
now.setHours(now.getHours() - 1)
params.value.start = now
params.value.step = "10s"
break
}
case 2: {
now.setHours(now.getHours() - 24)
params.value.start = now
params.value.step = "20s"
break
}
case 3: {
now.setHours(now.getHours() - 24 * 7)
params.value.start = now
params.value.step = "30s"
break
}
case 4: {
now.setHours(now.getHours() - 24 * 29)
params.value.start = now
params.value.step = "1h"
break
}
case 5: {
break
}
}
}
let params = ref<{ start: Date, end: Date, step: string }>({
start: new Date(),
end: new Date(),
step: '2s'
})
change_mode(0)
const set_delta = (start?: Date, end?: Date) => {
if (start) {
params.value.start = start
}
if (end) {
params.value.end = end
}
let delta = params.value.end.getTime() -
params.value.start.getTime()
console.log(delta)
}
export { params, change_mode, mode, mode_label }

98
oaweb/src/components/tschart.vue → oaweb/src/components/tschart/tschart.vue
Unescape Escape View File

@ -6,13 +6,22 @@
--> -->
<template> <template>
<div class="w-full h-full"> <div class="w-full h-full">
<div class="v-chart w-full h-full" ref="chartdom"></div> <div class="h-16 flex justify-start items-center">
<q-chip clickable :color="enable_sync ? 'primary' : ''" @click="enable_sync = !enable_sync">{{ enable_sync ? '关闭同步'
:
'开启同步' }}</q-chip>
<q-chip clickable :color="mode === k ? 'primary' : ''" v-for="(v, k) in mode_label" :key="k"
@click="change_mode(k)">{{
v }}</q-chip>
</div>
<div class="v-chart w-full" style="height: calc(100% - 4rem);" ref="chartdom"></div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echart from 'echarts' import * as echart from 'echarts'
import api from 'src/boot/api'; import api from 'src/boot/api';
import { params, mode, change_mode, mode_label } from './params'
import { onMounted, onUnmounted, computed, ref, watch, markRaw } from 'vue'; import { onMounted, onUnmounted, computed, ref, watch, markRaw } from 'vue';
interface Item { interface Item {
@ -24,22 +33,14 @@ interface Item {
} }
let props = withDefaults(defineProps<{ let props = withDefaults(defineProps<{
item: Item, item: Item,
// start?: string, sync?: boolean,
// end?: string,
// step?: string
}>(), }>(),
{ {
} }
) )
let getparams = ref<any>({
start: () => {
let d = new Date()
d.setMinutes(d.getMinutes() - 3)
return d.toISOString()
}, end: undefined, step: '2s'
})
let count = 0 let count = 0
let timer = ref<any[]>([]) let timer = ref<any[]>([])
let enable_sync = ref(false)
let chartdom = ref() let chartdom = ref()
let options = ref<{ [key: string]: any }>({}) let options = ref<{ [key: string]: any }>({})
let chart: echart.ECharts = {} as any let chart: echart.ECharts = {} as any
@ -58,6 +59,9 @@ const init_chart = () => {
if (chart.clear) { if (chart.clear) {
chart.clear() chart.clear()
} }
timer.value.forEach(e => {
clearInterval(e)
})
options.value = { options.value = {
animationThreshold: 200, animationThreshold: 200,
tooltip: Object.assign({}, tooltip), tooltip: Object.assign({}, tooltip),
@ -70,23 +74,30 @@ const init_chart = () => {
xAxis: { xAxis: {
type: 'time', type: 'time',
}, },
dataZoom: [
{
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
],
yAxis: {}, yAxis: {},
series: [] series: []
} }
if (props.item.valueFormatter) { if (props.item.valueFormatter) {
options.value.tooltip.valueFormatter = props.item.valueFormatter options.value.tooltip.valueFormatter = props.item.valueFormatter
} }
let tmp = {} as any let tmp = {
if (getparams.value.start) { start: params.value.start.toISOString(),
tmp.start = getparams.value.start() step: params.value.step,
} }
if (getparams.value.step) { let querys: string[] = Array.isArray(props.item.query) ? props.item.query :
tmp.step = getparams.value.step
}
let query: string[] = Array.isArray(props.item.query) ? props.item.query :
[props.item.query] [props.item.query]
for (let q = 0; q < query.length; q++) { let labels = Array.isArray(props.item.label) ? props.item.label :
api.tsdb.range(query[q], tmp).then(e => { [props.item.label]
for (let q = 0; q < querys.length; q++) {
let query = querys[q]
api.tsdb.range(query, tmp).then(e => {
if (e.status == 'success') { if (e.status == 'success') {
let data = e.data.result as any[] let data = e.data.result as any[]
if (data.length == 0) { if (data.length == 0) {
@ -96,19 +107,19 @@ const init_chart = () => {
let idx = options.value.series.length || 0 let idx = options.value.series.length || 0
data.forEach(d => { data.forEach(d => {
let name = props.item.name let name = props.item.name
if (typeof props.item.label === 'string') { let label = labels[q]
name = props.item.label if (typeof label === 'string') {
} else if (typeof props.item.label === 'function') { name = label
name = props.item.label(d.metric) } else if (typeof label === 'function') {
} else if (Array.isArray(props.item.label)) { name = label(d.metric)
name = props.item.label[q]
} }
options.value.series.push({ options.value.series.push({
name: name, name: name,
data: d.values.map((e: any) => data: d.values.map((e: any) =>
[e[0] * 1000, Number(e[1])]), [e[0] * 1000, Number(e[1])]),
metric: d.metric, metric: d.metric,
origin: query[q], metric_str: JSON.stringify(d.metric),
origin: query,
symbol: 'none', symbol: 'none',
smooth: true, smooth: true,
type: 'line', type: 'line',
@ -116,7 +127,7 @@ const init_chart = () => {
}) })
chart.setOption(options.value) chart.setOption(options.value)
let t = setInterval(() => { let t = setInterval(() => {
sync_chart(idx, query[q], count) sync_chart(idx, query, count)
}, 1000) }, 1000)
timer.value.push(t) timer.value.push(t)
} }
@ -125,16 +136,30 @@ const init_chart = () => {
// let query = props.query // let query = props.query
} }
const sync_chart = (idx: number, query: string, c: number) => { const sync_chart = (idx: number, query: string, c: number) => {
if (!enable_sync.value) {
return
}
api.tsdb.query(query).then(e => { api.tsdb.query(query).then(e => {
if (e.status == 'success') { if (e.status == 'success') {
let data = e.data.result as any[] let data = e.data.result as any[]
if (data.length == 0) { if (data.length == 0) {
console.warn('not get data') console.warn('not get data')
timer.value.forEach(e => {
clearInterval(e)
})
return return
} }
if (count === c) { if (count === c) {
data.forEach((d, i) => { data.forEach((d, i) => {
options.value.series[idx + i].data.push([d.value[0] * 1000, let sidx = idx + i
if (d.metric) {
let ti = options.value.series.findIndex((s: any) =>
query === s.origin && JSON.stringify(d.metric) === s.metric_str)
if (ti >= 0) {
sidx = ti
}
}
options.value.series[sidx].data.push([d.value[0] * 1000,
Number(d.value[1])]) Number(d.value[1])])
}) })
chart.setOption(options.value) chart.setOption(options.value)
@ -143,17 +168,22 @@ const sync_chart = (idx: number, query: string, c: number) => {
}) })
} }
watch(computed(() => props.item), q => { watch(computed(() => props.item), q => {
timer.value.forEach(e => {
clearInterval(e)
})
if (q) { if (q) {
init_chart() init_chart()
} }
}, { immediate: true }) })
watch(mode, q => {
init_chart()
})
onMounted(() => { onMounted(() => {
chart = markRaw(echart.init(chartdom.value)) enable_sync.value = props.sync
chart = markRaw(echart.init(chartdom.value, null, { renderer: 'svg' }))
init_chart()
}) })
onUnmounted(() => { onUnmounted(() => {
timer.value.forEach(e => { timer.value.forEach(e => {

15
oaweb/src/layouts/MainLayout.vue
Unescape Escape View File

@ -61,7 +61,20 @@ import { useRouter } from 'vue-router';
import Menu from './menu.vue' import Menu from './menu.vue'
import { useUserStore } from 'src/stores/user'; import { useUserStore } from 'src/stores/user';
import { OAer } from "@veypi/oaer"; import { OAer } from "@veypi/oaer";
import { util } from 'src/libs'; import { util, bus } from 'src/libs';
import oaer from '@veypi/oaer'
import '@veypi/oaer/dist/index.css'
import cfg from 'src/cfg'
oaer.set({
token: util.getToken(),
host: cfg.host,
uuid: cfg.id,
})
bus.on('token', (t: any) => {
oaer.set({ token: t })
})
const user = useUserStore() const user = useUserStore()
const router = useRouter() const router = useRouter()

12
oaweb/src/pages/fs.vue
Unescape Escape View File

@ -16,13 +16,17 @@
<script lang="ts" setup> <script lang="ts" setup>
import FsTree from 'src/components/FsTree.vue'; import FsTree from 'src/components/FsTree.vue';
import { oafs, fileProps } from '@veypi/oaer'; import { oafs, fileProps } from '@veypi/oaer';
import { onMounted, ref } from 'vue'; import { onMounted, ref, watch } from 'vue';
let root = ref({} as fileProps) let root = ref({} as fileProps)
watch(oafs.ready, e => {
if (e) {
oafs.dav().stat('/').then(e => {
root.value = e as fileProps
})
}
}, { immediate: true })
onMounted(() => { onMounted(() => {
oafs.dav().stat('/').then(e => {
root.value = e as fileProps
})
}) })
</script> </script>

175
oaweb/src/pages/stats.vue
Unescape Escape View File

@ -5,28 +5,118 @@
* Distributed under terms of the MIT license. * Distributed under terms of the MIT license.
--> -->
<template> <template>
<div class="flex flex-nowrap"> <div>
<div class="grow" style="height: calc(100%);"> <div v-if="id">
<tschart :item="querys[idx]"></tschart> <div class="text-2xl mb-4">
消息服务
<div class="float-right text-sm">{{ new Date(data.now).toLocaleString() }}</div>
</div>
<div class="">
<div class="w-full">ID: {{ id }}</div>
<div class="flex gap-8">
<div>CPU占用: {{ data.cpu }}%</div>
<div>内存占用: {{ (data.mem / 1024 / 1024).toFixed(2) }}M</div>
<div>连接数: {{ data.connections }}</div>
</div>
<div>发送: {{ (send_received[0] / 1024).toFixed(2) }} KB/s</div>
<div>收到: {{ (send_received[1] / 1024).toFixed(2) }} KB/s</div>
</div>
<div class="grid grid-cols-4 gap-4 mt-10" v-if="conns.length">
<div>ID</div>
<div>Name</div>
<div>运行时间</div>
<div>订阅主题</div>
<template v-for="c of conns" :key="c.cid">
<div>{{ c.cid }}</div>
<div>{{ c.name || '无' }}</div>
<div>{{ new Date(c.start).toLocaleString() }}</div>
<div>{{ c.subscriptions_list ?
c.subscriptions_list.sort().join(' ') : '' }}</div>
</template>
</div>
</div> </div>
<div class="flex flex-col gap-5"> <div class="flex flex-nowrap">
<q-chip :color="idx === i ? 'primary' : ''" class="select-none" v-for="(q, i) in querys" :key="i" @click="idx = i" <div class="grow" style="min-height: 50vh;">
clickable>{{ <tschart :item="querys[idx]"></tschart>
q.name }} </q-chip> </div>
<div class="flex flex-col gap-5">
<q-chip :color="idx === i ? 'primary' : ''" class="select-none" v-for="(q, i) in querys" :key="i" @click="idx = i"
clickable>{{
q.name }} </q-chip>
</div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import tschart from 'src/components/tschart.vue'; import { computed, ref, watch, onUnmounted } from 'vue';
import { ref } from 'vue'; import { nats } from '@veypi/oaer'
import api from 'src/boot/api'
const data = ref({} as any)
const conns = ref<any[]>([])
const id = computed(() => data.value.server_id)
const subs: any[] = []
const timer = ref()
let old_data = [0, 0]
const send_received = computed(() => {
if (!id.value) {
return [0, 0]
}
let os = data.value.out_bytes
let or = data.value.in_bytes
let res = [os - old_data[0], or - old_data[1]]
old_data = [os, or]
return res
})
watch(id, (_) => {
timer.value = setInterval(() => {
api.nats.general().then(e => {
data.value = e
})
api.nats.conns().then(e => {
conns.value = e.connections
})
// nats.request('$SYS.REQ.SERVER.PING').then((m) => {
// data.value = JSON.parse(m)
// })
}, 1000)
})
watch(computed(() => nats.ready.value), e => {
if (e) {
api.nats.general().then(e => {
old_data = [e.out_bytes, e.in_bytes]
data.value = e
})
}
}, { immediate: true })
onUnmounted(() => {
if (timer.value) {
clearInterval(timer.value)
}
for (let i of subs) {
i.unsubscribe()
}
})
import tschart from 'src/components/tschart';
const idx = ref(0) const idx = ref(0)
const querys = ref([ const querys = ref<{
name: string, query: string[] | string, label?: any,
valueFormatter?: any
}[]>([
{ {
name: 'cpu占用', name: 'cpu占用',
query: `100 - avg (irate(node_cpu_seconds_total{mode="idle"}[3s])) // query: `100 - avg (irate(node_cpu_seconds_total{mode="idle"}[3s]))
by(id) * 100`, // by(id) * 100`,
query: `avg by
(id)(irate(node_cpu_seconds_total{mode=~"sytem|user|iowait|irq|softirq|nice|steal|guest"}[3s]))
* 100`,
label: (d: any) => d.id as string, label: (d: any) => d.id as string,
valueFormatter: (value: number) => value.toFixed(2) + "%", valueFormatter: (value: number) => value.toFixed(2) + "%",
}, },
@ -40,28 +130,59 @@ const querys = ref([
valueFormatter: (value: number) => value.toFixed(2) + "%", valueFormatter: (value: number) => value.toFixed(2) + "%",
}, },
{ {
name: 'linux 内存', name: '磁盘',
query: [ query: `(1 - avg(node_filesystem_avail_bytes /
`(node_memory_Buffers_bytes + node_memory_Cached_bytes + node_filesystem_size_bytes[3s]) by (device, id)) * 100 `,
node_memory_MemFree_bytes) / 1024 / 1024 / 1024`, label: (d: any) => `${d.id}: ${d.device}` as string,
`node_memory_MemTotal_bytes / 1024 /1024 / 1024` valueFormatter: (value: number) => value.toFixed(2) + "%",
],
label: ['使用内存', '总内存'],
valueFormatter: (value: number) => value.toFixed(2) + "GB",
}, },
{ {
name: 'Mac cpu频率', name: '磁盘IOPS',
query: 'node_cpu_seconds_total', query: [
label: (d: any) => `cpu: ${d.cpu} mode: ${d.mode}` as string `sum by (id) (rate(node_disk_reads_completed_total[3s]))`,
`sum by (id) (rate(node_disk_writes_completed_total[3s]))`,
],
label: [
(d: any) => `${d.id} 读`,
(d: any) => `${d.id} 写`,
],
}, },
{ {
name: 'mem', name: '网络带宽',
query: 'node_memory_free_bytes / 1024 / 1024 / 1024' query: [
`sum by(id)(irate(node_network_receive_bytes_total{device!~"bond.*?|lo"}[3s])) / 1048576`,
`sum by(id)(irate(node_network_transmit_bytes_total{device!~"bond.*?|lo"}[3s])) / 1048576`
],
label: [
(d: any) => `${d.id} 下行`,
(d: any) => `${d.id} 上行`,
],
valueFormatter: (value: number) => value.toFixed(2) + "MB/s",
}, },
{ {
name: 'Mac swap', name: '内存',
query: 'node_memory_swap_used_bytes / 1024 / 1024 ' query: [
`(node_memory_Buffers_bytes + node_memory_Cached_bytes +
node_memory_MemFree_bytes) / 1024 / 1024 / 1024`,
`node_memory_MemTotal_bytes / 1024 /1024 / 1024`
],
label: [(d: any) => `${d.id}使用内`, (d: any) => `${d.id}总内存`],
valueFormatter: (value: number) => value.toFixed(2) + "GB",
}, },
// {
// name: 'Mac cpu频率',
// query: 'node_cpu_seconds_total',
// label: (d: any) => `cpu: ${d.cpu} mode: ${d.mode}` as string
// },
// {
// name: 'mem',
// query: 'node_memory_free_bytes / 1024 / 1024 / 1024'
// },
// {
// name: 'Mac swap',
// query: 'node_memory_swap_used_bytes / 1024 / 1024 '
// },
]) ])
</script> </script>

Write Preview
Loading…
Cancel
Save