connect to backend
handsomewu
parent
0775a81510
commit
e4736f38b5
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<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%">
|
||||
<el-table :data="tableData" border style="width: 100%" height="800">
|
||||
<el-table-column prop="cluster" label="Cluster" />
|
||||
<el-table-column prop="namespace" label="Namespace" />
|
||||
<el-table-column prop="name" label="Name" />
|
||||
|
|
@ -13,18 +13,9 @@
|
|||
<el-table-column prop="age" label="Age" />
|
||||
</el-table>
|
||||
<!-- YAML 编辑器弹框 -->
|
||||
<el-dialog
|
||||
title="编辑 YAML"
|
||||
:visible.sync="yamlEditorVisible"
|
||||
width="50%"
|
||||
@close="closeYamlEditorDialog"
|
||||
>
|
||||
<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 内容"
|
||||
/>
|
||||
<textarea v-model="yamlContent" style="width: 100%; height: 400px;" placeholder="编辑 YAML 内容" />
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeYamlEditorDialog">取消</el-button>
|
||||
|
|
@ -42,7 +33,8 @@ export default {
|
|||
return {
|
||||
tableData: [], // 初始为空数组，将在 mounted 时获取数据
|
||||
yamlEditorVisible: false, // 控制 YAML 编辑器弹框的显示
|
||||
yamlContent: '' // YAML 编辑器中的内容
|
||||
yamlContent: '', // YAML 编辑器中的内容
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -88,10 +80,54 @@ export default {
|
|||
this.yamlEditorVisible = false
|
||||
},
|
||||
saveYamlChanges() {
|
||||
// 保存 YAML 数据，无需转换为 JSON
|
||||
console.log('保存的 YAML 数据:', this.yamlContent)
|
||||
this.closeYamlEditorDialog() // 关闭弹框
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -16,18 +16,12 @@
|
|||
</el-table>
|
||||
|
||||
<!-- YAML 编辑器弹框 -->
|
||||
<el-dialog
|
||||
title="编辑 YAML"
|
||||
:visible.sync="yamlEditorVisible"
|
||||
width="50%"
|
||||
@close="closeYamlEditorDialog"
|
||||
>
|
||||
<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 内容"
|
||||
/>
|
||||
<textarea v-model="yamlContent" style="width: 100%; height: 400px;" placeholder="编辑 YAML 内容" />
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeYamlEditorDialog">取消</el-button>
|
||||
|
|
@ -46,7 +40,9 @@ export default {
|
|||
return {
|
||||
tableData: [], // 初始为空数组，将在 mounted 时获取数据
|
||||
yamlEditorVisible: false, // 控制 YAML 编辑器弹框的显示
|
||||
yamlContent: '' // YAML 编辑器中的内容
|
||||
yamlContent: '', // YAML 编辑器中的内容
|
||||
loading: false,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -94,9 +90,53 @@ export default {
|
|||
this.yamlEditorVisible = false
|
||||
},
|
||||
saveYamlChanges() {
|
||||
// 保存 YAML 数据，无需转换为 JSON
|
||||
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() // 关闭弹框
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue