Merge pull request #49 from zmops/fix-web-bug

Fix web bug
zmops · Apr 15, 2023 · 9d2b2f3 · 9d2b2f3
2 parents f7ba79d + 7266fab
commit 9d2b2f3
Show file tree

Hide file tree

Showing 26 changed files with 435 additions and 371 deletions.
diff --git a/web-app/pnpm-lock.yaml b/web-app/pnpm-lock.yaml
diff --git a/web-app/src/components/index.ts b/web-app/src/components/index.ts
@@ -1,4 +1,3 @@
-import type { App } from 'vue';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
@@ -11,13 +10,9 @@ import {
   TitleComponent,
 } from 'echarts/components';
 import Chart from './chart/index.vue';
-// import Breadcrumb from './breadcrumb/index.vue';
-
-// Manually introduce ECharts modules to reduce packing size
 
 export {
   Chart,
-  // Breadcrumb
 };
 
 use([

diff --git a/web-app/src/components/menu/index.tsx b/web-app/src/components/menu/index.tsx
@@ -1,6 +1,6 @@
 import { defineComponent, ref, h } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import type { RouteMeta, RouteRecordRaw } from 'vue-router';
+import type { RouteMeta, RouteRecordRaw, _RouteRecordBase } from 'vue-router';
 import useMenuTree from './use-menu-tree';
 import { listenerRouteChange } from '@/utils/route-listener';
 import { openWindow, regexUrl } from '@/utils';
@@ -28,15 +28,15 @@ export default defineComponent({
     const openKeys = ref<string[]>([]);
     const selectedKey = ref<string[]>(['/', 'Dashboard']);
 
-    const getI18nName = (item) =>{
+    const getI18nName = (item) => {
       const str = 'route.' + item?.meta?.title;
       if (te(str)) {
         return t(str);
       }
       return item?.meta?.title || item.name;
     };
 
-    const goto = (item: RouteRecordRaw) => {
+    const goto = (item: _RouteRecordBase) => {
       // Open external link
       if (regexUrl.test(item.path)) {
         openWindow(item.path);
@@ -70,7 +70,9 @@ export default defineComponent({
         }
       };
       menuTree.value.forEach((el: RouteRecordRaw) => {
-        if (isFind) { return; } // Performance optimization
+        if (isFind) {
+          return;
+        } // Performance optimization
         backtrack(el, [el.name as string]);
       });
       return result;
@@ -95,7 +97,7 @@ export default defineComponent({
     };
 
     const renderSubMenu = () => {
-      function travel(_route: any[], nodes = []) {
+      function travel(_route: _RouteRecordBase[], nodes = []) {
         if (_route) {
           _route.forEach((element) => {
             const iconEle = element?.meta?.icon
@@ -107,26 +109,27 @@ export default defineComponent({
 
             const node
               = (element?.children && element?.children.length !== 0) ? (
-                <a-sub-menu
-                  key={element?.name}
-                  v-slots={{ icon: iconEle, title: () => h('span', getI18nName(element)) }}
-                >
-                  {travel(element?.children)}
-                </a-sub-menu>
+              <a-sub-menu
+                key={element?.name}
+                v-slots={{ icon: iconEle, title: () => h('span', getI18nName(element)) }}
+              >
+                {travel(element?.children)}
+              </a-sub-menu>
               ) : (
-                <a-menu-item
-                  key={element?.name}
-                  v-slots={{ icon: iconEle }}
-                  onClick={() => goto(element)}
-                >
-                  {getI18nName(element)}
-                </a-menu-item>
+              <a-menu-item
+                key={element?.name}
+                v-slots={{ icon: iconEle }}
+                onClick={() => goto(element)}
+              >
+                {getI18nName(element)}
+              </a-menu-item>
               );
             nodes.push(node as never);
           });
         }
         return nodes;
       }
+
       return travel(menuTree.value);
     };
 

diff --git a/web-app/src/components/navbar/index.vue b/web-app/src/components/navbar/index.vue
@@ -12,7 +12,7 @@
       <div ml-md mr-base flex-center>
         <a-tooltip position="bottom" :offset="-10">
           <button class="icon-btn !outline-none" @click="changeDark()">
-            <i class="i-carbon-sun text-xl dark:i-carbon-moon" />
+            <i class="i-carbon-sun dark:i-carbon-moon text-xl" />
           </button>
         </a-tooltip>
       </div>
@@ -46,14 +46,22 @@
 
           <template #content>
             <a-doption>
-              <a href="https://argus.zmops.cn/docs/" target="_blank">
-                <a-space>
-                  <icon-book />
-                  <span>
-                  {{ t('navbar.docs') }}
+              <a-space @click="switchRoles">
+                <icon-tag />
+                <span>
+                  {{ t('navbar.securitySetting') }}
                 </span>
-                </a-space>
-              </a>
+              </a-space>
+            </a-doption>
+            <a-doption>
+              <a-space @click="lintToDocs">
+                <icon-book />
+                <span>
+                  <a href="https://argus.zmops.cn/docs/" target="_blank">
+                    {{ t('navbar.docs') }}
+                  </a>
+                </span>
+              </a-space>
             </a-doption>
 
             <a-doption>
@@ -104,6 +112,10 @@ const switchRoles = async () => {
 
 };
 
+const lintToDocs = () => {
+  window.open('https://argus.zmops.cn/');
+};
+
 const getData = () => {
   getAlertsSummary().then((res) => {
     if (res.data) {

diff --git a/web-app/src/pages/login/index.tsx b/web-app/src/pages/login/index.tsx
@@ -95,7 +95,6 @@ export default defineComponent({
             </a-form-item>
           </a-form>
         </section>
-
       </div>
     );
   },

diff --git a/web-app/src/pages/monitor/SQLServer/edit.tsx b/web-app/src/pages/monitor/SQLServer/edit.tsx
@@ -73,12 +73,16 @@ export default defineComponent({
       if (!val) {
         return;
       }
-      getMonitor(val).then((res: any) => {
+      getMonitor(val).then((res) => {
+
+        if (res.code !== 0 || !res.data) {
+          return;
+        }
         const data = res.data;
         Object.keys(data).forEach((key) => {
           if (key === 'params') {
-            data[key].forEach((item: any) => {
-              form.params.forEach((param: any) => {
+            data[key].forEach((item) => {
+              form.params.forEach((param) => {
                 if (param.field === item.field) {
                   param.value = item.value;
                 }
@@ -92,12 +96,12 @@ export default defineComponent({
       });
     });
     onMounted(() => {
-      getAppParams(props.type).then((res: any) => {
+      getAppParams(props.type).then((res) => {
         const params = res.data as formParamItem[];
         params.forEach((item) => {
           item.value = item.defaultValue;
         });
-        form.params = reactive(res.data) as formParamItem[];
+        form.params = res.data as formParamItem[];
       });
     });
     return () => (

diff --git a/web-app/src/pages/monitor/SQLServer/index.tsx b/web-app/src/pages/monitor/SQLServer/index.tsx
@@ -126,7 +126,7 @@ export default defineComponent({
         }
       });
     };
-    const handleEditClick = (record: any)=>{
+    const handleEditClick = (record)=>{
       editId.value = record.id;
       visible.value = true;
     };
@@ -199,14 +199,14 @@ export default defineComponent({
           </div>
           <a-table class="mt-base flex-1" row-key="id" row-selection={rowSelection} columns={columns} onSelectionChange={handleSelectionChange} pagination={{ total: total.value }} data={tableData.value}
           v-slots={{
-            name: (scope: any) => <a class="cursor-pointer text-blue" onClick={()=>handleNameClick(scope.record.id)} >{scope.record.name}</a>,
-            status: (scope: any) => {
+            name: scope => <a class="cursor-pointer text-blue" onClick={()=>handleNameClick(scope.record.id)} >{scope.record.name}</a>,
+            status: (scope) => {
               const status = scope.record.status;
               return <a-tag color={status === 1 ? 'green' : 'red'}>{
                   status === 1 ? t('tableView.enable') : status === 0 ? t('tableView.disable') : t('tableView.offline')
               }</a-tag>;
             },
-            buttons: (scope: any) => {
+            buttons: (scope) => {
               return <a-button type="text" onClick={() => handleEditClick(scope.record)}>{t('tableView.edit')}</a-button>;
             }
           }} />

diff --git a/web-app/src/pages/monitor/dameng/edit.tsx b/web-app/src/pages/monitor/dameng/edit.tsx
@@ -76,12 +76,15 @@ export default defineComponent({
       if (!val) {
         return;
       }
-      getMonitor(val).then((res: any) => {
+      getMonitor(val).then((res) => {
+        if (res.code !== 0 || !res.data) {
+          return;
+        }
         const data = res.data;
         Object.keys(data).forEach((key) => {
           if (key === 'params') {
-            data[key].forEach((item: any) => {
-              form.params.forEach((param: any) => {
+            data[key].forEach((item) => {
+              form.params.forEach((param) => {
                 if (param.field === item.field) {
                   param.value = item.value;
                 }
@@ -95,12 +98,12 @@ export default defineComponent({
       });
     });
     onMounted(() => {
-      getAppParams(props.type).then((res: any) => {
+      getAppParams(props.type).then((res) => {
         const params = res.data as formParamItem[];
         params.forEach((item) => {
           item.value = item.defaultValue;
         });
-        form.params = reactive(res.data) as formParamItem[];
+        form.params = res.data as formParamItem[];
       });
     });
     return () => (
@@ -111,10 +114,10 @@ export default defineComponent({
           <a-form model={form} ref={formRef}>
             <a-form-item label="监控名称" field="monitor.name" rule={nameRules} required v-slots={{
               help: () => <div style="font-size: 12px;color: #757D8F">
-                <i class="a-icon-info" style="color: #5A98EC"/>标识监控的名称,名称需要保证唯一性
+                <i class="a-icon-info" style="color: #5A98EC" />标识监控的名称,名称需要保证唯一性
               </div>
             }} >
-              <a-input v-model={form.monitor.name} placeholder="标识监控的名称,名称需要保证唯一性"/>
+              <a-input v-model={form.monitor.name} placeholder="标识监控的名称,名称需要保证唯一性" />
             </a-form-item>
             {
               form && form.params && form.params.length > 0 && (
@@ -128,35 +131,35 @@ export default defineComponent({
                       validate-trigger={['change', 'input']}
                       rules={[{ required: item.required, message: `${item.name ? item.name['zh-CN'] : ''}是必填项` }]}
                     >
-                      <a-input v-model={item.value} placeholder={item.placeholder}/>
+                      <a-input v-model={item.value} placeholder={item.placeholder} />
                     </a-form-item>
                   );
                 })
               )
             }
             <a-form-item label="采集间隔(秒)" v-slots={{
               help: () => <div style="font-size: 12px;color: #757D8F">
-                <i class="a-icon-info" style="color: #5A98EC"/>监控周期性采集数据间隔时间,单位秒
+                <i class="a-icon-info" style="color: #5A98EC" />监控周期性采集数据间隔时间,单位秒
               </div>
             }}
             >
-              <a-input-number v-model={form.monitor.intervals} min={10} max={60000} step={1} style="width:100%"/>
+              <a-input-number v-model={form.monitor.intervals} min={10} max={60000} step={1} style="width:100%" />
             </a-form-item>
             <a-form-item label="测试连接" v-slots={{
               help: () => <div style="font-size: 12px;color: #757D8F">
-                <i class="a-icon-info" style="color: #5A98EC"/>新增监控前是否先探测检查监控可用性
+                <i class="a-icon-info" style="color: #5A98EC" />新增监控前是否先探测检查监控可用性
               </div>
             }}
             >
-              <a-switch v-model={form.detected}/>
+              <a-switch v-model={form.detected} />
             </a-form-item>
             <a-form-item label="描述备注" v-slots={{
               help: () => <div style="font-size: 12px;color: #757D8F">
-                <i class="a-icon-info" style="color: #5A98EC"/>更多标识和描述此监控的备注信息
+                <i class="a-icon-info" style="color: #5A98EC" />更多标识和描述此监控的备注信息
               </div>
             }}
             >
-              <a-input v-model={form.monitor.description} type="textarea" rows={3} placeholder="请输入描述备注"/>
+              <a-input v-model={form.monitor.description} type="textarea" rows={3} placeholder="请输入描述备注" />
             </a-form-item>
           </a-form>
         </a-modal>

diff --git a/web-app/src/pages/monitor/dameng/index.tsx b/web-app/src/pages/monitor/dameng/index.tsx
@@ -117,7 +117,7 @@ export default defineComponent({
         }
       });
     };
-    const handleEditClick = (record: any)=>{
+    const handleEditClick = (record)=>{
       editId.value = record.id;
       visible.value = true;
     };
@@ -197,14 +197,14 @@ export default defineComponent({
           </div>
           <a-table class="mt-base flex-1" row-key="id" row-selection={rowSelection} columns={columns} onSelectionChange={handleSelectionChange} pagination={{ total: total.value }} data={tableData.value}
           v-slots={{
-            name: (scope: any) => <a class="cursor-pointer text-blue" onClick={()=>handleNameClick(scope.record.id)}>{scope.record.name}</a>,
-            status: (scope: any) => {
+            name: scope => <a class="cursor-pointer text-blue" onClick={()=>handleNameClick(scope.record.id)}>{scope.record.name}</a>,
+            status: (scope) => {
               const status = scope.record.status;
               return <a-tag color={status === 1 ? 'green' : 'red'}>{
                   status === 1 ? t('tableView.enable') : status === 0 ? t('tableView.disable') : t('tableView.offline')
               }</a-tag>;
             },
-            buttons: (scope: any) => {
+            buttons: (scope) => {
               return <a-button type="text" onClick={() => handleEditClick(scope.record)}>{t('tableView.edit')}</a-button>;
             }
           }} />

diff --git a/web-app/src/pages/monitor/mysql/edit.tsx b/web-app/src/pages/monitor/mysql/edit.tsx
@@ -76,12 +76,15 @@ export default defineComponent({
       if (!val) {
         return;
       }
-      getMonitor(val).then((res: any) => {
+      getMonitor(val).then((res) => {
+        if (res.code !== 0 || !res.data) {
+          return;
+        }
         const data = res.data;
         Object.keys(data).forEach((key) => {
           if (key === 'params') {
-            data[key].forEach((item: any) => {
-              form.params.forEach((param: any) => {
+            data[key].forEach((item) => {
+              form.params.forEach((param) => {
                 if (param.field === item.field) {
                   param.value = item.value;
                 }
@@ -95,12 +98,12 @@ export default defineComponent({
       });
     });
     onMounted(() => {
-      getAppParams(props.type).then((res: any) => {
+      getAppParams(props.type).then((res) => {
         const params = res.data as formParamItem[];
         params.forEach((item) => {
           item.value = item.defaultValue;
         });
-        form.params = reactive(res.data) as formParamItem[];
+        form.params = res.data as formParamItem[];
       });
     });
     return () => (