mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-04-05 11:18:42 +08:00
Merge 865eb97af0e642d980704dc8ec851fb74fd9cfaf into 6858a9ad67483025f6a9432a926beb9327037be3
This commit is contained in:
HandsomeWu
GitHub
commit
4eaaee2176
@ -69,6 +69,7 @@ module.exports = {
|
||||
'newIsCap': true,
|
||||
'capIsNew': false
|
||||
}],
|
||||
'vue/no-unused-components': 'off',
|
||||
'new-parens': 2,
|
||||
'no-array-constructor': 2,
|
||||
'no-caller': 2,
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
"file-saver": "2.0.1",
|
||||
"fuse.js": "3.4.4",
|
||||
"js-cookie": "2.2.0",
|
||||
"js-yaml": "^4.1.0",
|
||||
"jsonlint": "1.6.3",
|
||||
"jszip": "3.2.1",
|
||||
"normalize.css": "7.0.0",
|
||||
@ -35,13 +36,16 @@
|
||||
"script-loader": "0.7.2",
|
||||
"sortablejs": "1.8.4",
|
||||
"tui-editor": "1.3.3",
|
||||
"vis-network": "^9.1.9",
|
||||
"vue": "2.6.10",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-router": "3.0.2",
|
||||
"vue-splitpane": "1.0.4",
|
||||
"vuedraggable": "2.20.0",
|
||||
"vuex": "3.1.0",
|
||||
"xlsx": "0.14.1"
|
||||
"xlsx": "0.14.1",
|
||||
"xterm": "^5.3.0",
|
||||
"xterm-addon-fit": "^0.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "4.4.4",
|
||||
|
||||
BIN
src/assets/custom-theme/topology.png
Normal file
BIN
src/assets/custom-theme/topology.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 255 KiB |
2
src/config/APIconfig.js
Normal file
2
src/config/APIconfig.js
Normal file
@ -0,0 +1,2 @@
|
||||
// src/config/apiConfig.js
|
||||
export const API_URL = 'http://localhost:3000'
|
||||
@ -7,10 +7,10 @@ Vue.use(Router)
|
||||
import Layout from '@/layout'
|
||||
|
||||
/* Router Modules */
|
||||
import componentsRouter from './modules/components'
|
||||
// import componentsRouter from './modules/components'
|
||||
import chartsRouter from './modules/charts'
|
||||
import tableRouter from './modules/table'
|
||||
import nestedRouter from './modules/nested'
|
||||
// import nestedRouter from './modules/nested'
|
||||
|
||||
/**
|
||||
* Note: sub-menu only appear when route children.length >= 1
|
||||
@ -79,46 +79,32 @@ export const constantRoutes = [
|
||||
path: 'dashboard',
|
||||
component: () => import('@/views/dashboard/index'),
|
||||
name: 'Dashboard',
|
||||
meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
|
||||
meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/documentation',
|
||||
path: '/grafana',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/documentation/index'),
|
||||
name: 'Documentation',
|
||||
meta: { title: 'Documentation', icon: 'documentation', affix: true }
|
||||
component: () => import('@/views/grafana/index'),
|
||||
name: 'Grafana',
|
||||
meta: { title: '算力可视化', icon: 'chart', affix: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/guide',
|
||||
path: '/schedule',
|
||||
component: Layout,
|
||||
redirect: '/guide/index',
|
||||
redirect: '/schedule/index',
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/guide/index'),
|
||||
name: 'Guide',
|
||||
meta: { title: 'Guide', icon: 'guide', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
component: Layout,
|
||||
redirect: '/profile/index',
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/profile/index'),
|
||||
name: 'Profile',
|
||||
meta: { title: 'Profile', icon: 'user', noCache: true }
|
||||
component: () => import('@/views/schedule/index'),
|
||||
name: 'Schedule',
|
||||
meta: { title: '调度决策', icon: 'guide', noCache: true }
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -129,48 +115,9 @@ export const constantRoutes = [
|
||||
* the routes that need to be dynamically loaded based on user roles
|
||||
*/
|
||||
export const asyncRoutes = [
|
||||
{
|
||||
path: '/permission',
|
||||
component: Layout,
|
||||
redirect: '/permission/page',
|
||||
alwaysShow: true, // will always show the root menu
|
||||
name: 'Permission',
|
||||
meta: {
|
||||
title: 'Permission',
|
||||
icon: 'lock',
|
||||
roles: ['admin', 'editor'] // you can set roles in root nav
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'page',
|
||||
component: () => import('@/views/permission/page'),
|
||||
name: 'PagePermission',
|
||||
meta: {
|
||||
title: 'Page Permission',
|
||||
roles: ['admin'] // or you can only set roles in sub nav
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'directive',
|
||||
component: () => import('@/views/permission/directive'),
|
||||
name: 'DirectivePermission',
|
||||
meta: {
|
||||
title: 'Directive Permission'
|
||||
// if do not set roles, means: this page does not require permission
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'role',
|
||||
component: () => import('@/views/permission/role'),
|
||||
name: 'RolePermission',
|
||||
meta: {
|
||||
title: 'Role Permission',
|
||||
roles: ['admin']
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/** when your routing map is too long, you can split it into small modules **/
|
||||
chartsRouter,
|
||||
tableRouter,
|
||||
{
|
||||
path: '/icon',
|
||||
component: Layout,
|
||||
@ -179,206 +126,7 @@ export const asyncRoutes = [
|
||||
path: 'index',
|
||||
component: () => import('@/views/icons/index'),
|
||||
name: 'Icons',
|
||||
meta: { title: 'Icons', icon: 'icon', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/** when your routing map is too long, you can split it into small modules **/
|
||||
componentsRouter,
|
||||
chartsRouter,
|
||||
nestedRouter,
|
||||
tableRouter,
|
||||
|
||||
{
|
||||
path: '/example',
|
||||
component: Layout,
|
||||
redirect: '/example/list',
|
||||
name: 'Example',
|
||||
meta: {
|
||||
title: 'Example',
|
||||
icon: 'el-icon-s-help'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'create',
|
||||
component: () => import('@/views/example/create'),
|
||||
name: 'CreateArticle',
|
||||
meta: { title: 'Create Article', icon: 'edit' }
|
||||
},
|
||||
{
|
||||
path: 'edit/:id(\\d+)',
|
||||
component: () => import('@/views/example/edit'),
|
||||
name: 'EditArticle',
|
||||
meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: 'list',
|
||||
component: () => import('@/views/example/list'),
|
||||
name: 'ArticleList',
|
||||
meta: { title: 'Article List', icon: 'list' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/tab',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/tab/index'),
|
||||
name: 'Tab',
|
||||
meta: { title: 'Tab', icon: 'tab' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/error',
|
||||
component: Layout,
|
||||
redirect: 'noRedirect',
|
||||
name: 'ErrorPages',
|
||||
meta: {
|
||||
title: 'Error Pages',
|
||||
icon: '404'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '401',
|
||||
component: () => import('@/views/error-page/401'),
|
||||
name: 'Page401',
|
||||
meta: { title: '401', noCache: true }
|
||||
},
|
||||
{
|
||||
path: '404',
|
||||
component: () => import('@/views/error-page/404'),
|
||||
name: 'Page404',
|
||||
meta: { title: '404', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/error-log',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'log',
|
||||
component: () => import('@/views/error-log/index'),
|
||||
name: 'ErrorLog',
|
||||
meta: { title: 'Error Log', icon: 'bug' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/excel',
|
||||
component: Layout,
|
||||
redirect: '/excel/export-excel',
|
||||
name: 'Excel',
|
||||
meta: {
|
||||
title: 'Excel',
|
||||
icon: 'excel'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'export-excel',
|
||||
component: () => import('@/views/excel/export-excel'),
|
||||
name: 'ExportExcel',
|
||||
meta: { title: 'Export Excel' }
|
||||
},
|
||||
{
|
||||
path: 'export-selected-excel',
|
||||
component: () => import('@/views/excel/select-excel'),
|
||||
name: 'SelectExcel',
|
||||
meta: { title: 'Export Selected' }
|
||||
},
|
||||
{
|
||||
path: 'export-merge-header',
|
||||
component: () => import('@/views/excel/merge-header'),
|
||||
name: 'MergeHeader',
|
||||
meta: { title: 'Merge Header' }
|
||||
},
|
||||
{
|
||||
path: 'upload-excel',
|
||||
component: () => import('@/views/excel/upload-excel'),
|
||||
name: 'UploadExcel',
|
||||
meta: { title: 'Upload Excel' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/zip',
|
||||
component: Layout,
|
||||
redirect: '/zip/download',
|
||||
alwaysShow: true,
|
||||
name: 'Zip',
|
||||
meta: { title: 'Zip', icon: 'zip' },
|
||||
children: [
|
||||
{
|
||||
path: 'download',
|
||||
component: () => import('@/views/zip/index'),
|
||||
name: 'ExportZip',
|
||||
meta: { title: 'Export Zip' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/pdf',
|
||||
component: Layout,
|
||||
redirect: '/pdf/index',
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/pdf/index'),
|
||||
name: 'PDF',
|
||||
meta: { title: 'PDF', icon: 'pdf' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/pdf/download',
|
||||
component: () => import('@/views/pdf/download'),
|
||||
hidden: true
|
||||
},
|
||||
|
||||
{
|
||||
path: '/theme',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/theme/index'),
|
||||
name: 'Theme',
|
||||
meta: { title: 'Theme', icon: 'theme' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/clipboard',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/clipboard/index'),
|
||||
name: 'ClipboardDemo',
|
||||
meta: { title: 'Clipboard', icon: 'clipboard' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: 'external-link',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'https://github.com/PanJiaChen/vue-element-admin',
|
||||
meta: { title: 'External Link', icon: 'link' }
|
||||
meta: { title: '服务访问', icon: 'link', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -3,32 +3,38 @@
|
||||
import Layout from '@/layout'
|
||||
|
||||
const chartsRouter = {
|
||||
path: '/charts',
|
||||
path: '/route',
|
||||
component: Layout,
|
||||
redirect: 'noRedirect',
|
||||
name: 'Charts',
|
||||
name: 'Route',
|
||||
meta: {
|
||||
title: 'Charts',
|
||||
icon: 'chart'
|
||||
title: '路由控制',
|
||||
icon: 'tree'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'keyboard',
|
||||
component: () => import('@/views/charts/keyboard'),
|
||||
name: 'KeyboardChart',
|
||||
meta: { title: 'Keyboard Chart', noCache: true }
|
||||
path: 'show_paths',
|
||||
component: () => import('@/views/route/show_paths'),
|
||||
name: 'ShowPaths',
|
||||
meta: { title: '查看最短路径', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'line',
|
||||
component: () => import('@/views/charts/line'),
|
||||
name: 'LineChart',
|
||||
meta: { title: 'Line Chart', noCache: true }
|
||||
path: 'show_sid',
|
||||
component: () => import('@/views/route/show_sid'),
|
||||
name: 'ShowSID',
|
||||
meta: { title: '查看SID', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'mix-chart',
|
||||
component: () => import('@/views/charts/mix-chart'),
|
||||
name: 'MixChart',
|
||||
meta: { title: 'Mix Chart', noCache: true }
|
||||
path: 'show_policy',
|
||||
component: () => import('@/views/route/show_policy.vue'),
|
||||
name: 'ShowPolicy',
|
||||
meta: { title: '路由策略管理', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'show_steer',
|
||||
component: () => import('@/views/route/show_steer'),
|
||||
name: 'ShowSteer',
|
||||
meta: { title: '引导策略管理', noCache: true }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -3,38 +3,26 @@
|
||||
import Layout from '@/layout'
|
||||
|
||||
const tableRouter = {
|
||||
path: '/table',
|
||||
path: '/deploy',
|
||||
component: Layout,
|
||||
redirect: '/table/complex-table',
|
||||
name: 'Table',
|
||||
redirect: '/deploy/app',
|
||||
name: 'Deploy',
|
||||
meta: {
|
||||
title: 'Table',
|
||||
icon: 'table'
|
||||
title: '算力请求',
|
||||
icon: 'edit'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'dynamic-table',
|
||||
component: () => import('@/views/table/dynamic-table/index'),
|
||||
name: 'DynamicTable',
|
||||
meta: { title: 'Dynamic Table' }
|
||||
path: 'app',
|
||||
component: () => import('@/views/deploy/app.vue'),
|
||||
name: 'DeployApp',
|
||||
meta: { title: '应用部署' }
|
||||
},
|
||||
{
|
||||
path: 'drag-table',
|
||||
component: () => import('@/views/table/drag-table'),
|
||||
name: 'DragTable',
|
||||
meta: { title: 'Drag Table' }
|
||||
},
|
||||
{
|
||||
path: 'inline-edit-table',
|
||||
component: () => import('@/views/table/inline-edit-table'),
|
||||
name: 'InlineEditTable',
|
||||
meta: { title: 'Inline Edit' }
|
||||
},
|
||||
{
|
||||
path: 'complex-table',
|
||||
component: () => import('@/views/table/complex-table'),
|
||||
name: 'ComplexTable',
|
||||
meta: { title: 'Complex Table' }
|
||||
path: 'service',
|
||||
component: () => import('@/views/deploy/service.vue'),
|
||||
name: 'DeployService',
|
||||
meta: { title: '服务部署' }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,97 +1,73 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<github-corner class="github-corner" />
|
||||
<el-image style="width: 100%; height: 100%" :src="require('@/assets/custom-theme/topology.png')" fit="fill" />
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column prop="cluster" label="所属集群" width="150" />
|
||||
<el-table-column prop="name" label="Node 名称" width="150" />
|
||||
<el-table-column prop="address" label="Node IP" />
|
||||
<el-table-column prop="role" label="Role" />
|
||||
<el-table-column prop="uuid" label="算力统一标识" />
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status === 'Ready' ? 'success' : 'danger'" disable-transitions>{{ scope.row.status
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData" />
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="8">
|
||||
<el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
|
||||
<transaction-table />
|
||||
</el-col>
|
||||
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
|
||||
<todo-list />
|
||||
</el-col>
|
||||
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
|
||||
<box-card />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GithubCorner from '@/components/GithubCorner'
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import LineChart from './components/LineChart'
|
||||
import RaddarChart from './components/RaddarChart'
|
||||
import PieChart from './components/PieChart'
|
||||
import BarChart from './components/BarChart'
|
||||
import TransactionTable from './components/TransactionTable'
|
||||
import TodoList from './components/TodoList'
|
||||
import BoxCard from './components/BoxCard'
|
||||
|
||||
const lineChartData = {
|
||||
newVisitis: {
|
||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
||||
},
|
||||
messages: {
|
||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
||||
},
|
||||
purchases: {
|
||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
||||
},
|
||||
shoppings: {
|
||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
}
|
||||
}
|
||||
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
export default {
|
||||
name: 'DashboardAdmin',
|
||||
components: {
|
||||
GithubCorner,
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
BarChart,
|
||||
TransactionTable,
|
||||
TodoList,
|
||||
BoxCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineChartData: lineChartData.newVisitis
|
||||
tableData: [] // 初始为空数组，将在 mounted 时获取数据
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchTableData() // 页面加载时调用数据请求方法
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
fetchTableData() {
|
||||
fetch(API_URL + '/dashboard/nodes', {
|
||||
method: 'Get',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// 转换数据为json并处理
|
||||
console.log('looking handsome', data)
|
||||
|
||||
// 创建一个空数组来存储表格数据
|
||||
const tableData = []
|
||||
|
||||
// 遍历 cluster_a 和 cluster_b 集群的数据
|
||||
Object.keys(data).forEach(cluster => {
|
||||
data[cluster].forEach(node => {
|
||||
console.log(cluster)
|
||||
// 将每个节点信息转换为表格所需格式
|
||||
tableData.push({
|
||||
cluster: cluster, // 当前集群名
|
||||
name: node.NAME, // 节点名称
|
||||
address: node.ADDRESS, // 节点 IP 地址
|
||||
role: node.ROLES, // 节点角色
|
||||
status: node.STATUS, // 节点状态
|
||||
uuid: node.UUID.replace('uuid=', '') // 处理 UUID 去掉 "uuid=" 字符串
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// 将转换后的数据赋值给表格的数据
|
||||
this.tableData = tableData
|
||||
})
|
||||
.catch(error => console.error('Error fetching table data:', error))
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<component :is="currentRole" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
196
src/views/deploy/app.vue
Normal file
196
src/views/deploy/app.vue
Normal file
@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="dashboard-editor-container">
|
||||
<el-button class="edit-yaml-button" type="primary" @click="openYamlEditorDialog">编辑 YAML</el-button>
|
||||
<el-table :data="tableData" border style="width: 100%" height="800">
|
||||
<el-table-column prop="cluster" label="集群" />
|
||||
<el-table-column prop="namespace" label="Namespace" />
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="status" label="状态" />
|
||||
<el-table-column prop="ip" label="IP" />
|
||||
<el-table-column prop="node" label="Node" />
|
||||
<el-table-column prop="ready" label="就绪" />
|
||||
<el-table-column prop="restarts" label="重启" />
|
||||
<el-table-column prop="age" label="寿命" />
|
||||
</el-table>
|
||||
<!-- YAML 编辑器弹框 -->
|
||||
<el-dialog title="编辑 YAML" :visible.sync="yamlEditorVisible" width="50%" @close="closeYamlEditorDialog">
|
||||
<div class="editor-container">
|
||||
<textarea v-model="yamlContent" style="width: 100%; height: 400px;" placeholder="编辑 YAML 内容" />
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeYamlEditorDialog">取消</el-button>
|
||||
<el-button type="primary" @click="saveYamlChanges">部署</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
export default {
|
||||
name: 'DashboardAdmin',
|
||||
data() {
|
||||
return {
|
||||
tableData: [], // 初始为空数组，将在 mounted 时获取数据
|
||||
yamlEditorVisible: false, // 控制 YAML 编辑器弹框的显示
|
||||
yamlContent: `apiVersion: apps/v1
|
||||
kind: Deployment
|
||||
metadata:
|
||||
name: web
|
||||
namespace: default
|
||||
annotations: # 记录回滚参数
|
||||
kubernetes.io/change-cause: "web.v1-nginx-1.19" #记录到revision中的内容，记录版本号
|
||||
spec:
|
||||
replicas: 3 # Pod副本预期数量
|
||||
revisionHistoryLimit: 10 # RS历史版本保存数量
|
||||
selector:
|
||||
matchLabels:
|
||||
app: web
|
||||
strategy:
|
||||
rollingUpdate:
|
||||
maxSurge: 25% # 滚动更新过程最大pod副本数
|
||||
maxUnavailable: 25% # 滚动更新过程中最大不可用pod副本数，
|
||||
type: RollingUpdate
|
||||
template:
|
||||
metadata:
|
||||
labels:
|
||||
app: web # Pod副本的标签
|
||||
spec:
|
||||
containers:
|
||||
- name: web
|
||||
image: nginx:1.16
|
||||
readinessProbe: # 存活检查,如果失败，将杀死容器，来重启
|
||||
httpGet:
|
||||
port: 80
|
||||
path: /index.html
|
||||
initialDelaySeconds: 10 # 启动容器后多少秒健康检查
|
||||
periodSeconds: 10 # 以后间隔多少秒检查一次
|
||||
|
||||
livenessProbe: # 就绪检查，失败就会剔除 service
|
||||
httpGet:
|
||||
port: 80
|
||||
path: /index.html`, // YAML 默认内容
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchTableData() // 页面加载时调用数据请求方法
|
||||
},
|
||||
methods: {
|
||||
fetchTableData() {
|
||||
fetch(API_URL + '/pod/show', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// 假设 data 是包含 cluster_a 和 cluster_b 的结构，结合两者数据
|
||||
const combinedData = [
|
||||
...data.cluster_a.map(item => ({ ...item, cluster: 'Cluster A' })),
|
||||
...data.cluster_b.map(item => ({ ...item, cluster: 'Cluster B' }))
|
||||
]
|
||||
|
||||
// 将 JSON 数据转换为表格所需格式
|
||||
this.tableData = combinedData.map(node => ({
|
||||
cluster: node.cluster,
|
||||
namespace: node.NAMESPACE,
|
||||
name: node.NAME,
|
||||
status: node.STATUS,
|
||||
ip: node.IP,
|
||||
node: node.NODE,
|
||||
ready: node.READY,
|
||||
restarts: node.RESTARTS,
|
||||
age: node.AGE
|
||||
}))
|
||||
})
|
||||
.catch(error => console.error('Error fetching table data:', error))
|
||||
},
|
||||
openYamlEditorDialog() {
|
||||
// 打开 YAML 编辑器弹框
|
||||
this.yamlEditorVisible = true
|
||||
},
|
||||
closeYamlEditorDialog() {
|
||||
// 关闭 YAML 编辑器弹框
|
||||
this.yamlEditorVisible = false
|
||||
},
|
||||
saveYamlChanges() {
|
||||
console.log('保存的 YAML 数据:', this.yamlContent)
|
||||
this.loading = true
|
||||
fetch(API_URL + '/pod/deploy', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
yaml: this.yamlContent // 将 YAML 内容作为请求体中的 "yaml" 字段
|
||||
})
|
||||
})
|
||||
.then(response => {
|
||||
console.log('meme')
|
||||
if (!response.ok) {
|
||||
throw new Error('请求失败，状态码: ' + response.status)
|
||||
}
|
||||
return response.json() // 将响应解析为 JSON
|
||||
})
|
||||
.then(data => {
|
||||
// 处理后端返回的数据
|
||||
console.log('后端响应数据:', data)
|
||||
if (!data.error) {
|
||||
console.log('部署输出:', data.stdout)
|
||||
this.$notify({
|
||||
title: '调度成功',
|
||||
message: '该应用已被调度到集群' + data.dst + '上\n' + data.stdout,
|
||||
type: 'success'
|
||||
})
|
||||
} else if (data.error) {
|
||||
console.error('部署错误:', data.error)
|
||||
this.$notify.error({
|
||||
title: '调度失败',
|
||||
message: '调度失败'
|
||||
})
|
||||
}
|
||||
|
||||
this.fetchTableData()
|
||||
this.loading = false
|
||||
})
|
||||
.catch(error => {
|
||||
// 处理请求或解析中的任何错误
|
||||
console.error('请求出错:', error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.closeYamlEditorDialog() // 关闭弹框
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.github-corner {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
border: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
194
src/views/deploy/service.vue
Normal file
194
src/views/deploy/service.vue
Normal file
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<!-- 左上角的按钮 -->
|
||||
<el-button class="edit-yaml-button" type="primary" @click="openYamlEditorDialog">编辑 YAML</el-button>
|
||||
|
||||
<!-- 表格展示 -->
|
||||
<el-table :data="tableData" border style="width: 100%" :fit="true">
|
||||
<el-table-column prop="cluster" label="集群" />
|
||||
<el-table-column prop="namespace" label="Namespace" />
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="clusterIp" label="集群 IP" />
|
||||
<el-table-column prop="externalIp" label="外部 IP" />
|
||||
<el-table-column prop="ports" label="端口" />
|
||||
<el-table-column prop="age" label="寿命" />
|
||||
</el-table>
|
||||
|
||||
<!-- YAML 编辑器弹框 -->
|
||||
<el-dialog title="编辑 YAML" :visible.sync="yamlEditorVisible" width="50%" @close="closeYamlEditorDialog">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option v-for="item in ['a','b']" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<div class="editor-container">
|
||||
<textarea v-model="yamlContent" style="width: 100%; height: 400px;" placeholder="编辑 YAML 内容" />
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeYamlEditorDialog">取消</el-button>
|
||||
<el-button type="primary" @click="saveYamlChanges">部署</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
|
||||
export default {
|
||||
name: 'DashboardAdmin',
|
||||
data() {
|
||||
return {
|
||||
tableData: [], // 初始为空数组，将在 mounted 时获取数据
|
||||
yamlEditorVisible: false, // 控制 YAML 编辑器弹框的显示
|
||||
yamlContent: `apiVersion: v1
|
||||
kind: Service
|
||||
metadata:
|
||||
labels:
|
||||
app: web
|
||||
name: web
|
||||
spec:
|
||||
type: NodePort # 服务类型
|
||||
ports:
|
||||
- port: 80 # Service端口
|
||||
protocol: TCP # 协议
|
||||
targetPort: 80 # 容器端口
|
||||
nodePort: 30009 # 对外暴露的端口，可以指定
|
||||
selector:
|
||||
app: web # 指定关联Pod的标签`, // YAML 编辑器中的内容
|
||||
loading: false,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchTableData() // 页面加载时调用数据请求方法
|
||||
},
|
||||
methods: {
|
||||
fetchTableData() {
|
||||
fetch(API_URL + '/service/show', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// 假设 data 是包含 cluster_a 和 cluster_b 的结构，结合两者数据
|
||||
const combinedData = [
|
||||
...data.cluster_a.map(item => ({ ...item, cluster: 'Cluster A' })),
|
||||
...data.cluster_b.map(item => ({ ...item, cluster: 'Cluster B' }))
|
||||
]
|
||||
|
||||
// 将 JSON 数据转换为表格所需格式
|
||||
this.tableData = combinedData.map(service => ({
|
||||
cluster: service.cluster,
|
||||
namespace: service.NAMESPACE,
|
||||
name: service.NAME,
|
||||
type: service.TYPE,
|
||||
clusterIp: service['CLUSTER-IP'],
|
||||
externalIp: service['EXTERNAL-IP'],
|
||||
ports: service['PORT(S)'],
|
||||
age: service.AGE
|
||||
}))
|
||||
|
||||
// 转换为 YAML 格式
|
||||
// this.yamlContent = yaml.dump(combinedData)
|
||||
})
|
||||
.catch(error => console.error('Error fetching table data:', error))
|
||||
},
|
||||
openYamlEditorDialog() {
|
||||
// 打开 YAML 编辑器弹框
|
||||
this.yamlEditorVisible = true
|
||||
},
|
||||
closeYamlEditorDialog() {
|
||||
// 关闭 YAML 编辑器弹框
|
||||
this.yamlEditorVisible = false
|
||||
},
|
||||
saveYamlChanges() {
|
||||
console.log('保存的 YAML 数据:', this.yamlContent)
|
||||
console.log(this.value)
|
||||
this.loading = true
|
||||
fetch(API_URL + '/service/deploy', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
dst: this.value,
|
||||
yaml: this.yamlContent // 将 YAML 内容作为请求体中的 "yaml" 字段
|
||||
})
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('请求失败，状态码: ' + response.status)
|
||||
}
|
||||
return response.json() // 将响应解析为 JSON
|
||||
})
|
||||
.then(data => {
|
||||
// 处理后端返回的数据
|
||||
console.log('后端响应数据:', data)
|
||||
if (!data.error) {
|
||||
console.log('部署输出:', data.stdout)
|
||||
this.$notify({
|
||||
title: '调度成功',
|
||||
message: '该服务已被部署到集群' + this.value + '上\n' + data.stdout,
|
||||
type: 'success'
|
||||
})
|
||||
} else if (data.error) {
|
||||
console.error('部署错误:', data.error)
|
||||
this.$notify.error({
|
||||
title: '调度失败',
|
||||
message: '调度失败'
|
||||
})
|
||||
}
|
||||
|
||||
this.fetchTableData()
|
||||
this.loading = false
|
||||
})
|
||||
.catch(error => {
|
||||
// 处理请求或解析中的任何错误
|
||||
console.error('请求出错:', error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.closeYamlEditorDialog() // 关闭弹框
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.edit-yaml-button {
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.github-corner {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
border: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container documentation-container">
|
||||
<a class="document-btn" target="_blank" href="https://store.akveo.com/products/vue-java-admin-dashboard-spring?utm_campaign=akveo_store-Vue-Vue_demo%2Fgithub&utm_source=vue_admin&utm_medium=referral&utm_content=demo_English_button">Java backend integration</a>
|
||||
<a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/">Documentation</a>
|
||||
<a class="document-btn" target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">Github Repository</a>
|
||||
<a class="document-btn" target="_blank" href="https://panjiachen.gitee.io/vue-element-admin-site/zh/">国内文档</a>
|
||||
<dropdown-menu class="document-btn" :items="articleList" title="系列文章" />
|
||||
<a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/zh/job/">内推招聘</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DropdownMenu from '@/components/Share/DropdownMenu'
|
||||
|
||||
export default {
|
||||
name: 'Documentation',
|
||||
components: { DropdownMenu },
|
||||
data() {
|
||||
return {
|
||||
articleList: [
|
||||
{ title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
|
||||
{ title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
|
||||
{ title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
|
||||
{ title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
|
||||
{ title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
|
||||
{ title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
|
||||
{ title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
|
||||
{ title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
|
||||
{ title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.documentation-container {
|
||||
margin: 50px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.document-btn {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background: black;
|
||||
color: white;
|
||||
height: 60px;
|
||||
padding: 0 16px;
|
||||
margin: 16px;
|
||||
line-height: 60px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
48
src/views/grafana/index.vue
Normal file
48
src/views/grafana/index.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="app-container documentation-container">
|
||||
<iframe src="http://localhost:3030/d/rYdddlPWk/node-exporter-full" frameborder="0" name="popup" class="web" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DropdownMenu from '@/components/Share/DropdownMenu'
|
||||
|
||||
export default {
|
||||
name: 'Documentation',
|
||||
components: { DropdownMenu },
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.documentation-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
padding: 0px;
|
||||
|
||||
.document-btn {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background: black;
|
||||
color: white;
|
||||
height: 60px;
|
||||
padding: 0 16px;
|
||||
margin: 16px;
|
||||
line-height: 60px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.web {
|
||||
display: inline;
|
||||
width: 100%;
|
||||
height: 90vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,101 +1,52 @@
|
||||
<template>
|
||||
<div class="icons-container">
|
||||
<aside>
|
||||
<a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">Add and use
|
||||
</a>
|
||||
</aside>
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="Icons">
|
||||
<div class="grid">
|
||||
<div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
{{ generateIconCode(item) }}
|
||||
</div>
|
||||
<div class="icon-item">
|
||||
<svg-icon :icon-class="item" class-name="disabled" />
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Element-UI Icons">
|
||||
<div class="grid">
|
||||
<div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
{{ generateElementIconCode(item) }}
|
||||
</div>
|
||||
<div class="icon-item">
|
||||
<i :class="'el-icon-' + item" />
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div ref="terminalContainer" style="height:90vh; width: 100%;" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import clipboard from '@/utils/clipboard'
|
||||
import svgIcons from './svg-icons'
|
||||
import elementIcons from './element-icons'
|
||||
import { Terminal } from 'xterm'
|
||||
import { FitAddon } from 'xterm-addon-fit'
|
||||
import 'xterm/css/xterm.css'
|
||||
|
||||
export default {
|
||||
name: 'Icons',
|
||||
data() {
|
||||
return {
|
||||
svgIcons,
|
||||
elementIcons
|
||||
}
|
||||
name: 'TerminalComponent',
|
||||
mounted() {
|
||||
this.initTerminal()
|
||||
},
|
||||
methods: {
|
||||
generateIconCode(symbol) {
|
||||
return `<svg-icon icon-class="${symbol}" />`
|
||||
},
|
||||
generateElementIconCode(symbol) {
|
||||
return `<i class="el-icon-${symbol}" />`
|
||||
},
|
||||
handleClipboard(text, event) {
|
||||
clipboard(text, event)
|
||||
initTerminal() {
|
||||
const terminal = new Terminal()
|
||||
const fitAddon = new FitAddon()
|
||||
|
||||
terminal.loadAddon(fitAddon)
|
||||
terminal.open(this.$refs.terminalContainer)
|
||||
fitAddon.fit()
|
||||
|
||||
// 连接到 WebSocket 服务器
|
||||
const socket = new WebSocket('ws://localhost:2999')
|
||||
|
||||
socket.onopen = () => {
|
||||
console.log('WebSocket 连接已建立')
|
||||
}
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
// 将服务器的响应显示在终端中
|
||||
terminal.write(event.data)
|
||||
}
|
||||
|
||||
terminal.onData(data => {
|
||||
// 将终端的输入发送到服务器
|
||||
socket.send(data)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="css" scoped>
|
||||
.icons-container {
|
||||
margin: 10px 20px 0;
|
||||
overflow: hidden;
|
||||
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
margin: 20px;
|
||||
height: 85px;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
float: left;
|
||||
font-size: 30px;
|
||||
color: #24292e;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
135
src/views/route/add_policy.vue
Normal file
135
src/views/route/add_policy.vue
Normal file
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="add-policy">
|
||||
<h2>添加SRv6路由策略</h2>
|
||||
|
||||
<!-- 输入表单 -->
|
||||
<form @submit.prevent="submitPolicy">
|
||||
<div class="form-group">
|
||||
<label for="router">路由器</label>
|
||||
<select id="router" v-model="router" required>
|
||||
<option disabled value="">选择路由器</option>
|
||||
<option value="r0">路由器r0</option>
|
||||
<option value="r3">路由器r3</option>
|
||||
<option value="r6">路由器r6</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bsid">绑定 SID (BSID)</label>
|
||||
<input id="bsid" v-model="bsid" type="text" required placeholder="fe00::1a">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="sids">SIDs (逗号分隔)</label>
|
||||
<input id="sids" v-model="sids" type="text" required placeholder="fc00:1::a,fc00:2::a">
|
||||
</div>
|
||||
|
||||
<button type="submit">添加路由</button>
|
||||
</form>
|
||||
|
||||
<!-- 显示结果 -->
|
||||
<div v-if="resultMessage" class="result-message">
|
||||
<p><strong>{{ resultMessage }}</strong></p>
|
||||
<pre>{{ result }}</pre>
|
||||
</div>
|
||||
|
||||
<!-- 错误消息 -->
|
||||
<div v-if="error" class="error-message">
|
||||
<p>Error: {{ error }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
router: '', // 路由器选择
|
||||
bsid: '', // BSID
|
||||
sids: '', // SIDs
|
||||
resultMessage: '', // 返回的消息
|
||||
result: '', // 返回的详细结果
|
||||
error: null // 错误消息
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async submitPolicy() {
|
||||
try {
|
||||
const data = {
|
||||
bsid: this.bsid,
|
||||
sids: this.sids
|
||||
}
|
||||
|
||||
const response = await axios.post(API_URL + `/route/add_policy?router=${this.router}`, data, {
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
})
|
||||
|
||||
this.resultMessage = response.data.message
|
||||
this.result = response.data.result.join('\n') // 格式化结果信息
|
||||
this.error = null
|
||||
} catch (error) {
|
||||
this.error = error.message
|
||||
this.resultMessage = ''
|
||||
this.result = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.add-policy {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-group input, .form-group select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.result-message, .error-message {
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.result-message {
|
||||
background-color: #e7f4e4;
|
||||
color: #3c763d;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
</style>
|
||||
144
src/views/route/del_policy.vue
Normal file
144
src/views/route/del_policy.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="del-policy">
|
||||
<h2>删除 SRv6 策略</h2>
|
||||
|
||||
<!-- 表单 -->
|
||||
<form @submit.prevent="submitDelPolicy">
|
||||
<div class="form-group">
|
||||
<label for="router">选择路由器</label>
|
||||
<select id="router" v-model="router" required>
|
||||
<option disabled value="">选择路由器</option>
|
||||
<option value="r0">路由器r0</option>
|
||||
<option value="r3">路由器r3</option>
|
||||
<option value="r6">路由器r6</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bsid">BSID</label>
|
||||
<input
|
||||
id="bsid"
|
||||
v-model="bsid"
|
||||
type="text"
|
||||
required
|
||||
placeholder="请输入 Binding SID，如 fe00:1::1"
|
||||
>
|
||||
</div>
|
||||
|
||||
<button type="submit">删除策略</button>
|
||||
</form>
|
||||
|
||||
<!-- 显示结果 -->
|
||||
<div v-if="resultMessage" class="result-message">
|
||||
<p><strong>{{ resultMessage }}</strong></p>
|
||||
<pre>{{ result }}</pre>
|
||||
</div>
|
||||
|
||||
<!-- 错误消息 -->
|
||||
<div v-if="error" class="error-message">
|
||||
<p>错误: {{ error }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
router: '', // 选择的路由器
|
||||
bsid: '', // Binding SID
|
||||
resultMessage: '', // 返回的消息
|
||||
result: '', // 返回的详细结果
|
||||
error: null // 错误消息
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async submitDelPolicy() {
|
||||
try {
|
||||
// 删除请求需要的 body 数据
|
||||
const data = {
|
||||
bsid: this.bsid
|
||||
}
|
||||
|
||||
// 发送 DELETE 请求
|
||||
const response = await axios.delete(
|
||||
API_URL + `/route/del_policy?router=${this.router}`,
|
||||
{
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
data
|
||||
}
|
||||
)
|
||||
|
||||
// 处理返回结果
|
||||
this.resultMessage = response.data.message
|
||||
this.result = response.data.result.join('\n') // 格式化返回结果
|
||||
this.error = null
|
||||
} catch (error) {
|
||||
// 处理错误
|
||||
this.error = error.message
|
||||
this.resultMessage = ''
|
||||
this.result = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.del-policy {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.result-message,
|
||||
.error-message {
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.result-message {
|
||||
background-color: #e7f4e4;
|
||||
color: #3c763d;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
</style>
|
||||
145
src/views/route/del_steer.vue
Normal file
145
src/views/route/del_steer.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="del-steer-policy">
|
||||
<h2>删除引导策略</h2>
|
||||
|
||||
<!-- 表单 -->
|
||||
<form @submit.prevent="submitDelSteerPolicy">
|
||||
<div class="form-group">
|
||||
<label for="router">选择路由器</label>
|
||||
<select id="router" v-model="router" required>
|
||||
<option disabled value="">选择路由器</option>
|
||||
<option value="r0">路由器r0</option>
|
||||
<option value="r3">路由器r3</option>
|
||||
<option value="r6">路由器r6</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="ip_prefix">目标IP</label>
|
||||
<input
|
||||
id="ip_prefix"
|
||||
v-model="ip_prefix"
|
||||
type="text"
|
||||
required
|
||||
placeholder="请输入目标 IP，如 10.10.0.0/24"
|
||||
>
|
||||
</div>
|
||||
|
||||
<button type="submit">删除引导策略</button>
|
||||
</form>
|
||||
|
||||
<!-- 显示结果 -->
|
||||
<div v-if="resultMessage" class="result-message">
|
||||
<p><strong>{{ resultMessage }}</strong></p>
|
||||
<pre>{{ result }}</pre>
|
||||
</div>
|
||||
|
||||
<!-- 错误消息 -->
|
||||
<div v-if="error" class="error-message">
|
||||
<p>错误: {{ error }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
router: '', // 选择的路由器
|
||||
ip_prefix: '', // IP 前缀
|
||||
resultMessage: '', // 返回的消息
|
||||
result: '', // 返回的详细结果
|
||||
error: null // 错误消息
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async submitDelSteerPolicy() {
|
||||
try {
|
||||
// 删除请求需要的 body 数据
|
||||
const data = {
|
||||
ip_prefix: this.ip_prefix
|
||||
}
|
||||
|
||||
// 发送 DELETE 请求
|
||||
const response = await axios.delete(
|
||||
API_URL + `/route/del_steer?router=${this.router}`,
|
||||
{
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
data
|
||||
}
|
||||
)
|
||||
|
||||
// 处理返回结果
|
||||
this.resultMessage = response.data.message
|
||||
this.result = response.data.result.join('\n') // 格式化返回结果
|
||||
this.error = null
|
||||
} catch (error) {
|
||||
// 处理错误
|
||||
this.error = error.message
|
||||
this.resultMessage = ''
|
||||
this.result = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.del-steer-policy {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.result-message,
|
||||
.error-message {
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.result-message {
|
||||
background-color: #e7f4e4;
|
||||
color: #3c763d;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
</style>
|
||||
88
src/views/route/show_paths.vue
Normal file
88
src/views/route/show_paths.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="show-paths">
|
||||
<h2>最短路径信息</h2>
|
||||
<!-- 检查是否在加载状态 -->
|
||||
<div v-if="loading">加载中...</div>
|
||||
|
||||
<!-- 如果有路径数据则显示 -->
|
||||
<div v-else>
|
||||
<ul v-if="paths.length > 0">
|
||||
<li v-for="(path, index) in paths" :key="index">{{ path }}</li>
|
||||
</ul>
|
||||
|
||||
<!-- 如果没有路径数据则显示消息 -->
|
||||
<div v-else>
|
||||
<p>未找到</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 错误消息 -->
|
||||
<div v-if="error" class="error-message">
|
||||
<p>加载路径错误: {{ error }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'ShowPaths',
|
||||
data() {
|
||||
return {
|
||||
paths: [],
|
||||
loading: false,
|
||||
error: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 组件挂载时请求路径数据
|
||||
this.fetchPaths()
|
||||
},
|
||||
methods: {
|
||||
// 请求 API 以获取路径信息
|
||||
fetchPaths() {
|
||||
this.loading = true
|
||||
this.error = null
|
||||
axios
|
||||
.get(API_URL + '/route/show_paths')
|
||||
.then((response) => {
|
||||
// 检查响应中是否有 paths 数据
|
||||
if (response.data && response.data.paths) {
|
||||
this.paths = response.data.paths
|
||||
} else {
|
||||
this.error = 'No paths data found in the response.'
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.error = error.message || 'An error occurred while fetching paths.'
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.show-paths {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
171
src/views/route/show_policy.vue
Normal file
171
src/views/route/show_policy.vue
Normal file
@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="policy-management">
|
||||
<div class="header">
|
||||
<h2>路由策略管理</h2>
|
||||
<el-button type="primary" @click="openAddPolicyDialog">添加策略</el-button>
|
||||
</div>
|
||||
|
||||
<div class="router-selector">
|
||||
<label for="router-select">选择路由器: </label>
|
||||
<el-select v-model="selectedRouter" placeholder="选择路由器" @change="fetchPolicies">
|
||||
<el-option label="r0" value="r0" />
|
||||
<el-option label="r3" value="r3" />
|
||||
<el-option label="r6" value="r6" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<el-table :data="policies" border style="width: 100%" height="400">
|
||||
<el-table-column label="BSID" prop="BSID" />
|
||||
<el-table-column label="行为" prop="Behavior" />
|
||||
<el-table-column label="类型" prop="Type" />
|
||||
<el-table-column label="FIB 表" prop="FIB_table" />
|
||||
<el-table-column label="Segment 列表" prop="Segment_Lists" />
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="danger" icon="el-icon-delete" @click="deletePolicy(scope.row.BSID)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 添加策略弹窗 -->
|
||||
<el-dialog
|
||||
title="添加SRv6路由策略"
|
||||
:visible.sync="isAddPolicyDialogVisible"
|
||||
width="400px"
|
||||
@close="resetForm"
|
||||
>
|
||||
<el-form ref="policyForm" :model="policyForm" label-width="100px">
|
||||
<el-form-item label="路由器" prop="router" :rules="[{ required: true, message: '请选择路由器', trigger: 'blur' }]">
|
||||
<el-select v-model="policyForm.router" placeholder="选择路由器">
|
||||
<el-option label="r0" value="r0" />
|
||||
<el-option label="r3" value="r3" />
|
||||
<el-option label="r6" value="r6" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="BSID" prop="bsid" :rules="[{ required: true, message: '请输入BSID', trigger: 'blur' }]">
|
||||
<el-input v-model="policyForm.bsid" placeholder="fe00::1a" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="SID列表" prop="sids" :rules="[{ required: true, message: '请输入SID', trigger: 'blur' }]">
|
||||
<el-input v-model="policyForm.sids" placeholder="fc00:1::a,fc00:2::a(逗号分隔)" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isAddPolicyDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitPolicy">添加路由</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
|
||||
export default {
|
||||
name: 'PolicyManagement',
|
||||
data() {
|
||||
return {
|
||||
selectedRouter: 'r0', // 默认路由器
|
||||
policies: [], // 存储策略信息
|
||||
error: null,
|
||||
loading: false,
|
||||
isAddPolicyDialogVisible: false, // 控制弹窗显示
|
||||
policyForm: {
|
||||
router: '',
|
||||
bsid: '',
|
||||
sids: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchPolicies()
|
||||
},
|
||||
methods: {
|
||||
// 获取策略信息
|
||||
fetchPolicies() {
|
||||
axios.get(`${API_URL}/route/show_policy?router=${this.selectedRouter}`)
|
||||
.then(response => {
|
||||
if (response.data.policies) {
|
||||
this.policies = response.data.policies
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取策略数据失败:', error)
|
||||
})
|
||||
},
|
||||
// 删除策略
|
||||
deletePolicy(bsid) {
|
||||
axios.delete(`${API_URL}/route/del_policy?router=${this.selectedRouter}`, {
|
||||
data: {
|
||||
bsid: bsid // 将 bsid 放在请求体中
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.$message.success('删除成功')
|
||||
this.fetchPolicies() // 刷新策略列表
|
||||
} else {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('删除策略失败:', error)
|
||||
this.$message.error('删除失败')
|
||||
})
|
||||
},
|
||||
// 打开添加策略弹窗
|
||||
openAddPolicyDialog() {
|
||||
this.isAddPolicyDialogVisible = true
|
||||
},
|
||||
// 提交添加策略
|
||||
submitPolicy() {
|
||||
axios.post(`${API_URL}/route/add_policy?router=${this.policyForm.router}`, {
|
||||
bsid: this.policyForm.bsid,
|
||||
sids: this.policyForm.sids
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.$message.success('添加成功')
|
||||
this.isAddPolicyDialogVisible = false
|
||||
this.fetchPolicies() // 刷新策略列表
|
||||
} else {
|
||||
this.$message.error('添加失败')
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('添加策略失败:', error)
|
||||
this.$message.error('添加失败')
|
||||
})
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.policyForm.bsid = ''
|
||||
this.policyForm.sids = ''
|
||||
this.policyForm.router = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.policy-management {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
106
src/views/route/show_sid.vue
Normal file
106
src/views/route/show_sid.vue
Normal file
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="show-sid">
|
||||
<h2>SID信息</h2>
|
||||
|
||||
<!-- 下拉选择路由器 -->
|
||||
<div class="router-selector">
|
||||
<label for="router">选择路由器:</label>
|
||||
<select v-model="selectedRouter" @change="fetchSIDInfo">
|
||||
<option value="r0">r0</option>
|
||||
<option value="r3">r3</option>
|
||||
<option value="r6">r6</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 显示加载提示 -->
|
||||
<div v-if="loading">加载SID信息...</div>
|
||||
|
||||
<!-- 列表形式展示 SID 信息 -->
|
||||
<ul v-if="!loading && sidData.length > 0" class="sid-list">
|
||||
<li v-for="(sid, index) in sidData" :key="index">
|
||||
{{ sid }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 如果没有 SID 数据则显示消息 -->
|
||||
<div v-else-if="!loading && sidData.length === 0">
|
||||
<p>No SID information available for the selected router.</p>
|
||||
</div>
|
||||
|
||||
<!-- 错误信息 -->
|
||||
<div v-if="error" class="error-message">
|
||||
<p>Error loading SID information: {{ error }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'ShowSID',
|
||||
data() {
|
||||
return {
|
||||
selectedRouter: 'r0', // 默认选择 r0
|
||||
sidData: [],
|
||||
loading: false,
|
||||
error: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 组件挂载时请求默认路由器的 SID 信息
|
||||
this.fetchSIDInfo()
|
||||
},
|
||||
methods: {
|
||||
// 请求 API 以获取 SID 信息
|
||||
fetchSIDInfo() {
|
||||
this.loading = true
|
||||
this.error = null
|
||||
axios
|
||||
.get(API_URL + `/route/show_sid`, { params: { router: this.selectedRouter }})
|
||||
.then((response) => {
|
||||
if (response.data && response.data.localsids) {
|
||||
this.sidData = response.data.localsids // 保存 SID 数据
|
||||
} else {
|
||||
this.sidData = []
|
||||
this.error = 'No SID data found in the response.'
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.error = error.message || 'An error occurred while fetching SID data.'
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.show-sid {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.router-selector {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul.sid-list {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
ul.sid-list li {
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 5px;
|
||||
padding: 5px;
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
.error-message {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
168
src/views/route/show_steer.vue
Normal file
168
src/views/route/show_steer.vue
Normal file
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="steer-management">
|
||||
<div class="header">
|
||||
<h2>引导策略管理</h2>
|
||||
<el-button type="primary" @click="openAddPolicyDialog">添加引导</el-button>
|
||||
</div>
|
||||
|
||||
<div class="router-selector">
|
||||
<label for="router-select">选择路由器: </label>
|
||||
<el-select v-model="selectedRouter" placeholder="选择路由器" @change="fetchPolicies">
|
||||
<el-option label="r0" value="r0" />
|
||||
<el-option label="r3" value="r3" />
|
||||
<el-option label="r6" value="r6" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<el-table :data="policies" border style="width: 100%" height="400">
|
||||
<el-table-column label="BSID" prop="BSID" />
|
||||
<el-table-column label="目标IP" prop="Traffic" />
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="danger" icon="el-icon-delete" @click="deletePolicy(scope.row.Traffic)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 添加策略弹窗 -->
|
||||
<el-dialog
|
||||
title="添加SRv6引导策略"
|
||||
:visible.sync="isAddPolicyDialogVisible"
|
||||
width="400px"
|
||||
@close="resetForm"
|
||||
>
|
||||
<el-form ref="policyForm" :model="policyForm" label-width="100px">
|
||||
<el-form-item label="路由器" prop="router" :rules="[{ required: true, message: '请选择路由器', trigger: 'blur' }]">
|
||||
<el-select v-model="policyForm.router" placeholder="选择路由器">
|
||||
<el-option label="r0" value="r0" />
|
||||
<el-option label="r3" value="r3" />
|
||||
<el-option label="r6" value="r6" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="BSID" prop="bsid" :rules="[{ required: true, message: '请输入BSID', trigger: 'blur' }]">
|
||||
<el-input v-model="policyForm.bsid" placeholder="fe00::1a" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="目标IP" prop="sids" :rules="[{ required: true, message: '请输入IP', trigger: 'blur' }]">
|
||||
<el-input v-model="policyForm.ip" placeholder="10.0.10.0/24" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isAddPolicyDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitPolicy">添加路由</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
|
||||
export default {
|
||||
name: 'PolicyManagement',
|
||||
data() {
|
||||
return {
|
||||
selectedRouter: 'r0', // 默认路由器
|
||||
policies: [], // 存储策略信息
|
||||
error: null,
|
||||
loading: false,
|
||||
isAddPolicyDialogVisible: false, // 控制弹窗显示
|
||||
policyForm: {
|
||||
router: '',
|
||||
bsid: '',
|
||||
ip: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchPolicies()
|
||||
},
|
||||
methods: {
|
||||
// 获取策略信息
|
||||
fetchPolicies() {
|
||||
axios.get(`${API_URL}/route/show_steer?router=${this.selectedRouter}`)
|
||||
.then(response => {
|
||||
if (response.data.steer) {
|
||||
this.policies = response.data.steer
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取引导策略数据失败:', error)
|
||||
})
|
||||
},
|
||||
// 删除策略
|
||||
deletePolicy(ip) {
|
||||
axios.delete(`${API_URL}/route/del_steer?router=${this.selectedRouter}`, {
|
||||
data: {
|
||||
ip_prefix: ip
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.$message.success('删除成功')
|
||||
this.fetchPolicies() // 刷新策略列表
|
||||
} else {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('删除引导失败:', error)
|
||||
this.$message.error('删除失败')
|
||||
})
|
||||
},
|
||||
// 打开添加策略弹窗
|
||||
openAddPolicyDialog() {
|
||||
this.isAddPolicyDialogVisible = true
|
||||
},
|
||||
// 提交添加策略
|
||||
submitPolicy() {
|
||||
axios.post(`${API_URL}/route/steer?router=${this.policyForm.router}`, {
|
||||
bsid: this.policyForm.bsid,
|
||||
ip_prefix: this.policyForm.ip
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.$message.success('添加成功')
|
||||
this.isAddPolicyDialogVisible = false
|
||||
this.fetchPolicies() // 刷新策略列表
|
||||
} else {
|
||||
this.$message.error('添加失败')
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('添加引导策略失败:', error)
|
||||
this.$message.error('添加失败')
|
||||
})
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.policyForm.bsid = ''
|
||||
this.policyForm.ip = ''
|
||||
this.policyForm.router = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.steer-management {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
136
src/views/route/steer.vue
Normal file
136
src/views/route/steer.vue
Normal file
@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div class="steer-policy">
|
||||
<h2>更新引导策略</h2>
|
||||
|
||||
<!-- 输入表单 -->
|
||||
<form @submit.prevent="submitSteerPolicy">
|
||||
<div class="form-group">
|
||||
<label for="router">路由器</label>
|
||||
<select id="router" v-model="router" required>
|
||||
<option disabled value="">选择路由器</option>
|
||||
<option value="r0">路由器r0</option>
|
||||
<option value="r3">路由器r3</option>
|
||||
<option value="r6">路由器r6</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bsid">绑定SID (BSID)</label>
|
||||
<input id="bsid" v-model="bsid" type="text" required placeholder="fe00::1a">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="ip_prefix">目标IP</label>
|
||||
<input id="ip_prefix" v-model="ip_prefix" type="text" required placeholder="10.10.0.0/24">
|
||||
</div>
|
||||
|
||||
<button type="submit">添加引导策略</button>
|
||||
</form>
|
||||
|
||||
<!-- 显示结果 -->
|
||||
<div v-if="resultMessage" class="result-message">
|
||||
<p><strong>{{ resultMessage }}</strong></p>
|
||||
<pre>{{ result }}</pre>
|
||||
</div>
|
||||
|
||||
<!-- 错误消息 -->
|
||||
<div v-if="error" class="error-message">
|
||||
<p>Error: {{ error }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
router: '', // 路由器选择
|
||||
bsid: '', // BSID
|
||||
ip_prefix: '', // IP Prefix
|
||||
resultMessage: '', // 返回的消息
|
||||
result: '', // 返回的详细结果
|
||||
error: null // 错误消息
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async submitSteerPolicy() {
|
||||
try {
|
||||
const data = {
|
||||
bsid: this.bsid,
|
||||
ip_prefix: this.ip_prefix
|
||||
}
|
||||
|
||||
const response = await axios.post(API_URL + `/route/steer?router=${this.router}`, data, {
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
})
|
||||
|
||||
this.resultMessage = response.data.message
|
||||
this.result = response.data.result.join('\n') // 格式化结果信息
|
||||
this.error = null
|
||||
} catch (error) {
|
||||
this.error = error.message
|
||||
this.resultMessage = ''
|
||||
this.result = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.steer-policy {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-group input, .form-group select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.result-message, .error-message {
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.result-message {
|
||||
background-color: #e7f4e4;
|
||||
color: #3c763d;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
</style>
|
||||
105
src/views/schedule/index.vue
Normal file
105
src/views/schedule/index.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="schedule-decision">
|
||||
<h2>调度决策</h2>
|
||||
|
||||
<!-- 表格展示平均资源和评分 -->
|
||||
<table class="decision-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>集群</th>
|
||||
<th>平均空闲CPU (%)</th>
|
||||
<th>平均空闲内存 (Mb)</th>
|
||||
<th>平均空闲存储 (Mb)</th>
|
||||
<th>分数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(resource, index) in averageResources" :key="index" :class="{ best: clusters[index] === bestCluster }">
|
||||
<td>{{ clusters[index] }}</td>
|
||||
<td>{{ resource[0].toFixed(2) }}</td>
|
||||
<td>{{ resource[1].toFixed(0).toLocaleString() }}</td>
|
||||
<td>{{ resource[2].toFixed(0).toLocaleString() }}</td>
|
||||
<td>{{ scores[index].toFixed(2) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- 最佳集群展示 -->
|
||||
<div class="best-cluster">
|
||||
<h3>最佳集群: {{ bestCluster }}</h3>
|
||||
</div>
|
||||
|
||||
<!-- 错误消息 -->
|
||||
<div v-if="error" class="error-message">
|
||||
<p>Error loading schedule data: {{ error }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'ScheduleDecision',
|
||||
data() {
|
||||
return {
|
||||
clusters: ['hosta', 'hostb'],
|
||||
averageResources: [],
|
||||
scores: [],
|
||||
bestCluster: '',
|
||||
error: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchScheduleDecision()
|
||||
},
|
||||
methods: {
|
||||
fetchScheduleDecision() {
|
||||
axios
|
||||
.get(API_URL + '/schedule')
|
||||
.then((response) => {
|
||||
const data = response.data
|
||||
this.averageResources = data.average_resource || []
|
||||
this.scores = data.scores || []
|
||||
this.bestCluster = data.best_cluster || ''
|
||||
})
|
||||
.catch((error) => {
|
||||
this.error = error.message || 'An error occurred while fetching schedule data.'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.schedule-decision {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
table.decision-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
table.decision-table th, table.decision-table td {
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table.decision-table tr.best {
|
||||
background-color: #e0f7fa;
|
||||
}
|
||||
|
||||
.best-cluster h3 {
|
||||
color: #00796b;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@ -1,14 +1,10 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div style="margin:0 0 5px 20px">
|
||||
Fixed header, sorted by header order,
|
||||
</div>
|
||||
<fixed-thead />
|
||||
|
||||
<div style="margin:30px 0 5px 20px">
|
||||
Not fixed header, sorted by click order
|
||||
</div>
|
||||
<unfixed-thead />
|
||||
<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
|
||||
<i class="el-icon-upload" />
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div slot="tip" class="el-upload__tip">只能上传yaml文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -18,7 +14,11 @@ import UnfixedThead from './components/UnfixedThead'
|
||||
|
||||
export default {
|
||||
name: 'DynamicTable',
|
||||
components: { FixedThead, UnfixedThead }
|
||||
components: { FixedThead, UnfixedThead },
|
||||
data() {
|
||||
return {
|
||||
tableData: [] // 初始为空数组，将在 mounted 时获取数据
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ module.exports = {
|
||||
publicPath: '/',
|
||||
outputDir: 'dist',
|
||||
assetsDir: 'static',
|
||||
lintOnSave: process.env.NODE_ENV === 'development',
|
||||
lintOnSave: false,
|
||||
productionSourceMap: false,
|
||||
devServer: {
|
||||
port: port,
|
||||
@ -36,6 +36,13 @@ module.exports = {
|
||||
warnings: false,
|
||||
errors: true
|
||||
},
|
||||
proxy: {
|
||||
'/grafana': {
|
||||
target: 'http://localhost:3030', // 替换为服务器 B 的域名或 IP 地址
|
||||
changeOrigin: true,
|
||||
pathRewrite: { '^/grafana': '' } // 如果服务器 B 的接口不以 /api 开头，去掉前缀
|
||||
}
|
||||
},
|
||||
before: require('./mock/mock-server.js')
|
||||
},
|
||||
configureWebpack: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user