A 功能 添加配置关系图

spug_api/apps/configuration/__init__.py

@@ -2,6 +2,7 @@ from apps.configuration import environment
 from apps.configuration import service
 from apps.configuration import config
 from apps.configuration import app as app_page
+from apps.configuration import relationship
 
 
 def register_blueprint(app):
@@ -9,3 +10,4 @@ def register_blueprint(app):
     app.register_blueprint(service.blueprint, url_prefix='/configuration/services')
     app.register_blueprint(config.blueprint, url_prefix='/configuration/configs')
     app.register_blueprint(app_page.blueprint, url_prefix='/configuration/apps')
+    app.register_blueprint(relationship.blueprint, url_prefix='/configuration/relationship')

spug_api/apps/configuration/relationship.py

@@ -0,0 +1,21 @@
+from flask import Blueprint
+from apps.deploy.models import App
+from apps.configuration.models import Service
+from libs.tools import json_response
+from apps.configuration.models import AppConfigRel
+from libs.decorators import require_permission
+
+blueprint = Blueprint(__name__, __name__)
+
+
+@blueprint.route('/', methods=['GET'])
+@require_permission('config_app_rel_view')
+def get():
+    apps = App.query.all()
+    services = Service.query.all()
+    relations = AppConfigRel.query.all()
+    return json_response({
+        'apps': [x.to_json() for x in apps],
+        'services': [x.to_json() for x in services],
+        'relations': [x.to_json() for x in relations]
+    })

spug_web/src/components/configuration/RelationChart.vue

@@ -0,0 +1,107 @@
+<template>
+  <div id="configuration_relation_chart" style="width: 100%; height: 100%">
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts';
+  export default {
+    data() {
+      return {
+        nodes_map: {},
+        colors: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
+      }
+    },
+    mounted() {
+      let chart = echarts.init(document.getElementById('configuration_relation_chart'));
+      let nodes = [];
+      let links = [];
+      chart.showLoading();
+      this.$http.get('/api/configuration/relationship/').then(res => {
+        res.result.services.map(item => {
+          this.nodes_map[item.id + '_s'] = item;
+          nodes.push({
+            id: item.id + '_s',
+            name: item.name,
+            symbolSize: 16,
+            itemStyle: {
+              color: '#66bdff'
+            },
+            label: {
+              show: true
+            },
+          })
+        });
+        res.result.apps.map((item, index) => {
+          this.nodes_map[item.id + '_a'] = item;
+          nodes.push({
+            id: item.id + '_a',
+            name: item.name,
+            symbolSize: 20,
+            itemStyle: {
+              color: this.colors[index % this.colors.length]
+            },
+            label: {
+              show: true
+            }
+          })
+        });
+        res.result.relations.map(item => {
+          let suffix = (item.d_type === 'app') ? '_a' : '_s';
+          links.push({
+            source: item.s_id + '_a',
+            target: item.d_id + suffix
+          })
+        });
+        chart.setOption({
+          title: {
+            text: '应用配置关系图',
+          },
+          tooltip: {
+            show: true,
+            formatter: (params) => {
+              let des_body = '';
+              let src_body = '';
+              links.map(item => {
+                if (params.data.id === item.source) {
+                  src_body += `<tr><td>${this.nodes_map[item.target].name}</td><td>${this.nodes_map[item.target].desc}</td></tr>`
+                }else if (params.data.id === item.target) {
+                  des_body += `<tr><td>${this.nodes_map[item.source].name}</td><td>${this.nodes_map[item.source].desc}</td></tr>`
+                }
+              });
+              return `依赖的应用：</br><table>${src_body}</table> </br>被依赖的应用：</br><table>${des_body}</table>`
+            }
+          },
+          animationDurationUpdate: 1500,
+          animationEasingUpdate: 'quinticInOut',
+          series: [
+            {
+              name: '应用配置关系图',
+              type: 'graph',
+              layout: 'circular',
+              circular: {
+                rotateLabel: true
+              },
+              focusNodeAdjacency: true,
+              data: nodes,
+              links: links,
+              label: {
+                show: true,
+                position: 'right',
+                formatter: '{b}'
+              },
+              edgeLabel: {
+                show: true,
+                formatter: ''
+              },
+              lineStyle: {
+                color: 'source',
+                curveness: 0.3
+              }
+            }
+          ]
+        })
+      }, res => this.$layer_message(res.result)).finally(() => chart.hideLoading())
+    }
+  }
+</script>

spug_web/src/components/configuration/routes.js

@@ -4,6 +4,7 @@
 import App from './App.vue'
 import Service from './Service.vue'
 import Environment from './Environment.vue'
+import RelationChart from './RelationChart.vue'
 
 export default [
     {
@@ -26,5 +27,12 @@ export default [
         meta: {
             permission: 'config_environment_view'
         }
+    },
+    {
+        path: 'relationship',
+        component: RelationChart,
+        meta: {
+            permission: 'config_app_view'
+        }
     }
 ];

spug_web/src/config/menu.js

@@ -24,7 +24,8 @@ let menu = {
             key: '4', desc: '配置管理', icon: 'fa fa-cogs', permission: 'config_environment_view|config_service_view|config_app_view', subs: [
                 {key: '/configuration/environment', permission: 'config_environment_view', desc: '环境管理'},
                 {key: '/configuration/service', permission: 'config_service_view', desc: '服务配置'},
-                {key: '/configuration/app', permission: 'config_app_view', desc: '应用配置'}
+                {key: '/configuration/app', permission: 'config_app_view', desc: '应用配置'},
+                {key: '/configuration/relationship', permission: 'config_app_view', desc: '配置关系'}
             ]
         }, {
             key: '5', desc: '任务管理', icon: 'fa fa-calendar', permission: 'job_task_view', subs: [