github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 08:17:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

merge: update

Browse Source
This commit is contained in:
Fine 2023-08-24 15:38:46 +08:00
commit 8b087be308
139 changed files with 2476 additions and 4029 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.husky/commit-msg
View File

@ -1,3 +1,4 @@
#!/bin/sh
# #
# Licensed to the Apache Software Foundation (ASF) under one # Licensed to the Apache Software Foundation (ASF) under one
# or more contributor license agreements. See the NOTICE file # or more contributor license agreements. See the NOTICE file
@ -17,7 +18,6 @@
# under the License. # under the License.
# #
#!/bin/sh
# shellcheck source=./_/husky.sh # shellcheck source=./_/husky.sh
. "$(dirname "$0")/_/husky.sh" . "$(dirname "$0")/_/husky.sh"

2
.husky/pre-commit
View File

@ -1,3 +1,4 @@
#!/bin/sh
# #
# Licensed to the Apache Software Foundation (ASF) under one # Licensed to the Apache Software Foundation (ASF) under one
# or more contributor license agreements. See the NOTICE file # or more contributor license agreements. See the NOTICE file
@ -17,7 +18,6 @@
# under the License. # under the License.
# #
#!/bin/sh
. "$(dirname "$0")/_/husky.sh" . "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh" . "$(dirname "$0")/common.sh"

1
commitlint.config.js
View File

@ -44,6 +44,7 @@ module.exports = {
"workflow", "workflow",
"types", "types",
"release", "release",
"merge",
], ],
], ],
}, },

3409
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@ -35,8 +35,8 @@
"vue-types": "^4.1.1" "vue-types": "^4.1.1"
}, },
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^17.3.0", "@commitlint/cli": "^17.6.6",
"@commitlint/config-conventional": "^17.3.0", "@commitlint/config-conventional": "^17.6.6",
"@rushstack/eslint-patch": "^1.1.4", "@rushstack/eslint-patch": "^1.1.4",
"@types/d3": "^7.1.0", "@types/d3": "^7.1.0",
"@types/d3-tip": "^3.5.5", "@types/d3-tip": "^3.5.5",
@ -60,16 +60,15 @@
"jsdom": "^20.0.3", "jsdom": "^20.0.3",
"lint-staged": "^13.2.1", "lint-staged": "^13.2.1",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"node-sass": "^8.0.0",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss-html": "^1.3.0", "postcss-html": "^1.3.0",
"postcss-scss": "^4.0.2", "postcss-scss": "^4.0.2",
"prettier": "^2.7.1", "prettier": "^2.7.1",
"sass": "^1.56.1", "sass": "^1.56.1",
"start-server-and-test": "^1.15.2", "start-server-and-test": "^1.15.2",
"stylelint": "^15.6.0", "stylelint": "15.9.0",
"stylelint-config-html": "^1.0.0", "stylelint-config-html": "^1.0.0",
"stylelint-config-prettier": "^9.0.3", "stylelint-config-prettier": "9.0.4",
"stylelint-config-standard": "^33.0.0", "stylelint-config-standard": "^33.0.0",
"stylelint-order": "^6.0.3", "stylelint-order": "^6.0.3",
"typescript": "~4.7.4", "typescript": "~4.7.4",

17
src/assets/icons/aws_cloud.svg Normal file
View File

@ -0,0 +1,17 @@
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M18.984 18q1.219 0 2.109-0.891t0.891-2.109-0.891-2.109-2.109-0.891h-1.5v-0.516q0-2.297-1.594-3.891t-3.891-1.594q-1.875 0-3.328 1.125t-1.969 2.859h-0.703q-1.641 0-2.813 1.195t-1.172 2.836 1.172 2.813 2.813 1.172h12.984zM19.359 10.031q1.922 0.141 3.281 1.57t1.359 3.398q0 2.063-1.477 3.539t-3.539 1.477h-12.984q-2.484 0-4.242-1.758t-1.758-4.242q0-2.203 1.57-3.961t3.773-1.992q0.984-1.828 2.766-2.953t3.891-1.125q2.531 0 4.711 1.781t2.648 4.266z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

17
src/assets/icons/browser.svg Normal file
View File

@ -0,0 +1,17 @@
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M16.359 14.016h3.375q0.281-1.313 0.281-2.016t-0.281-2.016h-3.375q0.141 0.984 0.141 2.016t-0.141 2.016zM14.578 19.547q1.172-0.375 2.438-1.43t1.922-2.133h-2.953q-0.469 1.875-1.406 3.563zM14.344 14.016q0.141-0.984 0.141-2.016t-0.141-2.016h-4.688q-0.141 0.984-0.141 2.016t0.141 2.016h4.688zM12 19.969q1.313-1.922 1.922-3.984h-3.844q0.609 2.063 1.922 3.984zM8.016 8.016q0.563-2.016 1.406-3.563-1.172 0.375-2.461 1.43t-1.898 2.133h2.953zM5.063 15.984q0.609 1.078 1.898 2.133t2.461 1.43q-0.938-1.688-1.406-3.563h-2.953zM4.266 14.016h3.375q-0.141-0.984-0.141-2.016t0.141-2.016h-3.375q-0.281 1.313-0.281 2.016t0.281 2.016zM12 4.031q-1.313 1.922-1.922 3.984h3.844q-0.609-2.063-1.922-3.984zM18.938 8.016q-0.656-1.078-1.922-2.133t-2.438-1.43q0.844 1.547 1.406 3.563h2.953zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

17
src/assets/icons/database.svg Normal file
View File

@ -0,0 +1,17 @@
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M3.984 11.016v1.969h2.016v-1.969h-2.016zM2.016 14.016v-4.031h19.969v4.031h-19.969zM6 6.984v-1.969h-2.016v1.969h2.016zM2.016 3.984h19.969v4.031h-19.969v-4.031zM3.984 17.016v1.969h2.016v-1.969h-2.016zM2.016 20.016v-4.031h19.969v4.031h-19.969z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

16
src/assets/icons/general_service.svg Executable file
View File

@ -0,0 +1,16 @@
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/chart</title><path d="M5.55 3.824L6.853 5.78a.3.3 0 0 0 .384.102l1.526-.764a.3.3 0 0 1 .384.102l1.65 2.476a.3.3 0 0 0 .462.045l1.229-1.229a.3.3 0 0 1 .512.212v4.243H5V3.99a.3.3 0 0 1 .55-.167zM13 12a1 1 0 0 1 0 2H3.833A1.833 1.833 0 0 1 2 12.167V3a1 1 0 1 1 2 0v9h9z" id="a"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

18
src/assets/icons/infrastructure.svg Normal file
View File

@ -0,0 +1,18 @@
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>scatter_plot</title>
<path d="M13.594 17.578q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109zM8.016 6q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109zM3.984 14.016q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

17
src/assets/icons/kubernetes.svg Normal file
View File

@ -0,0 +1,17 @@
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12.984 14.859q1.266-0.375 1.875-1.875h7.125q-0.375 3.609-2.836 6.141t-6.164 2.859v-7.125zM14.859 11.016q-0.563-1.5-1.875-1.875v-7.125q3.703 0.328 6.164 2.859t2.836 6.141h-7.125zM11.016 9.141q-0.797 0.328-1.406 1.125t-0.609 1.734 0.609 1.734 1.406 1.125v7.125q-3.797-0.375-6.398-3.234t-2.602-6.75 2.602-6.75 6.398-3.234v7.125z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

15
src/assets/icons/marketplace.svg Normal file
View File

@ -0,0 +1,15 @@
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<svg t="1688979849484" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2698"><path d="M384 469.333333H213.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333V213.333333c0-46.933333 38.4-85.333333 85.333333-85.333333h170.666667c46.933333 0 85.333333 38.4 85.333333 85.333333v170.666667c0 46.933333-38.4 85.333333-85.333333 85.333333zM213.333333 213.333333v170.666667h170.666667V213.333333H213.333333z" p-id="2699"></path><path d="M170.666667 554.666667h256c25.6 0 42.666667 17.066667 42.666666 42.666666v256c0 25.6-17.066667 42.666667-42.666666 42.666667H170.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667v-256c0-25.6 17.066667-42.666667 42.666667-42.666666z" p-id="2700"></path><path d="M384 896H213.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333v-170.666667c0-46.933333 38.4-85.333333 85.333333-85.333333h170.666667c46.933333 0 85.333333 38.4 85.333333 85.333333v170.666667c0 46.933333-38.4 85.333333-85.333333 85.333333z m-170.666667-256v170.666667h170.666667v-170.666667H213.333333z" p-id="2701"></path><path d="M695.466667 115.2c17.066667-17.066667 42.666667-17.066667 59.733333 0l149.333333 149.333333c17.066667 17.066667 17.066667 42.666667 0 59.733334l-149.333333 149.333333c-17.066667 17.066667-42.666667 17.066667-59.733333 0l-149.333334-145.066667c-17.066667-17.066667-17.066667-42.666667 0-59.733333l149.333334-153.6z" p-id="2702"></path><path d="M810.666667 896h-170.666667c-46.933333 0-85.333333-38.4-85.333333-85.333333v-170.666667c0-46.933333 38.4-85.333333 85.333333-85.333333h170.666667c46.933333 0 85.333333 38.4 85.333333 85.333333v170.666667c0 46.933333-38.4 85.333333-85.333333 85.333333z m-170.666667-256v170.666667h170.666667v-170.666667h-170.666667z" p-id="2703"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

29
src/assets/icons/self_observability.svg Normal file
View File

@ -0,0 +1,29 @@
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<?xml version="1.0" encoding="UTF-8"?>
<svg width="3450px" height="1823px" viewBox="0 0 3450 1823" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
<title>Group</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" transform="translate(0.000000, -29.000000)">
<path d="M1050.01772,1394.31899 C1050.01772,1615.24051 912.21519,1851.47342 474.746835,1851.47342 C310.696203,1851.47342 192.579747,1836.16203 87.5873418,1812.10127 C65.7139241,1807.72658 46.0278481,1792.41519 46.0278481,1768.35443 L46.0278481,1610.86582 C46.0278481,1586.80506 65.7139241,1569.30633 87.5873418,1569.30633 L91.9620253,1569.30633 C179.455696,1580.24304 398.189873,1591.17975 479.121519,1591.17975 C673.794937,1591.17975 732.853165,1521.18481 732.853165,1394.31899 C732.853165,1309.01266 691.293671,1265.26582 546.929114,1179.95949 L258.2,1007.15949 C54.7772152,886.855696 0.0936708861,759.989873 0.0936708861,606.875949 C0.0936708861,366.268354 140.083544,191.281013 546.929114,191.281013 C691.293671,191.281013 892.529114,213.15443 966.898734,230.653165 C988.772152,235.027848 1006.27089,250.339241 1006.27089,272.212658 L1006.27089,434.075949 C1006.27089,455.949367 990.959494,473.448101 969.086076,473.448101 L964.711392,473.448101 C820.346835,460.324051 675.982278,451.574684 533.805063,451.574684 C371.941772,451.574684 304.134177,508.44557 304.134177,606.875949 C304.134177,679.058228 341.318987,722.805063 483.496203,801.549367 L745.977215,948.101266 C986.58481,1081.52911 1050.01772,1221.51899 1050.01772,1394.31899 Z M2852.63038,644.060759 C2852.63038,646.248101 2852.63038,648.435443 2852.63038,650.622785 L2653.58228,1656.8 C2627.33418,1788.04051 2592.33671,1840.53671 2458.90886,1840.53671 L2399.85063,1840.53671 C2281.73418,1840.53671 2220.48861,1783.66582 2192.05316,1669.92405 L2019.25316,1000.59747 C2017.06582,991.848101 2017.06582,989.660759 2012.69114,989.660759 C2008.31646,989.660759 2008.31646,991.848101 2006.12911,1000.59747 L1833.32911,1669.92405 C1804.89367,1783.66582 1743.6481,1840.53671 1625.53165,1840.53671 L1566.47342,1840.53671 C1433.04557,1840.53671 1398.0481,1788.04051 1371.8,1656.8 L1172.7519,650.622785 C1172.7519,648.435443 1172.7519,646.248101 1172.7519,644.060759 C1172.7519,620 1192.43797,600.313924 1216.49873,600.313924 L1428.67089,600.313924 C1450.5443,600.313924 1465.8557,620 1468.04304,639.686076 L1605.84557,1564.93165 C1608.03291,1584.61772 1612.40759,1595.55443 1616.78228,1595.55443 C1621.15696,1595.55443 1627.71899,1586.80506 1632.09367,1564.93165 L1813.64304,829.98481 C1835.51646,744.678481 1861.76456,735.929114 1936.13418,735.929114 L2089.2481,735.929114 C2163.61772,735.929114 2189.86582,744.678481 2211.73924,829.98481 L2393.28861,1564.93165 C2397.66329,1586.80506 2404.22532,1595.55443 2408.6,1595.55443 C2412.97468,1595.55443 2417.34937,1584.61772 2419.53671,1564.93165 L2557.33924,639.686076 C2559.52658,620 2574.83797,600.313924 2596.71139,600.313924 L2808.88354,600.313924 C2832.9443,600.313924 2852.63038,620 2852.63038,644.060759 Z" id="Sw" fill="#1368B3"></path>
<g id="moon-o" transform="translate(2932.164557, 596.000000) rotate(-183.000000) translate(-2932.164557, -596.000000) translate(2415.708861, 26.379747)" fill="#D8D8D8" fill-rule="nonzero">
<path d="M1025.31646,927.371333 C992.796119,932.841177 959.292071,935.576099 925.845888,935.576099 C590.40035,935.576099 318.259524,661.909325 318.259524,324.582876 C318.259524,209.134252 351.705707,96.3623597 412.290747,0 C171.802278,71.8062511 0,293.684076 0,557.342199 C0,878.317305 259.46831,1139.24051 578.65368,1139.24051 C753.17563,1139.24051 916.818891,1059.22949 1025.31646,927.371333 Z" id="Shape"></path>
</g>
</g>
</g>
</svg>

16
src/assets/icons/service_mesh.svg Executable file
View File

@ -0,0 +1,16 @@
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/epic</title><path d="M5.156 4l-.811 2h7.31l-.811-2H5.156zM4.55 2h6.9c.368 0 .702.235.85.6l1.622 4c.205.505-.009 1.095-.478 1.316a.87.87 0 0 1-.371.084H2.927C2.415 8 2 7.552 2 7c0-.138.026-.274.078-.4l1.622-4c.148-.365.481-.6.85-.6zM3 9h10a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2zm0 3h10a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2z" id="a"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

28
src/components/DateCalendar.vue
View File

@ -443,11 +443,11 @@ limitations under the License. -->
}); });
</script> </script>
<style scoped> <style lang="scss" scoped>
.calendar { .calendar {
float: left; float: left;
user-select: none; user-select: none;
color: #3d444f; color: $font-color;
} }
.calendar + .calendar { .calendar + .calendar {
@ -479,7 +479,7 @@ limitations under the License. -->
.calendar-head .calendar-year-select, .calendar-head .calendar-year-select,
.calendar-head .calendar-month-select { .calendar-head .calendar-month-select {
font-size: 12px; font-size: $font-size-smaller;
padding: 0 2px; padding: 0 2px;
position: relative; position: relative;
} }
@ -524,8 +524,8 @@ limitations under the License. -->
float: left; float: left;
} }
.calendar-week:before, .calendar-week::before,
.calendar-date:before { .calendar-date::before {
content: ""; content: "";
display: inline-block; display: inline-block;
height: 100%; height: 100%;
@ -539,27 +539,27 @@ limitations under the License. -->
} }
.calendar-date-out { .calendar-date-out {
color: #ccc; color: $disabled-color;
} }
.calendar-date:hover, .calendar-date:hover,
.calendar-date-on { .calendar-date-on {
color: #3f97e3; color: $font-color;
background-color: #f8f8f8; background-color: $theme-background;
} }
.calendar-date-selected, .calendar-date-selected,
.calendar-date-selected:hover { .calendar-date-selected:hover {
color: #fff; color: $text-color;
font-weight: bold; font-weight: bold;
border-radius: 14px; border-radius: 14px;
background: #3f97e3; background: $active-background;
} }
.calendar-date-disabled { .calendar-date-disabled {
cursor: not-allowed !important; cursor: not-allowed !important;
color: #ccc !important; color: $disabled-color !important;
background: #fff !important; background: $theme-background !important;
} }
.calendar-foot { .calendar-foot {
@ -591,7 +591,7 @@ limitations under the License. -->
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
background: #fff; background: $theme-background;
left: 0; left: 0;
top: 0; top: 0;
} }
@ -626,7 +626,7 @@ limitations under the License. -->
margin-top: -30px; margin-top: -30px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
background: #fff; background: $theme-background;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }

8
src/components/Graph.vue
View File

@ -232,7 +232,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.no-data { .no-data {
font-size: 12px; font-size: $font-size-smaller;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
display: -webkit-box; display: -webkit-box;
@ -254,9 +254,9 @@ limitations under the License. -->
z-index: 9999999; z-index: 9999999;
box-shadow: #ddd 1px 2px 10px; box-shadow: #ddd 1px 2px 10px;
transition: all cubic-bezier(0.075, 0.82, 0.165, 1) linear; transition: all cubic-bezier(0.075, 0.82, 0.165, 1) linear;
background-color: rgb(255, 255, 255); background-color: rgb(255 255 255);
border-radius: 4px; border-radius: 4px;
color: rgb(51, 51, 51); color: rgb(51 51 51);
padding: 5px; padding: 5px;
} }
@ -266,7 +266,7 @@ limitations under the License. -->
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

14
src/components/SelectSingle.vue
View File

@ -86,17 +86,17 @@ limitations under the License. -->
position: relative; position: relative;
justify-content: space-between; justify-content: space-between;
border: 1px solid #ddd; border: 1px solid #ddd;
background: #fff; background: $theme-background;
border-radius: 3px; border-radius: 3px;
color: #000; color: #000;
font-size: 12px; font-size: $font-size-smaller;
height: 24px; height: 24px;
.selected { .selected {
padding: 0 3px; padding: 0 3px;
border-radius: 3px; border-radius: 3px;
margin: 3px; margin: 3px;
color: #409eff; color: $active-color;
background-color: #fafafa; background-color: #fafafa;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
text-align: center; text-align: center;
@ -126,7 +126,7 @@ limitations under the License. -->
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 0; top: 0;
font-size: 14px; font-size: $font-size-normal;
display: none; display: none;
color: #aaa; color: #aaa;
cursor: pointer; cursor: pointer;
@ -137,8 +137,8 @@ limitations under the License. -->
position: absolute; position: absolute;
top: 26px; top: 26px;
left: 0; left: 0;
background: #fff; background-color: $theme-background;
box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2); box-shadow: 0 1px 6px rgb(99 99 99 / 20%);
border: 1px solid #ddd; border: 1px solid #ddd;
width: 100%; width: 100%;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
@ -164,7 +164,7 @@ limitations under the License. -->
padding: 7px 15px; padding: 7px 15px;
&.select-disabled { &.select-disabled {
color: #409eff; color: $active-color;
cursor: not-allowed; cursor: not-allowed;
} }

87
src/components/Tags.vue Normal file
View File

@ -0,0 +1,87 @@
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<span :class="vertical ? 'vertical' : 'horizontal'" v-for="tag in dynamicTags" :key="tag">
<el-tag closable :disable-transitions="false" @close="handleClose(tag)">
{{ tag }}
</el-tag>
</span>
<el-input
v-if="inputVisible"
ref="InputRef"
v-model="inputValue"
class="ml-5 input-name"
size="small"
@keyup.enter="handleInputConfirm"
@blur="handleInputConfirm"
/>
<el-button v-else size="small" @click="showInput"> + {{ text }} </el-button>
</template>
<script lang="ts" setup>
import { nextTick, ref } from "vue";
import type { PropType } from "vue";
import { ElInput } from "element-plus";
/*global defineProps, defineEmits*/
const emits = defineEmits(["change"]);
const props = defineProps({
tags: {
type: Array as PropType<string[]>,
default: () => [],
},
text: { type: String, default: "" },
vertical: { type: Boolean, default: false },
});
const inputValue = ref("");
const dynamicTags = ref<string[]>(props.tags || []);
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof ElInput>>();
const handleClose = (tag: string) => {
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};
const showInput = () => {
inputVisible.value = true;
nextTick(() => {
InputRef.value!.input!.focus();
});
};
const handleInputConfirm = () => {
if (inputValue.value) {
dynamicTags.value.push(inputValue.value);
}
inputVisible.value = false;
inputValue.value = "";
emits("change", dynamicTags.value);
};
</script>
<style lang="scss" scoped>
.input-name {
width: 300px;
}
.vertical {
display: block;
margin-bottom: 5px;
}
.horizontal {
display: inline-block;
margin-right: 5px;
}
</style>

29
src/components/TimePicker.vue
View File

@ -302,7 +302,7 @@ limitations under the License. -->
transform: scaleY(0.8); transform: scaleY(0.8);
} }
to { 100% {
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
} }
@ -314,7 +314,7 @@ limitations under the License. -->
transform: scaleY(1); transform: scaleY(1);
} }
to { 100% {
opacity: 0; opacity: 0;
transform: scaleY(0.8); transform: scaleY(0.8);
} }
@ -343,7 +343,7 @@ limitations under the License. -->
cursor: pointer; cursor: pointer;
} }
.datepicker-close:before { .datepicker-close::before {
display: block; display: block;
content: ""; content: "";
position: absolute; position: absolute;
@ -354,14 +354,14 @@ limitations under the License. -->
margin-left: -8px; margin-left: -8px;
margin-top: -8px; margin-top: -8px;
text-align: center; text-align: center;
color: #fff; color: $text-color;
border-radius: 50%; border-radius: 50%;
background: #ccc background: $disabled-color
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==") url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==")
no-repeat 50% 50%; no-repeat 50% 50%;
} }
.datepicker__clearable:hover:before { .datepicker__clearable:hover::before {
display: none; display: none;
} }
@ -369,7 +369,7 @@ limitations under the License. -->
display: block; display: block;
} }
.datepicker-close:hover:before { .datepicker-close:hover::before {
background-color: #afafaf; background-color: #afafaf;
} }
@ -385,7 +385,7 @@ limitations under the License. -->
padding: 0 5px; padding: 0 5px;
width: 100%; width: 100%;
user-select: none; user-select: none;
font-family: "Monaco"; font-family: Monaco;
letter-spacing: -0.7px; letter-spacing: -0.7px;
} }
@ -399,7 +399,6 @@ limitations under the License. -->
cursor: not-allowed; cursor: not-allowed;
background-color: #ebebe4; background-color: #ebebe4;
border-color: #e5e5e5; border-color: #e5e5e5;
-webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
@ -409,9 +408,9 @@ limitations under the License. -->
transition: all 200ms ease; transition: all 200ms ease;
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
font-size: 12px; font-size: $font-size-smaller;
background: #fff; background: $theme-background;
box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2); box-shadow: 0 1px 6px rgb(99 99 99 / 20%);
margin-top: 2px; margin-top: 2px;
outline: 0; outline: 0;
padding: 5px; padding: 5px;
@ -457,7 +456,7 @@ limitations under the License. -->
border: 0; border: 0;
background-color: transparent; background-color: transparent;
line-height: 34px; line-height: 34px;
font-size: 12px; font-size: $font-size-smaller;
color: #666; color: #666;
text-align: left; text-align: left;
outline: none; outline: none;
@ -497,7 +496,7 @@ limitations under the License. -->
.datepicker-btn { .datepicker-btn {
padding: 5px 10px; padding: 5px 10px;
background: #3f97e3; background: #3f97e3;
color: #fff; color: $text-color;
border-radius: 2px; border-radius: 2px;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
@ -525,7 +524,7 @@ limitations under the License. -->
cursor: pointer; cursor: pointer;
margin: 10px 0 0 5px; margin: 10px 0 0 5px;
padding: 5px 15px; padding: 5px 15px;
color: #ffffff; color: $text-color;
} }
.datepicker__buttons .datepicker__button-select { .datepicker__buttons .datepicker__button-select {

2
src/components/index.ts
View File

@ -21,6 +21,7 @@ import Selector from "./Selector.vue";
import Graph from "./Graph.vue"; import Graph from "./Graph.vue";
import Radio from "./Radio.vue"; import Radio from "./Radio.vue";
import SelectSingle from "./SelectSingle.vue"; import SelectSingle from "./SelectSingle.vue";
import Tags from "./Tags.vue";
import VueGridLayout from "vue-grid-layout"; import VueGridLayout from "vue-grid-layout";
const components: Indexable = { const components: Indexable = {
@ -31,6 +32,7 @@ const components: Indexable = {
Graph, Graph,
Radio, Radio,
SelectSingle, SelectSingle,
Tags,
}; };
const componentsName: string[] = Object.keys(components); const componentsName: string[] = Object.keys(components);

23
src/graphql/fragments/app.ts
View File

@ -26,3 +26,26 @@ export const OAPTimeInfo = {
export const OAPVersion = { export const OAPVersion = {
query: `version { version }`, query: `version { version }`,
}; };
export const MenuItems = {
query: `
getMenuItems {
title
icon
layer
activate
description
documentLink
i18nKey
subItems {
title
icon
layer
activate
description
documentLink
i18nKey
}
}
`,
};

4
src/graphql/query/app.ts
View File

@ -14,8 +14,10 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { OAPTimeInfo, OAPVersion } from "../fragments/app"; import { OAPTimeInfo, OAPVersion, MenuItems } from "../fragments/app";
export const queryOAPTimeInfo = `query queryOAPTimeInfo {${OAPTimeInfo.query}}`; export const queryOAPTimeInfo = `query queryOAPTimeInfo {${OAPTimeInfo.query}}`;
export const queryOAPVersion = `query ${OAPVersion.query}`; export const queryOAPVersion = `query ${OAPVersion.query}`;
export const queryMenuItems = `query menuItems {${MenuItems.query}}`;

91
src/hooks/useExpressionsProcessor.ts
View File

@ -15,13 +15,14 @@
* limitations under the License. * limitations under the License.
*/ */
import { RespFields } from "./data"; import { RespFields } from "./data";
import { ExpressionResultType } from "@/views/dashboard/data"; import { EntityType, ExpressionResultType } from "@/views/dashboard/data";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import { useSelectorStore } from "@/store/modules/selectors"; import { useSelectorStore } from "@/store/modules/selectors";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
import type { MetricConfigOpt } from "@/types/dashboard"; import type { MetricConfigOpt } from "@/types/dashboard";
import type { Instance, Endpoint, Service } from "@/types/selector"; import type { Instance, Endpoint, Service } from "@/types/selector";
import type { Node, Call } from "@/types/topology";
export async function useExpressionsQueryProcessor(config: Indexable) { export async function useExpressionsQueryProcessor(config: Indexable) {
function expressionsGraphqlPods() { function expressionsGraphqlPods() {
@ -113,7 +114,8 @@ export async function useExpressionsQueryProcessor(config: Indexable) {
if (!obj.error) { if (!obj.error) {
if (type === ExpressionResultType.TIME_SERIES_VALUES) { if (type === ExpressionResultType.TIME_SERIES_VALUES) {
if (results.length === 1) { if (results.length === 1) {
source[c.label || name] = results[0].values.map((d: { value: unknown }) => d.value) || []; const label = results[0].metric && results[0].metric.labels[0] && results[0].metric.labels[0].value;
source[c.label || label || name] = results[0].values.map((d: { value: unknown }) => d.value) || [];
} else { } else {
const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, "")); const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
for (const item of results) { for (const item of results) {
@ -311,3 +313,88 @@ export async function useExpressionsQueryPodsMetrics(
return expressionParams; return expressionParams;
} }
export function useQueryTopologyExpressionsProcessor(metrics: string[], instances: (Call | Node)[]) {
const appStore = useAppStoreWithOut();
const dashboardStore = useDashboardStore();
function getExpressionQuery() {
const conditions: { [key: string]: unknown } = {
duration: appStore.durationTime,
};
const variables: string[] = [`$duration: Duration!`];
const fragmentList = instances.map((d: any, index: number) => {
let serviceName;
let destServiceName;
let endpointName;
let serviceInstanceName;
let destServiceInstanceName;
let destEndpointName;
if (d.sourceObj && d.targetObj) {
// instances = Calls
serviceName = d.sourceObj.serviceName || d.sourceObj.name;
destServiceName = d.targetObj.serviceName || d.targetObj.name;
if (EntityType[4].value === dashboardStore.entity) {
serviceInstanceName = d.sourceObj.name;
destServiceInstanceName = d.targetObj.name;
}
if (EntityType[2].value === dashboardStore.entity) {
endpointName = d.sourceObj.name;
destEndpointName = d.targetObj.name;
}
} else {
// instances = Nodes
serviceName = d.serviceName || d.name;
if (EntityType[4].value === dashboardStore.entity) {
serviceInstanceName = d.name;
}
if (EntityType[2].value === dashboardStore.entity) {
endpointName = d.name;
}
}
const entity = {
serviceName,
normal: true,
serviceInstanceName,
endpointName,
destServiceName,
destNormal: destServiceName ? true : undefined,
destServiceInstanceName,
destEndpointName,
};
variables.push(`$entity${index}: Entity!`);
conditions[`entity${index}`] = entity;
const f = metrics.map((name: string, idx: number) => {
if (index === 0) {
variables.push(`$expression${idx}: String!`);
conditions[`expression${idx}`] = name;
}
return `expression${index}${idx}: execExpression(expression: $expression${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
});
return f;
});
const fragment = fragmentList.flat(1).join(" ");
const queryStr = `query queryData(${variables}) {${fragment}}`;
return { queryStr, conditions };
}
function handleExpressionValues(resp: { [key: string]: any }) {
const obj: any = {};
for (let idx = 0; idx < instances.length; idx++) {
for (let index = 0; index < metrics.length; index++) {
const k = "expression" + idx + index;
if (metrics[index]) {
if (!obj[metrics[index]]) {
obj[metrics[index]] = {
values: [],
};
}
obj[metrics[index]].values.push({ value: resp[k].results[0].values[0].value, id: instances[idx].id });
}
}
}
return obj;
}
return { getExpressionQuery, handleExpressionValues };
}

15
src/layout/components/NavBar.vue
View File

@ -14,16 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="nav-bar flex-h"> <div class="nav-bar flex-h">
<div class="title flex-h"> <div class="title">{{ route.name === "ViewWidget" ? "" : appStore.pageTitle || pageName }}</div>
<el-breadcrumb separator=">" v-if="pathNames.length">
<el-breadcrumb-item v-for="(names, index) in pathNames" :key="index">
<a v-for="(item, i) in names" :href="item.path" :key="i">
{{ route.name === "ViewWidget" ? "" : item.name }}
</a>
</el-breadcrumb-item>
</el-breadcrumb>
<span v-else>{{ pageName && t(pageName) }}</span>
</div>
<div class="app-config"> <div class="app-config">
<span class="red" v-show="timeRange">{{ t("timeTips") }}</span> <span class="red" v-show="timeRange">{{ t("timeTips") }}</span>
<TimePicker <TimePicker
@ -160,7 +151,7 @@ limitations under the License. -->
background-color: #fafbfc; background-color: #fafbfc;
border-bottom: 1px solid #dfe4e8; border-bottom: 1px solid #dfe4e8;
color: #222; color: #222;
font-size: 12px; font-size: $font-size-smaller;
} }
.nav-bar.dark { .nav-bar.dark {
@ -170,7 +161,7 @@ limitations under the License. -->
} }
.title { .title {
font-size: 14px; font-size: $font-size-normal;
font-weight: 500; font-weight: 500;
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;

36
src/layout/components/SideBar.vue
View File

@ -36,14 +36,16 @@ limitations under the License. -->
<Icon size="lg" :iconName="menu.meta.icon" /> <Icon size="lg" :iconName="menu.meta.icon" />
</el-icon> </el-icon>
<span class="title" :class="isCollapse ? 'collapse' : ''"> <span class="title" :class="isCollapse ? 'collapse' : ''">
{{ t(menu.meta.title) }} {{ te(menu.meta.i18nKey) ? t(menu.meta.i18nKey) : menu.meta.title }}
</span> </span>
</router-link> </router-link>
</template> </template>
<el-menu-item-group> <el-menu-item-group>
<el-menu-item v-for="(m, idx) in filterMenus(menu.children)" :index="m.name" :key="idx"> <el-menu-item v-for="(m, idx) in filterMenus(menu.children)" :index="m.name" :key="idx">
<router-link class="items" :to="m.path"> <router-link class="items" :to="m.path">
<span class="title">{{ m.meta && t(m.meta.title) }}</span> <span class="title">
{{ m.meta && (te(m.meta.i18nKey) ? t(m.meta.i18nKey) : m.meta.title) }}
</span>
</router-link> </router-link>
</el-menu-item> </el-menu-item>
</el-menu-item-group> </el-menu-item-group>
@ -56,7 +58,9 @@ limitations under the License. -->
</el-icon> </el-icon>
<template #title> <template #title>
<router-link class="items menu-title" :to="menu.children[0].path"> <router-link class="items menu-title" :to="menu.children[0].path">
<span class="title">{{ t(menu.meta.title) }}</span> <span class="title">
{{ te(menu.meta.i18nKey) ? t(menu.meta.i18nKey) : menu.meta.title }}
</span>
</router-link> </router-link>
</template> </template>
</el-menu-item> </el-menu-item>
@ -67,7 +71,7 @@ limitations under the License. -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref, watch } from "vue";
import type { RouteRecordRaw } from "vue-router"; import type { RouteRecordRaw } from "vue-router";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
@ -75,11 +79,14 @@ limitations under the License. -->
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
/*global Recordable*/ /*global Recordable*/
const { t, te } = useI18n();
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
const { t } = useI18n(); const router = useRouter();
const name = ref<string>(String(useRouter().currentRoute.value.name)); const name = ref<string>(String(router.currentRoute.value.name));
const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") ? ref("light") : ref("black"); const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") ? ref("light") : ref("black");
const routes = ref<RouteRecordRaw[] | any>(useRouter().options.routes); const routes = ref<RouteRecordRaw[] | any>(
(router.options.routes || []).filter((d: any) => d.meta && d.meta.activate),
);
const route = useRoute(); const route = useRoute();
const isCollapse = ref(true); const isCollapse = ref(true);
const showMenu = ref(true); const showMenu = ref(true);
@ -97,7 +104,7 @@ limitations under the License. -->
theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name)) ? "light" : "black"; theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name)) ? "light" : "black";
}; };
const filterMenus = (menus: Recordable[]) => { const filterMenus = (menus: Recordable[]) => {
return menus.filter((d) => d.meta && !d.meta.notShow); return menus.filter((d) => d.meta && !d.meta.notShow && d.meta.activate);
}; };
function setCollapse() { function setCollapse() {
open.value = true; open.value = true;
@ -112,6 +119,13 @@ limitations under the License. -->
isCollapse.value = true; isCollapse.value = true;
open.value = false; open.value = false;
} }
watch(
() => route.name,
() => {
name.value = String(route.name);
},
);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -132,12 +146,12 @@ limitations under the License. -->
.el-menu-vertical:not(.el-menu--collapse) { .el-menu-vertical:not(.el-menu--collapse) {
width: 220px; width: 220px;
font-size: 14px; font-size: $font-size-normal;
} }
.logo-icon-collapse { .logo-icon-collapse {
width: 65px; width: 65px;
margin: 5px 0 10px 0; margin: 5px 0 10px;
text-align: center; text-align: center;
} }
@ -169,7 +183,7 @@ limitations under the License. -->
.version { .version {
color: #eee; color: #eee;
font-size: 12px; font-size: $font-size-smaller;
cursor: pointer; cursor: pointer;
padding-left: 23px; padding-left: 23px;
margin-bottom: 10px; margin-bottom: 10px;

43
src/locales/lang/en.ts
View File

@ -14,15 +14,13 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import enTitles from "./menus/en";
const msg = { const msg = {
general: "General Service", ...enTitles,
services: "Services", services: "Services",
service: "Service", service: "Service",
traces: "Traces", traces: "Traces",
metrics: "Metrics", metrics: "Metrics",
serviceMesh: "Service Mesh",
infrastructure: "Infrastructure",
virtualMachine: "Virtual Machine",
dashboardNew: "New Dashboard", dashboardNew: "New Dashboard",
dashboardList: "Dashboard List", dashboardList: "Dashboard List",
logs: "Logs", logs: "Logs",
@ -35,12 +33,9 @@ const msg = {
mySQL: "MySQL/MariaDB", mySQL: "MySQL/MariaDB",
serviceName: "Service Name", serviceName: "Service Name",
technologies: "Technologies", technologies: "Technologies",
generalServicePanel: "General Service Panel",
health: "Health", health: "Health",
groupName: "Group Name", groupName: "Group Name",
topologies: "Topologies", topologies: "Topologies",
dataPanel: "Data Plane",
controlPanel: "Control Plane",
eventList: "Event List", eventList: "Event List",
newDashboard: "Create a new dashboard", newDashboard: "Create a new dashboard",
dashboardEdit: "Edit the dashboard", dashboardEdit: "Edit the dashboard",
@ -117,20 +112,9 @@ const msg = {
rename: "Rename", rename: "Rename",
deleteTitle: "Are you sure you want to delete this?", deleteTitle: "Are you sure you want to delete this?",
rootTitle: "Are you sure you want to set this?", rootTitle: "Are you sure you want to set this?",
selfObservability: "Self Observability",
satellite: "Satellite",
skyWalkingServer: "SkyWalking Server",
functions: "Functions",
browser: "Browser",
linux: "Linux",
editWarning: "You are entering edit mode", editWarning: "You are entering edit mode",
viewWarning: "You are entering view mode", viewWarning: "You are entering view mode",
virtualDatabase: "Virtual Database",
virtualCache: "Virtual Cache",
reloadDashboards: "Reload dashboards", reloadDashboards: "Reload dashboards",
kubernetesService: "Service",
kubernetesCluster: "Cluster",
kubernetes: "Kubernetes",
textUrl: "Text Hyperlink", textUrl: "Text Hyperlink",
textAlign: "Text Align", textAlign: "Text Align",
metricLabel: "Metric Label", metricLabel: "Metric Label",
@ -156,9 +140,7 @@ const msg = {
enableAssociate: "Enable association", enableAssociate: "Enable association",
text: "Text", text: "Text",
query: "Query", query: "Query",
postgreSQL: "PostgreSQL",
endpointTips: "The table shows up to 20 pieces of endpoints.", endpointTips: "The table shows up to 20 pieces of endpoints.",
apisix: "APISIX",
viewTrace: "View Related Traces", viewTrace: "View Related Traces",
relatedTraceOptions: "Related Trace Options", relatedTraceOptions: "Related Trace Options",
setLatencyDuration: "Latency Related Metrics", setLatencyDuration: "Latency Related Metrics",
@ -282,7 +264,6 @@ const msg = {
aggregation: "Calculation", aggregation: "Calculation",
unit: "Unit", unit: "Unit",
labelsIndex: "Label Subscript", labelsIndex: "Label Subscript",
group: "Service Group",
browserView: "Browser", browserView: "Browser",
sortOrder: "Sort Order", sortOrder: "Sort Order",
chartType: "Chart Type", chartType: "Chart Type",
@ -377,18 +358,6 @@ const msg = {
noticeTag: "Please press Enter after inputting a tag(key=value).", noticeTag: "Please press Enter after inputting a tag(key=value).",
conditionNotice: "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).", conditionNotice: "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
language: "Language", language: "Language",
gateway: "Gateway",
virtualMQ: "Virtual MQ",
AWSCloud: "AWS Cloud",
AWSCloudEKS: "EKS",
AWSCloudS3: "S3",
AWSCloudDynamoDB: "DynamoDB",
AWSGateway: "AWS API Gateway",
APIGateway: "API Gateway",
redis: "Redis",
elasticsearch: "Elasticsearch",
mq: "MQ",
rabbitMQ: "RabbitMQ",
save: "Save", save: "Save",
editStrategy: "Edit Policies", editStrategy: "Edit Policies",
policyList: "Policy List", policyList: "Policy List",
@ -405,5 +374,13 @@ const msg = {
detailLabel: "Detail Label", detailLabel: "Detail Label",
summary: "Summary", summary: "Summary",
detail: "Detail", detail: "Detail",
marketplace: "Marketplace",
menus: "Menus",
saveReload: "Save and reload the page",
document: "Documentation",
metricMode: "Metric Mode",
addExpressions: "Add Expressions",
expressions: "Expression",
unhealthyExpression: "Unhealthy Expression",
}; };
export default msg; export default msg;

42
src/locales/lang/es.ts
View File

@ -14,15 +14,14 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import esTitles from "./menus/es";
const msg = { const msg = {
...esTitles,
general: "Servicio General", general: "Servicio General",
services: "Servicios", services: "Servicios",
service: "Servicio", service: "Servicio",
traces: "Trazas", traces: "Trazas",
metrics: "Métricas", metrics: "Métricas",
serviceMesh: "Malla de Servicios",
infrastructure: "Infraestructura",
virtualMachine: "Máquina Virtual",
dashboardNew: "Nuevo Panel", dashboardNew: "Nuevo Panel",
dashboardList: "Listado Paneles", dashboardList: "Listado Paneles",
logs: "Logs", logs: "Logs",
@ -35,12 +34,9 @@ const msg = {
mySQL: "MySQL/MariaDB", mySQL: "MySQL/MariaDB",
serviceName: "Nombre Servicio", serviceName: "Nombre Servicio",
technologies: "Tecnologías", technologies: "Tecnologías",
generalServicePanel: "Panel Servicio General",
health: "Salud", health: "Salud",
groupName: "Nombre Grupo", groupName: "Nombre Grupo",
topologies: "Topologías", topologies: "Topologías",
dataPanel: "Plano de Datos",
controlPanel: "Plano de Control",
eventList: "Listado Eventos", eventList: "Listado Eventos",
newDashboard: "Crear panel nuevo", newDashboard: "Crear panel nuevo",
dashboardEdit: "Editar el panel", dashboardEdit: "Editar el panel",
@ -117,20 +113,9 @@ const msg = {
rename: "Renombrar", rename: "Renombrar",
deleteTitle: "¿Está seguro que quiere eliminarlo?", deleteTitle: "¿Está seguro que quiere eliminarlo?",
rootTitle: "¿Está seguro que quiere establecerlo?", rootTitle: "¿Está seguro que quiere establecerlo?",
selfObservability: "Autoobservabilidad",
satellite: "Satéllite",
skyWalkingServer: "Servidor SkyWalking",
functions: "Funciones",
browser: "Navegador",
linux: "Linux",
editWarning: "Estás entrando en modo edición", editWarning: "Estás entrando en modo edición",
viewWarning: "Estás entrando en modo visualización", viewWarning: "Estás entrando en modo visualización",
virtualDatabase: "Base de Datos Virtual",
virtualCache: "Caché virtual",
reloadDashboards: "Recargar Panel", reloadDashboards: "Recargar Panel",
kubernetesService: "Servicio",
kubernetesCluster: "Cluster",
kubernetes: "Kubernetes",
textUrl: "Hipervínculo de Texto", textUrl: "Hipervínculo de Texto",
textAlign: "Alineación de Texto", textAlign: "Alineación de Texto",
metricLabel: "Etiqueta de Métrica", metricLabel: "Etiqueta de Métrica",
@ -154,9 +139,7 @@ const msg = {
"El nombre sólo admite chino e inglés, líneas horizontales y subrayado, y la longitud del nombre no excederá de 300 caracteres", "El nombre sólo admite chino e inglés, líneas horizontales y subrayado, y la longitud del nombre no excederá de 300 caracteres",
enableAssociate: "Activar asociación", enableAssociate: "Activar asociación",
query: "Consulta", query: "Consulta",
postgreSQL: "PostgreSQL",
endpointTips: "Aquí, la tabla muestra hasta 20 punto final.", endpointTips: "Aquí, la tabla muestra hasta 20 punto final.",
apisix: "APISIX",
queryOrder: "Consulta por duración", queryOrder: "Consulta por duración",
setOrder: "Orden de consulta", setOrder: "Orden de consulta",
latency: "Retraso", latency: "Retraso",
@ -280,7 +263,6 @@ const msg = {
aggregation: "Cálculo", aggregation: "Cálculo",
unit: "Unidad", unit: "Unidad",
labelsIndex: "Subíndice Etiqueta", labelsIndex: "Subíndice Etiqueta",
group: "Grupo Servicio",
browserView: "Navegador", browserView: "Navegador",
sortOrder: "Orden de clasificación", sortOrder: "Orden de clasificación",
chartType: "Tipo Gráfico", chartType: "Tipo Gráfico",
@ -375,18 +357,6 @@ const msg = {
conditionNotice: conditionNotice:
"Aviso: Por favor presione Intro después de introducir una clave de contenido, excluir clave de contenido(clave=valor).", "Aviso: Por favor presione Intro después de introducir una clave de contenido, excluir clave de contenido(clave=valor).",
language: "Lenguaje", language: "Lenguaje",
gateway: "Puerta",
virtualMQ: "MQ virtual",
AWSCloud: "AWS Cloud",
AWSCloudEKS: "EKS",
AWSCloudS3: "S3",
AWSCloudDynamoDB: "DynamoDB",
AWSGateway: "AWS API Gateway",
APIGateway: "API Gateway",
redis: "Redis",
elasticsearch: "Elasticsearch",
mq: "MQ",
rabbitMQ: "RabbitMQ",
save: "Salvar", save: "Salvar",
editStrategy: "Estrategia editorial", editStrategy: "Estrategia editorial",
policyList: "Lista de políticas", policyList: "Lista de políticas",
@ -404,5 +374,13 @@ const msg = {
detailLabel: "Detail Label", detailLabel: "Detail Label",
summary: "Summary", summary: "Summary",
detail: "Detail", detail: "Detail",
marketplace: "Marketplace",
menus: "Menus",
saveReload: "Save and reload the page",
document: "Documentation",
metricMode: "Metric Mode",
addExpressions: "Add Expressions",
expressions: "Expression",
unhealthyExpression: "Unhealthy Expression",
}; };
export default msg; export default msg;

124
src/locales/lang/menus/en.ts Normal file
View File

@ -0,0 +1,124 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const titles = {
// General Service
general_service: "General Service",
general_service_desc:
"Observe services and relative direct dependencies through telemetry data collected from SkyWalking Agents.",
general_service_services: "Services",
general_service_services_desc: "Observe services through telemetry data collected from SkyWalking Agent.",
general_service_virtual_database: "Visual Database",
general_service_virtual_database_desc:
"Observe the virtual databases which are conjectured by language agents through various plugins.",
general_service_virtual_cache: "Visual Cache",
general_service_virtual_cache_desc:
"Observe the virtual cache servers which are conjectured by language agents through various plugins.",
general_service_virtual_mq: "Virtual MQ",
general_service_virtual_mq_desc:
"Observe the virtual message queue servers which are conjectured by language agents through various plugins.",
// Service Mesh
service_mesh: "Service Mesh",
service_mesh_desc:
"Service Mesh(Istio) addresses the challenges developers and operators face with a distributed or microservices architecture.",
service_mesh_service: "Services",
service_mesh_service_desc:
"Observe Service Mesh through telemetry data collected from Envoy Access Log Service (ALS).",
service_mesh_control_plane: "Control Plane",
service_mesh_control_plane_desc: "Provide monitoring of the behavior of Istio through its self-monitoring metrics.",
service_mesh_data_plane: "Data Plane",
service_mesh_data_plane_desc: "Observe Envoy Proxy through Envoy Metrics Service.",
// Functions
functions: "Functions",
functions_desc:
"FaaS (Function-as-a-Service) is a type of cloud-computing service that allows you to execute code in response to events without the complex infrastructure typically associated with building and launching microservices applications.",
functions_openfunction: "OpenFunction",
functions_openfunction_desc:
"OpenFunction as a FaaS platform, provides out-of-box observability with SkyWalking integration.",
// Kubernetes
kubernetes: "Kubernetes",
kubernetes_desc:
"Kubernetes is an open-source container orchestration system for automating software deployment, scaling, and management.",
kubernetes_cluster: "Cluster",
kubernetes_cluster_desc: "Provide monitoring of the status and resources of the K8S Cluster.",
kubernetes_service: "Service",
kubernetes_service_desc: "Observe Service status and resources from Kubernetes.",
// Infrastructure
infrastructure: "Infrastructure",
infrastructure_desc:
"Operation Systems act as the infrastructure of the whole IT system. Its observabilities provide the fundamentals for all distributed and modern complex systems running.",
infrastructure_linux: "Linux",
infrastructure_linux_desc: "Provide Linux Operation System(OS) monitoring.",
infrastructure_windows: "Windows",
infrastructure_windows_desc: "Provide Windows Operation System(OS) monitoring.",
// AWS Cloud
aws_cloud: "AWS Cloud",
aws_cloud_desc: "Amazon Web Services(AWS) offers reliable, scalable, and inexpensive cloud computing services.",
aws_cloud_eks: "EKS",
aws_cloud_eks_desc: "Provide AWS Cloud EKS monitoring through AWS Container Insights Receiver.",
aws_cloud_s3: "S3",
aws_cloud_s3_desc: "Provide AWS Cloud S3 monitoring through AWS FireHose Receiver.",
aws_cloud_dynamodb: "DynamoDB",
aws_cloud_dynamodb_desc: "Provide DynamoDB monitoring through AWS FireHose Receiver.",
aws_cloud_api_gateway: "API Gateway",
aws_cloud_api_gateway_desc: "Provide AWS Cloud API Gateway monitoring through AWS FireHose Receiver.",
// Browser
browser: "Browser",
browser_desc: "Provide Browser-Side monitoring of Web-App, Versions and Pages, through Apache SkyWalking Client JS.",
// Gateway
gateway: "Gateway",
gateway_desc:
"API gateway is an API management tool that sits between a client and a collection of backend services.",
gateway_apisix: "APISIX",
gateway_apisix_desc: "Provide APISIX monitoring through OpenTelemetry's Prometheus Receiver.",
gateway_aws_api_gateway: "AWS API Gateway",
gateway_aws_api_gateway_desc: "Provide AWS Cloud API Gateway monitoring through AWS FireHose Receiver.",
// Database
database: "Database",
database_desc:
"The database is the organized collection of structured information, or data, typically stored electronically in a computer system.",
database_mysql_mariadb: "MySQL/MariaDB",
database_mysql_mariadb_desc:
"Provide MySQL and MariaDB Server monitoring through OpenTelemetry's Prometheus Receiver.",
database_postgresql: "PostgreSQL",
database_postgresql_desc: "Provide PostgreSQL monitoring through OpenTelemetry's Prometheus Receiver.",
database_dynamodb: "DynamoDB",
database_dynamodb_desc: "Provide DynamoDB monitoring through Amazon CloudWatch.",
database_redis: "Redis",
database_redis_desc: "Provide Redis monitoring through OpenTelemetry's Prometheus Receiver.",
database_elasticsearch: "Elasticsearch",
database_elasticsearch_desc: "Provide Elasticsearch Server monitoring through OpenTelemetry's Prometheus Receiver.",
database_mongodb: "MongoDB",
database_mongodb_desc: "Provide MongoDB monitoring through OpenTelemetry's Prometheus Receiver.",
// Message Queue
mq: "Message Queue",
mq_desc:
"A message queue is a form of asynchronous service-to-service communication used in serverless and microservices architectures.",
mq_rabbitmq: "RabbitMQ",
mq_rabbitmq_desc: "Provide RabbitMQ monitoring through OpenTelemetry's Prometheus Receiver.",
// self observability
self_observability: "Self Observability",
self_observability_desc:
"Self Observability provides the observabilities for running components and servers from the SkyWalking ecosystem.",
self_observability_oap: "SkyWalking Server",
self_observability_oap_desc:
"The OAP backend cluster itself is a distributed streaming process system, this is the monitoring for the OAP backend itself.",
self_observability_satellite: "Satellite",
self_observability_satellite_desc:
"Satellite: an open-source agent designed for the cloud-native infrastructures, which provides a low-cost, high-efficient, and more secure way to collect telemetry data. It is the recommended load balancer for telemetry collecting.",
};
export default titles;

124
src/locales/lang/menus/es.ts Normal file
View File

@ -0,0 +1,124 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const titles = {
// General Service
general_service: "Servicio General",
general_service_desc:
"Observar el servicio y las dependencias relativamente directas a través de los datos de telemetría recopilados del agente skywalking.",
general_service_services: "Servicios",
general_service_services_desc: "Observe services through telemetry data collected from SkyWalking Agent.",
general_service_virtual_database: "Base de Datos Virtual",
general_service_virtual_database_desc:
"Observe the virtual databases which are conjectured by language agents through various plugins.",
general_service_virtual_cache: "Caché virtual",
general_service_virtual_cache_desc:
"Observe the virtual cache servers which are conjectured by language agents through various plugins.",
general_service_virtual_mq: "MQ virtual",
general_service_virtual_mq_desc:
"Observe the virtual message queue servers which are conjectured by language agents through various plugins.",
// Service Mesh
service_mesh: "Malla de Servicios",
service_mesh_desc:
"La red de servicios (istio) resuelve los desafíos que enfrentan los desarrolladores y operadores a través de una arquitectura distribuida o de microservicio.",
service_mesh_service: "Servicios",
service_mesh_service_desc:
"Observe Service Mesh through telemetry data collected from Envoy Access Log Service (ALS).",
service_mesh_control_plane: "Plano de Control",
service_mesh_control_plane_desc: "Provide monitoring of the behavior of Istio through its self-monitoring metrics.",
service_mesh_data_plane: "Plano de Datos",
service_mesh_data_plane_desc: "Observe Envoy Proxy through Envoy Metrics Service.",
// Functions
functions: "Funciones",
functions_desc:
"FaaS (Function-as-a-Service) is a type of cloud-computing service that allows you to execute code in response to events without the complex infrastructure typically associated with building and launching microservices applications.",
functions_openfunction: "OpenFunction",
functions_openfunction_desc:
"OpenFunction as a FaaS platform, provides out-of-box observability with SkyWalking integration.",
// Kubernetes
kubernetes: "Kubernetes",
kubernetes_desc:
"Kubernetes is an open-source container orchestration system for automating software deployment, scaling, and management.",
kubernetes_cluster: "Cluster",
kubernetes_cluster_desc: "Provide monitoring of the status and resources of the K8S Cluster.",
kubernetes_service: "Servicio",
kubernetes_service_desc: "Observe Service status and resources from Kubernetes.",
// Infrastructure
infrastructure: "Infraestructura",
infrastructure_desc:
"Operation Systems act as the infrastructure of the whole IT system. Its observabilities provide the fundamentals for all distributed and modern complex systems running.",
infrastructure_linux: "Linux",
infrastructure_linux_desc: "Provide Linux Operation System(OS) monitoring.",
infrastructure_windows: "Windows",
infrastructure_windows_desc: "Provide Windows Operation System(OS) monitoring.",
// AWS Cloud
aws_cloud: "AWS Cloud",
aws_cloud_desc: "Amazon Web Services(AWS) offers reliable, scalable, and inexpensive cloud computing services.",
aws_cloud_eks: "EKS",
aws_cloud_eks_desc: "Provide AWS Cloud EKS monitoring through AWS Container Insights Receiver.",
aws_cloud_s3: "S3",
aws_cloud_s3_desc: "Provide AWS Cloud S3 monitoring through AWS FireHose Receiver.",
aws_cloud_dynamodb: "DynamoDB",
aws_cloud_dynamodb_desc: "Provide DynamoDB monitoring through Amazon CloudWatch.",
aws_cloud_api_gateway: "API Gateway",
aws_cloud_api_gateway_desc: "Provide AWS Cloud API Gateway monitoring through AWS FireHose Receiver.",
// Browser
browser: "Navegador",
browser_desc: "Provide Browser-Side monitoring of Web-App, Versions and Pages, through Apache SkyWalking Client JS.",
// Gateway
gateway: "Puerta",
gateway_desc:
"API gateway is an API management tool that sits between a client and a collection of backend services.",
gateway_apisix: "APISIX",
gateway_apisix_desc: "Provide APISIX monitoring through OpenTelemetry's Prometheus Receiver.",
gateway_aws_api_gateway: "AWS API Gateway",
gateway_aws_api_gateway_desc: "Provide AWS Cloud API Gateway monitoring through AWS FireHose Receiver.",
// Database
database: "Base de Datos",
database_desc:
"The database is the organized collection of structured information, or data, typically stored electronically in a computer system.",
database_mysql_mariadb: "MySQL/MariaDB",
database_mysql_mariadb_desc:
"Provide MySQL and MariaDB Server monitoring through OpenTelemetry's Prometheus Receiver.",
database_postgresql: "PostgreSQL",
database_postgresql_desc: "Provide PostgreSQL monitoring through OpenTelemetry's Prometheus Receiver.",
database_dynamodb: "DynamoDB",
database_dynamodb_desc: "Provide DynamoDB monitoring through Amazon CloudWatch.",
database_redis: "Redis",
database_redis_desc: "Provide Redis monitoring through OpenTelemetry's Prometheus Receiver.",
database_elasticsearch: "Elasticsearch",
database_elasticsearch_desc: "Provide Elasticsearch Server monitoring through OpenTelemetry's Prometheus Receiver.",
database_mongodb: "MongoDB",
database_mongodb_desc: "Provide MongoDB monitoring through OpenTelemetry's Prometheus Receiver.",
// Message Queue
mq: "Message Queue",
mq_desc:
"A message queue is a form of asynchronous service-to-service communication used in serverless and microservices architectures.",
mq_rabbitmq: "RabbitMQ",
mq_rabbitmq_desc: "Provide RabbitMQ monitoring through OpenTelemetry's Prometheus Receiver.",
// self observability
self_observability: "Self Observability",
self_observability_desc:
"Self Observability provides the observabilities for running components and servers from the SkyWalking ecosystem.",
self_observability_oap: "SkyWalking Server",
self_observability_oap_desc:
"The OAP backend cluster itself is a distributed streaming process system, this is the monitoring for the OAP backend itself.",
self_observability_satellite: "Satellite",
self_observability_satellite_desc:
"Satellite: an open-source agent designed for the cloud-native infrastructures, which provides a low-cost, high-efficient, and more secure way to collect telemetry data. It is the recommended load balancer for telemetry collecting.",
};
export default titles;

109
src/locales/lang/menus/zh.ts Normal file
View File

@ -0,0 +1,109 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const titles = {
// General Service
general_service: "常规服务",
general_service_desc: "通过从SkyWalking代理收集的遥测数据来观察服务和相对直接的依赖关系。",
general_service_services: "服务",
general_service_services_desc: "通过SkyWalking Agent收集的遥测数据观察服务。",
general_service_virtual_database: "虚拟数据库",
general_service_virtual_database_desc: "观察语言代理通过各种插件推测的虚拟数据库。",
general_service_virtual_cache: "虚拟缓存",
general_service_virtual_cache_desc: "观察语言代理通过各种插件推测的虚拟缓存服务器。",
general_service_virtual_mq: "虚拟消息队列",
general_service_virtual_mq_desc: "观察语言代理通过各种插件推测的虚拟消息队列服务器。",
// Service Mesh
service_mesh: "服务网格",
service_mesh_desc: "服务网格（Istio）通过分布式或微服务架构解决了开发人员和运营商面临的挑战。",
service_mesh_service: "服务",
service_mesh_service_desc: "通过从Envoy访问日志服务（ALS）收集的遥测数据观察服务网格。",
service_mesh_control_plane: "控制平面",
service_mesh_control_plane_desc: "通过Istio的自我监控指标提供对其行为的监控。",
service_mesh_data_plane: "数据平面",
service_mesh_data_plane_desc: "通过Envoy Metrics Service观察Envoy Proxy。",
// Functions
functions: "Functions",
functions_desc:
"FaaS（功能即服务）是一种云计算服务，允许您在没有通常与构建和启动微服务应用程序相关的复杂基础设施的情况下执行代码以响应事件。",
functions_openfunction: "OpenFunction",
functions_openfunction_desc: "OpenFunction作为一个FaaS平台，通过SkyWalking集成提供开箱即用的可观察性。",
// Kubernetes
kubernetes: "Kubernetes",
kubernetes_desc: "Kubernetes是一个开源的容器编排系统，用于自动化软件部署、扩展和管理。",
kubernetes_cluster: "集群",
kubernetes_cluster_desc: "提供对K8S集群的状态和资源的监控。",
kubernetes_service: "服务",
kubernetes_service_desc: "从Kubernetes中观察服务状态和资源。",
// Infrastructure
infrastructure: "基础设施",
infrastructure_desc: "操作系统是整个IT系统的基础设施。它的可观察性为所有分布式和现代复杂系统的运行提供了基础。",
infrastructure_linux: "Linux",
infrastructure_linux_desc: "提供Linux操作系统（OS）监控。",
infrastructure_windows: "Windows",
infrastructure_windows_desc: "提供Windows操作系统（OS）监控。",
// AWS Cloud
aws_cloud: "AWS云服务",
aws_cloud_desc: "亚马逊网络服务（AWS）提供可靠、可扩展且价格低廉的云计算服务。",
aws_cloud_eks: "EKS",
aws_cloud_eks_desc: "通过AWS Container Insights Receiver提供AWS Cloud EKS监控。",
aws_cloud_s3: "S3",
aws_cloud_s3_desc: "通过AWS FireHose Receiver提供AWS Cloud S3监控",
aws_cloud_dynamodb: "DynamoDB",
aws_cloud_dynamodb_desc: "通过AWS FireHose Receiver提供DynamoDB监控。",
aws_cloud_api_gateway: "API Gateway",
aws_cloud_api_gateway_desc: "通过AWS FireHose Receiver提供AWS Cloud API网关监控。",
// Browser
browser: "Browser",
browser_desc: "通过Apache SkyWalking Client JS提供Web应用程序、版本和页面的浏览器端监控。",
// Gateway
gateway: "网关",
gateway_desc: "API网关是位于客户端和后端服务集合之间的API管理工具。",
gateway_apisix: "APISIX",
gateway_apisix_desc: "通过OpenTelemetry的Prometheus接收器提供APISIX监控。",
gateway_aws_api_gateway: "AWS API Gateway",
gateway_aws_api_gateway_desc: "通过AWS FireHose Receiver提供AWS Cloud API网关监控。",
// Database
database: "数据库",
database_desc: "数据库是结构化信息或数据的有组织的集合，通常以电子方式存储在计算机系统中。",
database_mysql_mariadb: "MySQL/MariaDB",
database_mysql_mariadb_desc: "通过OpenTelemetry的Prometheus接收器提供MySQL和MariaDB服务器监控。",
database_postgresql: "PostgreSQL",
database_postgresql_desc: "通过OpenTelemetry的Prometheus接收器提供PostgreSQL监控。",
database_dynamodb: "DynamoDB",
database_dynamodb_desc: "通过AWS FireHose Receiver提供DynamoDB监控。",
database_redis: "Redis",
database_redis_desc: "通过OpenTelemetry的Prometheus接收器提供Redis监控。",
database_elasticsearch: "Elasticsearch",
database_elasticsearch_desc: "通过OpenTelemetry的Prometheus接收器提供Elasticsearch服务器监控。",
database_mongodb: "MongoDB",
database_mongodb_desc: "通过OpenTelemetry的Prometheus接收器提供MongoDB监控。",
// Message Queue
mq: "消息队列",
mq_desc: "消息队列是无服务器和微服务架构中使用的异步服务对服务通信的一种形式。",
mq_rabbitmq: "RabbitMQ",
mq_rabbitmq_desc: "通过OpenTelemetry的Prometheus接收器提供RabbitMQ监控。",
// self observability
self_observability: "自监控",
self_observability_desc: "自观察性为运行SkyWalking生态系统中的组件和服务器提供了可观察性。",
self_observability_oap: "SkyWalking服务",
self_observability_oap_desc: "OAP后端集群本身是一个分布式流处理系统，这是对OAP后端本身的监控。",
self_observability_satellite: "Satellite",
self_observability_satellite_desc:
"Satellite：为云原生基础设施设计的开源代理，提供了一种低成本、高效、更安全的遥测数据收集方式。它是遥测采集的推荐负载均衡器。",
};
export default titles;

42
src/locales/lang/zh.ts
View File

@ -14,14 +14,12 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import zhTitles from "./menus/zh";
const msg = { const msg = {
general: "普通服务", ...zhTitles,
services: "服务", services: "服务",
traces: "跟踪", traces: "跟踪",
metrics: "指标", metrics: "指标",
serviceMesh: "服务网格",
infrastructure: "基础设施",
virtualMachine: "虚拟机",
dashboardNew: "新建仪表板", dashboardNew: "新建仪表板",
dashboardHome: "仪表盘首页", dashboardHome: "仪表盘首页",
dashboardList: "仪表盘列表", dashboardList: "仪表盘列表",
@ -38,8 +36,6 @@ const msg = {
health: "健康", health: "健康",
groupName: "群名称", groupName: "群名称",
topologies: "拓扑图", topologies: "拓扑图",
dataPanel: "数据平面",
controlPanel: "控制平面",
eventList: "事件列表", eventList: "事件列表",
newDashboard: "新增仪表盘", newDashboard: "新增仪表盘",
dashboardEdit: "编辑仪表盘", dashboardEdit: "编辑仪表盘",
@ -115,20 +111,9 @@ const msg = {
rename: "重命名", rename: "重命名",
deleteTitle: "确定删除吗？", deleteTitle: "确定删除吗？",
rootTitle: "确定设置为Root吗？", rootTitle: "确定设置为Root吗？",
selfObservability: "自监控",
satellite: "Satellite",
skyWalkingServer: "SkyWalking服务",
functions: "Functions",
linux: "Linux",
browser: "浏览器",
editWarning: "你正在进入编辑模式", editWarning: "你正在进入编辑模式",
viewWarning: "你正在进入预览模式", viewWarning: "你正在进入预览模式",
virtualDatabase: "虚拟数据库",
virtualCache: "虚拟缓存",
reloadDashboards: "重新加载仪表盘", reloadDashboards: "重新加载仪表盘",
kubernetesService: "服务",
kubernetesCluster: "集群",
kubernetes: "Kubernetes",
textUrl: "文本超链接", textUrl: "文本超链接",
textAlign: "文本对齐", textAlign: "文本对齐",
metricLabel: "指标标签", metricLabel: "指标标签",
@ -153,9 +138,7 @@ const msg = {
duplicateName: "重复的名称", duplicateName: "重复的名称",
text: "文本", text: "文本",
query: "查询", query: "查询",
postgreSQL: "PostgreSQL",
endpointTips: "这里最多展示20条endpoints。", endpointTips: "这里最多展示20条endpoints。",
apisix: "APISIX",
viewTrace: "查看相关Trace", viewTrace: "查看相关Trace",
relatedTraceOptions: "相关的Trace选项", relatedTraceOptions: "相关的Trace选项",
setLatencyDuration: "延迟相关指标", setLatencyDuration: "延迟相关指标",
@ -283,7 +266,6 @@ const msg = {
aggregation: "计算", aggregation: "计算",
unit: "单位", unit: "单位",
labelsIndex: "标签下标", labelsIndex: "标签下标",
group: "服务组",
browserView: "浏览器视图", browserView: "浏览器视图",
sortOrder: "排序方式", sortOrder: "排序方式",
chartType: "图表类型", chartType: "图表类型",
@ -373,18 +355,6 @@ const msg = {
noticeTag: "请输入一个标签(key=value)之后回车", noticeTag: "请输入一个标签(key=value)之后回车",
conditionNotice: "请输入一个内容关键词或者内容不包含的关键词(key=value)之后回车", conditionNotice: "请输入一个内容关键词或者内容不包含的关键词(key=value)之后回车",
language: "语言", language: "语言",
gateway: "网关",
virtualMQ: "虚拟消息队列",
AWSCloud: "AWS云服务",
AWSCloudEKS: "EKS",
AWSCloudS3: "S3",
AWSCloudDynamoDB: "DynamoDB",
AWSGateway: "AWS API Gateway",
APIGateway: "API Gateway",
redis: "Redis",
elasticsearch: "Elasticsearch",
mq: "消息队列",
rabbitMQ: "RabbitMQ",
save: "保存", save: "保存",
editStrategy: "编辑策略", editStrategy: "编辑策略",
policyList: "策略列表", policyList: "策略列表",
@ -402,5 +372,13 @@ const msg = {
detailLabel: "详细标签", detailLabel: "详细标签",
summary: "概括", summary: "概括",
detail: "详细", detail: "详细",
marketplace: "市场",
menusManagement: "菜单",
saveReload: "保存并重新加载页面",
document: "文档",
metricMode: "指标模式",
addExpressions: "添加表达式",
expressions: "表达式",
unhealthyExpression: "非健康表达式",
}; };
export default msg; export default msg;

6
src/main.ts
View File

@ -16,7 +16,6 @@
*/ */
import { createApp } from "vue"; import { createApp } from "vue";
import App from "./App.vue"; import App from "./App.vue";
import router from "./router";
import { store } from "./store"; import { store } from "./store";
import components from "@/components"; import components from "@/components";
import i18n from "./locales"; import i18n from "./locales";
@ -33,6 +32,9 @@ app.use(store);
mountApp(); mountApp();
async function mountApp() { async function mountApp() {
await appStore.getActivateMenus();
await appStore.queryOAPTimeInfo(); await appStore.queryOAPTimeInfo();
app.use(router).mount("#app");
const router = await import("./router");
app.use(router.default).mount("#app");
} }

4
src/router/alarm.ts
View File

@ -22,9 +22,11 @@ export const routesAlarm: Array<RouteRecordRaw> = [
path: "", path: "",
name: "Alarm", name: "Alarm",
meta: { meta: {
title: "alarm", i18nKey: "alarm",
icon: "spam", icon: "spam",
hasGroup: false, hasGroup: false,
activate: true,
title: "Alerting",
}, },
component: Layout, component: Layout,
children: [ children: [

12
src/router/dashboard.ts
View File

@ -23,9 +23,11 @@ export const routesDashboard: Array<RouteRecordRaw> = [
component: Layout, component: Layout,
name: "Dashboard", name: "Dashboard",
meta: { meta: {
title: "dashboards", i18nKey: "dashboards",
icon: "dashboard_customize", icon: "dashboard_customize",
hasGroup: true, hasGroup: true,
activate: true,
title: "Dashboards",
}, },
children: [ children: [
{ {
@ -33,7 +35,9 @@ export const routesDashboard: Array<RouteRecordRaw> = [
component: () => import("@/views/dashboard/List.vue"), component: () => import("@/views/dashboard/List.vue"),
name: "List", name: "List",
meta: { meta: {
title: "dashboardList", i18nKey: "dashboardList",
activate: true,
title: "Dashboard List",
}, },
}, },
{ {
@ -41,7 +45,9 @@ export const routesDashboard: Array<RouteRecordRaw> = [
component: () => import("@/views/dashboard/New.vue"), component: () => import("@/views/dashboard/New.vue"),
name: "New", name: "New",
meta: { meta: {
title: "dashboardNew", i18nKey: "dashboardNew",
activate: true,
title: "New Dashboard",
}, },
}, },
{ {

95
src/router/data/aws.ts
View File

@ -1,95 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default [
{
path: "",
name: "AWSCloud",
meta: {
title: "AWSCloud",
icon: "cloud_queue",
hasGroup: true,
},
redirect: "/aws-eks",
children: [
{
path: "/aws-eks",
name: "AWSCloudEKS",
meta: {
title: "AWSCloudEKS",
layer: "AWS_EKS",
},
},
{
path: "/aws-eks/tab/:activeTabIndex",
name: "EKSActiveTabIndex",
meta: {
notShow: true,
layer: "AWS_EKS",
},
},
{
path: "/aws-s3",
name: "AWSCloudS3",
meta: {
title: "AWSCloudS3",
layer: "AWS_S3",
},
},
{
path: "/aws-s3/tab/:activeTabIndex",
name: "S3ActiveTabIndex",
meta: {
notShow: true,
layer: "AWS_S3",
},
},
{
path: "/aws-dynamodb",
name: "AWSCloudDynamoDB",
meta: {
title: "AWSCloudDynamoDB",
layer: "AWS_DYNAMODB",
},
},
{
path: "/aws-dynamodb/tab/:activeTabIndex",
name: "DynamoDBActiveTabIndex",
meta: {
notShow: true,
layer: "AWS_DYNAMODB",
},
},
{
path: "/aws-api-gateway",
name: "APIGateway",
meta: {
title: "APIGateway",
layer: "AWS_GATEWAY",
},
},
{
path: "/aws-api-gateway/tab/:activeTabIndex",
name: "APIGatewayActiveTabIndex",
meta: {
notShow: true,
layer: "AWS_GATEWAY",
},
},
],
},
];

111
src/router/data/database.ts
View File

@ -1,111 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default [
{
path: "",
name: "Database",
meta: {
title: "database",
icon: "storage",
hasGroup: true,
},
redirect: "/mySQL",
children: [
{
path: "/mySQL",
name: "MySQL",
meta: {
title: "mySQL",
layer: "MYSQL",
},
},
{
path: "/mySQL/tab/:activeTabIndex",
name: "MySQLActiveTabIndex",
meta: {
notShow: true,
layer: "MYSQL",
},
},
{
path: "/postgreSQL",
name: "PostgreSQL",
meta: {
title: "postgreSQL",
layer: "POSTGRESQL",
},
},
{
path: "/postgreSQL/tab/:activeTabIndex",
name: "PostgreSQLActiveTabIndex",
meta: {
notShow: true,
layer: "POSTGRESQL",
},
},
{
path: "/aws-dynamodb",
name: "AWSCloudDynamoDB",
meta: {
title: "AWSCloudDynamoDB",
layer: "AWS_DYNAMODB",
},
},
{
path: "/aws-dynamodb/tab/:activeTabIndex",
name: "DynamoDBActiveTabIndex",
meta: {
notShow: true,
layer: "AWS_DYNAMODB",
},
},
{
path: "/redis",
name: "Redis",
meta: {
title: "redis",
layer: "REDIS",
},
},
{
path: "/redis/tab/:activeTabIndex",
name: "RedisActiveTabIndex",
meta: {
notShow: true,
layer: "REDIS",
},
},
{
path: "/elasticsearch",
name: "Elasticsearch",
meta: {
title: "elasticsearch",
layer: "ELASTICSEARCH",
},
},
{
path: "/elasticsearch/tab/:activeTabIndex",
name: "ElasticsearchActiveTabIndex",
meta: {
notShow: true,
layer: "ELASTICSEARCH",
},
},
],
},
];

46
src/router/data/functions.ts
View File

@ -1,46 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default [
{
path: "",
name: "Functions",
meta: {
title: "functions",
icon: "functions",
hasGroup: true,
},
children: [
{
path: "/openFunction",
name: "OpenFunction",
meta: {
title: "openFunction",
layer: "FAAS",
},
},
{
path: "/openFunction/tab/:activeTabIndex",
name: "OpenFunctionActiveTabIndex",
meta: {
notShow: true,
layer: "FAAS",
},
},
],
},
];

63
src/router/data/gateway.ts
View File

@ -1,63 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default [
{
path: "",
name: "Gateway",
meta: {
title: "gateway",
icon: "gateway",
hasGroup: true,
},
redirect: "/apisix",
children: [
{
path: "/apisix",
name: "APISIX",
meta: {
title: "apisix",
layer: "APISIX",
},
},
{
path: "/apisix/tab/:activeTabIndex",
name: "APISIXActiveTabIndex",
meta: {
notShow: true,
layer: "APISIX",
},
},
{
path: "/aws-gateway",
name: "AWSGateway",
meta: {
title: "AWSGateway",
layer: "AWS_GATEWAY",
},
},
{
path: "/aws-gateway/tab/:activeTabIndex",
name: "GatewayActiveTabIndex",
meta: {
notShow: true,
layer: "AWS_GATEWAY",
},
},
],
},
];

94
src/router/data/general.ts
View File

@ -1,94 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default [
{
path: "",
name: "General",
meta: {
title: "general",
icon: "chart",
hasGroup: true,
},
children: [
{
path: "/general",
name: "GeneralServices",
meta: {
title: "services",
layer: "GENERAL",
},
},
{
path: "/general/tab/:activeTabIndex",
name: "GeneralServicesActiveTabIndex",
meta: {
notShow: true,
layer: "GENERAL",
},
},
{
path: "/database",
name: "VirtualDatabase",
meta: {
title: "virtualDatabase",
layer: "VIRTUAL_DATABASE",
},
},
{
path: "/database/tab/:activeTabIndex",
name: "VirtualDatabaseActiveTabIndex",
meta: {
notShow: true,
layer: "VIRTUAL_DATABASE",
},
},
{
path: "/cache",
name: "VirtualCache",
meta: {
title: "virtualCache",
layer: "VIRTUAL_CACHE",
},
},
{
path: "/cache/tab/:activeTabIndex",
name: "VirtualCacheActiveTabIndex",
meta: {
notShow: true,
layer: "VIRTUAL_CACHE",
},
},
{
path: "/mq",
name: "VirtualMQ",
meta: {
title: "virtualMQ",
layer: "VIRTUAL_MQ",
},
},
{
path: "/mq/tab/:activeTabIndex",
name: "VirtualMQActiveTabIndex",
meta: {
notShow: true,
layer: "VIRTUAL_MQ",
},
},
],
},
];

41
src/router/data/index.ts
View File

@ -1,41 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import general from "./general";
import serviceMesh from "./serviceMesh";
import database from "./database";
import infrastructure from "./infrastructure";
import selfObservability from "./selfObservability";
import functions from "./functions";
import browser from "./browser";
import k8s from "./k8s";
import gateway from "./gateway";
import aws from "./aws";
import mq from "./mq";
export default [
...general,
...serviceMesh,
...functions,
...k8s,
...infrastructure,
...aws,
...browser,
...gateway,
...database,
...mq,
...selfObservability,
];

65
src/router/data/infrastructure.ts
View File

@ -1,65 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default [
{
path: "",
name: "Infrastructure",
meta: {
title: "infrastructure",
icon: "scatter_plot",
hasGroup: true,
},
redirect: "/linux",
children: [
{
path: "/linux",
name: "Linux",
meta: {
title: "linux",
layer: "OS_LINUX",
},
},
{
path: "/linux/tab/:activeTabIndex",
name: "LinuxActiveTabIndex",
meta: {
title: "linux",
notShow: true,
layer: "OS_LINUX",
},
},
{
path: "/windows",
name: "Windows",
meta: {
title: "windows",
layer: "OS_WINDOWS",
},
},
{
path: "/windows/tab/:activeTabIndex",
name: "WindowsActiveTabIndex",
meta: {
title: "windows",
notShow: true,
layer: "OS_WINDOWS",
},
},
],
},
];

67
src/router/data/k8s.ts
View File

@ -1,67 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default [
{
path: "",
name: "Kubernetes",
meta: {
title: "kubernetes",
icon: "donut_small",
hasGroup: true,
},
redirect: "/kubernetes/cluster",
children: [
{
path: "/kubernetes/cluster",
name: "KubernetesCluster",
meta: {
notShow: false,
title: "kubernetesCluster",
layer: "K8S",
},
},
{
path: "/kubernetes/cluster/tab/:activeTabIndex",
name: "KubernetesClusterActiveTabIndex",
meta: {
notShow: true,
title: "kubernetesClusterActiveTabIndex",
layer: "K8S",
},
},
{
path: "/kubernetes/service",
name: "KubernetesService",
meta: {
notShow: false,
title: "kubernetesService",
layer: "K8S_SERVICE",
},
},
{
path: "/kubernetes/service/tab/:activeTabIndex",
name: "KubernetesServiceActiveTabIndex",
meta: {
notShow: true,
title: "kubernetesServiceActiveTabIndex",
layer: "K8S_SERVICE",
},
},
],
},
];

63
src/router/data/selfObservability.ts
View File

@ -1,63 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default [
{
path: "",
name: "SelfObservability",
redirect: "/self/skyWalkingServer",
meta: {
title: "selfObservability",
icon: "logo",
hasGroup: true,
},
children: [
{
path: "/self/skyWalkingServer",
name: "SkyWalkingServer",
meta: {
title: "skyWalkingServer",
layer: "SO11Y_OAP",
},
},
{
path: "/self/skyWalkingServer/tab/:activeTabIndex",
name: "SkyWalkingServerActiveTabIndex",
meta: {
notShow: true,
layer: "SO11Y_OAP",
},
},
{
path: "/self/satellite",
name: "Satellite",
meta: {
title: "satellite",
layer: "SO11Y_SATELLITE",
},
},
{
path: "/self/satellite/tab/:activeTabIndex",
name: "SatelliteActiveTabIndex",
meta: {
notShow: true,
layer: "SO11Y_SATELLITE",
},
},
],
},
];

83
src/router/data/serviceMesh.ts
View File

@ -1,83 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default [
{
path: "",
name: "ServiceMesh",
redirect: "/mesh/services",
meta: {
title: "serviceMesh",
icon: "epic",
hasGroup: true,
},
children: [
{
path: "/mesh/services",
name: "MeshServices",
meta: {
notShow: false,
title: "services",
layer: "MESH",
},
},
{
path: "/mesh/services/tab/:activeTabIndex",
name: "MeshServicesActiveTabIndex",
meta: {
notShow: true,
layer: "MESH",
},
},
{
path: "/mesh/controlPanel",
name: "ControlPanel",
meta: {
notShow: false,
title: "controlPanel",
layer: "MESH_CP",
},
},
{
path: "/mesh/controlPanel/tab/:activeTabIndex",
name: "ControlPanelActiveTabIndex",
meta: {
notShow: true,
layer: "MESH_CP",
},
},
{
path: "/mesh/dataPanel",
name: "DataPanel",
meta: {
notShow: false,
title: "dataPanel",
layer: "MESH_DP",
},
},
{
path: "/mesh/dataPanel/tab/:activeTabIndex",
name: "DataPanelActiveTabIndex",
meta: {
notShow: true,
title: "dataPanelActiveTabIndex",
layer: "MESH_DP",
},
},
],
},
];

15
src/router/index.ts
View File

@ -17,11 +17,18 @@
import type { RouteRecordRaw } from "vue-router"; import type { RouteRecordRaw } from "vue-router";
import { createRouter, createWebHistory } from "vue-router"; import { createRouter, createWebHistory } from "vue-router";
import { routesDashboard } from "./dashboard"; import { routesDashboard } from "./dashboard";
import { routesSetting } from "./setting"; import { routesMarketplace } from "./marketplace";
import { routesAlarm } from "./alarm"; import { routesAlarm } from "./alarm";
import routesLayers from "./layer"; import routesLayers from "./layer";
import { routesSettings } from "./settings";
const routes: Array<RouteRecordRaw> = [...routesLayers, ...routesDashboard, ...routesAlarm, ...routesSetting]; const routes: RouteRecordRaw[] = [
...routesMarketplace,
...routesLayers,
...routesAlarm,
...routesDashboard,
...routesSettings,
];
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
@ -38,8 +45,10 @@ router.beforeEach((to, from, next) => {
} }
(window as any).axiosCancel = []; (window as any).axiosCancel = [];
} }
if (to.path === "/") { if (to.path === "/") {
next({ path: "/general" }); const defaultPath = (routesLayers[0] && routesLayers[0].children[0].path) || "";
next({ path: defaultPath });
} else { } else {
next(); next();
} }

70
src/router/layer.ts
View File

@ -14,19 +14,71 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import LayerJson from "./data";
import Layout from "@/layout/Index.vue"; import Layout from "@/layout/Index.vue";
import { useAppStoreWithOut } from "@/store/modules/app";
import type { MenuOptions } from "@/types/app";
function layerDashboards() { function layerDashboards() {
const routes = LayerJson.map((item: any) => { const appStore = useAppStoreWithOut();
item.component = Layout; const routes = appStore.allMenus.map((item: MenuOptions) => {
if (item.children) { const route: any = {
item.children = item.children.map((d: any) => { path: "",
d.component = () => import("@/views/Layer.vue"); name: item.name,
return d; component: Layout,
}); meta: {
icon: item.icon || "cloud_queue",
title: item.title,
hasGroup: item.hasGroup,
activate: item.activate,
descKey: item.descKey,
i18nKey: item.i18nKey,
},
children: item.subItems && item.subItems.length ? [] : undefined,
};
for (const child of item.subItems || []) {
const d = {
name: child.name,
path: child.path,
meta: {
title: child.title,
layer: child.layer,
icon: child.icon || "cloud_queue",
activate: child.activate,
descKey: child.descKey,
i18nKey: child.i18nKey,
},
component: () => import("@/views/Layer.vue"),
};
route.children.push(d);
const tab = {
name: `${child.name}ActiveTabIndex`,
path: `/${child.name}/tab/:activeTabIndex`,
component: () => import("@/views/Layer.vue"),
meta: {
notShow: true,
layer: child.layer,
},
};
route.children.push(tab);
} }
return item; if (!item.hasGroup) {
route.children = [
{
name: item.name,
path: item.path,
meta: {
title: item.title,
layer: item.layer,
icon: item.icon,
activate: item.activate,
descKey: item.descKey,
i18nKey: item.i18nKey,
},
component: () => import("@/views/Layer.vue"),
},
];
}
return route;
}); });
return routes; return routes;
} }

32
src/router/data/browser.ts → src/router/marketplace.ts
View File

@ -14,32 +14,26 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import type { RouteRecordRaw } from "vue-router";
import Layout from "@/layout/Index.vue";
export default [ export const routesMarketplace: Array<RouteRecordRaw> = [
{ {
path: "", path: "",
name: "Browser", name: "Marketplace",
meta: { meta: {
title: "browser", i18nKey: "marketplace",
icon: "language", icon: "marketplace",
hasGroup: false,
activate: true,
title: "Marketplace",
}, },
redirect: "/browser", component: Layout,
children: [ children: [
{ {
path: "/browser", path: "/marketplace",
name: "Browser", name: "MenusManagement",
meta: { component: () => import("@/views/Marketplace.vue"),
title: "browser",
layer: "BROWSER",
},
},
{
path: "/browser/tab/:activeTabIndex",
name: "BrowserActiveTabIndex",
meta: {
notShow: true,
layer: "BROWSER",
},
}, },
], ],
}, },

11
src/router/setting.ts → src/router/settings.ts
View File

@ -17,25 +17,22 @@
import type { RouteRecordRaw } from "vue-router"; import type { RouteRecordRaw } from "vue-router";
import Layout from "@/layout/Index.vue"; import Layout from "@/layout/Index.vue";
export const routesSetting: Array<RouteRecordRaw> = [ export const routesSettings: Array<RouteRecordRaw> = [
{ {
path: "", path: "",
name: "Settings", name: "Settings",
meta: { meta: {
title: "settings", i18nKey: "settings",
icon: "settings", icon: "settings",
hasGroup: false, hasGroup: false,
activate: true,
title: "Settings",
}, },
component: Layout, component: Layout,
children: [ children: [
{ {
path: "/settings", path: "/settings",
name: "Settings", name: "Settings",
meta: {
title: "settings",
icon: "settings",
hasGroup: false,
},
component: () => import("@/views/Settings.vue"), component: () => import("@/views/Settings.vue"),
}, },
], ],

33
src/store/modules/app.ts
View File

@ -22,6 +22,7 @@ import getLocalTime from "@/utils/localtime";
import type { AxiosResponse } from "axios"; import type { AxiosResponse } from "axios";
import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat"; import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
import { TimeType } from "@/constants/data"; import { TimeType } from "@/constants/data";
import type { MenuOptions, SubItem } from "@/types/app";
/*global Nullable*/ /*global Nullable*/
interface AppState { interface AppState {
durationRow: Recordable; durationRow: Recordable;
@ -34,6 +35,7 @@ interface AppState {
version: string; version: string;
isMobile: boolean; isMobile: boolean;
reloadTimer: Nullable<IntervalHandle>; reloadTimer: Nullable<IntervalHandle>;
allMenus: MenuOptions[];
} }
export const appStore = defineStore({ export const appStore = defineStore({
@ -53,6 +55,7 @@ export const appStore = defineStore({
version: "", version: "",
isMobile: false, isMobile: false,
reloadTimer: null, reloadTimer: null,
allMenus: [],
}), }),
getters: { getters: {
duration(): Duration { duration(): Duration {
@ -153,6 +156,28 @@ export const appStore = defineStore({
500, 500,
); );
}, },
async getActivateMenus() {
const resp = (await this.queryMenuItems()) || {};
this.allMenus = (resp.getMenuItems || []).map((d: MenuOptions, index: number) => {
const t = `${d.title.replace(/\s+/g, "-")}`;
d.name = `${t}-${index}`;
d.path = `/${t}`;
d.descKey = `${d.i18nKey}_desc`;
if (d.subItems && d.subItems.length) {
d.hasGroup = true;
d.subItems = d.subItems.map((item: SubItem, sub: number) => {
const id = `${item.title.replace(/\s+/g, "-")}`;
item.name = `${id}-${index}${sub}`;
item.path = `/${t}/${id}`;
item.descKey = `${item.i18nKey}_desc`;
return item;
});
}
return d;
});
},
async queryOAPTimeInfo() { async queryOAPTimeInfo() {
const res: AxiosResponse = await graphql.query("queryOAPTimeInfo").params({}); const res: AxiosResponse = await graphql.query("queryOAPTimeInfo").params({});
if (res.data.errors) { if (res.data.errors) {
@ -174,6 +199,14 @@ export const appStore = defineStore({
this.version = res.data.data.version; this.version = res.data.data.version;
return res.data; return res.data;
}, },
async queryMenuItems() {
const res: AxiosResponse = await graphql.query("queryMenuItems").params({});
if (res.data.errors) {
return res.data;
}
return res.data.data;
},
setReloadTimer(timer: IntervalHandle) { setReloadTimer(timer: IntervalHandle) {
this.reloadTimer = timer; this.reloadTimer = timer;
}, },

4
src/store/modules/event.ts
View File

@ -57,7 +57,7 @@ export const eventStore = defineStore({
this.instances = [{ value: "", label: "All" }, ...res.data.data.pods] || [{ value: "", label: "All" }]; this.instances = [{ value: "", label: "All" }, ...res.data.data.pods] || [{ value: "", label: "All" }];
return res.data; return res.data;
}, },
async getEndpoints() { async getEndpoints(keyword: string) {
const serviceId = useSelectorStore().currentService ? useSelectorStore().currentService.id : ""; const serviceId = useSelectorStore().currentService ? useSelectorStore().currentService.id : "";
if (!serviceId) { if (!serviceId) {
return; return;
@ -65,7 +65,7 @@ export const eventStore = defineStore({
const res: AxiosResponse = await graphql.query("queryEndpoints").params({ const res: AxiosResponse = await graphql.query("queryEndpoints").params({
serviceId, serviceId,
duration: useAppStoreWithOut().durationTime, duration: useAppStoreWithOut().durationTime,
keyword: "", keyword: keyword || "",
}); });
if (res.data.errors) { if (res.data.errors) {
return res.data; return res.data;

65
src/store/modules/topology.ts
View File

@ -24,6 +24,7 @@ import { useAppStoreWithOut } from "@/store/modules/app";
import type { AxiosResponse } from "axios"; import type { AxiosResponse } from "axios";
import query from "@/graphql/fetch"; import query from "@/graphql/fetch";
import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor"; import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
interface MetricVal { interface MetricVal {
@ -114,6 +115,16 @@ export const topologyStore = defineStore({
setLinkClientMetrics(m: MetricVal) { setLinkClientMetrics(m: MetricVal) {
this.linkClientMetrics = m; this.linkClientMetrics = m;
}, },
setLegendValues(expressions: string, data: { [key: string]: any }) {
for (let idx = 0; idx < this.nodes.length; idx++) {
for (let index = 0; index < expressions.length; index++) {
const k = "expression" + idx + index;
if (expressions[index]) {
this.nodes[idx][expressions[index]] = Number(data[k].results[0].values[0].value);
}
}
}
},
async getDepthServiceTopology(serviceIds: string[], depth: number) { async getDepthServiceTopology(serviceIds: string[], depth: number) {
const res = await this.getServicesTopology(serviceIds); const res = await this.getServicesTopology(serviceIds);
if (depth > 1) { if (depth > 1) {
@ -321,6 +332,15 @@ export const topologyStore = defineStore({
this.setNodeMetricValue(res.data.data); this.setNodeMetricValue(res.data.data);
return res.data; return res.data;
}, },
async getNodeExpressionValue(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
const res: AxiosResponse = await query(param);
if (res.data.errors) {
return res.data;
}
return res.data;
},
async getLinkClientMetrics(linkClientMetrics: string[]) { async getLinkClientMetrics(linkClientMetrics: string[]) {
if (!linkClientMetrics.length) { if (!linkClientMetrics.length) {
this.setLinkClientMetrics({}); this.setLinkClientMetrics({});
@ -353,6 +373,29 @@ export const topologyStore = defineStore({
ElMessage.error(res.errors); ElMessage.error(res.errors);
} }
}, },
async getLinkExpressions(expressions: string[], type: string) {
if (!expressions.length) {
this.setLinkServerMetrics({});
return;
}
const calls = this.calls.filter((i: Call) => i.detectPoints.includes(type));
if (!calls.length) {
return;
}
const { getExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor(expressions, calls);
const param = getExpressionQuery();
const res = await this.getNodeExpressionValue(param);
if (res.errors) {
ElMessage.error(res.errors);
return;
}
const metrics = handleExpressionValues(res.data);
if (type === "SERVER") {
this.setLinkServerMetrics(metrics);
} else {
this.setLinkClientMetrics(metrics);
}
},
async queryNodeMetrics(nodeMetrics: string[]) { async queryNodeMetrics(nodeMetrics: string[]) {
if (!nodeMetrics.length) { if (!nodeMetrics.length) {
this.setNodeMetricValue({}); this.setNodeMetricValue({});
@ -369,6 +412,28 @@ export const topologyStore = defineStore({
ElMessage.error(res.errors); ElMessage.error(res.errors);
} }
}, },
async queryNodeExpressions(expressions: string[]) {
if (!expressions.length) {
this.setNodeMetricValue({});
return;
}
if (!this.nodes.length) {
this.setNodeMetricValue({});
return;
}
const { getExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor(
expressions,
this.nodes,
);
const param = getExpressionQuery();
const res = await this.getNodeExpressionValue(param);
if (res.errors) {
ElMessage.error(res.errors);
return;
}
const metrics = handleExpressionValues(res.data);
this.setNodeMetricValue(metrics);
},
async getLegendMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) { async getLegendMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
const res: AxiosResponse = await query(param); const res: AxiosResponse = await query(param);

6
src/styles/lib.scss
View File

@ -189,12 +189,12 @@
.scroll_bar_style::-webkit-scrollbar-track { .scroll_bar_style::-webkit-scrollbar-track {
background-color: #eee; background-color: #eee;
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 0 6px #ccc; box-shadow: inset 0 0 6px $disabled-color;
} }
.scroll_bar_style::-webkit-scrollbar-thumb { .scroll_bar_style::-webkit-scrollbar-thumb {
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 0 6px #ccc; box-shadow: inset 0 0 6px $disabled-color;
background-color: #aaa; background-color: #aaa;
} }
@ -220,7 +220,7 @@
padding: 8px; padding: 8px;
color: #eee; color: #eee;
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: $font-size-smaller;
} }
.d3-tip { .d3-tip {
background: #252a2f; background: #252a2f;

38
src/router/data/mq.ts → src/styles/light.scss
View File

@ -15,33 +15,11 @@
* limitations under the License. * limitations under the License.
*/ */
export default [ $font-color: #3d444f;
{ $text-color: #fff;
path: "", $disabled-color: #ccc;
name: "MQ", $active-color: #409eff;
meta: { $theme-background: #fff;
title: "mq", $active-background: #409eff;
icon: "mq", $font-size-smaller: 12px;
hasGroup: true, $font-size-normal: 14px;
},
redirect: "/rabbitMQ",
children: [
{
path: "/rabbitMQ",
name: "RabbitMQ",
meta: {
title: "rabbitMQ",
layer: "RABBITMQ",
},
},
{
path: "/rabbitMQ/tab/:activeTabIndex",
name: "RabbitMQActiveTabIndex",
meta: {
notShow: true,
layer: "RABBITMQ",
},
},
],
},
];

14
src/styles/reset.scss
View File

@ -18,8 +18,8 @@
body { body {
margin: 0; margin: 0;
line-height: 1.5; line-height: 1.5;
font-size: 14px; font-size: $font-size-normal;
color: #3d444f; color: $font-color;
font-family: Helvetica, Arial, "Source Han Sans CN", "Microsoft YaHei", sans-serif; font-family: Helvetica, Arial, "Source Han Sans CN", "Microsoft YaHei", sans-serif;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
text-size-adjust: 100%; text-size-adjust: 100%;
@ -81,7 +81,7 @@ h4 {
} }
h5 { h5 {
font-size: 14px; font-size: $font-size-normal;
} }
h6 { h6 {
@ -153,7 +153,7 @@ pre {
} }
.el-switch__label * { .el-switch__label * {
font-size: 12px; font-size: $font-size-smaller;
} }
.el-drawer__header { .el-drawer__header {
@ -173,9 +173,9 @@ pre {
div.vis-tooltip { div.vis-tooltip {
max-width: 600px; max-width: 600px;
overflow: hidden; overflow: hidden;
background-color: #fff !important; background-color: $theme-background !important;
white-space: normal !important; white-space: normal !important;
font-size: 12px !important; font-size: $font-size-smaller !important;
} }
.vis-item { .vis-item {
@ -187,7 +187,7 @@ div.vis-tooltip {
background-color: #e66; background-color: #e66;
opacity: 0.8; opacity: 0.8;
border-color: #e66; border-color: #e66;
color: #fff !important; color: $text-color !important;
} }
.vis-item.Normal { .vis-item.Normal {

20
src/types/app.d.ts vendored
View File

@ -48,3 +48,23 @@ export type EventParams = {
dataIndex: number; dataIndex: number;
event: any; event: any;
}; };
export interface MenuOptions extends SubItem {
hasGroup?: boolean;
subItems: SubItem[];
}
export interface SubItem {
layer: string;
icon: string;
title: string;
activate: boolean;
name?: string;
path?: string;
notShow?: boolean;
id?: string;
description: string;
documentLink: string;
descKey: string;
i18nKey: string;
}

32
src/types/components.d.ts vendored
View File

@ -6,44 +6,14 @@ import '@vue/runtime-core'
declare module '@vue/runtime-core' { declare module '@vue/runtime-core' {
export interface GlobalComponents { export interface GlobalComponents {
DateCalendar: typeof import('./../components/DateCalendar.vue')['default'] DateCalendar: typeof import('./../components/DateCalendar.vue')['default']
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSlider: typeof import('element-plus/es')['ElSlider']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
Graph: typeof import('./../components/Graph.vue')['default'] Graph: typeof import('./../components/Graph.vue')['default']
Icon: typeof import('./../components/Icon.vue')['default'] Icon: typeof import('./../components/Icon.vue')['default']
Loading: typeof import('element-plus/es')['ElLoadingDirective']
Radio: typeof import('./../components/Radio.vue')['default'] Radio: typeof import('./../components/Radio.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
Selector: typeof import('./../components/Selector.vue')['default'] Selector: typeof import('./../components/Selector.vue')['default']
SelectSingle: typeof import('./../components/SelectSingle.vue')['default'] SelectSingle: typeof import('./../components/SelectSingle.vue')['default']
Tags: typeof import('./../components/Tags.vue')['default']
TimePicker: typeof import('./../components/TimePicker.vue')['default'] TimePicker: typeof import('./../components/TimePicker.vue')['default']
} }
} }

2
src/utils/cancelToken.ts
View File

@ -21,5 +21,5 @@ const CancelToken = axios.CancelToken;
export const cancelToken = (): any => export const cancelToken = (): any =>
new CancelToken(function executor(c) { new CancelToken(function executor(c) {
const w = window as any; const w = window as any;
w.axiosCancel.push(c); (w.axiosCancel || []).push(c);
}); });

2
src/views/Alarm.vue
View File

@ -26,6 +26,6 @@ limitations under the License. -->
.alarm { .alarm {
flex-grow: 1; flex-grow: 1;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
} }
</style> </style>

2
src/views/Event.vue
View File

@ -26,6 +26,6 @@ limitations under the License. -->
.event { .event {
flex-grow: 1; flex-grow: 1;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
} }
</style> </style>

132
src/views/Marketplace.vue Normal file
View File

@ -0,0 +1,132 @@
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="menus flex-v">
<div class="category-body flex-h">
<div class="mr-20 mt-10 flex-h category">
<el-card
class="item"
v-for="(menu, index) in appStore.allMenus"
:key="index"
@click="handleItems(menu)"
:class="currentItems.name === menu.name ? 'active' : ''"
>
<router-link :to="menu.hasGroup ? '' : menu.path || ''">
<div class="title" :class="menu.activate ? (menu.hasGroup ? '' : 'actived-font') : 'disabled'">
{{ te(menu.i18nKey) ? t(menu.i18nKey) : menu.title }}
</div>
</router-link>
<div class="mt-10"> {{ te(menu.descKey) ? t(menu.descKey) : "" }} </div>
<el-link :href="menu.documentLink" target="_blank" class="link" v-show="menu.documentLink">
<el-button class="mt-10" size="small" type="primary"> {{ t("document") }} </el-button>
</el-link>
</el-card>
</div>
<div class="mt-10 cards">
<el-card shadow="hover" v-for="(item, index) in currentItems.subItems || []" :key="index" class="card">
<router-link :to="item.path || ''">
<div class="title" :class="item.activate ? 'actived-font' : 'disabled'">
{{ te(item.i18nKey) ? t(item.i18nKey) : item.title }}
</div>
</router-link>
<div class="mt-10"> {{ te(item.descKey) ? t(item.descKey) : "" }} </div>
<el-link :href="item.documentLink" target="_blank" class="link" v-show="item.documentLink">
<el-button class="mt-10" size="small" type="primary"> {{ t("document") }} </el-button>
</el-link>
</el-card>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { useAppStoreWithOut } from "@/store/modules/app";
import type { MenuOptions } from "@/types/app";
const { t, te } = useI18n();
const appStore = useAppStoreWithOut();
const currentItems = ref<MenuOptions>(appStore.allMenus[0] || {});
function handleItems(item: MenuOptions) {
currentItems.value = item;
}
appStore.setPageTitle("Marketplace");
</script>
<style lang="scss" scoped>
.menus {
flex-grow: 1;
height: 100%;
font-size: $font-size-smaller;
padding: 10px;
}
.category-body {
padding-left: 20px 30px;
width: 100%;
height: 100%;
justify-content: space-between;
}
.title {
font-weight: bold;
font-size: 14px;
}
.actived-font {
color: $active-color;
}
.disabled {
color: #aaa;
}
.card {
margin-bottom: 30px;
cursor: pointer;
width: 380px;
}
.cards {
min-width: 400px;
height: 100%;
overflow: auto;
}
.item {
margin-bottom: 20px;
margin-right: 10px;
width: 300px;
cursor: pointer;
}
.category {
flex-wrap: wrap;
border-right: 1px solid #ddd;
align-content: flex-start;
height: 100%;
overflow: auto;
}
.link {
float: right;
margin-bottom: 20px;
}
.active {
border: 1px solid $active-color;
}
</style>

4
src/views/Settings.vue
View File

@ -145,7 +145,7 @@ limitations under the License. -->
.auto-select { .auto-select {
border-radius: 3px; border-radius: 3px;
background-color: #fff; background-color: $theme-background;
padding: 1px; padding: 1px;
input { input {
@ -168,7 +168,7 @@ limitations under the License. -->
outline: 0; outline: 0;
width: 50px; width: 50px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #ccc; border: 1px solid $disabled-color;
text-align: center; text-align: center;
height: 25px; height: 25px;
} }

4
src/views/alarm/Content.vue
View File

@ -142,12 +142,12 @@ limitations under the License. -->
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../components/style.scss"; @import url("../components/style.scss");
.tips { .tips {
width: 100%; width: 100%;
margin: 20px 0; margin: 20px 0;
text-align: center; text-align: center;
font-size: 14px; font-size: $font-size-normal;
} }
</style> </style>

6
src/views/alarm/Header.vue
View File

@ -32,8 +32,8 @@ limitations under the License. -->
</div> </div>
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination
v-model:currentPage="pageNum" v-model="pageNum"
v-model:page-size="pageSize" :page-size="pageSize"
layout="prev, pager, next" layout="prev, pager, next"
:total="total" :total="total"
@current-change="changePage" @current-change="changePage"
@ -98,7 +98,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.alarm-tool { .alarm-tool {
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #c1c5ca41; border-bottom: 1px solid #c1c5ca41;
background-color: #f0f2f5; background-color: #f0f2f5;
padding: 10px; padding: 10px;

12
src/views/components/ConditionTags.vue
View File

@ -221,8 +221,8 @@ limitations under the License. -->
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
border: 1px dashed #aaa; border: 1px dashed #aaa;
font-size: 12px; font-size: $font-size-smaller;
margin: 3px 2px 0 2px; margin: 3px 2px 0;
} }
.trace-new-tag { .trace-new-tag {
@ -246,7 +246,7 @@ limitations under the License. -->
margin-top: 10px; margin-top: 10px;
&:hover { &:hover {
color: #409eff; color: $active-color;
} }
} }
@ -259,14 +259,14 @@ limitations under the License. -->
} }
.light { .light {
color: #3d444f; color: $font-color;
input { input {
border: 1px solid #ccc; border: 1px solid $disabled-color;
} }
.selected { .selected {
color: #3d444f; color: $font-color;
} }
} }

2
src/views/components/style.scss
View File

@ -90,7 +90,7 @@
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
border-bottom: 1px solid #ccc; border-bottom: 1px solid $disabled-color;
overflow: hidden; overflow: hidden;
} }
} }

8
src/views/dashboard/List.vue
View File

@ -55,7 +55,7 @@ limitations under the License. -->
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="layer" label="Layer" width="120" /> <el-table-column prop="layer" label="Layer" width="160" />
<el-table-column prop="entity" label="Entity" width="200" /> <el-table-column prop="entity" label="Entity" width="200" />
<el-table-column prop="isRoot" label="Root" width="60"> <el-table-column prop="isRoot" label="Root" width="60">
<template #default="scope"> <template #default="scope">
@ -477,7 +477,7 @@ limitations under the License. -->
.table { .table {
padding: 20px 10px; padding: 20px 10px;
background-color: #fff; background-color: $theme-background;
box-shadow: 0 1px 4px 0 #00000029; box-shadow: 0 1px 4px 0 #00000029;
border-radius: 5px; border-radius: 5px;
width: 100%; width: 100%;
@ -487,7 +487,7 @@ limitations under the License. -->
.toggle-selection { .toggle-selection {
margin-top: 20px; margin-top: 20px;
background-color: #fff; background-color: $theme-background;
} }
.pagination { .pagination {
@ -511,7 +511,7 @@ limitations under the License. -->
} }
.name { .name {
color: #409eff; color: $active-color;
} }
.reload { .reload {

8
src/views/dashboard/Widget.vue
View File

@ -185,12 +185,12 @@ limitations under the License. -->
.content { .content {
min-width: 100px; min-width: 100px;
border: 1px solid #eee; border: 1px solid #eee;
background-color: #fff; background-color: $theme-background;
position: relative; position: relative;
} }
.widget-chart { .widget-chart {
background: #fff; background-color: $theme-background;
box-shadow: 0 1px 4px 0 #00000029; box-shadow: 0 1px 4px 0 #00000029;
border-radius: 3px; border-radius: 3px;
padding: 5px; padding: 5px;
@ -198,7 +198,7 @@ limitations under the License. -->
} }
.no-data { .no-data {
font-size: 14px; font-size: $font-size-normal;
text-align: center; text-align: center;
line-height: 400px; line-height: 400px;
} }
@ -208,7 +208,7 @@ limitations under the License. -->
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
background-color: aliceblue; background-color: aliceblue;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }

4
src/views/dashboard/components/WidgetLink.vue
View File

@ -154,13 +154,13 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.link { .link {
color: #409eff; color: $active-color;
cursor: pointer; cursor: pointer;
} }
.link-content { .link-content {
height: 300px; height: 300px;
font-size: 12px; font-size: $font-size-smaller;
overflow: auto; overflow: auto;
padding-bottom: 50px; padding-bottom: 50px;
} }

2
src/views/dashboard/configuration/ContinuousProfiling.vue
View File

@ -95,7 +95,7 @@ limitations under the License. -->
padding: 10px; padding: 10px;
text-align: right; text-align: right;
width: 100%; width: 100%;
background-color: #fff; background-color: $theme-background;
} }
.item { .item {

2
src/views/dashboard/configuration/Event.vue
View File

@ -72,6 +72,6 @@ limitations under the License. -->
padding: 10px; padding: 10px;
text-align: right; text-align: right;
width: 100%; width: 100%;
background-color: #fff; background-color: $theme-background;
} }
</style> </style>

2
src/views/dashboard/configuration/Text.vue
View File

@ -155,6 +155,6 @@ limitations under the License. -->
padding: 10px; padding: 10px;
text-align: right; text-align: right;
width: 100%; width: 100%;
background-color: #fff; background-color: $theme-background;
} }
</style> </style>

2
src/views/dashboard/configuration/ThirdPartyApp.vue
View File

@ -84,6 +84,6 @@ limitations under the License. -->
padding: 10px; padding: 10px;
text-align: right; text-align: right;
width: 100%; width: 100%;
background-color: #fff; background-color: $theme-background;
} }
</style> </style>

2
src/views/dashboard/configuration/TimeRange.vue
View File

@ -151,6 +151,6 @@ limitations under the License. -->
padding: 10px; padding: 10px;
text-align: right; text-align: right;
width: 100%; width: 100%;
background-color: #fff; background-color: $theme-background;
} }
</style> </style>

2
src/views/dashboard/configuration/Topology.vue
View File

@ -67,7 +67,7 @@ limitations under the License. -->
padding: 10px; padding: 10px;
text-align: right; text-align: right;
width: 100%; width: 100%;
background-color: #fff; background-color: $theme-background;
} }
.label { .label {

8
src/views/dashboard/configuration/Widget.vue
View File

@ -202,7 +202,7 @@ limitations under the License. -->
position: relative; position: relative;
min-width: 1280px; min-width: 1280px;
border: 1px solid #eee; border: 1px solid #eee;
background-color: #fff; background-color: $theme-background;
} }
.header { .header {
@ -210,7 +210,7 @@ limitations under the License. -->
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
background-color: aliceblue; background-color: aliceblue;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }
@ -240,7 +240,7 @@ limitations under the License. -->
} }
.no-data { .no-data {
font-size: 14px; font-size: $font-size-normal;
text-align: center; text-align: center;
line-height: 400px; line-height: 400px;
} }
@ -253,7 +253,7 @@ limitations under the License. -->
padding: 10px; padding: 10px;
text-align: right; text-align: right;
width: 100%; width: 100%;
background-color: #fff; background-color: $theme-background;
} }
.collapse { .collapse {

2
src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
View File

@ -125,7 +125,7 @@ limitations under the License. -->
} }
.title { .title {
font-size: 12px; font-size: $font-size-smaller;
display: inline-flex; display: inline-flex;
height: 32px; height: 32px;
line-height: 34px; line-height: 34px;

16
src/views/dashboard/configuration/widget/metric/Index.vue
View File

@ -160,7 +160,7 @@ limitations under the License. -->
}, },
}); });
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression ? true : false); const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression);
const metrics = computed( const metrics = computed(
() => (isExpression.value ? dashboardStore.selectedGrid.expressions : dashboardStore.selectedGrid.metrics) || [], () => (isExpression.value ? dashboardStore.selectedGrid.expressions : dashboardStore.selectedGrid.metrics) || [],
); );
@ -611,20 +611,20 @@ limitations under the License. -->
span { span {
display: inline-block; display: inline-block;
padding: 2px 10px; padding: 2px 10px;
border: 1px solid #ccc; border: 1px solid $disabled-color;
background-color: #fff; background-color: $theme-background;
border-right: 0; border-right: 0;
cursor: pointer; cursor: pointer;
} }
span:nth-last-child(1) { span:nth-last-child(1) {
border-right: 1px solid #ccc; border-right: 1px solid $disabled-color;
} }
} }
span.active { span.active {
background-color: #409eff; background-color: $active-color;
color: #fff; color: $theme-background;
} }
.expression-param { .expression-param {
@ -640,7 +640,7 @@ limitations under the License. -->
min-height: 26px; min-height: 26px;
&:focus { &:focus {
border-color: #409eff; border-color: $active-color;
} }
} }
@ -651,6 +651,6 @@ limitations under the License. -->
.link { .link {
cursor: pointer; cursor: pointer;
color: #409eff; color: $active-color;
} }
</style> </style>

2
src/views/dashboard/configuration/widget/metric/Standard.vue
View File

@ -187,7 +187,7 @@ limitations under the License. -->
.label { .label {
width: 150px; width: 150px;
display: inline-block; display: inline-block;
font-size: 12px; font-size: $font-size-smaller;
} }
.close { .close {

6
src/views/dashboard/controls/ContinuousProfiling.vue
View File

@ -62,7 +62,7 @@ limitations under the License. -->
.profile-wrapper { .profile-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }
@ -74,7 +74,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
} }
@ -86,7 +86,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/DemandLog.vue
View File

@ -55,7 +55,7 @@ limitations under the License. -->
.log-wrapper { .log-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
@ -68,7 +68,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
min-width: 1024px; min-width: 1024px;
} }
@ -81,7 +81,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/Ebpf.vue
View File

@ -55,7 +55,7 @@ limitations under the License. -->
.profile-wrapper { .profile-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }
@ -67,7 +67,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
} }
@ -79,7 +79,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/Event.vue
View File

@ -65,7 +65,7 @@ limitations under the License. -->
.event-wrapper { .event-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
@ -79,7 +79,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
min-width: 1024px; min-width: 1024px;
} }
@ -92,7 +92,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/Log.vue
View File

@ -62,7 +62,7 @@ limitations under the License. -->
.log-wrapper { .log-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
@ -76,7 +76,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
min-width: 1024px; min-width: 1024px;
} }
@ -89,7 +89,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/NetworkProfiling.vue
View File

@ -54,7 +54,7 @@ limitations under the License. -->
.profile-wrapper { .profile-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }
@ -66,7 +66,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
} }
@ -78,7 +78,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/Profile.vue
View File

@ -55,7 +55,7 @@ limitations under the License. -->
.profile-wrapper { .profile-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }
@ -67,7 +67,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
} }
@ -79,7 +79,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

12
src/views/dashboard/controls/Tab.vue
View File

@ -282,7 +282,7 @@ limitations under the License. -->
<style lang="scss" scoped> <style lang="scss" scoped>
.tabs { .tabs {
height: 40px; height: 40px;
color: #ccc; color: $disabled-color;
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
@ -326,10 +326,10 @@ limitations under the License. -->
} }
span.active { span.active {
border-bottom: 1px solid #409eff; border-bottom: 1px solid $active-color;
.tab-name { .tab-name {
color: #409eff; color: $active-color;
} }
} }
} }
@ -359,7 +359,7 @@ limitations under the License. -->
} }
.vue-grid-item:not(.vue-grid-placeholder) { .vue-grid-item:not(.vue-grid-placeholder) {
background: #fff; background: $theme-background;
box-shadow: 0 1px 4px 0 #00000029; box-shadow: 0 1px 4px 0 #00000029;
border-radius: 3px; border-radius: 3px;
} }
@ -374,13 +374,13 @@ limitations under the License. -->
} }
.vue-grid-item.active { .vue-grid-item.active {
border: 1px solid #409eff; border: 1px solid $active-color;
} }
.no-data-tips { .no-data-tips {
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 14px; font-size: $font-size-normal;
padding-top: 30px; padding-top: 30px;
color: #888; color: #888;
} }

6
src/views/dashboard/controls/TaskTimeline.vue
View File

@ -54,7 +54,7 @@ limitations under the License. -->
.content-wrapper { .content-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }
@ -66,7 +66,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
} }
@ -78,7 +78,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

4
src/views/dashboard/controls/Text.vue
View File

@ -78,7 +78,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.text { .text {
font-size: 12px; font-size: $font-size-smaller;
height: 100%; height: 100%;
position: relative; position: relative;
} }
@ -111,7 +111,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/ThirdPartyApp.vue
View File

@ -70,7 +70,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.text { .text {
font-size: 12px; font-size: $font-size-smaller;
height: 100%; height: 100%;
position: relative; position: relative;
} }
@ -102,13 +102,13 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }
.tips { .tips {
font-size: 14px; font-size: $font-size-normal;
color: #888; color: #888;
width: 100%; width: 100%;
text-align: center; text-align: center;

4
src/views/dashboard/controls/TimeRange.vue
View File

@ -141,7 +141,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.time-range { .time-range {
font-size: 12px; font-size: $font-size-smaller;
height: 100%; height: 100%;
position: relative; position: relative;
} }
@ -175,7 +175,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/Topology.vue
View File

@ -62,7 +62,7 @@ limitations under the License. -->
// background-color: #333840; // background-color: #333840;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
} }
@ -81,13 +81,13 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }
.no-data { .no-data {
font-size: 14px; font-size: $font-size-normal;
color: #888; color: #888;
width: 100%; width: 100%;
text-align: center; text-align: center;

6
src/views/dashboard/controls/Trace.vue
View File

@ -62,7 +62,7 @@ limitations under the License. -->
.trace-wrapper { .trace-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px; font-size: $font-size-smaller;
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
@ -75,7 +75,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: 12px; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
min-width: 1200px; min-width: 1200px;
} }
@ -88,7 +88,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

6
src/views/dashboard/controls/Widget.vue
View File

@ -269,7 +269,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.widget { .widget {
font-size: 12px; font-size: $font-size-smaller;
height: 100%; height: 100%;
} }
@ -293,7 +293,7 @@ limitations under the License. -->
text-align: center; text-align: center;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }
@ -305,7 +305,7 @@ limitations under the License. -->
} }
.no-data { .no-data {
font-size: 14px; font-size: $font-size-normal;
color: #888; color: #888;
width: 100%; width: 100%;
text-align: center; text-align: center;

2
src/views/dashboard/graphs/Card.vue
View File

@ -73,7 +73,7 @@ limitations under the License. -->
color: #666; color: #666;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: $font-size-normal;
} }
.unit { .unit {

4
src/views/dashboard/graphs/EndpointList.vue
View File

@ -241,4 +241,8 @@ limitations under the License. -->
.tips { .tips {
color: rgb(255 0 0 / 50%); color: rgb(255 0 0 / 50%);
} }
.link {
color: $active-color;
}
</style> </style>

4
src/views/dashboard/graphs/ServiceList.vue
View File

@ -335,4 +335,8 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url("./style.scss"); @import url("./style.scss");
.link {
color: $active-color;
}
</style> </style>

10
src/views/dashboard/graphs/Table.vue
View File

@ -76,14 +76,14 @@ limitations under the License. -->
} }
.row { .row {
border-left: 1px solid #ccc; border-left: 1px solid $disabled-color;
height: 20px; height: 20px;
width: 100%; width: 100%;
div { div {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
border-right: 1px solid #ccc; border-right: 1px solid $disabled-color;
text-align: center; text-align: center;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
@ -91,11 +91,11 @@ limitations under the License. -->
} }
div:last-child { div:last-child {
border-bottom: 1px solid #ccc; border-bottom: 1px solid $disabled-color;
} }
div:nth-last-child(2) { div:nth-last-child(2) {
border-bottom: 1px solid #ccc; border-bottom: 1px solid $disabled-color;
} }
} }
@ -105,7 +105,7 @@ limitations under the License. -->
.row:first-child { .row:first-child {
div { div {
border-top: 1px solid #ccc; border-top: 1px solid $disabled-color;
background: #eee; background: #eee;
} }
} }

10
src/views/dashboard/graphs/TopList.vue
View File

@ -140,7 +140,7 @@ limitations under the License. -->
} }
.progress-bar { .progress-bar {
font-size: 12px; font-size: $font-size-smaller;
color: #333; color: #333;
} }
@ -159,7 +159,7 @@ limitations under the License. -->
} }
.calls { .calls {
font-size: 12px; font-size: $font-size-smaller;
padding: 0 5px; padding: 0 5px;
display: inline-block; display: inline-block;
background-color: #40454e; background-color: #40454e;
@ -172,7 +172,7 @@ limitations under the License. -->
border-radius: 4px; border-radius: 4px;
border: 1px solid #ddd; border: 1px solid #ddd;
color: #333; color: #333;
background-color: #fff; background-color: $theme-background;
will-change: opacity, background-color; will-change: opacity, background-color;
transition: opacity 0.3s, background-color 0.3s; transition: opacity 0.3s, background-color 0.3s;
} }
@ -197,10 +197,10 @@ limitations under the License. -->
cursor: pointer; cursor: pointer;
position: relative; position: relative;
text-align: center; text-align: center;
font-size: 12px; font-size: $font-size-smaller;
&:hover { &:hover {
color: #409eff; color: $active-color;
background-color: #eee; background-color: #eee;
} }
} }

3
src/views/dashboard/graphs/components/ColumnGraph.vue
View File

@ -42,7 +42,7 @@ limitations under the License. -->
<el-popover placement="left" :width="400" trigger="click"> <el-popover placement="left" :width="400" trigger="click">
<template #reference> <template #reference>
<span class="trend"> <span class="trend">
<Icon iconName="timeline" size="middle" style="color: #409eff" /> <Icon iconName="timeline" size="middle" />
</span> </span>
</template> </template>
<div class="view-line"> <div class="view-line">
@ -159,6 +159,7 @@ limitations under the License. -->
display: inline-block; display: inline-block;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
color: $active-color;
} }
.value { .value {

6
src/views/dashboard/graphs/components/Legend.vue
View File

@ -118,7 +118,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
table { table {
font-size: 12px; font-size: $font-size-smaller;
white-space: nowrap; white-space: nowrap;
margin: 0; margin: 0;
border: none; border: none;
@ -136,7 +136,7 @@ limitations under the License. -->
top: 0; top: 0;
z-index: 1; z-index: 1;
width: 25vw; width: 25vw;
background: #fff; background: $theme-background;
text-align: left; text-align: left;
} }
@ -158,7 +158,7 @@ limitations under the License. -->
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
text-align: left; text-align: left;
background: #fff; background-color: $theme-background;
position: sticky; position: sticky;
left: 0; left: 0;
z-index: 1; z-index: 1;

Some files were not shown because too many files have changed in this diff Show More