Skip to content

Commit f7f2a32

Browse files
saltbosaltbo
committed
feat: see the configs of envoy
1 parent dd68f01 commit f7f2a32

File tree

20 files changed

+1808
-0
lines changed

20 files changed

+1808
-0
lines changed

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Vue 3 + Vite
2+
3+
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4+
5+
## Recommended IDE Setup
6+
7+
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "seenvoy-front",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"ant-design-vue": "^3.2.9",
12+
"axios": "^0.27.2",
13+
"echarts": "^5.3.3",
14+
"unplugin-vue-components": "^0.21.0",
15+
"vue": "^3.2.25",
16+
"vue-json-viewer": "3",
17+
"vue-router": "^4.1.0"
18+
},
19+
"devDependencies": {
20+
"@vitejs/plugin-vue": "^2.3.3",
21+
"vite": "^2.9.9"
22+
}
23+
}

‎public/favicon.ico‎

4.19 KB
Binary file not shown.

‎src/App.vue‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<a-layout class="layout" :style="{ height: '100vh', overflow: 'auto' }">
3+
<a-layout-header>
4+
<div class="logo">Seenvoy</div>
5+
6+
7+
</a-layout-header>
8+
<a-layout-content style="padding: 0">
9+
<div :style="{ background: '#fff', height: '100vh' }">
10+
<router-view></router-view>
11+
</div>
12+
</a-layout-content>
13+
</a-layout>
14+
</template>
15+
<script>
16+
import { defineComponent, ref } from 'vue';
17+
export default defineComponent({
18+
setup() {
19+
return {
20+
selectedKeys: ref(['2']),
21+
};
22+
},
23+
24+
});
25+
</script>
26+
<style>
27+
html,
28+
body {
29+
height: 100%;
30+
margin: 0;
31+
}
32+
33+
#app {
34+
/* font-family: Avenir, Helvetica, Arial, sans-serif;
35+
-webkit-font-smoothing: antialiased;
36+
-moz-osx-font-smoothing: grayscale;
37+
text-align: center;
38+
color: #2c3e50;
39+
height: 100%; */
40+
/* margin-top: 60px; */
41+
}
42+
43+
#app .ant-layout-header {
44+
padding: 0 10px;
45+
}
46+
47+
#app .logo {
48+
float: left;
49+
color: #fff;
50+
width: 100px;
51+
font-size: 20px;
52+
font-weight: bold;
53+
}
54+
55+
.ant-row-rtl #app .logo {
56+
float: right;
57+
margin: 16px 0 16px 24px;
58+
}
59+
60+
[data-theme='dark'] .site-layout-content {
61+
background: #141414;
62+
}
63+
</style>

‎src/components/JSONViewer.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script>
2+
import { ref } from '@vue/reactivity';
3+
import JsonViewer from 'vue-json-viewer'
4+
export default {
5+
components: {
6+
JsonViewer,
7+
},
8+
props: {
9+
jsondata: Object
10+
},
11+
setup(props) {
12+
const drawerVisible = ref(true)
13+
const onClose = () => {
14+
drawerVisible.value = false
15+
}
16+
17+
console.log(112233, props.jsondata);
18+
return {
19+
drawerVisible,
20+
onClose
21+
};
22+
},
23+
}
24+
</script>
25+
26+
<template>
27+
<a-drawer title="JSONViewer" size="large" :visible="drawerVisible" @close="onClose" width="950">
28+
<json-viewer :value="jsondata" :expand-depth="5" copyable sort></json-viewer>
29+
</a-drawer>
30+
</template>
31+
32+
<style>
33+
</style>

‎src/libs/drawer/index.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { createApp } from 'vue'
2+
import Antd from 'ant-design-vue';
3+
import 'ant-design-vue/dist/antd.css';
4+
5+
// options为组件的props
6+
export const openDrawer = function (component, options) {
7+
console.log(options);
8+
let existEl = document.getElementById('component')
9+
if (existEl) {
10+
document.body.removeChild(existEl);
11+
}
12+
13+
let el = document.createElement('div')
14+
el.setAttribute('id', 'component')
15+
document.body.appendChild(el)
16+
17+
const app = createApp(component, options)
18+
app.use(Antd);
19+
app.mount("#component")
20+
}

‎src/libs/echarts/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { build } from "./sankey"
2+
3+
export const useSankey = () => {
4+
return {
5+
build,
6+
}
7+
}

‎src/libs/echarts/sankey.js‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import * as echarts from "echarts";
2+
3+
const buildSankeyData = (data) => {
4+
const buildDataItem = (item) => {
5+
return { name: item.name }
6+
}
7+
8+
const lcd = data.find(d => d["@type"].endsWith("ListenersConfigDump"))
9+
const rcd = data.find(d => d["@type"].endsWith("v3.RoutesConfigDump"))
10+
console.log(lcd);
11+
console.log(rcd);
12+
13+
const result = new Array()
14+
// lcd.static_listeners.forEach(ln => { listeners.push(buildDataItem(ln.listener)) })
15+
lcd.dynamic_listeners.forEach(item => { result.push(buildDataItem(item.active_state.listener)) })
16+
rcd.dynamic_route_configs.forEach(item => { result.push(buildDataItem(item.route_config)) })
17+
console.log(result);
18+
return result
19+
20+
return [{ "name": "outbound|8080||aws-map-tag-north.openfaas-fn.svc.cluster.local" }, { "name": "10.21.230.4:8080" }, { "name": "10.21.241.156:8080" }, { "name": "10.21.248.81:8080" }, { "name": "outbound|8080||cmdb-sync-baidu-spec-inventory.openfaas-fn.svc.cluster.local" }]
21+
}
22+
23+
const buildSankeyLinks = (raw_data) => {
24+
const lcd = raw_data.find(d => d["@type"].endsWith("ListenersConfigDump"))
25+
const rcd = raw_data.find(d => d["@type"].endsWith("v3.RoutesConfigDump"))
26+
lcd.dynamic_listeners.forEach(item => {
27+
console.log('fc', item.active_state.listener.filter_chains);
28+
})
29+
30+
const sankeyLinks = [];
31+
32+
33+
return sankeyLinks;
34+
return [{ "source": "0.0.0.0_8080", "target": "8080", "value": 58 }, { "source": "8080", "target": "PassthroughCluster", "value": 1 }, { "source": "8080", "target": "outbound|8080||apollo-api.openfaas-fn.svc.cluster.local", "value": 1 }, { "source": "outbound|8080||apollo-api.openfaas-fn.svc.cluster.local", "target": "10.21.230.27:8080", "value": 1 }, { "source": "8080", "target": "outbound|8080||app-api.openfaas-fn.svc.cluster.local", "value": 1 }]
35+
}
36+
37+
export const build = (domid, data) => {
38+
var dom = document.getElementById(domid);
39+
var chart = echarts.init(dom);
40+
var app = {};
41+
var option;
42+
43+
console.log(data);
44+
chart.setOption(
45+
(option = {
46+
// title: {
47+
// text: 'Sankey Diagram'
48+
// },
49+
tooltip: {
50+
trigger: 'item',
51+
triggerOn: 'mousemove'
52+
},
53+
series: [
54+
{
55+
type: 'sankey',
56+
data: buildSankeyData(data),
57+
links: buildSankeyLinks(data),
58+
emphasis: {
59+
focus: 'adjacency'
60+
},
61+
nodeAlign: 'left',
62+
levels: [
63+
{
64+
depth: 0,
65+
itemStyle: {
66+
color: '#fbb4ae'
67+
},
68+
lineStyle: {
69+
color: 'source',
70+
opacity: 0.6
71+
}
72+
},
73+
{
74+
depth: 1,
75+
itemStyle: {
76+
color: '#b3cde3'
77+
},
78+
lineStyle: {
79+
color: 'source',
80+
opacity: 0.6
81+
}
82+
},
83+
{
84+
depth: 2,
85+
itemStyle: {
86+
color: '#ccebc5'
87+
},
88+
lineStyle: {
89+
color: 'source',
90+
opacity: 0.6
91+
}
92+
},
93+
{
94+
depth: 3,
95+
itemStyle: {
96+
color: '#decbe4'
97+
},
98+
lineStyle: {
99+
color: 'source',
100+
opacity: 0.6
101+
}
102+
}
103+
],
104+
lineStyle: {
105+
color: 'source',
106+
curveness: 0.5
107+
}
108+
}
109+
]
110+
})
111+
);
112+
113+
if (option && typeof option === 'object') {
114+
chart.setOption(option);
115+
}
116+
window.onresize = function () {
117+
//自适应大小
118+
chart.resize();
119+
};
120+
}

0 commit comments

Comments
 (0)