update service and pod page

pull/4271/head
handsomewu 2024-11-13 23:52:38 +08:00
parent 1242d2d3f2
commit a4be6f26af
2 changed files with 176 additions and 0 deletions

View File

@ -0,0 +1,89 @@
<template>
<div class="dashboard-editor-container">
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="cluster" label="Cluster" />
<el-table-column prop="namespace" label="Namespace" />
<el-table-column prop="name" label="Name" />
<el-table-column prop="status" label="Status" />
<el-table-column prop="ip" label="IP" />
<el-table-column prop="node" label="Node" />
<el-table-column prop="ready" label="Ready" />
<el-table-column prop="restarts" label="Restarts" />
<el-table-column prop="age" label="Age" />
</el-table>
</div>
</template>
<script>
import { API_URL } from '@/config/APIconfig'
export default {
name: 'DashboardAdmin',
data() {
return {
tableData: [] // mounted
}
},
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))
}
}
}
</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>

View File

@ -0,0 +1,87 @@
<template>
<div class="dashboard-editor-container">
<el-table :data="tableData" border style="width: 100%" :fit="true">
<el-table-column prop="cluster" label="Cluster" />
<el-table-column prop="namespace" label="Namespace" />
<el-table-column prop="name" label="Name" />
<el-table-column prop="type" label="Type" />
<el-table-column prop="clusterIp" label="Cluster IP" />
<el-table-column prop="externalIp" label="External IP" />
<el-table-column prop="ports" label="Ports" />
<el-table-column prop="age" label="Age" />
</el-table>
</div>
</template>
<script>
import { API_URL } from '@/config/APIconfig'
export default {
name: 'DashboardAdmin',
data() {
return {
tableData: [] // mounted
}
},
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
}))
})
.catch(error => console.error('Error fetching table data:', error))
}
}
}
</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>