From c16dee4b6c8966295fee061d69185481c05519da Mon Sep 17 00:00:00 2001 From: liudianxin Date: Sat, 11 Jul 2020 17:50:42 +0800 Subject: [PATCH] =?UTF-8?q?topology=EF=BC=8C=E6=89=80=E6=9C=89=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E6=8C=89=E6=95=B0=E6=8D=AE=E6=9C=8D=E5=8A=A1=E6=9D=A5?= =?UTF-8?q?=EF=BC=8C=E4=BA=91=E6=9C=8D=E5=8A=A1=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/topology_ic_ganzhifw.svg | 1 + src/assets/svg/topology_ic_shikongfw.svg | 1 + src/assets/svg/topology_ic_shipinfw.svg | 1 + src/assets/svg/topology_ic_shujufw.svg | 1 + src/assets/svg/topology_ic_zonghefw.svg | 1 + src/components/shop-cloud/shop-cloud.vue | 15 ++- src/components/topology.vue | 90 ++++++++++----- src/pages/workbench/fwgl/cloud-detail.vue | 123 +++++++++++++++++++-- src/pages/workbench/fwgl/serviceDetail.vue | 10 +- src/request/api/workbench.js | 9 +- 10 files changed, 205 insertions(+), 47 deletions(-) create mode 100644 src/assets/svg/topology_ic_ganzhifw.svg create mode 100644 src/assets/svg/topology_ic_shikongfw.svg create mode 100644 src/assets/svg/topology_ic_shipinfw.svg create mode 100644 src/assets/svg/topology_ic_shujufw.svg create mode 100644 src/assets/svg/topology_ic_zonghefw.svg diff --git a/src/assets/svg/topology_ic_ganzhifw.svg b/src/assets/svg/topology_ic_ganzhifw.svg new file mode 100644 index 0000000..9d1f757 --- /dev/null +++ b/src/assets/svg/topology_ic_ganzhifw.svg @@ -0,0 +1 @@ +ic_画板 17 \ No newline at end of file diff --git a/src/assets/svg/topology_ic_shikongfw.svg b/src/assets/svg/topology_ic_shikongfw.svg new file mode 100644 index 0000000..48a3498 --- /dev/null +++ b/src/assets/svg/topology_ic_shikongfw.svg @@ -0,0 +1 @@ +ic_画板 15 \ No newline at end of file diff --git a/src/assets/svg/topology_ic_shipinfw.svg b/src/assets/svg/topology_ic_shipinfw.svg new file mode 100644 index 0000000..1f386cc --- /dev/null +++ b/src/assets/svg/topology_ic_shipinfw.svg @@ -0,0 +1 @@ +ic_画板 16 \ No newline at end of file diff --git a/src/assets/svg/topology_ic_shujufw.svg b/src/assets/svg/topology_ic_shujufw.svg new file mode 100644 index 0000000..d33bbe9 --- /dev/null +++ b/src/assets/svg/topology_ic_shujufw.svg @@ -0,0 +1 @@ +ic_画板 14 \ No newline at end of file diff --git a/src/assets/svg/topology_ic_zonghefw.svg b/src/assets/svg/topology_ic_zonghefw.svg new file mode 100644 index 0000000..b5b13db --- /dev/null +++ b/src/assets/svg/topology_ic_zonghefw.svg @@ -0,0 +1 @@ +ic_画板 18 \ No newline at end of file diff --git a/src/components/shop-cloud/shop-cloud.vue b/src/components/shop-cloud/shop-cloud.vue index f1d0f41..29bf92c 100644 --- a/src/components/shop-cloud/shop-cloud.vue +++ b/src/components/shop-cloud/shop-cloud.vue @@ -139,7 +139,7 @@
GB
- +
单个容器组规格
 @@ -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); diff --git a/src/components/topology.vue b/src/components/topology.vue index 5dff6c0..1df78ea 100644 --- a/src/components/topology.vue +++ b/src/components/topology.vue @@ -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%; diff --git a/src/pages/workbench/fwgl/cloud-detail.vue b/src/pages/workbench/fwgl/cloud-detail.vue index 5fe557b..5c89e23 100644 --- a/src/pages/workbench/fwgl/cloud-detail.vue +++ b/src/pages/workbench/fwgl/cloud-detail.vue @@ -36,7 +36,7 @@

业务系统名： - {{ cloudData.workplace }} + {{ cloudData.system_name }} 资源申请时间： {{ cloudData.apply_time }}

@@ -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(); }); } diff --git a/src/pages/workbench/fwgl/serviceDetail.vue b/src/pages/workbench/fwgl/serviceDetail.vue index 86ab272..84b2cb6 100644 --- a/src/pages/workbench/fwgl/serviceDetail.vue +++ b/src/pages/workbench/fwgl/serviceDetail.vue @@ -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 diff --git a/src/request/api/workbench.js b/src/request/api/workbench.js index ec80386..591e997 100644 --- a/src/request/api/workbench.js +++ b/src/request/api/workbench.js @@ -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; -- 2.26.0