From 42c3bb00c3398b65ee65c5fd62f5796b23a9bd46 Mon Sep 17 00:00:00 2001
From: smjiao <smjiao@isoftstone.com>
Date: Thu, 27 Jun 2024 15:07:40 +0800
Subject: [PATCH 09/10] =?UTF-8?q?=E9=85=8D=E7=BD=AE=E6=BA=AF=E6=BA=90?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E8=BF=BD=E6=BA=AF=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/configuration.js                      |  21 +++-
 src/config/router.config.js                   |  12 +-
 .../TranscationDomainConfigurations.vue       |   4 +-
 .../TranscationDomainManagement.vue           | 100 ++++++++--------
 .../components/AddTranscationDomainModal.vue  |  29 ++++-
 .../components/QueryRealConfsDrawer.vue       | 108 +++++++++++++++++-
 6 files changed, 212 insertions(+), 62 deletions(-)

diff --git a/src/api/configuration.js b/src/api/configuration.js
index 37f7b0d..e25c686 100644
--- a/src/api/configuration.js
+++ b/src/api/configuration.js
@@ -1,5 +1,4 @@
 import request from '@/vendor/ant-design-pro/utils/request';
-import qs from 'qs';
 
 const api = {
   domainList: '/domain/queryDomain', // 获取域信息列表
@@ -13,7 +12,8 @@ const api = {
   batchSyncConf: '/confs/batch/syncConf', // 将当前业务域的配置批量同步到各主机
   queryRealConfs: '/confs/queryRealConfs', // 获取主机当前配置
   queryExpectedConfs: '/confs/queryExpectedConfs', // 获取主机配置日志
-  queryHostAndStatus: '/manage/host/sync/status/get' // 获取业务域下的主机及其同步状态
+  queryHostAndStatus: '/manage/host/sync/status/get', // 获取业务域下的主机及其同步状态
+  queryConfTraceInfos: '/conftrace/query' // 获取业务域下单个主机的单个配置文件监控记录
 };
 
 export default api;
@@ -147,3 +147,20 @@ export function batchSyncConf(domainName, hostIds) {
     }
   });
 }
+
+// 获取业务域下单个hostId的单个文件监控记录
+export function queryConfTraceInfos(parameter) {
+  return request({
+    url: api.queryConfTraceInfos,
+    method: 'post',
+    data: {
+      domain_name: parameter.domainName,
+      host_id: parameter.hostId,
+      conf_name: parameter.confName,
+      sort: 'create_time',
+      direction: 'desc',
+      page: parameter.page || 1,
+      per_page: parameter.per_page || 10
+    }
+  });
+}
diff --git a/src/config/router.config.js b/src/config/router.config.js
index 6e7b70c..6730a81 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -3,10 +3,11 @@ import {UserLayout, BasicLayout} from '@/vendor/ant-design-pro/layouts';
 
 const RouteView = {
   name: 'RouteView',
-  render: (h) => h('router-view')
+  render: h => h('router-view')
 };
 
 const routeMap = {
+
   /**
    *  @title: 路由名称。通过i18nRender转换成不同语种
    *  @path: 路由链接
@@ -812,8 +813,8 @@ export const asyncRouterMap = [
                       breadcrumbName:
                         routeMap.configuration.children.TranscationDomainView.children.TranscationDomainManagement
                           .title,
-                      path: routeMap.configuration.children.TranscationDomainView.children.TranscationDomainManagement
-                        .path
+                      path:
+                        routeMap.configuration.children.TranscationDomainView.children.TranscationDomainManagement.path
                     }
                   ]
                 }
@@ -839,8 +840,8 @@ export const asyncRouterMap = [
                       breadcrumbName:
                         routeMap.configuration.children.TranscationDomainView.children.TranscationDomainManagement
                           .title,
-                      path: routeMap.configuration.children.TranscationDomainView.children.TranscationDomainManagement
-                        .path
+                      path:
+                        routeMap.configuration.children.TranscationDomainView.children.TranscationDomainManagement.path
                     },
                     {
                       breadcrumbName:
@@ -856,6 +857,7 @@ export const asyncRouterMap = [
             path: routeMap.configuration.children.TranscationDomainConfigurations.path,
             name: 'transcationDomainConfigurations',
             component: RouteView,
+            hidden: true,
             hideChildrenInMenu: true,
             // $noDomain is used for the case where domain are not selected.
             redirect: routeMap.configuration.children.TranscationDomainConfigurations.path + '/$noDomain',
diff --git a/src/views/configuration/TranscationDomainConfigurations.vue b/src/views/configuration/TranscationDomainConfigurations.vue
index b20e233..26fad7e 100644
--- a/src/views/configuration/TranscationDomainConfigurations.vue
+++ b/src/views/configuration/TranscationDomainConfigurations.vue
@@ -105,7 +105,7 @@
                   :columns="confChangeColumns"
                   :data-source="manageConfChange[0].changeLog"
                   :expandIconAsCell="false"
-                  :expandIconColumnIndex="4"
+                  :expandIconColumnIndex="2"
                   :expandIcon="(props) => this.customExpandIcon(props)"
                   :pagination="false"
                   bordered>
@@ -247,14 +247,12 @@ export default {
     },
     confChangeColumns() {
       return [
-        {title: '变更ID', dataIndex: 'changeId', key: 'changeId'},
         {
           title: '变更时间',
           dataIndex: 'date',
           key: 'date',
           customRender: (text, record, index) => dateFormat('YYYY-mm-dd HH:MM:SS', text)
         },
-        {title: '变更人', dataIndex: 'author', key: 'author'},
         {title: '变更原因', dataIndex: 'changeReason', key: 'changeReason'},
         {title: '变更详情', dataIndex: '', key: 'x', align: 'center'}
       ];
diff --git a/src/views/configuration/TranscationDomainManagement.vue b/src/views/configuration/TranscationDomainManagement.vue
index d94469d..45b2e78 100644
--- a/src/views/configuration/TranscationDomainManagement.vue
+++ b/src/views/configuration/TranscationDomainManagement.vue
@@ -3,55 +3,44 @@
   <page-header-wrapper :breadcrumb="breadcrumb">
     <a-card :bordered="false" class="aops-theme">
       <div>
-        <h3 class="card-title">业务域列表</h3>
-        <span>共有业务域{{ domainData.length }}个</span>
+        <a-row class="aops-app-table-control-row" type="flex" justify="space-between">
+          <a-col>
+            <h3 class="card-title">业务域列表</h3>
+            <span>共有业务域{{ domainData.length }}个</span>
+          </a-col>
+          <a-col>
+            <a-row type="flex" :gutter="70">
+              <a-col>
+                <add-transcation-domain-modal :onSuccess="handleAddSuccess"/>
+              </a-col>
+              <a-col>
+                <a-button @click="getDomainList"> <a-icon type="redo" />刷新 </a-button>
+              </a-col>
+            </a-row>
+          </a-col>
+        </a-row>
       </div>
       <div>
-        <a-list
+        <a-table
+          :rowKey="rowKey"
+          :columns="columns"
+          :data-source="domainData"
           :loading="domainLoading"
-          :data-source="cardListData"
-          :grid="{gutter: 24, xl: 3, lg: 3, md: 2, sm: 1, xs: 1}"
-        >
-          <a-list-item slot="renderItem" slot-scope="domain, index">
-            <a-card :bodyStyle="{padding: 0}" :bordered="false" :class="index !== 0 ? 'aops-theme-incard' : ''">
-              <div class="aops-card-body">
-                <router-link :to="`${domain.domainName || ''}`">
-                  <div class="aops-card-content">
-                    <h3>{{ `业务域 ${domain.domainName}` }}</h3>
-                  </div>
-                </router-link>
-                <div class="aops-card-bottom">
-                  <a-row type="flex" justify="space-between">
-                    <a-col>priority</a-col>
-                    <a-col>
-                      <router-link :to="`/configuration/transcation-domain-configurations/${domain.domainName}`">
-                        查看域内配置
-                      </router-link>
-                      <a-divider type="vertical" />
-                      <a-dropdown>
-                        <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
-                          更多 <a-icon type="down" />
-                        </a>
-                        <a-menu slot="overlay">
-                          <a-menu-item>
-                            <a href="javascript:;" @click="showAddHostDrawer(domain.domainName)">添加主机</a>
-                          </a-menu-item>
-                          <a-menu-item>
-                            <a href="javascript:;" @click="delDomain(domain.domainName)">删除</a>
-                          </a-menu-item>
-                        </a-menu>
-                      </a-dropdown>
-                    </a-col>
-                  </a-row>
-                </div>
-              </div>
-              <add-transcation-domain-modal :onSuccess="handleAddSuccess" v-if="index === 0" />
-            </a-card>
-          </a-list-item>
-        </a-list>
-        <a-row type="flex" justify="center" v-show="showNumber < domainData.length + 1">
-          <a-col><a-button @click="showMore">加载更多</a-button></a-col>
-        </a-row>
+          :pagination="false">
+          <span slot="action" slot-scope="domain">
+            <router-link :to="`${domain.domainName || ''}`">
+              业务域详情
+            </router-link>
+            <span> | </span>
+            <router-link :to="`/configuration/transcation-domain-configurations/${domain.domainName}`">
+              查看域内配置
+            </router-link>
+            <span> | </span>
+            <a @click="showAddHostDrawer(domain.domainName)">添加主机</a>
+            <span> | </span>
+            <a @click="delDomain(domain.domainName)">删除</a>
+          </span>
+        </a-table>
       </div>
     </a-card>
     <drawer-view title="添加主机" ref="addHostDrawer" :bodyStyle="{paddingBottom: '80px'}">
@@ -85,10 +74,27 @@ export default {
       domainData: [],
       showNumber: 6,
       domainLoading: false,
-      domainName: ''
+      domainName: '',
+      rowKey: 'domainName'
     };
   },
   computed: {
+    columns() {
+      return [
+        {
+          dataIndex: 'domainName',
+          width: '50%',
+          key: 'domainName',
+          title: '业务域名称'
+        },
+        {
+          key: 'operation',
+          width: '50%',
+          title: '操作',
+          scopedSlots: {customRender: 'action'}
+        }
+      ];
+    },
     // 自定义面包屑内容
     breadcrumb() {
       const routes = this.$route.meta.diyBreadcrumb.map((route) => {
diff --git a/src/views/configuration/components/AddTranscationDomainModal.vue b/src/views/configuration/components/AddTranscationDomainModal.vue
index cad671d..6718203 100644
--- a/src/views/configuration/components/AddTranscationDomainModal.vue
+++ b/src/views/configuration/components/AddTranscationDomainModal.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="aops-add-domain" @click="showModal">
-    <a-icon type="plus" />
+    <a-button type="primary">创建业务域</a-button>
     <a-modal
       title="创建业务域"
       :visible="visible"
@@ -25,6 +25,12 @@
             v-decorator="['priority', {rules: [{required: false, message: '请输入优先级'}]}]">
           </a-input>
         </a-form-item>
+        <a-form-item label="监控开关">
+          <a-switch v-model="traceIsActive" @change="handleTraceSwitchChange" checked-children="on" un-checked-children="off" />
+        </a-form-item>
+        <a-form-item label="告警开关">
+          <a-switch v-model="warningIsActive" @change="handleWarningSwitchChange" checked-children="on" un-checked-children="off" />
+        </a-form-item>
       </a-form>
     </a-modal>
   </div>
@@ -45,6 +51,9 @@ export default {
     return {
       visible: false,
       isLoading: false,
+      traceIsActive: false,
+      warningIsActive: false,
+      text: 'ON',
       form: this.$form.createForm(this, {name: 'addHostGroup'})
     };
   },
@@ -62,6 +71,8 @@ export default {
           const _this = this;
           this.isLoading = true;
           values.priority = 0;
+          values.conf_change_flag = this.traceIsActive
+          values.report_flag = this.warningIsActive
           createDomain(values)
             .then(function (res) {
               _this.$message.success(res.message);
@@ -93,6 +104,22 @@ export default {
       }
       // 26个大小写字母。数字。下划线。底划线。小数点.
       cb();
+    },
+     handleTraceSwitchChange() {
+      this.traceIsActive = !this.traceIsActive;
+      if (this.traceIsActive) {
+        this.traceIsActive = false
+      } else {
+        this.traceIsActive = true
+      }
+    },
+    handleWarningSwitchChange() {
+      this.warningIsActive = !this.warningIsActive;
+      if (this.warningIsActive) {
+        this.warningIsActive = false
+      } else {
+        this.warningIsActive = true
+      }
     }
   }
 };
diff --git a/src/views/configuration/components/QueryRealConfsDrawer.vue b/src/views/configuration/components/QueryRealConfsDrawer.vue
index 68cdcad..26a6c01 100644
--- a/src/views/configuration/components/QueryRealConfsDrawer.vue
+++ b/src/views/configuration/components/QueryRealConfsDrawer.vue
@@ -4,7 +4,7 @@
       <h1>主机当前配置</h1>
       <div>主机：{{ host.hostId }}</div>
       <div>IP地址：{{ host.ip }}</div>
-      <a-collapse>
+      <a-collapse @change="handlePanelChange">
         <a-collapse-panel v-for="item in confs" :key="item.filePath" :header="`配置项：${item.filePath}`">
           <div class="conf-description">
             <a-descriptions title="属性" :column="2">
@@ -41,6 +41,21 @@
               {{ item.confContents }}
             </div>
           </div>
+          <div class="conf-trace">
+            <a-row type="flex" justify="space-between" class="conf-content-header">
+              <a-col>
+                <div class="ant-descriptions-title">操作记录：</div>
+              </a-col>
+            </a-row>
+            <div>当前显示{{ confTraceInfos.length }}条监控信息</div>
+            <a-table
+                :rowKey="rowKey"
+                :columns="columns"
+                :data-source="confTraceInfos"
+                :loading="isLoading"
+                :pagination="pagination"
+                @change="handlePanelChange"/>
+          </div>
           <template slot="extra" v-if="item.syncStatus === 'NOT SYNC'">
             <a-icon type="close-circle" theme="twoTone" two-tone-color="#ff0000" />
             <span style="color: #ff0000">&nbsp;与业务域配置不一致</span>
@@ -81,21 +96,31 @@
 
 <script>
 import Vue from 'vue';
+import MyPageHeaderWrapper from '@/views/utils/MyPageHeaderWrapper';
 import {Collapse} from 'ant-design-vue';
 import CompareDiffView from './CompareDiffView';
 import {checkIsDiff} from '../utils/compareContent';
 
-import {queryRealConfs} from '@/api/configuration';
+import {queryConfTraceInfos, queryRealConfs} from '@/api/configuration';
+import {isArray} from 'ant-design-vue/lib/_util/vue-types/utils';
 Vue.use(Collapse);
 
 const Diff = require('diff');
 
+const defaultPagination = {
+    current: 1,
+    pageSize: 10,
+    showTotal: (total) => `总计 ${total} 项`,
+    showSizeChanger: true,
+    showQuickJumper: true
+};
 export default {
   name: 'QueryRealConfsDrawer',
   inject: ['onload'], // 来自祖辈们provide中声明的参数、方法
   components: {
     Collapse,
-    CompareDiffView
+    CompareDiffView,
+    MyPageHeaderWrapper
   },
   props: {
     confsOfDomain: {
@@ -113,10 +138,15 @@ export default {
       collapseIsLoading: false,
       confsOfHost: [],
       confs: [],
+      confTraceInfos: [],
       confsNotInHost: [],
       host: {},
       compareDrawerVisible: false,
-      comparedConf: {}
+      comparedConf: {},
+      pagination: defaultPagination,
+      isLoading: false,
+      rowKey: 'conf_name',
+      temp_conf: ''
     };
   },
   watch: {
@@ -128,6 +158,47 @@ export default {
     }
   },
   methods: {
+    handlePanelChange(row) {
+      if (Object.keys(row).length !== 0) {
+        if (isArray(row)) {
+          this.temp_conf = row[0]
+          this.handleConfTraceChange(row[0]);
+        } else {
+          const confName = this.temp_conf
+          this.pagination.current = row.current
+          this.pagination.pageSize = row.pageSize
+          this.handleConfTraceChange(confName);
+        }
+      }
+    },
+    handleConfTraceChange(confName) {
+      const _this = this
+      const pagination = this.pagination || {};
+      this.isLoading = true;
+      queryConfTraceInfos({
+        domainName: _this.domainName,
+        hostId: _this.host.hostId,
+        confName: confName,
+        page: pagination.current,
+        per_page: pagination.pageSize
+      })
+        .then((res) => {
+          _this.confTraceInfos = res.data.conf_trace_infos || [];
+          _this.totalCount = res.data.total_count
+          _this.pagination = {
+            ..._this.pagination,
+            current: pagination.current,
+            pageSize: pagination.pageSize,
+            total: res.data.total_count || (res.data.total_count === 0 ? 0 : pagination.total)
+          };
+        })
+        .catch((err) => {
+          _this.$message.error(err.response.message || err.response.data.detail || err.message);
+        })
+        .finally(() => {
+          _this.isLoading = false;
+        });
+    },
     getRealConfsList(hostId) {
       const _this = this;
       _this.collapseIsLoading = true;
@@ -186,6 +257,35 @@ export default {
       this.compareDrawerVisible = false;
     }
   },
+  computed: {
+    columns() {
+      return [
+        {
+          dataIndex: 'create_time',
+          title: '时间',
+          width: '15%',
+          key: 'create_time',
+          align: 'left',
+          scopedSlots: {customRender: 'create_time'}
+        },
+        {
+          dataIndex: 'info',
+          title: '监控记录',
+          width: '15%',
+          key: 'info',
+          align: 'left',
+          scopedSlots: {customRender: 'info'}
+        },
+        {
+          dataIndex: 'ptrace',
+          title: '进程追溯',
+          width: '15%',
+          key: 'ptrace',
+          align: 'left'
+        }
+      ];
+    }
+  },
   mounted: function () {
     const _this = this;
     this.onload(function (params) {
-- 
2.38.1.windows.1