connect to backend

pull/4271/head
handsomewu 2024-11-14 13:51:26 +08:00
parent 0775a81510
commit e4736f38b5
2 changed files with 158 additions and 82 deletions

View File

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

View File

@ -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() //
})
}
}
}