SkyWalking拓朴图group功能改造

　　用过SkyWalking的拓朴图功能都知道，里面有个组功能，见左下角Create Group按钮，我称之为域，一个组就是一个子域，这个功能还是很重要的，因为如果一个月内活跃的服务器很多，整体的拓朴图就会密密麻麻，点击左上角All services的下拉框的值又只能看到这个服务器相关的链路信息，这样拓朴图又不够直观，所以需要group来切分为一个个相关的域（子集合）。但是SkyWalking原有的分组功能又很操蛋，分好的组数据依赖于localStorage和Vuex，这台机子的分组数据就只存在于本地，别人的机子看不到，所以架构要求我在现有的接口上模仿做一个类似的功能。

　　先在guyhub找到SkyWalking前端项目代码：https://github.com/apache/skywalking-rocketbot-ui。看了看这部分的源码，有了一个想法，既然没有后台配合，那首先，利用外部化配置文件配置域之间的包含关系，页面初始化时读取这个json文件，然后模仿Create group按钮的执行逻辑直接一步步走下去，相当于初始化给你建好组。按着这个思路写好了，这个初始化的组可以被编辑，而且由于没写好控制逻辑，刷新的时候仍然会被新增已有的组，写了个按钮主动触发初始化新增的动作，感觉也不是很完美，于是，我就有有了一个思路，模仿All services的功能来做一个All domains，见图中左上角All domains下拉框。

　　以SkyWalking7.0.0分支的代码为例：

首先public下新建config.json，请严格遵守json格式

{
   "domains" :[{
       "name":"第一个域",
       "children":["service1","service2","service3"]
   },{
       "name":"第二个域",
       "children":["service4","service5"]
   }]
}

页面上给新的All domains下拉框腾个位置，src/views/components/topology/topo-aside.vue

将上述代码template部分中的left:290px修改为410px,style部分中的width: 280px修改为400px，此处自行调整，开心就好。

接下来修改src/views/components/topology/topo-services.vue，其中的请求本地文件用的是原生xhr对象，如果乐意也可以npm安装axios，此处不展开。

　　最后修改vue.config.js文件，需要注意的是原本SkyWalking前端的包是会被打到SkyWalking后端包中，如果还是想这样子的话可以在skywalking官网下载的tar包解压后的根目录webapp下的skywalking-webapp.jar解压，然后路径为BOOT-INF/classes/public，然后把我们的刚打出来的dist包下的文件覆盖进去替换全部，然后再把skywalking-webapp压缩还原为jar包即可，那下面的步骤就可以不用看了。

　　如果是把前端项目单独分离出来维护，就需要修改proxy字段中转发的地址修改为自己SkyWalking后端地址，端口为默认的12800，否则本地联调不通。

let baseUrl='/skywalking-app' // 页面地址，根据自己需要进行修
module.exports = {
  publicPath : baseUrl,
  lintOnsave : true,
  outputDir : dist, //包名，根据自己需要进行修改
  devServer: {
    proxy: {
      '/graphql': {
        target: `${process.env.SW_PROXY_TARGET || 'http://XXX.XX.XX.XX:12800'}`,
        changeOrigin: true,
      },
    },
  },
};

然后在nginx配置文件nginx.conf文件中进行配置，需要注意的是Skywalking的路由采用history模式，页面刷新会404，try_files语句就是为了解决这个问题。

        location /skywalking-app {
            alias html/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /skywalking-app/index.html
            add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
        }

        #skywalking-app的反向代理
        location /graphql{
           proxy_set_header   Host             $host;
           proxy_set_header   x-forwarded-for  $remote_addr;
           proxy_set_header   X-Real-IP        $remote_addr;
           proxy_pass  http://XXXX.XX.XX.XX:12800;
        }