NEZ-3212 feat：告警详情页易用性改进

nezha-fronted/package-lock.json

@@ -6088,7 +6088,7 @@
     "arrify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
       "dev": true
     },
     "asn1": {
@@ -6412,7 +6412,7 @@
     "babel-helper-builder-binary-assignment-operator-visitor": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz",
-      "integrity": "sha512-gCtfYORSG1fUMX4kKraymq607FWgMWg+j42IFPc18kFQEsmtaibP4UrqsXt8FlEJle25HUd4tsoDR7H2wDhe9Q==",
+      "integrity": "sha1-zORReto1b0IgvK6KAsKzRvmlZmQ=",
       "dev": true,
       "requires": {
         "babel-helper-explode-assignable-expression": "^6.24.1",
@@ -6423,7 +6423,7 @@
     "babel-helper-call-delegate": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz",
-      "integrity": "sha512-RL8n2NiEj+kKztlrVJM9JT1cXzzAdvWFh76xh/H1I4nKwunzE4INBXn8ieCZ+wh4zWszZk7NBS1s/8HR5jDkzQ==",
+      "integrity": "sha1-7Oaqzdx25Bw0YfiL/Fdb0Nqi340=",
       "dev": true,
       "requires": {
         "babel-helper-hoist-variables": "^6.24.1",
@@ -6435,7 +6435,7 @@
     "babel-helper-define-map": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-helper-define-map/-/babel-helper-define-map-6.26.0.tgz",
-      "integrity": "sha512-bHkmjcC9lM1kmZcVpA5t2om2nzT/xiZpo6TJq7UlZ3wqKfzia4veeXbIhKvJXAMzhhEBd3cR1IElL5AenWEUpA==",
+      "integrity": "sha1-pfVtq0GiX5fstJjH66ypgZ+Vvl8=",
       "dev": true,
       "requires": {
         "babel-helper-function-name": "^6.24.1",
@@ -6447,7 +6447,7 @@
     "babel-helper-explode-assignable-expression": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz",
-      "integrity": "sha512-qe5csbhbvq6ccry9G7tkXbzNtcDiH4r51rrPUbwwoTzZ18AqxWYRZT6AOmxrpxKnQBW0pYlBI/8vh73Z//78nQ==",
+      "integrity": "sha1-8luCz33BBDPFX3BZLVdGQArCLKo=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0",
@@ -6458,7 +6458,7 @@
     "babel-helper-function-name": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz",
-      "integrity": "sha512-Oo6+e2iX+o9eVvJ9Y5eKL5iryeRdsIkwRYheCuhYdVHsdEQysbc2z2QkqCLIYnNxkT5Ss3ggrHdXiDI7Dhrn4Q==",
+      "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=",
       "dev": true,
       "requires": {
         "babel-helper-get-function-arity": "^6.24.1",
@@ -6471,7 +6471,7 @@
     "babel-helper-get-function-arity": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz",
-      "integrity": "sha512-WfgKFX6swFB1jS2vo+DwivRN4NB8XUdM3ij0Y1gnC21y1tdBoe6xjVnd7NSI6alv+gZXCtJqvrTeMW3fR/c0ng==",
+      "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0",
@@ -6481,7 +6481,7 @@
     "babel-helper-hoist-variables": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz",
-      "integrity": "sha512-zAYl3tqerLItvG5cKYw7f1SpvIxS9zi7ohyGHaI9cgDUjAT6YcY9jIEH5CstetP5wHIVSceXwNS7Z5BpJg+rOw==",
+      "integrity": "sha1-HssnaJydJVE+rbyZFKc/VAi+enY=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0",
@@ -6491,7 +6491,7 @@
     "babel-helper-optimise-call-expression": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz",
-      "integrity": "sha512-Op9IhEaxhbRT8MDXx2iNuMgciu2V8lDvYCNQbDGjdBNCjaMvyLf4wl4A3b8IgndCyQF8TwfgsQ8T3VD8aX1/pA==",
+      "integrity": "sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0",
@@ -6512,7 +6512,7 @@
     "babel-helper-remap-async-to-generator": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.24.1.tgz",
-      "integrity": "sha512-RYqaPD0mQyQIFRu7Ho5wE2yvA/5jxqCIj/Lv4BXNq23mHYu/vxikOy2JueLiBxQknwapwrJeNCesvY0ZcfnlHg==",
+      "integrity": "sha1-XsWBgnrXI/7N04HxySg5BnbkVRs=",
       "dev": true,
       "requires": {
         "babel-helper-function-name": "^6.24.1",
@@ -6525,7 +6525,7 @@
     "babel-helper-replace-supers": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-replace-supers/-/babel-helper-replace-supers-6.24.1.tgz",
-      "integrity": "sha512-sLI+u7sXJh6+ToqDr57Bv973kCepItDhMou0xCP2YPVmR1jkHSCY+p1no8xErbV1Siz5QE8qKT1WIwybSWlqjw==",
+      "integrity": "sha1-v22/5Dk40XNpohPKiov3S2qQqxo=",
       "dev": true,
       "requires": {
         "babel-helper-optimise-call-expression": "^6.24.1",
@@ -6695,7 +6695,7 @@
     "babel-plugin-check-es2015-constants": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz",
-      "integrity": "sha512-B1M5KBP29248dViEo1owyY32lk1ZSH2DaNNrXLGt8lyjjHm7pBqAdQ7VKUPR6EEDO323+OvT3MQXbCin8ooWdA==",
+      "integrity": "sha1-NRV7EBQm/S/9PaP3XH0ekYNbv4o=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0"
@@ -6763,7 +6763,7 @@
     "babel-plugin-jest-hoist": {
       "version": "23.2.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.2.0.tgz",
-      "integrity": "sha512-N0MlMjZtahXK0yb0K3V9hWPrq5e7tThbghvDr0k3X75UuOOqwsWW6mk8XHD2QvEC0Ca9dLIfTgNU36TeJD6Hnw==",
+      "integrity": "sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=",
       "dev": true
     },
     "babel-plugin-jsx-event-modifiers": {
@@ -6836,7 +6836,7 @@
     "babel-plugin-syntax-async-functions": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz",
-      "integrity": "sha512-4Zp4unmHgw30A1eWI5EpACji2qMocisdXhAftfhXoSV9j0Tvj6nRFE3tOmRY912E0FMRm/L5xWE7MGVT2FoLnw==",
+      "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=",
       "dev": true
     },
     "babel-plugin-syntax-dynamic-import": {
@@ -6848,13 +6848,13 @@
     "babel-plugin-syntax-exponentiation-operator": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz",
-      "integrity": "sha512-Z/flU+T9ta0aIEKl1tGEmN/pZiI1uXmCiGFRegKacQfEJzp7iNsKloZmyJlQr+75FCJtiFfGIK03SiCvCt9cPQ==",
+      "integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=",
       "dev": true
     },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
       "dev": true
     },
     "babel-plugin-syntax-object-rest-spread": {
@@ -6866,13 +6866,13 @@
     "babel-plugin-syntax-trailing-function-commas": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz",
-      "integrity": "sha512-Gx9CH3Q/3GKbhs07Bszw5fPTlU+ygrOGfAhEt7W2JICwufpC4SuO0mG0+4NykPBSYPMJhqvVlDBU17qB1D+hMQ==",
+      "integrity": "sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=",
       "dev": true
     },
     "babel-plugin-transform-async-to-generator": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz",
-      "integrity": "sha512-7BgYJujNCg0Ti3x0c/DL3tStvnKS6ktIYOmo9wginv/dfZOrbSZ+qG4IRRHMBOzZ5Awb1skTiAsQXg/+IWkZYw==",
+      "integrity": "sha1-ZTbjeK/2yx1VF6wOQOs+n8jQh2E=",
       "dev": true,
       "requires": {
         "babel-helper-remap-async-to-generator": "^6.24.1",
@@ -6883,7 +6883,7 @@
     "babel-plugin-transform-es2015-arrow-functions": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",
-      "integrity": "sha512-PCqwwzODXW7JMrzu+yZIaYbPQSKjDTAsNNlK2l5Gg9g4rz2VzLnZsStvp/3c46GfXpwkyufb3NCyG9+50FF1Vg==",
+      "integrity": "sha1-RSaSy3EdX3ncf4XkQM5BufJE0iE=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0"
@@ -6892,7 +6892,7 @@
     "babel-plugin-transform-es2015-block-scoped-functions": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz",
-      "integrity": "sha512-2+ujAT2UMBzYFm7tidUsYh+ZoIutxJ3pN9IYrF1/H6dCKtECfhmB8UkHVpyxDwkj0CYbQG35ykoz925TUnBc3A==",
+      "integrity": "sha1-u8UbSflk1wy42OC5ToICRs46YUE=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0"
@@ -6901,7 +6901,7 @@
     "babel-plugin-transform-es2015-block-scoping": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz",
-      "integrity": "sha512-YiN6sFAQ5lML8JjCmr7uerS5Yc/EMbgg9G8ZNmk2E3nYX4ckHR01wrkeeMijEf5WHNK5TW0Sl0Uu3pv3EdOJWw==",
+      "integrity": "sha1-1w9SmcEwjQXBL0Y4E7CgnnOxiV8=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.26.0",
@@ -6914,7 +6914,7 @@
     "babel-plugin-transform-es2015-classes": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz",
-      "integrity": "sha512-5Dy7ZbRinGrNtmWpquZKZ3EGY8sDgIVB4CU8Om8q8tnMLrD/m94cKglVcHps0BCTdZ0TJeeAWOq2TK9MIY6cag==",
+      "integrity": "sha1-WkxYpQyclGHlZLSyo7+ryXolhNs=",
       "dev": true,
       "requires": {
         "babel-helper-define-map": "^6.24.1",
@@ -6931,7 +6931,7 @@
     "babel-plugin-transform-es2015-computed-properties": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz",
-      "integrity": "sha512-C/uAv4ktFP/Hmh01gMTvYvICrKze0XVX9f2PdIXuriCSvUmV9j+u+BB9f5fJK3+878yMK6dkdcq+Ymr9mrcLzw==",
+      "integrity": "sha1-b+Ko0WiV1WNPTNmZttNICjCBWbM=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0",
@@ -6941,7 +6941,7 @@
     "babel-plugin-transform-es2015-destructuring": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz",
-      "integrity": "sha512-aNv/GDAW0j/f4Uy1OEPZn1mqD+Nfy9viFGBfQ5bZyT35YqOiqx7/tXdyfZkJ1sC21NyEsBdfDY6PYmLHF4r5iA==",
+      "integrity": "sha1-mXux8auWf2gtKwh2/jWNYOdlxW0=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0"
@@ -6950,7 +6950,7 @@
     "babel-plugin-transform-es2015-duplicate-keys": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz",
-      "integrity": "sha512-ossocTuPOssfxO2h+Z3/Ea1Vo1wWx31Uqy9vIiJusOP4TbF7tPs9U0sJ9pX9OJPf4lXRGj5+6Gkl/HHKiAP5ug==",
+      "integrity": "sha1-c+s9MQypaePvnskcU3QabxV2Qj4=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0",
@@ -6960,7 +6960,7 @@
     "babel-plugin-transform-es2015-for-of": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz",
-      "integrity": "sha512-DLuRwoygCoXx+YfxHLkVx5/NpeSbVwfoTeBykpJK7JhYWlL/O8hgAK/reforUnZDlxasOrVPPJVI/guE3dCwkw==",
+      "integrity": "sha1-9HyVsrYT3x0+zC/bdXNiPHUkhpE=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0"
@@ -6969,7 +6969,7 @@
     "babel-plugin-transform-es2015-function-name": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz",
-      "integrity": "sha512-iFp5KIcorf11iBqu/y/a7DK3MN5di3pNCzto61FqCNnUX4qeBwcV1SLqe10oXNnCaxBUImX3SckX2/o1nsrTcg==",
+      "integrity": "sha1-g0yJhTvDaxrw86TF26qU/Y6sqos=",
       "dev": true,
       "requires": {
         "babel-helper-function-name": "^6.24.1",
@@ -6980,7 +6980,7 @@
     "babel-plugin-transform-es2015-literals": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz",
-      "integrity": "sha512-tjFl0cwMPpDYyoqYA9li1/7mGFit39XiNX5DKC/uCNjBctMxyL1/PT/l4rSlbvBG1pOKI88STRdUsWXB3/Q9hQ==",
+      "integrity": "sha1-T1SgLWzWbPkVKAAZox0xklN3yi4=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0"
@@ -6989,7 +6989,7 @@
     "babel-plugin-transform-es2015-modules-amd": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz",
-      "integrity": "sha512-LnIIdGWIKdw7zwckqx+eGjcS8/cl8D74A3BpJbGjKTFFNJSMrjN4bIh22HY1AlkUbeLG6X6OZj56BDvWD+OeFA==",
+      "integrity": "sha1-Oz5UAXI5hC1tGcMBHEvS8AoA0VQ=",
       "dev": true,
       "requires": {
         "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
@@ -7012,7 +7012,7 @@
     "babel-plugin-transform-es2015-modules-systemjs": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz",
-      "integrity": "sha512-ONFIPsq8y4bls5PPsAWYXH/21Hqv64TBxdje0FvU3MhIV6QM2j5YS7KvAzg/nTIVLot2D2fmFQrFWCbgHlFEjg==",
+      "integrity": "sha1-/4mhQrkRmpBhlfXxBuzzBdlAfSM=",
       "dev": true,
       "requires": {
         "babel-helper-hoist-variables": "^6.24.1",
@@ -7023,7 +7023,7 @@
     "babel-plugin-transform-es2015-modules-umd": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz",
-      "integrity": "sha512-LpVbiT9CLsuAIp3IG0tfbVo81QIhn6pE8xBJ7XSeCtFlMltuar5VuBV6y6Q45tpui9QWcy5i0vLQfCfrnF7Kiw==",
+      "integrity": "sha1-rJl+YoXNGO1hdq22B9YCNErThGg=",
       "dev": true,
       "requires": {
         "babel-plugin-transform-es2015-modules-amd": "^6.24.1",
@@ -7034,7 +7034,7 @@
     "babel-plugin-transform-es2015-object-super": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz",
-      "integrity": "sha512-8G5hpZMecb53vpD3mjs64NhI1au24TAmokQ4B+TBFBjN9cVoGoOvotdrMMRmHvVZUEvqGUPWL514woru1ChZMA==",
+      "integrity": "sha1-JM72muIcuDp/hgPa0CH1cusnj40=",
       "dev": true,
       "requires": {
         "babel-helper-replace-supers": "^6.24.1",
@@ -7044,7 +7044,7 @@
     "babel-plugin-transform-es2015-parameters": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz",
-      "integrity": "sha512-8HxlW+BB5HqniD+nLkQ4xSAVq3bR/pcYW9IigY+2y0dI+Y7INFeTbfAQr+63T3E4UDsZGjyb+l9txUnABWxlOQ==",
+      "integrity": "sha1-V6w1GrScrxSpfNE7CfZv3wpiXys=",
       "dev": true,
       "requires": {
         "babel-helper-call-delegate": "^6.24.1",
@@ -7058,7 +7058,7 @@
     "babel-plugin-transform-es2015-shorthand-properties": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz",
-      "integrity": "sha512-mDdocSfUVm1/7Jw/FIRNw9vPrBQNePy6wZJlR8HAUBLybNp1w/6lr6zZ2pjMShee65t/ybR5pT8ulkLzD1xwiw==",
+      "integrity": "sha1-JPh11nIch2YbvZmkYi5R8U3jiqA=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0",
@@ -7068,7 +7068,7 @@
     "babel-plugin-transform-es2015-spread": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz",
-      "integrity": "sha512-3Ghhi26r4l3d0Js933E5+IhHwk0A1yiutj9gwvzmFbVV0sPMYk2lekhOufHBswX7NCoSeF4Xrl3sCIuSIa+zOg==",
+      "integrity": "sha1-1taKmfia7cRTbIGlQujdnxdG+NE=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0"
@@ -7077,7 +7077,7 @@
     "babel-plugin-transform-es2015-sticky-regex": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz",
-      "integrity": "sha512-CYP359ADryTo3pCsH0oxRo/0yn6UsEZLqYohHmvLQdfS9xkf+MbCzE3/Kolw9OYIY4ZMilH25z/5CbQbwDD+lQ==",
+      "integrity": "sha1-AMHNsaynERLN8M9hJsLta0V8zbw=",
       "dev": true,
       "requires": {
         "babel-helper-regex": "^6.24.1",
@@ -7088,7 +7088,7 @@
     "babel-plugin-transform-es2015-template-literals": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz",
-      "integrity": "sha512-x8b9W0ngnKzDMHimVtTfn5ryimars1ByTqsfBDwAqLibmuuQY6pgBQi5z1ErIsUOWBdw1bW9FSz5RZUojM4apg==",
+      "integrity": "sha1-qEs0UPfp+PH2g51taH2oS7EjbY0=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0"
@@ -7097,7 +7097,7 @@
     "babel-plugin-transform-es2015-typeof-symbol": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz",
-      "integrity": "sha512-fz6J2Sf4gYN6gWgRZaoFXmq93X+Li/8vf+fb0sGDVtdeWvxC9y5/bTD7bvfWMEq6zetGEHpWjtzRGSugt5kNqw==",
+      "integrity": "sha1-3sCfHN3/lLUqxz1QXITfWdzOs3I=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0"
@@ -7106,7 +7106,7 @@
     "babel-plugin-transform-es2015-unicode-regex": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz",
-      "integrity": "sha512-v61Dbbihf5XxnYjtBN04B/JBvsScY37R1cZT5r9permN1cp+b70DY3Ib3fIkgn1DI9U3tGgBJZVD8p/mE/4JbQ==",
+      "integrity": "sha1-04sS9C6nMj9yk4fxinxa4frrNek=",
       "dev": true,
       "requires": {
         "babel-helper-regex": "^6.24.1",
@@ -7117,7 +7117,7 @@
     "babel-plugin-transform-exponentiation-operator": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz",
-      "integrity": "sha512-LzXDmbMkklvNhprr20//RStKVcT8Cu+SQtX18eMHLhjHf2yFzwtQ0S2f0jQ+89rokoNdmwoSqYzAhq86FxlLSQ==",
+      "integrity": "sha1-KrDJx/MJj6SJB3cruBP+QejeOg4=",
       "dev": true,
       "requires": {
         "babel-helper-builder-binary-assignment-operator-visitor": "^6.24.1",
@@ -7138,7 +7138,7 @@
     "babel-plugin-transform-regenerator": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz",
-      "integrity": "sha512-LS+dBkUGlNR15/5WHKe/8Neawx663qttS6AGqoOUhICc9d1KciBvtrQSuc0PI+CxQ2Q/S1aKuJ+u64GtLdcEZg==",
+      "integrity": "sha1-4HA2lvveJ/Cj78rPi03KL3s6jy8=",
       "dev": true,
       "requires": {
         "regenerator-transform": "^0.10.0"
@@ -7147,7 +7147,7 @@
     "babel-plugin-transform-runtime": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz",
-      "integrity": "sha512-cpGMVC1vt/772y3jx1gwSaTitQVZuFDlllgreMsZ+rTYC6jlYXRyf5FQOgSnckOiA5QmzbXTyBY2A5AmZXF1fA==",
+      "integrity": "sha1-iEkNRGUC6puOfvsP4J7E2ZR5se4=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0"
@@ -7156,7 +7156,7 @@
     "babel-plugin-transform-strict-mode": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz",
-      "integrity": "sha512-j3KtSpjyLSJxNoCDrhwiJad8kw0gJ9REGj8/CqL0HeRyLnvUNYV9zcqluL6QJSXh3nfsLEmSLvwRfGzrgR96Pw==",
+      "integrity": "sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0",
@@ -7225,7 +7225,7 @@
     "babel-preset-jest": {
       "version": "23.2.0",
       "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-23.2.0.tgz",
-      "integrity": "sha512-AdfWwc0PYvDtwr009yyVNh72Ev68os7SsPmOFVX7zSA+STXuk5CV2iMVazZU01bEoHCSwTkgv4E4HOOcODPkPg==",
+      "integrity": "sha1-jsegOhOPABoaj7HoETZSvxpV2kY=",
       "dev": true,
       "requires": {
         "babel-plugin-jest-hoist": "^23.2.0",
@@ -7595,7 +7595,7 @@
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -8578,7 +8578,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "1.9.1",
@@ -8689,7 +8689,7 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
     "concat-stream": {
       "version": "1.6.2",
@@ -10900,7 +10900,7 @@
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
-      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
       "dev": true
     },
     "debug": {
@@ -11586,7 +11586,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "escodegen": {
       "version": "1.14.3",
@@ -12646,7 +12646,7 @@
     "fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
       "dev": true
     },
     "faye-websocket": {
@@ -13070,7 +13070,7 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
       "version": "1.2.13",
@@ -13601,7 +13601,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-symbol-support-x": {
       "version": "1.4.2",
@@ -14157,7 +14157,7 @@
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
     "in-publish": {
       "version": "2.0.1",
@@ -14183,7 +14183,7 @@
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -14427,7 +14427,7 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
     },
     "is-finite": {
       "version": "1.0.2",
@@ -14642,7 +14642,7 @@
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
       "dev": true
     },
     "isobject": {
@@ -15945,7 +15945,7 @@
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE="
     },
     "json-stringify-safe": {
       "version": "5.0.1",
@@ -17483,7 +17483,7 @@
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
     "ncp": {
@@ -17785,7 +17785,7 @@
     "normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
       "dev": true
     },
     "normalize-url": {
@@ -17830,7 +17830,7 @@
     "num2fraction": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-      "integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
       "dev": true
     },
     "number-is-nan": {
@@ -17973,7 +17973,7 @@
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
       "requires": {
         "wrappy": "1"
       }
@@ -18349,7 +18349,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
     },
     "path-is-inside": {
       "version": "1.0.2",
@@ -20094,7 +20094,7 @@
     "rechoir": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
-      "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
       "dev": true,
       "requires": {
         "resolve": "^1.1.6"
@@ -20195,7 +20195,7 @@
     "regexpu-core": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-2.0.0.tgz",
-      "integrity": "sha512-tJ9+S4oKjxY8IZ9jmjnp/mtytu1u3iyIQAfmI51IKWH6bFf7XR1ybtaO6j7INhZKXOTYADk7V5qxaqLkmNxiZQ==",
+      "integrity": "sha1-SdA4g3uNz4v6W5pCE5k45uoq4kA=",
       "dev": true,
       "requires": {
         "regenerate": "^1.2.1",
@@ -20206,13 +20206,13 @@
     "regjsgen": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
-      "integrity": "sha512-x+Y3yA24uF68m5GA+tBjbGYo64xXVJpbToBaWCoSNSc1hdk6dfctaRWrNFTVJZIIhL5GxW8zwjoixbnifnK59g==",
+      "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=",
       "dev": true
     },
     "regjsparser": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
-      "integrity": "sha512-jlQ9gYLfk2p3V5Ag5fYhA7fv7OHzd1KUH0PRP46xc3TgwjwgROIW572AfYg/X9kaNq/LJnu6oJcFRXlIrGoTRw==",
+      "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
       "dev": true,
       "requires": {
         "jsesc": "~0.5.0"
@@ -20221,7 +20221,7 @@
         "jsesc": {
           "version": "0.5.0",
           "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-          "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
           "dev": true
         }
       }
@@ -20337,7 +20337,7 @@
     "require-main-filename": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-      "integrity": "sha512-IqSUtOVP4ksd1C/ej5zeEh/BIP2ajqpn8c5x+q99gvcIG/Qf0cud5raVnE/Dwd0ua9TXYDoDc0RE5hBSdz22Ug==",
+      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
       "dev": true
     },
     "requires-port": {
@@ -21946,7 +21946,7 @@
     "svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
-      "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+      "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
       "dev": true
     },
     "svgo": {
@@ -22474,7 +22474,7 @@
         "arr-diff": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
-          "integrity": "sha512-dtXTVMkh6VkEEA7OhXnN1Ecb8aAGFdZ1LFxtOCoqj4qkyOJMt7+qs6Ahdy6p/NQCPYsRSXXivhSB/J5E9jmYKA==",
+          "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
           "dev": true,
           "requires": {
             "arr-flatten": "^1.0.1"
@@ -22483,13 +22483,13 @@
         "array-unique": {
           "version": "0.2.1",
           "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
-          "integrity": "sha512-G2n5bG5fSUCpnsXz4+8FUkYsGPkNfLn9YvS66U5qbTIXI2Ynnlo4Bi42bWv+omKUCqz+ejzfClwne0alJWJPhg==",
+          "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
           "dev": true
         },
         "braces": {
           "version": "1.8.5",
           "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
-          "integrity": "sha512-xU7bpz2ytJl1bH9cgIurjpg/n8Gohy9GTw81heDYLJQ4RU60dlyJsa+atVF2pI0yMMvKxI9HkKwjePCj5XI1hw==",
+          "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
           "dev": true,
           "requires": {
             "expand-range": "^1.8.1",
@@ -22500,7 +22500,7 @@
         "expand-brackets": {
           "version": "0.1.5",
           "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
-          "integrity": "sha512-hxx03P2dJxss6ceIeri9cmYOT4SRs3Zk3afZwWpOsRqLqprhTR8u++SlC+sFGsQr7WGFPdMF7Gjc1njDLDK6UA==",
+          "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
           "dev": true,
           "requires": {
             "is-posix-bracket": "^0.1.0"
@@ -22509,7 +22509,7 @@
         "extglob": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
-          "integrity": "sha512-1FOj1LOwn42TMrruOHGt18HemVnbwAmAak7krWk+wa93KXxGbK+2jpezm+ytJYDaBX0/SPLZFHKM7m+tKobWGg==",
+          "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
           "dev": true,
           "requires": {
             "is-extglob": "^1.0.0"
@@ -22518,7 +22518,7 @@
         "find-up": {
           "version": "1.1.2",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-          "integrity": "sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA==",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
           "dev": true,
           "requires": {
             "path-exists": "^2.0.0",
@@ -22528,13 +22528,13 @@
         "is-extglob": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-          "integrity": "sha512-7Q+VbVafe6x2T+Tu6NcOf6sRklazEPmBoB3IWk3WdGZM2iGUwU/Oe3Wtq5lSEkDTTlpp8yx+5t4pzO/i9Ty1ww==",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
           "dev": true
         },
         "is-glob": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-          "integrity": "sha512-a1dBeB19NXsf/E0+FHqkagizel/LQw2DjSQpvQrj3zT+jYPpaUCryPnrQajXKFLCMuf4I6FhRpaGtw4lPrG6Eg==",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
           "dev": true,
           "requires": {
             "is-extglob": "^1.0.0"
@@ -22543,7 +22543,7 @@
         "load-json-file": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-          "integrity": "sha512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A==",
+          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.2",
@@ -22556,7 +22556,7 @@
         "micromatch": {
           "version": "2.3.11",
           "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
-          "integrity": "sha512-LnU2XFEk9xxSJ6rfgAry/ty5qwUTyHYOBU0g4R6tIw5ljwgGIBmiKhRWLw5NpMOnrgUNcDJ4WMp8rl3sYVHLNA==",
+          "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
           "dev": true,
           "requires": {
             "arr-diff": "^2.0.0",
@@ -22577,7 +22577,7 @@
         "normalize-path": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-          "integrity": "sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==",
+          "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
           "dev": true,
           "requires": {
             "remove-trailing-separator": "^1.0.1"
@@ -22586,7 +22586,7 @@
         "parse-json": {
           "version": "2.2.0",
           "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ==",
+          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
           "dev": true,
           "requires": {
             "error-ex": "^1.2.0"
@@ -22595,7 +22595,7 @@
         "path-exists": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-          "integrity": "sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ==",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
           "dev": true,
           "requires": {
             "pinkie-promise": "^2.0.0"
@@ -22604,7 +22604,7 @@
         "path-type": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-          "integrity": "sha512-S4eENJz1pkiQn9Znv33Q+deTOKmbl+jj1Fl+qiP/vYezj+S8x+J3Uo0ISrx/QoEvIlOaDWJhPaRd1flJ9HXZqg==",
+          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.2",
@@ -22615,13 +22615,13 @@
         "pify": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
           "dev": true
         },
         "read-pkg": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-          "integrity": "sha512-7BGwRHqt4s/uVbuyoeejRn4YmFnYZiFl4AuaeXHlgZf3sONF0SOGlxs2Pw8g6hCKupo08RafIO5YXFNOKTfwsQ==",
+          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
           "dev": true,
           "requires": {
             "load-json-file": "^1.0.0",
@@ -22632,7 +22632,7 @@
         "read-pkg-up": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-          "integrity": "sha512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTpxoHkfZf3+DkCCsXox94/VWZniuZm6A==",
+          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
           "dev": true,
           "requires": {
             "find-up": "^1.0.0",
@@ -22642,7 +22642,7 @@
         "strip-bom": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-          "integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
+          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
           "dev": true,
           "requires": {
             "is-utf8": "^0.2.0"
@@ -22661,7 +22661,7 @@
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
       "dev": true
     },
     "throat": {
@@ -23339,7 +23339,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "util.promisify": {
       "version": "1.0.0",
@@ -24674,7 +24674,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "write-file-atomic": {
       "version": "2.4.1",

nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss

@@ -67,10 +67,11 @@
       .message-info-dashboard {
         .nz-chart{
           height: calc(100% - 55px);
-          padding-bottom: 0;
+          padding: 0;
         }
       }
       .alert-message-info-tab {
+        position: relative;
         height: 61.8%;
         flex: 1;
         flex-shrink: 0;
@@ -87,40 +88,33 @@
           }
         }
 
-        .el-tabs.el-tabs--card {
+        .el-tabs {
           height: 100%;
           display: flex;
           flex-direction: column;
 
           .el-tabs__header {
             margin: 0;
+            border: 1px solid $--border-color-light;
+
+            .el-tabs__active-bar{
+              transition: none;
+            }
 
             .el-tabs__item {
-              border: 1px solid $--border-color-light;
-              border-radius: 2px;
-              //border-bottom: none;
-              margin-right: 6px;
-              background: $--background-color-base;
-              color: $--color-text-regular;
+              padding: 0;
+              width: 150px;
+              text-align: center;
             }
-
-            .el-tabs__item:hover {
-              color: $--color-warning;
-              background: $--background-color-empty;
-              border-bottom-color: $--background-color-empty;
-            }
-
-            .el-tabs__item.is-active {
-              color: $--color-warning;
-              background: $--background-color-empty;
-              border-bottom-color: $--background-color-empty;
+            .el-tabs__item:nth-child(2){
+              width: 120px;
             }
           }
 
           .el-tabs__content {
             // box-sizing:content-box;
             // height: 100%;
-            padding: 25px 30px;
+            padding: 20px;
             flex: 1;
             border: 1px solid $--border-color-light;
             border-top: none;
@@ -412,18 +406,23 @@
         display: none;
       }
       .alert-message-info-tab {
-        .el-tabs.el-tabs--card.el-tabs--top {
+        .el-tabs.el-tabs--top {
           .el-tabs__content {
             height: 100%;
             width: 100%;
             overflow: hidden;
             box-sizing: border-box;
             .el-tab-pane {
-              height: 100%;
               width: 100%;
               .vue-grid-layout {
                 padding-bottom: 0;
               }
+              .ql-editor{
+                padding: 0;
+              }
+            }
+            #pane-asset{
+              height: 100%;
             }
             .alert-message-info-dashboard {
               height: 100%;
@@ -602,5 +601,114 @@
   }
 }
 
+.alert-message-info-tool{
+  position: absolute;
+  right: 20px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  z-index: 10;
+  .top-tool-btn{
+    box-sizing: border-box;
+    width: 36px;
+    height: 32px;
+    cursor: pointer;
+    border: 1px solid $--button-icon-border-color;
+    outline: none;
+    border-radius: $--button-border-radius;
+    background-color: $--background-color-empty;
+    transition:all .2s;
+    color: $--button-icon-color;
+    cursor: pointer;
+    i {
+      font-size: 14px;
+      color: $--button-icon-color;
+    }
+  }
+}
 
+.messgae-info{
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid $--border-color-light;
+  .messgae-info-header{
+    padding: 0 20px;
+    box-sizing: border-box;
+    height: 42px;
+    line-height: 42px;
+    background: $--background-color-base;
+    font-family: Roboto-Medium;
+    font-size: 14px;
+    color: $--color-text-regular;
+    letter-spacing: 0;
+    font-weight: 500;
+  }
+  .messgae-info-content{
+    padding: 20px;
+    padding-left: 30px;
+    .messgae-info-row{
+      display: flex;
+      flex-direction: row;
+      margin-bottom: 12px;
+      line-height: 16px;
+      .messgae-info-title{
+        font-family: Roboto-Medium;
+        font-size: 14px;
+        color: $--color-text-regular;
+        letter-spacing: 0;
+        font-weight: 500;
+        min-width: 134px;
+      }
+      .messgae-info-value{
+        font-family: Roboto-Regular;
+        font-size: 14px;
+        color: $--color-text-primary;
+        letter-spacing: 0;
+        font-weight: 400;
+        .nz-icon-guzhangshuju {
+          color: $--color-primary;
+          vertical-align: middle;
+        }
+      }
+      span.messgae-info-value{
+        opacity: 0.6;
+      }
+      .messgae-info-text{
+        opacity: 0.6;
+      }
+      .active {
+        color: $--color-primary;
+        border-bottom: none;
+        cursor: default;
+        font-weight: bold;
+      }
+    }
+    .messgae-info-row:last-of-type{
+      margin-bottom: 0;
+    }
+  }
+}
 
+.messgae-info-list{
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  &>*{
+    width: calc(50% - 5px);
+    margin-top: 10px;
+  }
+  .messgae-info{
+    height: 100%;
+    border-radius: 2px;
+    .messgae-info-title{
+      min-width: 200px !important;
+    }
+  }
+}
+
+.alert-message-dataLink{
+  max-width: 500px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

nezha-fronted/src/components/common/alert/alertDetail.vue

@@ -0,0 +1,763 @@
+<template>
+  <div>
+    <!-- alertRule -->
+    <div class="messgae-info" v-my-loading="loading" v-if="type === 'alertRule'">
+      <div class="messgae-info-header">{{$t('overall.alertRule')}}</div>
+      <div class="messgae-info-content">
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">ID</div>
+          <span class="messgae-info-value">{{alertLabelData.id ? alertLabelData.id : '--'}}</span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="document-copy-block" style="display:flex">
+            <div class="messgae-info-title">{{$t('overall.name')}}</div>
+            <span class="messgae-info-value document-copy-text" :title="alertLabelData.name ? alertLabelData.name : '--'">{{alertLabelData.name ? alertLabelData.name : '--'}}</span>
+            <i v-if="alertLabelData && alertLabelData.name" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{$t('overall.type')}}</div>
+          <span class="messgae-info-value">
+            <span v-if="alertLabelData.type === 1">
+              {{$t('overall.metric')}}
+            </span>
+            <span v-else-if="alertLabelData.type === 2">
+              {{$t('overall.logs')}}
+            </span>
+            <span v-else-if="alertLabelData.type === 3">SNMP trap</span>
+            <span v-else>--</span>
+          </span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{$t('alert.config.expr')}}</div>
+          <span class="messgae-info-value">{{alertLabelData.expr ? alertLabelData.expr : '--'}}</span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{$t('alert.alertNum')}}</div>
+          <div class="messgae-info-value" v-if="alertLabelData">
+            <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
+            <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
+              <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>
+              <div class="severity-info" style='justify-content: space-between'>
+                <div class="severity-name">{{$t('overall.result.total')}}</div>
+                <div class="severity-value">{{alertLabelData.alertNum}}</div>
+              </div>
+            </div>
+            <alertDaysInfo
+              v-show="!trendLoading"
+              :alertDaysData="alertDaysData"
+            />
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{$t('alert.config.trbShot')}}</div>
+          <div class="messgae-info-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju"></i></div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{$t('overall.state')}}</div>
+          <div class="messgae-info-value" style="margin-left: 3px">
+            <div v-if="alertLabelData.state === 1">
+              <i class="active-icon green-bg inline-block"></i>
+              <span class="messgae-info-text">{{ $t('overall.enabled') }}</span>
+            </div>
+            <div v-else-if="alertLabelData.state === 0">
+              <i class="active-icon gray-bg inline-block"></i>
+              <span class="messgae-info-text">{{ $t('overall.disabled') }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- dc -->
+    <div class="messgae-info" v-if="type === 'dc'" v-my-loading="loading">
+      <div class="messgae-info-header">{{$t('overall.dc')}}</div>
+      <div class="messgae-info-content">
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">ID</div>
+          <span class="messgae-info-value">{{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}</span>
+        </div>
+          <div class="messgae-info-row">
+            <div class="document-copy-block">
+              <div class="messgae-info-title">{{$t('overall.name')}}</div>
+              <span class="messgae-info-value  document-copy-text" :title="alertLabelData && alertLabelData.name ? alertLabelData.name : '--'">
+                {{alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
+              </span>
+              <i v-if="alertLabelData && alertLabelData.name" class="nz-icon nz-icon-override" style="visibility: hidden" @click.stop="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
+            </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("asset.location") }}</div>
+          <span class="messgae-info-value">
+            {{alertLabelData && alertLabelData.location && alertLabelData.location ? alertLabelData.location  : "--"}}
+          </span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("asset.cabinet") }}</div>
+          <div class="messgae-info-value">
+            <i
+              v-if="alertLabelData"
+              class="nz-icon nz-icon-cabinet monitorColor"
+              :class="alertLabelData && alertLabelData.cabinetNum > 0 ? 'color23BF9A' : 'colorEF7458' "
+            />&nbsp;
+            <span class="messgae-info-text">
+              {{alertLabelData && alertLabelData.cabinetNum ? alertLabelData.cabinetNum : 0 }}
+            </span>
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("asset.asset") }}</div>
+          <div class="messgae-info-value">
+            <i
+              class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+            />&nbsp;
+            <span class="messgae-info-text">
+              {{alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum? alertLabelData.assetNum: 0}}
+            </span>
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("overall.alert") }}</div>
+          <div class="messgae-info-value" v-if="alertLabelData">
+            <i
+              :class="alertLabelData.alertNum ? 'red' : 'green'"
+              class="nz-icon nz-icon-overview-alert vertical-align-top;"
+              @mouseenter="tooltipHover('', true, $event)"
+              @mouseleave="tooltipHover('', false, $event)"
+            ></i>
+            <div
+              v-if="alertNumtooltipShow"
+              class="alert-days-info-tooltip"
+              :style="{ left: position.left + 'px', top: position.top + 'px' }"
+            >
+              <div class="tooltip-title">
+                {{ $t("project.topology.alert") }}({{ $t("overall.active") }})
+              </div>
+              <div class="severity-info" style="justify-content: space-between">
+                <div class="severity-name">{{ $t("overall.result.total") }}</div>
+                <div class="severity-value">{{ alertLabelData.alertNum }}</div>
+              </div>
+            </div>
+            <alertDaysInfo
+              v-show="!trendLoading"
+              :alertDaysData="alertDaysData"
+            />
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("overall.state") }}</div>
+          <div class="messgae-info-value" style="margin-left: 3px">
+            <i
+              v-if="alertLabelData"
+              :class="{
+                'green-bg': alertLabelData && alertLabelData.state === 'ON',
+                'red-bg': alertLabelData && alertLabelData.state === 'OFF',
+              }"
+              class="active-icon"
+            >
+            </i>
+            <span class="messgae-info-text" v-if="alertLabelData && alertLabelData.state === 'ON'">
+              {{$t("overall.enabled")}}
+            </span>
+            <span class="messgae-info-text" v-if="alertLabelData && alertLabelData.state === 'OFF'">
+              {{$t("overall.disabled")}}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- asset -->
+    <div
+      class="messgae-info"
+      v-if="type === 'asset'"
+      v-my-loading="loading"
+    >
+      <div class="messgae-info-header">{{$t('asset.asset')}}</div>
+      <div class="messgae-info-content">
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">ID</div>
+          <span class="messgae-info-value">
+            {{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
+          </span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="document-copy-block">
+            <div class="messgae-info-title">{{$t('overall.name')}}</div>
+            <span class="messgae-info-value document-copy-text">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</span>
+            <i v-if="alertLabelData && alertLabelData.name" class="nz-icon nz-icon-override" style="visibility: hidden" @click.stop="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
+          </div>
+        </div>
+        <div class="messgae-info-row document-copy-block">
+          <div class="messgae-info-title">{{ $t("asset.manageIp") }}</div>
+          <span class="messgae-info-value document-copy-text" :title="alertLabelData && alertLabelData.manageIp? alertLabelData.manageIp  : '--'">
+            {{ alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : "--" }}
+          </span>
+          <i v-if="alertLabelData && alertLabelData.manageIp" class="nz-icon nz-icon-override asset-manage-ip" style="visibility: hidden" @click.stop="onCopy(alertLabelData.manageIp)" :title="$t('overall.copyText')"></i>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("overall.type") }}</div>
+          <span class="messgae-info-value">
+            {{alertLabelData && alertLabelData.type && alertLabelData.type.name? alertLabelData.type.name   : "--" }}
+          </span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("overall.state") }}</div>
+          <span class="messgae-info-value">
+            {{alertLabelData && alertLabelData.state && alertLabelData.state.name ? alertLabelData.state.name : "--" }}
+          </span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">Ping</div>
+          <div class="messgae-info-value">
+            <div
+              v-if="alertLabelData"
+              :class="{
+                'green-bg':
+                  alertLabelData &&
+                  alertLabelData.pingInfo &&
+                  alertLabelData.pingInfo.status === 1,
+                'red-bg':
+                  alertLabelData &&
+                  alertLabelData.pingInfo &&
+                  alertLabelData.pingInfo.status === 0,
+              }"
+              class="active-icon"
+            ></div>
+            <span class="messgae-info-text" v-if="alertLabelData">
+              {{ alertLabelData &&  alertLabelData.pingInfo && alertLabelData.pingInfo.rtt ? alertLabelData.pingInfo.rtt + "ms"  : ""}}
+            </span>
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("overall.dc") }}</div>
+          <span class="messgae-info-value">
+            {{ alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name: "--"}}
+          </span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("asset.cabinet") }}</div>
+          <span class="messgae-info-value">
+            {{ alertLabelData && alertLabelData.cabinet && alertLabelData.cabinet.name  ? alertLabelData.cabinet.name : "--" }}
+          </span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("asset.brand") }}</div>
+          <span class="messgae-info-value">
+            {{alertLabelData && alertLabelData.brand && alertLabelData.brand.name? alertLabelData.brand.name : "--" }}
+          </span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("asset.model") }}</div>
+          <span class="messgae-info-value">
+            {{alertLabelData && alertLabelData.model && alertLabelData.model.name ? alertLabelData.model.name: "--" }}
+          </span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("overall.alert") }}</div>
+          <div class="messgae-info-value" v-if="alertLabelData">
+            <i
+              :class="alertLabelData.alertNum ? 'red' : 'green'"
+              class="nz-icon nz-icon-overview-alert vertical-align-top;"
+              @mouseenter="tooltipHover('', true, $event)"
+              @mouseleave="tooltipHover('', false, $event)"
+            ></i>
+            <div
+              v-if="alertNumtooltipShow"
+              class="alert-days-info-tooltip"
+              :style="{ left: position.left + 'px', top: position.top + 'px' }"
+            >
+              <div class="tooltip-title">
+                {{ $t("project.topology.alert") }}({{ $t("overall.active") }})
+              </div>
+              <div class="severity-info" style="justify-content: space-between">
+                <div class="severity-name">{{ $t("overall.result.total") }}</div>
+                <div class="severity-value">{{ alertLabelData.alertNum }}</div>
+              </div>
+            </div>
+            <alertDaysInfo
+              v-show="!trendLoading"
+              :alertDaysData="alertDaysData"
+            />
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("asset.endpoint") }}</div>
+          <div class="messgae-info-value">
+            <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+            <span class="messgae-info-text">
+              {{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- project -->
+    <div
+      class="messgae-info"
+      v-if="type === 'project'"
+      v-my-loading="loading"
+    >
+      <div class="messgae-info-header">{{$t('project.project.projectName')}}</div>
+      <div class="messgae-info-content">
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">ID</div>
+          <span class="messgae-info-value">
+            {{ alertLabelData && alertLabelData ? alertLabelData.id : "--" }}
+          </span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="document-copy-block">
+            <div class="messgae-info-title">{{$t('overall.name')}}</div>
+            <span class="messgae-info-value document-copy-text" :title="alertLabelData && alertLabelData.name ? alertLabelData.name : '--'">
+              {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
+            </span>
+            <i v-if="alertLabelData && alertLabelData.name" class="nz-icon nz-icon-override" style="visibility: hidden" @click.stop="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("overall.module") }}</div>
+          <div class="messgae-info-value">
+            <i
+              style="cursor: pointer"
+              class="nz-icon nz-icon-overview-module monitorColor"
+            />&nbsp;
+            <span class="messgae-info-text">
+              {{alertLabelData && alertLabelData.moduleNum? alertLabelData.moduleNum: "--"}}
+            </span>
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{$t('asset.endpoint')}}</div>
+          <div class="messgae-info-value">
+            <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+            <span class="messgae-info-text">
+              {{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum: 0}}
+            </span>
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("asset.asset") }}</div>
+          <div class="messgae-info-value">
+            <i
+              class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+            />
+            <span class="messgae-info-text">
+              {{alertLabelData && alertLabelData.assetNum? alertLabelData.assetNum : 0 }}
+            </span>
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("overall.alert") }}</div>
+          <div class="messgae-info-value" v-if="alertLabelData">
+            <i
+              :class="alertLabelData.alertNum ? 'red' : 'green'"
+              class="nz-icon nz-icon-overview-alert vertical-align-top;"
+              @mouseenter="tooltipHover('', true, $event)"
+              @mouseleave="tooltipHover('', false, $event)"
+            ></i>
+            <div
+              v-if="alertNumtooltipShow"
+              class="alert-days-info-tooltip"
+              :style="{ left: position.left + 'px', top: position.top + 'px' }"
+            >
+              <div class="tooltip-title">
+                {{ $t("project.topology.alert") }}({{ $t("overall.active") }})
+              </div>
+              <div class="severity-info" style="justify-content: space-between">
+                <div class="severity-name">{{ $t("overall.result.total") }}</div>
+                <div class="severity-value">{{ alertLabelData.alertNum }}</div>
+              </div>
+            </div>
+            <alertDaysInfo
+              v-show="!trendLoading"
+              :alertDaysData="alertDaysData"
+            />
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("overall.remark") }}</div>
+          <span class="messgae-info-value">
+            {{alertLabelData && alertLabelData.remark? alertLabelData.remark : "--" }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- module -->
+    <div
+      class="messgae-info"
+      v-if="type === 'module'"
+      v-my-loading="loading"
+    >
+      <div class="messgae-info-header">{{$t('overall.module')}}</div>
+      <div class="messgae-info-content">
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">ID</div>
+          <span class="messgae-info-value">
+            {{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
+          </span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="document-copy-block">
+            <div class="messgae-info-title">{{$t('overall.name')}}</div>
+            <span class="messgae-info-value document-copy-text" :title="alertLabelData && alertLabelData.name ? alertLabelData.name : '--'">
+              {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
+            </span>
+            <i v-if="alertLabelData && alertLabelData.name" class="nz-icon nz-icon-override" style="visibility: hidden" @click.stop="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("project.project.projectName") }}</div>
+          <span class="messgae-info-value">
+            {{ alertLabelData &&alertLabelData.project &&alertLabelData.project.name? alertLabelData.project.name  : "--" }}
+          </span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("asset.endpoint") }}</div>
+          <div class="messgae-info-value">
+            <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+            <span class="messgae-info-text">
+              {{ alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}
+            </span>
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("asset.asset") }}</div>
+          <div class="messgae-info-value">
+            <i
+              class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+            />&nbsp;
+            <span class="messgae-info-text">
+              {{alertLabelData && alertLabelData.assetNum ? alertLabelData.assetNum : 0}}
+            </span>
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("overall.alert") }}</div>
+          <div class="messgae-info-value" v-if="alertLabelData">
+            <i
+              :class="alertLabelData.alertNum ? 'red' : 'green'"
+              class="nz-icon nz-icon-overview-alert vertical-align-top;"
+              @mouseenter="tooltipHover('', true, $event)"
+              @mouseleave="tooltipHover('', false, $event)"
+            ></i>
+            <div
+              v-if="alertNumtooltipShow"
+              class="alert-days-info-tooltip"
+              :style="{ left: position.left + 'px', top: position.top + 'px' }"
+            >
+              <div class="tooltip-title">
+                {{ $t("project.topology.alert") }}({{ $t("overall.active") }})
+              </div>
+              <div class="severity-info" style="justify-content: space-between">
+                <div class="severity-name">{{ $t("overall.result.total") }}</div>
+                <div class="severity-value">{{ alertLabelData.alertNum }}</div>
+              </div>
+            </div>
+            <alertDaysInfo
+              v-show="!trendLoading"
+              :alertDaysData="alertDaysData"
+            />
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("overall.remark") }}</div>
+          <span class="messgae-info-value">
+            {{alertLabelData && alertLabelData.remark ? alertLabelData.remark  : "--"}}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- endpoint -->
+    <div
+      class="messgae-info"
+      v-if="type === 'endpoint'"
+      v-my-loading="loading"
+    >
+      <div class="messgae-info-header">{{$t('asset.endpoint')}}</div>
+      <div class="messgae-info-content">
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">ID</div>
+          <span class="messgae-info-value">
+            {{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
+          </span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="document-copy-block">
+            <div class="messgae-info-title">{{$t('overall.name')}}</div>
+              <span class="messgae-info-value document-copy-text" :title="alertLabelData && alertLabelData.name ? alertLabelData.name : '--'">
+                {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
+              </span>
+            <i v-if="alertLabelData && alertLabelData.name" class="nz-icon nz-icon-override" style="visibility: hidden" @click.stop="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("project.project.projectName") }}</div>
+          <span class="messgae-info-value">
+            {{alertLabelData &&alertLabelData.project && alertLabelData.project.name? alertLabelData.project.name: "--"}}
+          </span>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("overall.module") }}</div>
+          <div class="messgae-info-value">
+            <i
+              style="cursor: pointer"
+              class="nz-icon nz-icon-overview-module monitorColor"
+            />&nbsp;
+            <span class="messgae-info-text">
+              {{alertLabelData &&alertLabelData.module &&alertLabelData.module.name? alertLabelData.module.name: "--"}}
+            </span>
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("asset.asset") }}</div>
+          <div class="messgae-info-value">
+            <i
+              class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+            ></i
+            >&nbsp;
+            <span class="messgae-info-text">
+              {{alertLabelData && alertLabelData.asset.name? alertLabelData.asset.name: "--"}}
+            </span>
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("overall.alert") }}</div>
+          <div class="messgae-info-value" v-if="alertLabelData">
+            <i
+              :class="alertLabelData.alertNum ? 'red' : 'green'"
+              class="nz-icon nz-icon-overview-alert vertical-align-top;"
+              @mouseenter="tooltipHover('', true, $event)"
+              @mouseleave="tooltipHover('', false, $event)"
+            ></i>
+            <div
+              v-if="alertNumtooltipShow"
+              class="alert-days-info-tooltip"
+              :style="{ left: position.left + 'px', top: position.top + 'px' }"
+            >
+              <div class="tooltip-title">
+                {{ $t("project.topology.alert") }}({{ $t("overall.active") }})
+              </div>
+              <div class="severity-info" style="justify-content: space-between">
+                <div class="severity-name">{{ $t("overall.result.total") }}</div>
+                <div class="severity-value">{{ alertLabelData.alertNum }}</div>
+              </div>
+            </div>
+            <alertDaysInfo
+              v-show="!trendLoading"
+              :alertDaysData="alertDaysData"
+            />
+          </div>
+        </div>
+        <div class="messgae-info-row">
+          <div class="messgae-info-title">{{ $t("overall.state") }}</div>
+          <div class="messgae-info-value">
+            <span style="width: auto">
+              <span class="endpoint-cell-left"
+                ><i class="nz-icon nz-icon-Metrics active" />
+                {{ $t("overall.metric") }}
+              </span>
+              <span
+                v-if="alertLabelData && alertLabelData.configs[0].state === 0"
+              >
+                <span class="active-icon red-bg inline-block"></span>
+              </span>
+              <span
+                v-else-if="alertLabelData && alertLabelData.configs[0].state === 1"
+              >
+                <span class="active-icon green-bg inline-block"></span>
+              </span>
+              <span v-else-if="alertLabelData && alertLabelData.configs[0].state">
+                <span class="active-icon gray-bg inline-block"></span>
+              </span>
+            </span>
+            <span style="width: auto">
+              <span class="endpoint-cell-left" style="margin-left: 10px">
+                <i class="nz-icon nz-icon-logs active"/>
+                {{ $t("overall.logs") }}
+              </span>
+              <span
+                v-if="alertLabelData && alertLabelData.configs[1].state === 0"
+              >
+                <span class="active-icon red-bg inline-block"></span>
+              </span>
+              <span
+                v-else-if="alertLabelData && alertLabelData.configs[1].state === 1"
+              >
+                <span class="active-icon green-bg inline-block"></span>
+              </span>
+              <span v-else-if="alertLabelData && alertLabelData.configs[1].state">
+                <span class="active-icon gray-bg inline-block"></span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import trendMixins from '@/components/common/alert/trendMixins'
+export default {
+  name: 'alertDetail',
+  mixins: [trendMixins],
+  props: {
+    id: {},
+    type: {},
+    that: {}
+  },
+  data () {
+    return {
+      loading: true,
+      alertLabelData: '',
+      severityDataWeight: this.$store.getters.severityDataWeight
+    }
+  },
+  computed: {
+  },
+  watch: {
+    id: {
+      immediate: true,
+      deep: true,
+      handler () {
+        this.init()
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.loading = true
+
+      if (this.type === 'alertRule') {
+        this.$get('/alert/rule/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            res.data.condition = JSON.parse(res.data.condition)
+            res.data.condition = this.severityDataWeight.map(item => {
+              item = {
+                ...item,
+                value: '',
+                operator: '>'
+              }
+              res.data.condition.forEach(subItem => {
+                if (item.id === subItem.id) {
+                  item = {
+                    ...item,
+                    operator: subItem.operator,
+                    value: subItem.value
+                  }
+                }
+              })
+              return item
+            })
+            this.alertLabelData = res.data
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+
+      if (this.type === 'dc') {
+        this.$get('dc/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+
+      if (this.type === 'asset') {
+        this.$get('asset/asset/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+
+      if (this.type === 'project') {
+        this.$get('monitor/project/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+
+      if (this.type === 'module') {
+        this.$get('monitor/module/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+
+      if (this.type === 'endpoint') {
+        this.$get('monitor/endpoint/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+
+      const weekDays = this.getWeeksTime()
+      if (this.trendTimer) {
+        clearTimeout(this.trendTimer)
+        this.trendTimer = null
+      }
+      this.trendTimer = setTimeout(() => {
+        this.trendLoading = true
+        const params = {
+          type: 'total',
+          dimension: 'priority',
+          step: 'd'
+        }
+        if (this.type === 'alertRule') {
+          params['rule' + 'Id'] = this.id
+        } else {
+          params[this.type + 'Id'] = this.id
+        }
+        this.$get('/stat/alertMessage/trend', params).then((res) => {
+          if (!res.data) {
+            return
+          }
+          const alertDaysData = res.data.result ? res.data.result[0].values : []
+          const newWeekDays = JSON.parse(JSON.stringify(weekDays))
+          alertDaysData.forEach(item => {
+            item.values.forEach(time => {
+              const findItem = newWeekDays.find(days => days.time == time[0])
+              if (findItem) {
+                findItem[item.metric.priority] = time[1]
+              }
+            })
+          })
+          setTimeout(() => {
+            this.alertDaysData = newWeekDays
+            this.trendLoading = false
+          })
+        })
+      })
+    },
+    trbShotShow () {
+      this.$emit('showText')
+    }
+  },
+  mounted () { }
+}
+
+</script>

nezha-fronted/src/components/common/alert/alertLabel3.vue

@@ -812,9 +812,7 @@ export default {
           if (!res.data) {
             return
           }
-          const alertDaysData = res.data.result
-            ? res.data.result[0].values
-            : []
+          const alertDaysData = res.data.result ? res.data.result[0].values : []
           const newWeekDays = JSON.parse(JSON.stringify(weekDays))
           alertDaysData.forEach((item) => {
             item.values.forEach((time) => {

nezha-fronted/src/components/common/alert/alertMessageInfo.vue

@@ -26,7 +26,6 @@
         <div class="info-box-left-top">
           <chart
             ref="chart"
-            :globalVariables="globalVariables"
             v-if="chartInfo.alertRule && chartInfo.alertRule.type !== 3"
             :chart-data="chartData"
             :chart-info="chartInfo"
@@ -47,7 +46,10 @@
           class="alert-message-info-tab"
           :time="time"
           :noData="tabNoData"
-          :infoData="infoData" />
+          :infoData="infoData"
+          :now-time="nowTime"
+          :loading="tabLoading"
+          />
       </div>
       <div class="info-box-right">
         <alertMessageInfoTimeLine :info-data="chartInfo" :time="time"/>
@@ -68,11 +70,9 @@ import logsData from '@/components/chart/logsData'
 import lodash from 'lodash'
 import alertMessageInfoTab from '@/components/common/alert/alertMessageInfoTab'
 import alertMessageInfoTimeLine from '@/components/common/alert/alertMessageInfoTimeLine'
-import globalVariablesMixin from '@/components/common/mixin/globalVariables'
 import { lineChartMove } from '@/components/common/js/common'
 export default {
   name: 'alertMessageInfo',
-  mixins: [globalVariablesMixin],
   components: {
     alertMessageInfoTab,
     chart,
@@ -91,6 +91,9 @@ export default {
     showHeader: {
       type: Boolean,
       default: true
+    },
+    nowTime: {
+      type: String
     }
   },
   data () {
@@ -109,7 +112,8 @@ export default {
       tabNoData: false,
       timeLineNoData: false,
       time: [],
-      stateOptions: alertMessageConstant.states
+      stateOptions: alertMessageConstant.states,
+      tabLoading: true
     }
   },
   computed: {
@@ -130,7 +134,6 @@ export default {
       const step = bus.getStep(startTime, endTime)
       startTime = this.$stringTimeParseToUnix(startTime)
       endTime = this.$stringTimeParseToUnix(endTime)
-      this.setGlobalVariablesValue([filter.start_time, filter.end_time])
       const elements = this.chartInfo.elements || []
       if (multipleTime.length) {
         const minusTime = (new Date(bus.formateTimeToTime(filter.start_time)).getTime() - new Date(bus.formateTimeToTime(multipleTime[0])).getTime())
@@ -328,13 +331,16 @@ export default {
     },
     getAlertMessageInfo () {
       this.tabNoData = false
+      this.tabLoading = true
       this.$get('/alert/message/' + this.chartInfo.id).then(res => {
         if (res.code === 200) {
           this.infoData = res.data
           this.infoData.alertRule = this.currentMsg.alertRule
           this.tabNoData = false
+          this.tabLoading = false
         } else {
           this.tabNoData = true
+          this.tabLoading = false
         }
       })
     }

nezha-fronted/src/components/common/alert/alertMessageInfoDetail.vue

@@ -1,11 +1,21 @@
 <template>
-  <div class="info-box-header">
-    <div v-for="item in cardNames" :key="item.key" v-if="infoData[item.key]">
-      <div class="info-box-title">{{item.label}}</div>
-      <div v-if="item.key === 'summary' || item.key === 'description'" class="info-box-content">
-        {{infoData[item.key]}}
+  <div class="messgae-info">
+    <div class="messgae-info-header">{{$t('project.topology.alert')}}</div>
+    <div class="messgae-info-content">
+      <!-- summary -->
+      <div class="messgae-info-row">
+        <span class="messgae-info-title">{{$t('alert.summary')}}</span>
+        <span class="messgae-info-value">{{infoData.summary?infoData.summary:'--'}}</span>
       </div>
-      <div v-if="item.key==='labels'" class="info-box-content">
+      <!-- description -->
+      <div class="messgae-info-row">
+        <span class="messgae-info-title">{{$t('overall.remark')}}</span>
+        <span class="messgae-info-value">{{infoData.description?infoData.description:'--'}}</span>
+      </div>
+      <!-- labels -->
+      <div class="messgae-info-row">
+        <span class="messgae-info-title">{{$t('alert.list.labels')}}</span>
+        <div class="messgae-info-value" style="display: flex;flex-wrap: wrap;" v-if="infoData.labels">
           <span v-for="(item, i) in labelsSort(infoData.labels)" :key="i">
             <span
               @mouseenter="labelHover(infoData, item.label, true, true, $event)"
@@ -14,7 +24,7 @@
                 v-if="item.label !== 'alertname' && item.label !== 'severity'" :key="item.label" :cursor-point="tagType(item.label) !== 'info'"
                 :label="item.label"
                 :type="tagType(item.label)"
-                style="margin: 5px 0 5px 5px;"
+                style="margin: 5px 5px 5px 0px;"
                 :title="item.value"
               >
               {{item.value}}
@@ -22,8 +32,24 @@
             </span>
           </span>
         </div>
-      <div v-if="item.key==='startAt'" class="info-box-content">
-        {{utcTimeToTimezoneStr(infoData[item.key])}}
+      </div>
+      <!-- startAt -->
+      <div class="messgae-info-row">
+        <span class="messgae-info-title">{{$t('overall.startTime')}}</span>
+        <span class="messgae-info-value">{{infoData.startAt?utcTimeToTimezoneStr(infoData.startAt):'--'}}</span>
+      </div>
+      <!-- duration -->
+      <div class="messgae-info-row">
+        <span class="messgae-info-title">{{$t('config.terminallog.duration')}}</span>
+        <span class="messgae-info-value">
+          <el-tooltip :disabled="!infoData.endAt" effect="light" placement="right">
+            <div slot="content">
+              {{$t('overall.endTime')}}<br/>
+              {{utcTimeToTimezoneStr(infoData.endAt)}}
+            </div>
+            <span>{{infoData.startAt?getDuration(infoData):'--'}}</span>
+          </el-tooltip>
+        </span>
       </div>
     </div>
     <alertLabel
@@ -39,21 +65,36 @@
 <script>
 import alertMessageLabelMixin from '@/components/common/alert/alertMessageLabelMixin'
 import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
+import { calcDurationByStringTimeB } from '@/components/common/js/tools'
 export default {
   name: 'alertMessageInfoDetail',
   props: {
     infoData: {
       type: Object
+    },
+    nowTime: {
+      type: String
     }
   },
   mixins: [alertMessageLabelMixin, alertLabelMixin],
+  computed: {
+    getDuration () {
+      return function (record) {
+        if (record.endAt) {
+          return calcDurationByStringTimeB(record.startAt, record.endAt)
+        }
+        return calcDurationByStringTimeB(record.startAt, this.nowTime)
+      }
+    }
+  },
   data () {
     return {
       cardNames: [
         { key: 'summary', label: this.$t('alert.summary') },
         { key: 'description', label: this.$t('overall.remark') },
         { key: 'labels', label: this.$t('alert.list.labels') },
-        { key: 'startAt', label: this.$t('overall.startTime') }
+        { key: 'startAt', label: this.$t('overall.startTime') },
+        { key: 'duration', label: this.$t('config.terminallog.duration') }
       ]
     }
   }

nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue

@@ -1,30 +1,53 @@
 <template>
   <div>
-    <el-tabs v-model="activeName" type="card" v-if="!nodata">
+    <div class="alert-message-info-tool">
+      <button class="top-tool-btn" v-if="activeName==='asset'" @click="snapshot">
+        <i class="nz-icon nz-icon-kuaizhao" style="fontSize:16px;"></i>
+      </button>
+      <el-dropdown trigger="click" size="small" class="nz-el-dropdown" v-if="infoData.alertRule&&infoData.alertRule.param.dataLink.length">
+        <button class="top-tool-btn  margin-l-10">
+          <i class="nz-icon nz-icon-wailian"></i>
+        </button>
+        <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top nz-el-dropdown-menu">
+          <el-dropdown-item v-for="(item,index) in infoData.alertRule.param.dataLink" :key="index">
+            <div @click="linkClick(item)" class="alert-message-dataLink">
+              <i class="nz-icon nz-icon-link"></i>
+              <span>{{item.title}}</span>
+            </div>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    <el-tabs v-model="activeName" v-if="!nodata">
       <el-tab-pane v-for="item in cardNames" :label="item.label" :name="item.key" :key="item.key">
         <div v-if="item.key === 'detail' && activeName === 'detail'">
-          <alert-message-info-detail :info-data="infoData"/>
-        </div>
-<!--        <div v-else-if="item.key === 'dashboard' && activeName === 'dashboard'" class="alert-message-info-dashboard">-->
-<!--          <dashboard :temp-id="infoData.alertRule.dashboardId" :showImport="false" :showName="false" :url-type="'dashboard'" :time="timeRange" class="message-info-dashboard" :from="fromRoute.dashboard"></dashboard>-->
-<!--        </div>-->
-        <div v-else-if="(activeName === item.key) && infoData[item.key]" class="no-position-alert-label">
-<!--          <searchItemInfo :obj="findData(item.key)" :severityData="severityData" :fa-loading="false"></searchItemInfo>-->
-          <alertLabel
-            class="alert"
-            v-if="item.key !=='alertRule'"
-            :id="infoData[item.key].id"
-            :that="findData2(item.key)"
-            :alertTableDialog="true"
-            :type="item.key"/>
-          <alertRuleInfo
-            class="alert"
-            v-else
+          <alert-message-info-detail v-my-loading="loading" :info-data="infoData" :now-time="nowTime"/>
+          <ul class="messgae-info-list">
+            <alertDetail
+              v-for="(item,index) in detailArr" :key="index"
               :id="infoData[item.key].id"
               :severity-data="severityData"
               :that="findData2(item.key)"
+              :type="item.key"
             />
+          </ul>
         </div>
+        <div v-else-if="item.key === 'asset' && activeName === 'asset'" class="alert-message-info-dashboard">
+          <dashboard
+            ref="dashboard"
+            :temp-id="infoData.assetId"
+            :showImport="false"
+            :showName="false"
+            :url-type="'asset'"
+            :time="timeRange"
+            :from="fromRoute.alertMessage"
+            :chartDetailInfo="infoData.asset"
+            class="message-info-dashboard">
+          </dashboard>
+        </div>
+        <!-- <div v-else-if="item.key === 'dashboard' && activeName === 'dashboard'" class="alert-message-info-dashboard">
+          <dashboard :temp-id="infoData.alertRule.dashboardId" :showImport="false" :showName="false" :url-type="'dashboard'" :time="timeRange" class="message-info-dashboard" :from="fromRoute.dashboard"></dashboard>
+        </div> -->
         <div v-else-if="item.key === 'trbShot' && activeName === 'trbShot'">
           <div class="rich-text-editor" v-html="infoData.alertRule.trbShot" v-if="infoData.alertRule.trbShot"></div>
         </div>
@@ -36,25 +59,25 @@
       </svg>
       <div class="table-no-data__title">No results found</div>
     </div>
+    <!-- 快照进度 -->
+    <snapshotProgress v-if="snapshotVisible" :showPanel="showPanel" :searchTime="timeRange" :snapshotVisible.sync="snapshotVisible" api="dashboard"></snapshotProgress>
   </div>
 </template>
 
 <script>
 import alertMessageInfoDetail from '@/components/common/alert/alertMessageInfoDetail'
-import searchItemInfo from '@/components/common/globalSearch/searchItemInfo'
-import alertLabel from '@/components/common/alert/alertLabel3'
-import alertRuleInfo from '@/components/common/alert/alertRuleInfo2'
+import alertDetail from '@/components/common/alert/alertDetail'
 import dashboard from '@/components/page/integration/integration-tabs/dashboard'
 import { fromRoute } from '@/components/common/js/constants'
+import snapshotProgress from '@/components/common/snapshotProgress/snapshotProgress.vue'
 // import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
 export default {
   name: 'alertMessageInfoTab',
   components: {
     alertMessageInfoDetail,
-    searchItemInfo,
-    alertLabel,
-    alertRuleInfo,
-    dashboard
+    alertDetail,
+    dashboard,
+    snapshotProgress // 快照进度
   },
   // mixins: [alertLabelMixin],
   props: {
@@ -65,7 +88,11 @@ export default {
       type: Boolean,
       default: false
     },
-    time: {}
+    time: {},
+    nowTime: {
+      type: String
+    },
+    loading: Boolean
   },
   computed: {
     severityData () {
@@ -90,16 +117,19 @@ export default {
         key: 'asset',
         label: this.$t('asset.asset')
       }, {
-        key: 'endpoint',
-        label: this.$t('asset.endpoint')
+        key: 'project',
+        label: this.$t('project.project.projectName')
       }, {
         key: 'module',
         label: this.$t('overall.module')
       }, {
-        key: 'project',
-        label: this.$t('project.project.projectName')
+        key: 'endpoint',
+        label: this.$t('asset.endpoint')
       }],
-      timeRange: []
+      detailArr: [],
+      timeRange: [],
+      snapshotVisible: false,
+      showPanel: {}
     }
   },
   watch: {
@@ -107,15 +137,25 @@ export default {
       immediate: true,
       handler (n) {
         if (n) {
+          if (n.alertRule && !n.alertRule.param) {
+            n.alertRule.param = {
+              dataLink: []
+            }
+          } else if (n.alertRule) {
+            n.alertRule.param = JSON.parse(n.alertRule.param)
+          }
           this.cardNames = [{
             key: 'detail',
             label: this.$t('overall.detail')
           }]
-          this.sysArr.forEach(item => {
-            if (n[item.key]) {
-              this.cardNames.push(item)
+          if (n.assetId) {
+            this.cardNames.push(
+              {
+                key: 'asset',
+                label: this.$t('asset.assetDashboard')
+              }
+            )
           }
-          })
           // && n.alertRule.dashboardId
           // n.alertRule && (n.alertRule.dashboardId = 101534)
           // if (n.alertRule && n.alertRule.dashboardId && n.alertRule.dashboardId != -1) {
@@ -131,6 +171,13 @@ export default {
               label: this.$t('alert.config.trbShot')
             })
           }
+
+          this.detailArr = []
+          this.sysArr.forEach(item => {
+            if (n[item.key]) {
+              this.detailArr.push(item)
+            }
+          })
         }
       }
     },
@@ -138,7 +185,7 @@ export default {
       immediate: true,
       handler (n) {
         if (n && n.length) {
-          this.timeRange = [n[0] * 1000, n[1] * 1000]
+          this.timeRange = [this.timeFormate(n[0] * 1000), this.timeFormate(n[1] * 1000)]
         }
       }
     }
@@ -147,6 +194,18 @@ export default {
 
   },
   methods: {
+    snapshot () {
+      this.showPanel = this.$refs.dashboard[0].showPanel
+      this.snapshotVisible = true
+    },
+    linkClick (data) {
+      console.log(data)
+      if (data.openIn === 'newTab') {
+        window.open(data.url)
+      } else {
+        window.location.href = data.url
+      }
+    },
     findData (key) {
       if (key) {
         const obj = {

nezha-fronted/src/components/common/alert/alertRuleInfo.vue

@@ -10,7 +10,7 @@
           {{alertRuleData && alertRuleData.name ? alertRuleData.name : '--'}}
         </div>
       </div>
-      <div class="alert-label-nfo" >
+      <div class="alert-label-info" >
         <div class="alert-label-box">
           <div class="alert-label-title">ID</div>
           <div class="alert-label-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>

nezha-fronted/src/components/common/alert/alertRuleInfo2.vue

@@ -8,7 +8,7 @@
         {{alertRuleData && alertRuleData.name ? alertRuleData.name : '--'}}
       </div>
     </div>
-    <div class="alert-label-nfo" >
+    <div class="alert-label-info" >
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
         <div class="alert-label-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>

nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue

@@ -90,7 +90,7 @@
       class="nz-dialog chart-fullscreen"
       destroy-on-close
       fullscreen
-      :modal-append-to-body="false"
+      append-to-body
     >
       <alertMessageInfo
         :ref="'chart-fullscreen' + chartInfo.id"
@@ -103,9 +103,13 @@
         @showFullscreen="showFullscreen"
       ></alertMessageInfo>
     </el-dialog>
-    <el-dialog class="nz-dialog table-chart-dialog" :title="$t('alert.config.trbShot')"
+    <el-dialog
+      class="nz-dialog table-chart-dialog"
+      :title="$t('alert.config.trbShot')"
       :visible.sync="dialogShowText"
-               width="96%"  @close="dialogShowText = false" :modal-append-to-body="false">
+      width="96%"
+      @close="dialogShowText = false"
+      :modal-append-to-body="false">
       <div slot="title">
         <span class="nz-dialog-title">{{$t('alert.config.trbShot')}}</span>
       </div>

nezha-fronted/src/components/common/snapshotProgress/snapshotProgress.vue

@@ -5,7 +5,7 @@
       width="472px"
       :title="$t('overall.snapshoot')"
       destroy-on-close
-      :modal-append-to-body="false"
+      append-to-body
       :close-on-click-modal="false"
       :visible.sync="visible"
       @close="closeDialog"

nezha-fronted/src/components/page/alert/alertMessage.vue

@@ -145,7 +145,7 @@
       class="nz-dialog chart-fullscreen"
       destroy-on-close
       fullscreen
-      :modal-append-to-body="false"
+      append-to-body
     >
       <alertMessageInfo
         :ref="'chart-fullscreen' + chartInfo.id"
@@ -156,6 +156,7 @@
         :is-fullscreen="true"
         :time-range="searchTimeDialog"
         @showFullscreen="showFullscreen"
+        :now-time="nowTime"
       ></alertMessageInfo>
     </el-dialog>
     <!--全屏-->
@@ -645,11 +646,6 @@ export default {
         chartInfo.elements && (chartInfo.elements[0].expression = this.currentMsg.alertRule.expr.replace(/\r|\n+/g, ''))
       }
 
-      // 设置dataLink
-      if (this.currentMsg.alertRule.param) {
-        chartInfo.param.dataLink = JSON.parse(this.currentMsg.alertRule.param).dataLink
-      }
-
       chartInfo.id = this.currentMsg.id
       chartInfo.name = this.currentMsg.alertRule.name
       chartInfo.isAlertMessage = true

nezha-fronted/src/components/page/integration/integration-tabs/dashboard.vue

@@ -18,7 +18,6 @@
             <chart-list
               ref="chartList"
               :variablesInit="variablesInit"
-              :timeRange="time"
               name="dashboard"
               :dashboardId="showPanel.id"
               :data-list="dataList"
@@ -28,6 +27,7 @@
               :time-range="searchTime"
               :showTool="false"
               :loading="chartListLoading"
+              :chartDetailInfo="chartDetailInfo"
             ></chart-list>
           </div>
         </div>
@@ -70,7 +70,8 @@ export default {
     from: {
       type: String,
       default: fromRoute.integration
-    }
+    },
+    chartDetailInfo: Object
   },
   computed: {
     chartRightBoxShow () {
@@ -164,7 +165,15 @@ export default {
     },
     // 公用操作
     getTableData () {
-      this.$get('visual/dashboard', { type: this.urlType, ids: this.tempId }).then(response => {
+      const param = {
+        type: this.urlType,
+        ids: this.tempId
+      }
+      if (this.urlType === 'asset') {
+        param.link = this.tempId
+        delete param.ids
+      }
+      this.$get('visual/dashboard', param).then(response => {
         if (response.code === 200) {
           this.panelData = response.data.list
           if (this.panelData.length > 0) {