blackteay/vue-element-admin
1
0
Fork 0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-04-05 11:18:42 +08:00
Code Issues Releases Wiki Activity

add yaml editor in pod and service deploy page

Browse Source
This commit is contained in:
handsomewu 2024-11-14 00:23:58 +08:00
parent a4be6f26af
commit 0775a81510
3 changed files with 91 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

37
src/views/deploy/app.vue
View File

@ -1,5 +1,6 @@
<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%">
<el-table-column prop="cluster" label="Cluster" />
<el-table-column prop="namespace" label="Namespace" />
@ -11,6 +12,25 @@
<el-table-column prop="restarts" label="Restarts" />
<el-table-column prop="age" label="Age" />
</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>
@ -20,7 +40,9 @@ export default {
name: 'DashboardAdmin',
data() {
return {
tableData: [] // 初始为空数组，将在 mounted 时获取数据
tableData: [], // 初始为空数组，将在 mounted 时获取数据
yamlEditorVisible: false, // 控制 YAML 编辑器弹框的显示
yamlContent: '' // YAML 编辑器中的内容
}
},
mounted() {
@ -56,6 +78,19 @@ export default {
}))
})
.catch(error => console.error('Error fetching table data:', error))
},
openYamlEditorDialog() {
// 打开 YAML 编辑器弹框
this.yamlEditorVisible = true
},
closeYamlEditorDialog() {
// 关闭 YAML 编辑器弹框
this.yamlEditorVisible = false
},
saveYamlChanges() {
// 保存 YAML 数据，无需转换为 JSON
console.log('保存的 YAML 数据:', this.yamlContent)
this.closeYamlEditorDialog() // 关闭弹框
}
}
}

55
src/views/deploy/service.vue
View File

@ -1,5 +1,9 @@
<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="Cluster" />
<el-table-column prop="namespace" label="Namespace" />
@ -10,16 +14,39 @@
<el-table-column prop="ports" label="Ports" />
<el-table-column prop="age" label="Age" />
</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 时获取数据
tableData: [], // 初始为空数组，将在 mounted 时获取数据
yamlEditorVisible: false, // 控制 YAML 编辑器弹框的显示
yamlContent: '' // YAML 编辑器中的内容
}
},
mounted() {
@ -52,8 +79,24 @@ export default {
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() {
// 保存 YAML 数据，无需转换为 JSON
console.log('保存的 YAML 数据:', this.yamlContent)
this.closeYamlEditorDialog() // 关闭弹框
}
}
}
@ -65,6 +108,11 @@ export default {
background-color: rgb(240, 242, 245);
position: relative;
.edit-yaml-button {
top: 16px;
left: 16px;
}
.github-corner {
position: absolute;
top: 0px;
@ -79,6 +127,11 @@ export default {
}
}
.editor-container {
position: relative;
height: 100%;
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;