Skip to content

A
apaas-ui
Commit c16dee4b authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

topology，所有节点按数据服务来，云服务功能

parent 868a2f8b
Hide whitespace changes
Inline Side-by-side
Showing with 205 additions and 47 deletions
src/assets/svg/topology_ic_ganzhifw.svg 0 → 100644
View file @ c16dee4b
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 17</title><rect class="cls-1" x="4.22" y="4.22" width="13.56" height="13.56" transform="translate(-4.56 11) rotate(-45)"/><path class="cls-2" d="M11,2.83,19.17,11,11,19.17,2.83,11,11,2.83M11,0,0,11,11,22,22,11,11,0Z"/></svg>
\ No newline at end of file
src/assets/svg/topology_ic_shikongfw.svg 0 → 100644
View file @ c16dee4b
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 15</title><path class="cls-1" d="M10,19a9,9,0,1,1,9-9A9,9,0,0,1,10,19Z"/><path class="cls-2" d="M10,2a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-2A10,10,0,1,0,20,10,10,10,0,0,0,10,0Z"/></svg>
\ No newline at end of file
src/assets/svg/topology_ic_shipinfw.svg 0 → 100644
View file @ c16dee4b
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 19.05"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 16</title><polygon class="cls-1" points="1.73 18.05 11 2 20.27 18.05 1.73 18.05"/><path class="cls-2" d="M11,4l7.54,13.05H3.46L11,4m0-4L0,19.05H22L11,0Z"/></svg>
\ No newline at end of file
src/assets/svg/topology_ic_shujufw.svg 0 → 100644
View file @ c16dee4b
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 14</title><rect class="cls-1" x="1" y="1" width="16" height="16"/><path class="cls-2" d="M16,2V16H2V2H16m2-2H0V18H18V0Z"/></svg>
\ No newline at end of file
src/assets/svg/topology_ic_zonghefw.svg 0 → 100644
View file @ c16dee4b
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20.92"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 18</title><polygon class="cls-1" points="4.93 19.92 1.18 8.37 11 1.24 20.82 8.37 17.07 19.92 4.93 19.92"/><path class="cls-2" d="M11,2.47l8.65,6.28-3.3,10.17H5.65L2.35,8.76,11,2.47M11,0,0,8,4.2,20.92H17.8L22,8,11,0Z"/></svg>
\ No newline at end of file
src/components/shop-cloud/shop-cloud.vue
View file @ c16dee4b
......@@ -139,7 +139,7 @@
<div class="input_right">GB</div>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="form_title">单个容器组规格</div>
</el-col>
......@@ -1059,7 +1059,18 @@ export default {
]
};
this.$api.serviceShop.updateCloud(query).then(response => {
console.log(response);
if (response.data.success == 1) {
this.$message({
message: "申请成功",
type: "success"
});
this.$router.push("/services_shop");
} else {
this.$message({
message: "申请失败",
type: "error"
});
}
});
}
console.log(this.form);
......
src/components/topology.vue
View file @ c16dee4b
......@@ -17,14 +17,23 @@
import G6 from "@antv/g6";
export default {
props: {
datas: Object,
datas: {
type: Object,
default: () => {
return {
nodes: [],
edges: []
};
}
},
namespace: String
},
mounted() {},
watch: {
datas(val) {
console.log(val);
this.getCavData();
this.getLegendNodes();
this.getLegendEdges();
}
},
methods: {
......@@ -36,32 +45,32 @@ export default {
switch (node.data.nodeType) {
case "workload":
node.type = "image";
node.img = "./static/topology_ic_shujufw.svg";
node.img = require("@/assets/svg/topology_ic_shujufw.svg");
node.size = [15, 15];
break;
case "app":
node.type = "image";
node.img = "./static/topology_ic_shujufw.svg";
node.img = require("@/assets/svg/topology_ic_shujufw.svg");
node.size = [15, 15];
break;
case "unknow source":
node.type = "image";
node.img = "./static/topology_ic_shujufw.svg";
node.img = require("@/assets/svg/topology_ic_shujufw.svg");
node.size = [15, 15];
break;
case "service":
node.type = "image";
node.img = "./static/topology_ic_shujufw.svg";
node.img = require("@/assets/svg/topology_ic_shujufw.svg");
node.size = [15, 15];
break;
case "service entry":
node.type = "image";
node.img = "./static/topology_ic_shujufw.svg";
node.img = require("@/assets/svg/topology_ic_shujufw.svg");
node.size = [15, 15];
break;
default:
node.type = "image";
node.img = "./static/topology_ic_shujufw.svg";
node.img = require("@/assets/svg/topology_ic_ganzhifw.svg");
node.size = [15, 15];
break;
}
......@@ -86,6 +95,11 @@ export default {
edge.id = edge.data.id;
edge.source = edge.data.source;
edge.target = edge.data.target;
edge.label = edge.data.traffic.rates
? edge.data.traffic.rates.tcp
? edge.data.traffic.rates.tcp
: edge.data.traffic.rates.http
: "";
edge.style = {
stroke: "#494e8f",
lineWidth: 1,
......@@ -97,17 +111,43 @@ export default {
strokeOpacity: 1,
cursor: "pointer"
};
if (edge.data.xxx == "success") {
// sueecss
edge.style.stroke = "#25bdb1";
if (edge.data.traffic.protocol == "tcp") {
// tcp
edge.type = "1";
edge.style.stroke = "#c77eb5";
} else if (edge.data.traffic.protocol == "http") {
if (edge.data.traffic.responses) {
let sta = 0;
for (let i in edge.data.traffic.responses) {
if (
i.substring(i.length - 3, i.length - 2) == 5 ||
i.substring(i.length - 3, i.length - 2) == 4
) {
sta += edge.data.traffic.responses[i][0];
} else {
sta += 0;
}
if (sta > 20) {
edge.style.stroke = "#d93a49";
edge.type = "3";
} else if (sta == 0) {
edge.style.stroke = "#1d953f";
edge.type = "2";
} else {
edge.style.stroke = "#f36c21";
edge.type = "2";
}
}
} else {
edge.style.stroke = "#a1a3a6";
edge.type = "0";
}
} else {
// warning
edge.style.stroke = "#e15260";
edge.style.stroke = "#1d953f";
edge.type = "2";
}
});
self.getCav();
self.getLegendNodes();
self.getLegendEdges();
},
getCav() {
const width = this.$refs.conCav.scrollWidth;
......@@ -224,7 +264,7 @@ export default {
x: legendX,
y: legendBeginY,
type: "image",
img: "./static/topology_ic_shujufw.svg",
img: require("@/assets/svg/topology_ic_shujufw.svg"),
size: [15, 15],
label: "数据服务"
},
......@@ -233,7 +273,7 @@ export default {
x: legendX,
y: legendBeginY + legendYPadding * 1,
type: "image",
img: "./static/topology_ic_shikongfw.svg",
img: require("@/assets/svg/topology_ic_shikongfw.svg"),
size: [15, 15],
label: "时空服务"
},
......@@ -242,7 +282,7 @@ export default {
x: legendX,
y: legendBeginY + legendYPadding * 2,
type: "image",
img: "./static/topology_ic_shipinfw.svg",
img: require("@/assets/svg/topology_ic_shipinfw.svg"),
size: [15, 15],
label: "视频服务"
},
......@@ -251,7 +291,7 @@ export default {
x: legendX,
y: legendBeginY + legendYPadding * 3,
type: "image",
img: "./static/topology_ic_ganzhifw.svg",
img: require("@/assets/svg/topology_ic_ganzhifw.svg"),
size: [15, 15],
label: "感知服务"
},
......@@ -260,7 +300,7 @@ export default {
x: legendX,
y: legendBeginY + legendYPadding * 4,
type: "image",
img: "./static/topology_ic_zonghefw.svg",
img: require("@/assets/svg/topology_ic_zonghefw.svg"),
size: [15, 15],
label: "综合应用"
}
......@@ -403,11 +443,11 @@ export default {
background-color: #fff;
}
.legend_in_tit {
color: #8890a7;
font-size: 14px;
line-height: 26px;
padding: 0 10px;
border-bottom: 2px #e5f0ff solid;;
color: #8890a7;
font-size: 14px;
line-height: 26px;
padding: 0 10px;
border-bottom: 2px #e5f0ff solid;
}
.legend_nodes {
width: 100%;
......
src/pages/workbench/fwgl/cloud-detail.vue
View file @ c16dee4b
......@@ -36,7 +36,7 @@
</p>
<p class="head_right_msg_p">
业务系统名：
<span class="head_right_msg_item">{{ cloudData.workplace }}</span>
<span class="head_right_msg_item">{{ cloudData.system_name }}</span>
资源申请时间：
<span class="head_right_msg_item">{{ cloudData.apply_time }}</span>
</p>
......@@ -291,7 +291,6 @@ export default {
data() {
return {
id: "",
userId: "",
url:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
helper,
......@@ -456,7 +455,14 @@ export default {
now_user: "",
activeName: null,
tabShow: true,
cloudData: {},
cloudData: {
namespace: "",
workplace: "",
user_name: "",
phone: "",
apply_time: "",
system_name: ""
},
cloudDteail: {
containers: "",
cpu: "",
......@@ -504,14 +510,38 @@ export default {
}
},
mounted() {
this.getUrlQuery();
this.getCloudDetail();
},
methods: {
getUrlQuery() {
this.apply_id = this.$route.query.apply_id || "";
this.user_id = this.$route.query.user_id || "";
this.apply_type = this.$route.query.apply_type || 0;
this.use_uid = this.$route.query.use_uid || "";
this.id = this.$route.query.id || "";
if (this.use_uid != "") {
this.getCloudApplication();
}
},
getUrl() {
return this.$route.path.substring(0, 9);
},
getCloudApplication() {
this.$api.workbench
.getCloudApplication({ namespace: this.cloudData.namespace })
.then(response => {
if (response.data.success == 1) {
this.appList = response.data.data;
} else {
console.log(response.data.errMsg);
}
});
},
download() {},
adjustment() {},
adjustment() {
this.$router.push("/shop/cloud");
},
distribution() {
this.$api.workbench
.setCloudAllocation({ id: this.id, userId: this.user_id })
......@@ -530,9 +560,74 @@ export default {
}
});
},
refuse() {},
pass() {},
deleteItem() {},
refuse() {
let query = {
applyId: this.apply_id,
applyState: -1,
applyType: this.apply_type,
applyCloudId: this.id,
namespace: this.cloudData.namespace
};
this.$api.workbench.setCloudApproval(query).then(response => {
if (response.data.success == 1) {
this.$message({
message: "申请已拒绝",
type: "success"
});
this.$router.push(this.getUrl());
} else {
this.$message({
message: "申请拒绝失败",
type: "error"
});
}
});
},
pass() {
let query = {
applyId: this.apply_id,
applyState: 1,
applyType: this.apply_type,
applyCloudId: this.id,
namespace: this.cloudData.namespace
};
this.$api.workbench.setCloudApproval(query).then(response => {
if (response.data.success == 1) {
this.$message({
message: "申请已通过",
type: "success"
});
this.$router.push(this.getUrl());
} else {
this.$message({
message: "申请通过失败",
type: "error"
});
}
});
},
deleteItem() {
this.$api.workbench
.deleteCloud({
id: this.id,
namespace: this.cloudData.namespace,
useUid: this.use_uid
})
.then(response => {
if (response.data.success == 1) {
this.$message({
message: "该资源已删除",
type: "success"
});
this.$router.push(this.getUrl());
} else {
this.$message({
message: "资源删除失败",
type: "error"
});
}
});
},
getCurrentUser() {
this.$api.user.getNowUser().then(({ data }) => {
if (data.success == 1) {
......@@ -547,6 +642,7 @@ export default {
this.$refs.allotConfirm.getDetail(this.apply_id);
},
clickTab() {},
// 根据列表参数来判断显示什么
setListWithRole() {
if (this.now_user == 0) {
// 普通用户
......@@ -594,9 +690,9 @@ export default {
},
getCloudDetail() {
let query = {
type: 0,
applyId: 13,
id: 25
type: this.apply_type,
applyId: this.apply_id,
id: this.id
};
this.$api.workbench.getCloudDetail(query).then(response => {
let data = response.data.data;
......@@ -633,7 +729,6 @@ export default {
(count.containers_total / count.containers_use) * 100
);
}
// this.appList =
this.cloudDteail.containers = data.containers;
this.cloudDteail.cpu = data.cpu;
this.cloudDteail.disk = data.disk;
......@@ -654,6 +749,12 @@ export default {
this.cloudDteail.adjust_one_memory_min = data.adjust_one_memory_min;
this.apploy_msg.first_level = data.first_level;
this.apploy_msg.second_level = data.second_level;
this.cloudData.namespace = data.namespace;
this.cloudData.workplace = data.workplace;
this.cloudData.user_name = data.user_name;
this.cloudData.phone = data.phone;
this.cloudData.apply_time = data.apply_time;
this.cloudData.system_name = data.system_name;
this.setListWithRole();
});
}
......
src/pages/workbench/fwgl/serviceDetail.vue
View file @ c16dee4b
......@@ -501,13 +501,9 @@ export default {
});
},
getData() {
let url = "./static/antv.json";
this.$http
.get(url)
.then(response => {
this.datas = response.data.elements;
})
.catch(function(response) {});
this.$api.workbench.getServiceTopology().then(response => {
this.datas = response.data.elements;
});
},
getServiceInfo() {
this.$http
......
src/request/api/workbench.js
View file @ c16dee4b
......@@ -34,7 +34,7 @@ const workbench = {
},
// cloud resource approval
setCloudApproval(params) {
return axios.put(`/apaas/service/v3/resource/apply/approve?apply_id=${params.applyId}&apply_state=${params.applyState}&apply_type=${params.applyType}&cloud_id=${params.applyCloudId}&namespace=${params.namespace}`, params)
return axios.put(`/apaas/service/v3/resource/apply/approve?apply_id=${params.applyId}&apply_state=${params.applyState}&apply_type=${params.applyType}&cloud_id=${params.applyCloudId}&namespace=${params.namespace}`)
},
// cloud resource allocation
setCloudAllocation(params) {
......@@ -42,7 +42,7 @@ const workbench = {
},
// cloud resource delete
deleteCloud(params) {
return axios.delete(`/apaas/service/v3/resource/apply/remove?id=${params.id}`)
return axios.delete(`/apaas/service/v3/resource/apply/remove?id=${params.id}&namespace=${params.namespace}&use_uid=${params.useUid}`)
},
// cloud resource disabled
disabledCloud(params) {
......@@ -52,6 +52,11 @@ const workbench = {
getCloudApplication(params) {
return axios.get(`/apaas/hubApi/market/deployList?page=1&limit=10000&namespaces=${params.namespace}`)
},
// get service topology
getServiceTopology() {
return axios.get(`/awecloud/meshgraph/api/namespaces/graph?duration=60s&graphType=service&injectServiceNodes=false&appenders=deadNode,sidecarsCheck,serviceEntry,istio&namespaces=apaas-proxy`)
},
}
export default workbench;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment