mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-13 16:27:33 +00:00
bump vite to 4.x
This commit is contained in:
Fine
parent
f1ed9c7bd5
commit
2c8b2b9e1e
34
.eslintrc.cjs
Normal file
34
.eslintrc.cjs
Normal file
@ -0,0 +1,34 @@
|
||||
/* eslint-env node */
|
||||
require("@rushstack/eslint-patch/modern-module-resolution");
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended",
|
||||
"@vue/eslint-config-typescript",
|
||||
"@vue/eslint-config-prettier",
|
||||
],
|
||||
overrides: [
|
||||
{
|
||||
files: ["cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}"],
|
||||
extends: ["plugin:cypress/recommended"],
|
||||
},
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: "latest",
|
||||
},
|
||||
rules: {
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
"@typescript-eslint/explicit-module-boundary-types": "off",
|
||||
"vue/script-setup-uses-vars": "error",
|
||||
"@typescript-eslint/ban-ts-ignore'": "off",
|
||||
"@typescript-eslint/explicit-function-return-type": "off",
|
||||
"no-use-before-define": "off",
|
||||
"@typescript-eslint/no-use-before-define": "off",
|
||||
"@typescript-eslint/no-non-null-assertion": "off",
|
||||
"@typescript-eslint/no-this-alias": "off",
|
||||
"vue/multi-word-component-names": "off",
|
||||
"@typescript-eslint/consistent-type-imports": "error",
|
||||
},
|
||||
};
|
||||
53
.eslintrc.js
53
.eslintrc.js
@ -1,53 +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.
|
||||
*/
|
||||
const { defineConfig } = require('eslint-define-config');
|
||||
module.exports = defineConfig({
|
||||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
es6: true,
|
||||
},
|
||||
parser: 'vue-eslint-parser',
|
||||
parserOptions: {
|
||||
parser: '@typescript-eslint/parser',
|
||||
ecmaVersion: 2020,
|
||||
sourceType: 'module',
|
||||
jsxPragma: 'React',
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
extends: [
|
||||
'plugin:vue/vue3-recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'prettier',
|
||||
'plugin:prettier/recommended',
|
||||
'plugin:jest/recommended',
|
||||
],
|
||||
rules: {
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
"@typescript-eslint/explicit-module-boundary-types": "off",
|
||||
"vue/script-setup-uses-vars": "error",
|
||||
"@typescript-eslint/ban-ts-ignore'": "off",
|
||||
"@typescript-eslint/explicit-function-return-type": "off",
|
||||
"no-use-before-define": "off",
|
||||
"@typescript-eslint/no-use-before-define": "off",
|
||||
"@typescript-eslint/no-non-null-assertion": "off",
|
||||
"@typescript-eslint/no-this-alias": "off"
|
||||
}
|
||||
});
|
||||
11
.gitignore
vendored
11
.gitignore
vendored
@ -31,23 +31,25 @@ pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
node
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
@ -56,6 +58,3 @@ dist-ssr
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
/tests/e2e/videos/
|
||||
/tests/e2e/screenshots/
|
||||
@ -1,32 +1,32 @@
|
||||
module.exports = {
|
||||
ignores: [(commit) => commit.includes('init')],
|
||||
extends: ['@commitlint/config-conventional'],
|
||||
ignores: [(commit) => commit.includes("init")],
|
||||
extends: ["@commitlint/config-conventional"],
|
||||
rules: {
|
||||
'body-leading-blank': [2, 'always'],
|
||||
'footer-leading-blank': [1, 'always'],
|
||||
'header-max-length': [2, 'always', 108],
|
||||
'subject-empty': [2, 'never'],
|
||||
'type-empty': [2, 'never'],
|
||||
'subject-case': [0],
|
||||
'type-enum': [
|
||||
"body-leading-blank": [2, "always"],
|
||||
"footer-leading-blank": [1, "always"],
|
||||
"header-max-length": [2, "always", 108],
|
||||
"subject-empty": [2, "never"],
|
||||
"type-empty": [2, "never"],
|
||||
"subject-case": [0],
|
||||
"type-enum": [
|
||||
2,
|
||||
'always',
|
||||
"always",
|
||||
[
|
||||
'feat',
|
||||
'fix',
|
||||
'perf',
|
||||
'style',
|
||||
'docs',
|
||||
'test',
|
||||
'refactor',
|
||||
'build',
|
||||
'ci',
|
||||
'chore',
|
||||
'revert',
|
||||
'wip',
|
||||
'workflow',
|
||||
'types',
|
||||
'release',
|
||||
"feat",
|
||||
"fix",
|
||||
"perf",
|
||||
"style",
|
||||
"docs",
|
||||
"test",
|
||||
"refactor",
|
||||
"build",
|
||||
"ci",
|
||||
"chore",
|
||||
"revert",
|
||||
"wip",
|
||||
"workflow",
|
||||
"types",
|
||||
"release",
|
||||
],
|
||||
],
|
||||
},
|
||||
|
||||
8
cypress.config.ts
Normal file
8
cypress.config.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { defineConfig } from "cypress";
|
||||
|
||||
export default defineConfig({
|
||||
e2e: {
|
||||
specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
|
||||
baseUrl: "http://localhost:4173",
|
||||
},
|
||||
});
|
||||
8
cypress/e2e/example.cy.ts
Normal file
8
cypress/e2e/example.cy.ts
Normal file
@ -0,0 +1,8 @@
|
||||
// https://docs.cypress.io/api/introduction/api.html
|
||||
|
||||
describe("My First Test", () => {
|
||||
it("visits the app root url", () => {
|
||||
cy.visit("/");
|
||||
cy.contains("h1", "You did it!");
|
||||
});
|
||||
});
|
||||
10
cypress/e2e/tsconfig.json
Normal file
10
cypress/e2e/tsconfig.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||
"include": ["./**/*", "../support/**/*"],
|
||||
"compilerOptions": {
|
||||
"isolatedModules": false,
|
||||
"target": "es5",
|
||||
"lib": ["es5", "dom"],
|
||||
"types": ["cypress"]
|
||||
}
|
||||
}
|
||||
5
cypress/fixtures/example.json
Normal file
5
cypress/fixtures/example.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "Using fixtures to represent data",
|
||||
"email": "hello@cypress.io",
|
||||
"body": "Fixtures are a great way to mock data for responses to routes"
|
||||
}
|
||||
39
cypress/support/commands.ts
Normal file
39
cypress/support/commands.ts
Normal file
@ -0,0 +1,39 @@
|
||||
/// <reference types="cypress" />
|
||||
// ***********************************************
|
||||
// This example commands.ts shows you how to
|
||||
// create various custom commands and overwrite
|
||||
// existing commands.
|
||||
//
|
||||
// For more comprehensive examples of custom
|
||||
// commands please read more here:
|
||||
// https://on.cypress.io/custom-commands
|
||||
// ***********************************************
|
||||
//
|
||||
//
|
||||
// -- This is a parent command --
|
||||
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a child command --
|
||||
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a dual command --
|
||||
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This will overwrite an existing command --
|
||||
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
||||
//
|
||||
// declare global {
|
||||
// namespace Cypress {
|
||||
// interface Chainable {
|
||||
// login(email: string, password: string): Chainable<void>
|
||||
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
||||
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
||||
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
export {};
|
||||
20
cypress/support/e2e.ts
Normal file
20
cypress/support/e2e.ts
Normal file
@ -0,0 +1,20 @@
|
||||
// ***********************************************************
|
||||
// This example support/index.js is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import "./commands";
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
35049
package-lock.json
generated
35049
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
55
package.json
55
package.json
@ -3,10 +3,16 @@
|
||||
"version": "9.3.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"prepare": "husky install",
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc && vite build",
|
||||
"build": "run-p type-check build-only",
|
||||
"preview": "vite preview",
|
||||
"prepare": "husky install"
|
||||
"test:unit": "vitest --environment jsdom --root src/",
|
||||
"test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
|
||||
"test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.24.0",
|
||||
@ -17,52 +23,55 @@
|
||||
"element-plus": "^2.0.2",
|
||||
"lodash": "^4.17.21",
|
||||
"monaco-editor": "^0.34.1",
|
||||
"pinia": "^2.0.5",
|
||||
"vis-timeline": "^7.5.1",
|
||||
"vue": "^3.0.0",
|
||||
"pinia": "^2.0.28",
|
||||
"vue": "^3.2.45",
|
||||
"vue-router": "^4.1.6",
|
||||
"vue-grid-layout": "^3.0.0-beta1",
|
||||
"vue-i18n": "^9.1.9",
|
||||
"vue-router": "^4.0.0-0",
|
||||
"vue-types": "^4.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/d3": "^7.1.0",
|
||||
"@types/d3-tip": "^3.5.5",
|
||||
"@types/echarts": "^4.9.12",
|
||||
"@types/jest": "^24.0.19",
|
||||
"@types/lodash": "^4.14.179",
|
||||
"@types/three": "^0.131.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.18.0",
|
||||
"@typescript-eslint/parser": "^4.18.0",
|
||||
"@vitejs/plugin-vue": "^3.2.0",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"@vue/eslint-config-prettier": "^6.0.0",
|
||||
"@vue/eslint-config-typescript": "^7.0.0",
|
||||
"@vue/test-utils": "^2.0.0-0",
|
||||
"babel-jest": "^24.9.0",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-define-config": "^1.12.0",
|
||||
"eslint-plugin-prettier": "^3.3.1",
|
||||
"eslint-plugin-vue": "^7.20.0",
|
||||
"husky": "^7.0.4",
|
||||
"lint-staged": "^12.1.3",
|
||||
"node-sass": "^8.0.0",
|
||||
"postcss-html": "^1.3.0",
|
||||
"postcss-scss": "^4.0.2",
|
||||
"prettier": "^2.2.1",
|
||||
"sass": "^1.56.1",
|
||||
"stylelint": "^14.1.0",
|
||||
"stylelint-config-html": "^1.0.0",
|
||||
"stylelint-config-prettier": "^9.0.3",
|
||||
"stylelint-config-standard": "^24.0.0",
|
||||
"stylelint-order": "^5.0.0",
|
||||
"typescript": "~4.4.4",
|
||||
"unplugin-auto-import": "^0.7.0",
|
||||
"unplugin-vue-components": "^0.19.2",
|
||||
"vite": "^3.2.3",
|
||||
"vite-plugin-monaco-editor": "^1.1.0",
|
||||
"vue-jest": "^5.0.0-0",
|
||||
"vue-tsc": "^1.0.9"
|
||||
"@rushstack/eslint-patch": "^1.1.4",
|
||||
"@types/jsdom": "^20.0.1",
|
||||
"@types/node": "^18.11.12",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
||||
"@vue/eslint-config-prettier": "^7.0.0",
|
||||
"@vue/eslint-config-typescript": "^11.0.0",
|
||||
"@vue/test-utils": "^2.2.6",
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"cypress": "^12.0.2",
|
||||
"eslint": "^8.22.0",
|
||||
"eslint-plugin-cypress": "^2.12.1",
|
||||
"eslint-plugin-vue": "^9.3.0",
|
||||
"jsdom": "^20.0.3",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^2.7.1",
|
||||
"start-server-and-test": "^1.15.2",
|
||||
"typescript": "~4.7.4",
|
||||
"vite": "^4.0.0",
|
||||
"vitest": "^0.25.6",
|
||||
"vue-tsc": "^1.0.12"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
|
||||
@ -2,8 +2,8 @@ module.exports = {
|
||||
printWidth: 100,
|
||||
semi: true,
|
||||
vueIndentScriptAndStyle: true,
|
||||
trailingComma: 'all',
|
||||
proseWrap: 'never',
|
||||
htmlWhitespaceSensitivity: 'strict',
|
||||
endOfLine: 'auto',
|
||||
trailingComma: "all",
|
||||
proseWrap: "never",
|
||||
htmlWhitespaceSensitivity: "strict",
|
||||
endOfLine: "auto",
|
||||
};
|
||||
|
||||
@ -16,10 +16,10 @@ limitations under the License. -->
|
||||
<router-view />
|
||||
</template>
|
||||
<style>
|
||||
#app {
|
||||
#app {
|
||||
color: #2c3e50;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
min-width: 1024px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,9 +24,7 @@ function capitalizeFirstLetter(str: string) {
|
||||
}
|
||||
function validateFileName(str: string): string | undefined {
|
||||
if (/^\S+\.png$/.test(str)) {
|
||||
return str.replace(/^\S+\/(\w+)\.png$/, (rs, $1) =>
|
||||
capitalizeFirstLetter($1)
|
||||
);
|
||||
return str.replace(/^\S+\/(\w+)\.png$/, (rs, $1) => capitalizeFirstLetter($1));
|
||||
}
|
||||
}
|
||||
Object.keys(requireComponent).forEach((filePath: string) => {
|
||||
|
||||
@ -15,18 +15,10 @@ limitations under the License. -->
|
||||
<template>
|
||||
<div :class="`${state.pre}`">
|
||||
<div :class="`${state.pre}-head`">
|
||||
<a
|
||||
:class="`${state.pre}-prev-decade-btn`"
|
||||
v-show="state.showYears"
|
||||
@click="state.year -= 10"
|
||||
>
|
||||
<a :class="`${state.pre}-prev-decade-btn`" v-show="state.showYears" @click="state.year -= 10">
|
||||
<Icon size="sm" iconName="angle-double-left" />
|
||||
</a>
|
||||
<a
|
||||
:class="`${state.pre}-prev-year-btn`"
|
||||
v-show="!state.showYears"
|
||||
@click="state.year--"
|
||||
>
|
||||
<a :class="`${state.pre}-prev-year-btn`" v-show="!state.showYears" @click="state.year--">
|
||||
<Icon size="sm" iconName="angle-double-left" />
|
||||
</a>
|
||||
<a
|
||||
@ -36,9 +28,7 @@ limitations under the License. -->
|
||||
>
|
||||
<Icon size="middle" iconName="chevron-left" />
|
||||
</a>
|
||||
<a :class="`${state.pre}-year-select`" v-show="state.showYears">{{
|
||||
ys + "-" + ye
|
||||
}}</a>
|
||||
<a :class="`${state.pre}-year-select`" v-show="state.showYears">{{ ys + "-" + ye }}</a>
|
||||
<template v-if="local.yearSuffix">
|
||||
<a
|
||||
:class="`${state.pre}-year-select`"
|
||||
@ -74,40 +64,22 @@ limitations under the License. -->
|
||||
>
|
||||
<Icon size="middle" iconName="chevron-right" />
|
||||
</a>
|
||||
<a
|
||||
:class="`${state.pre}-next-year-btn`"
|
||||
v-show="!state.showYears"
|
||||
@click="state.year++"
|
||||
>
|
||||
<a :class="`${state.pre}-next-year-btn`" v-show="!state.showYears" @click="state.year++">
|
||||
<Icon size="sm" iconName="angle-double-right" />
|
||||
</a>
|
||||
<a
|
||||
:class="`${state.pre}-next-decade-btn`"
|
||||
v-show="state.showYears"
|
||||
@click="state.year += 10"
|
||||
>
|
||||
<a :class="`${state.pre}-next-decade-btn`" v-show="state.showYears" @click="state.year += 10">
|
||||
<Icon size="sm" iconName="angle-double-right" />
|
||||
</a>
|
||||
</div>
|
||||
<div :class="`${state.pre}-body`">
|
||||
<div :class="`${state.pre}-days`">
|
||||
<a :class="`${state.pre}-week`" v-for="i in local.weeks" :key="i">{{
|
||||
i
|
||||
}}</a>
|
||||
<a :class="`${state.pre}-week`" v-for="i in local.weeks" :key="i">{{ i }}</a>
|
||||
<a
|
||||
v-for="(j, i) in days"
|
||||
@click="is($event) && ((state.day = j.i), ok(j))"
|
||||
:class="[
|
||||
j.p || j.n ? `${state.pre}-date-out` : '',
|
||||
status(
|
||||
j.y,
|
||||
j.m,
|
||||
j.i,
|
||||
state.hour,
|
||||
state.minute,
|
||||
state.second,
|
||||
'YYYYMMDD'
|
||||
),
|
||||
status(j.y, j.m, j.i, state.hour, state.minute, state.second, 'YYYYMMDD'),
|
||||
]"
|
||||
:key="i"
|
||||
>{{ j.i }}</a
|
||||
@ -118,20 +90,10 @@ limitations under the License. -->
|
||||
v-for="(i, j) in local.months"
|
||||
@click="
|
||||
is($event) &&
|
||||
((state.showMonths = state.m === 'M'),
|
||||
(state.month = j),
|
||||
state.m === 'M' && ok('m'))
|
||||
((state.showMonths = state.m === 'M'), (state.month = j), state.m === 'M' && ok('m'))
|
||||
"
|
||||
:class="[
|
||||
status(
|
||||
state.year,
|
||||
j,
|
||||
state.day,
|
||||
state.hour,
|
||||
state.minute,
|
||||
state.second,
|
||||
'YYYYMM'
|
||||
),
|
||||
status(state.year, j, state.day, state.hour, state.minute, state.second, 'YYYYMM'),
|
||||
]"
|
||||
:key="j"
|
||||
>{{ i }}</a
|
||||
@ -142,21 +104,11 @@ limitations under the License. -->
|
||||
v-for="(i, j) in years"
|
||||
@click="
|
||||
is($event) &&
|
||||
((state.showYears = state.m === 'Y'),
|
||||
(state.year = i),
|
||||
state.m === 'Y' && ok('y'))
|
||||
((state.showYears = state.m === 'Y'), (state.year = i), state.m === 'Y' && ok('y'))
|
||||
"
|
||||
:class="[
|
||||
j === 0 || j === 11 ? `${state.pre}-date-out` : '',
|
||||
status(
|
||||
i,
|
||||
state.month,
|
||||
state.day,
|
||||
state.hour,
|
||||
state.minute,
|
||||
state.second,
|
||||
'YYYY'
|
||||
),
|
||||
status(i, state.month, state.day, state.hour, state.minute, state.second, 'YYYY'),
|
||||
]"
|
||||
:key="j"
|
||||
>{{ i }}</a
|
||||
@ -167,10 +119,7 @@ limitations under the License. -->
|
||||
<div class="scroll_hide calendar-overflow">
|
||||
<a
|
||||
v-for="(j, i) in 24"
|
||||
@click="
|
||||
is($event) &&
|
||||
((state.showHours = false), (state.hour = i), ok('h'))
|
||||
"
|
||||
@click="is($event) && ((state.showHours = false), (state.hour = i), ok('h'))"
|
||||
:class="[
|
||||
status(
|
||||
state.year,
|
||||
@ -179,7 +128,7 @@ limitations under the License. -->
|
||||
i,
|
||||
state.minute,
|
||||
state.second,
|
||||
'YYYYMMDDHH'
|
||||
'YYYYMMDDHH',
|
||||
),
|
||||
]"
|
||||
:key="i"
|
||||
@ -192,10 +141,7 @@ limitations under the License. -->
|
||||
<div class="scroll_hide calendar-overflow">
|
||||
<a
|
||||
v-for="(j, i) in 60"
|
||||
@click="
|
||||
is($event) &&
|
||||
((state.showMinutes = false), (state.minute = i), ok('h'))
|
||||
"
|
||||
@click="is($event) && ((state.showMinutes = false), (state.minute = i), ok('h'))"
|
||||
:class="[
|
||||
status(
|
||||
state.year,
|
||||
@ -204,7 +150,7 @@ limitations under the License. -->
|
||||
state.hour,
|
||||
i,
|
||||
state.second,
|
||||
'YYYYMMDDHHmm'
|
||||
'YYYYMMDDHHmm',
|
||||
),
|
||||
]"
|
||||
:key="i"
|
||||
@ -217,10 +163,7 @@ limitations under the License. -->
|
||||
<div class="scroll_hide calendar-overflow">
|
||||
<a
|
||||
v-for="(j, i) in 60"
|
||||
@click="
|
||||
is($event) &&
|
||||
((state.showSeconds = false), (state.second = i), ok('h'))
|
||||
"
|
||||
@click="is($event) && ((state.showSeconds = false), (state.second = i), ok('h'))"
|
||||
:class="[
|
||||
status(
|
||||
state.year,
|
||||
@ -229,7 +172,7 @@ limitations under the License. -->
|
||||
state.hour,
|
||||
state.minute,
|
||||
i,
|
||||
'YYYYMMDDHHmmss'
|
||||
'YYYYMMDDHHmmss',
|
||||
),
|
||||
]"
|
||||
:key="i"
|
||||
@ -243,8 +186,7 @@ limitations under the License. -->
|
||||
<a
|
||||
:title="local.hourTip"
|
||||
@click="
|
||||
(state.showHours = !state.showHours),
|
||||
(state.showMinutes = state.showSeconds = false)
|
||||
(state.showHours = !state.showHours), (state.showMinutes = state.showSeconds = false)
|
||||
"
|
||||
:class="{ on: state.showHours }"
|
||||
>{{ dd(state.hour) }}</a
|
||||
@ -253,8 +195,7 @@ limitations under the License. -->
|
||||
<a
|
||||
:title="local.minuteTip"
|
||||
@click="
|
||||
(state.showMinutes = !state.showMinutes),
|
||||
(state.showHours = state.showSeconds = false)
|
||||
(state.showMinutes = !state.showMinutes), (state.showHours = state.showSeconds = false)
|
||||
"
|
||||
:class="{ on: state.showMinutes }"
|
||||
>{{ dd(state.minute) }}</a
|
||||
@ -277,13 +218,13 @@ limitations under the License. -->
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, watch, reactive } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
/*global defineProps, defineEmits */
|
||||
const emit = defineEmits(["input", "setDates", "ok"]);
|
||||
const { t } = useI18n();
|
||||
const props = defineProps({
|
||||
import { computed, onMounted, watch, reactive } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
/*global defineProps, defineEmits */
|
||||
const emit = defineEmits(["input", "setDates", "ok"]);
|
||||
const { t } = useI18n();
|
||||
const props = defineProps({
|
||||
value: { type: Date },
|
||||
left: { type: Boolean, default: false },
|
||||
right: { type: Boolean, default: false },
|
||||
@ -293,8 +234,8 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: "YYYY-MM-DD",
|
||||
},
|
||||
});
|
||||
const state = reactive({
|
||||
});
|
||||
const state = reactive({
|
||||
pre: "",
|
||||
m: "",
|
||||
showYears: false,
|
||||
@ -308,8 +249,8 @@ const state = reactive({
|
||||
hour: 0,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
});
|
||||
const get = (time: Date): { [key: string]: any } => {
|
||||
});
|
||||
const get = (time: Date): { [key: string]: any } => {
|
||||
return {
|
||||
year: time.getFullYear(),
|
||||
month: time.getMonth(),
|
||||
@ -318,8 +259,8 @@ const get = (time: Date): { [key: string]: any } => {
|
||||
minute: time.getMinutes(),
|
||||
second: time.getSeconds(),
|
||||
};
|
||||
};
|
||||
if (props.value) {
|
||||
};
|
||||
if (props.value) {
|
||||
const time = get(props.value);
|
||||
state.pre = "calendar";
|
||||
state.m = "D";
|
||||
@ -334,8 +275,8 @@ if (props.value) {
|
||||
state.hour = time.hour;
|
||||
state.minute = time.minute;
|
||||
state.second = time.second;
|
||||
}
|
||||
watch(
|
||||
}
|
||||
watch(
|
||||
() => props.value,
|
||||
(val: Date | undefined) => {
|
||||
if (!val) {
|
||||
@ -348,32 +289,32 @@ watch(
|
||||
state.hour = time.hour;
|
||||
state.minute = time.minute;
|
||||
state.second = time.second;
|
||||
}
|
||||
);
|
||||
const parse = (num: number): number => {
|
||||
},
|
||||
);
|
||||
const parse = (num: number): number => {
|
||||
return num / 100000;
|
||||
};
|
||||
const start = computed(() => {
|
||||
};
|
||||
const start = computed(() => {
|
||||
return parse(Number(props.dates[0]));
|
||||
});
|
||||
const end = computed(() => {
|
||||
});
|
||||
const end = computed(() => {
|
||||
return parse(Number(props.dates[1]));
|
||||
});
|
||||
const ys = computed(() => {
|
||||
});
|
||||
const ys = computed(() => {
|
||||
return Math.floor(state.year / 10) * 10;
|
||||
});
|
||||
const ye = computed(() => {
|
||||
});
|
||||
const ye = computed(() => {
|
||||
return ys.value + 10;
|
||||
});
|
||||
const years = computed(() => {
|
||||
});
|
||||
const years = computed(() => {
|
||||
const arr = [];
|
||||
let start = ys.value - 1;
|
||||
while (arr.length < 12) {
|
||||
arr.push((start += 1));
|
||||
}
|
||||
return arr;
|
||||
});
|
||||
const local = computed(() => {
|
||||
});
|
||||
const local = computed(() => {
|
||||
return {
|
||||
dow: 1, // Monday is the first day of the week
|
||||
hourTip: t("hourTip"), // tip of select hour
|
||||
@ -392,8 +333,8 @@ const local = computed(() => {
|
||||
weekCutTip: t("weekCutTip"),
|
||||
monthCutTip: t("monthCutTip"),
|
||||
};
|
||||
});
|
||||
const days = computed(() => {
|
||||
});
|
||||
const days = computed(() => {
|
||||
const days = [];
|
||||
const year = state.year;
|
||||
const month = state.month;
|
||||
@ -431,26 +372,19 @@ const days = computed(() => {
|
||||
});
|
||||
}
|
||||
return days;
|
||||
});
|
||||
const dd = (val: number) => ("0" + val).slice(-2);
|
||||
const status = (
|
||||
});
|
||||
const dd = (val: number) => ("0" + val).slice(-2);
|
||||
const status = (
|
||||
year: number,
|
||||
month: number,
|
||||
day: number,
|
||||
hour: number,
|
||||
minute: number,
|
||||
second: number,
|
||||
format: string
|
||||
) => {
|
||||
format: string,
|
||||
) => {
|
||||
const maxDay = new Date(year, month + 1, 0).getDate();
|
||||
const time: any = new Date(
|
||||
year,
|
||||
month,
|
||||
day > maxDay ? maxDay : day,
|
||||
hour,
|
||||
minute,
|
||||
second
|
||||
);
|
||||
const time: any = new Date(year, month, day > maxDay ? maxDay : day, hour, minute, second);
|
||||
const t = parse(time);
|
||||
const tf = (time?: Date, format?: any): string => {
|
||||
if (!time) {
|
||||
@ -484,7 +418,7 @@ const status = (
|
||||
};
|
||||
return (format || props.format).replace(
|
||||
/Y+|M+|D+|H+|h+|m+|s+|S+/g,
|
||||
(str: string) => map[str]
|
||||
(str: string) => map[str],
|
||||
);
|
||||
};
|
||||
const classObj: any = {};
|
||||
@ -503,27 +437,27 @@ const status = (
|
||||
(props.left && t > start.value) || (props.right && t < end.value);
|
||||
classObj[`${state.pre}-date-selected`] = flag;
|
||||
return classObj;
|
||||
};
|
||||
const nm = () => {
|
||||
};
|
||||
const nm = () => {
|
||||
if (state.month < 11) {
|
||||
state.month++;
|
||||
} else {
|
||||
state.month = 0;
|
||||
state.year++;
|
||||
}
|
||||
};
|
||||
const pm = () => {
|
||||
};
|
||||
const pm = () => {
|
||||
if (state.month > 0) {
|
||||
state.month--;
|
||||
} else {
|
||||
state.month = 11;
|
||||
state.year--;
|
||||
}
|
||||
};
|
||||
const is = (e: any) => {
|
||||
};
|
||||
const is = (e: any) => {
|
||||
return e.target.className.indexOf(`${state.pre}-date-disabled`) === -1;
|
||||
};
|
||||
const ok = (info: any) => {
|
||||
};
|
||||
const ok = (info: any) => {
|
||||
let year = "";
|
||||
let month = "";
|
||||
let day = "";
|
||||
@ -544,7 +478,7 @@ const ok = (info: any) => {
|
||||
day ? Number(day) : state.day,
|
||||
state.hour,
|
||||
state.minute,
|
||||
state.second
|
||||
state.second,
|
||||
);
|
||||
if (props.left && _time.getTime() / 100000 < end.value) {
|
||||
emit("setDates", _time, "left");
|
||||
@ -556,8 +490,8 @@ const ok = (info: any) => {
|
||||
emit("setDates", _time);
|
||||
}
|
||||
emit("ok", info === "h");
|
||||
};
|
||||
onMounted(() => {
|
||||
};
|
||||
onMounted(() => {
|
||||
const is = (c: string) => props.format.indexOf(c) !== -1;
|
||||
if (is("s") && is("m") && (is("h") || is("H"))) {
|
||||
state.m = "H";
|
||||
@ -570,30 +504,30 @@ onMounted(() => {
|
||||
state.m = "Y";
|
||||
state.showYears = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.calendar {
|
||||
.calendar {
|
||||
float: left;
|
||||
user-select: none;
|
||||
color: #3d444f;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar + .calendar {
|
||||
.calendar + .calendar {
|
||||
border-left: solid 1px #eaeaea;
|
||||
margin-left: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-head {
|
||||
.calendar-head {
|
||||
line-height: 34px;
|
||||
height: 34px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-head a {
|
||||
.calendar-head a {
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
@ -601,50 +535,50 @@ onMounted(() => {
|
||||
position: absolute;
|
||||
padding: 0 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-head a:hover {
|
||||
.calendar-head a:hover {
|
||||
color: #3f97e3;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-head .calendar-year-select,
|
||||
.calendar-head .calendar-month-select {
|
||||
.calendar-head .calendar-year-select,
|
||||
.calendar-head .calendar-month-select {
|
||||
font-size: 12px;
|
||||
padding: 0 2px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-prev-decade-btn,
|
||||
.calendar-prev-year-btn {
|
||||
.calendar-prev-decade-btn,
|
||||
.calendar-prev-year-btn {
|
||||
left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-prev-month-btn {
|
||||
.calendar-prev-month-btn {
|
||||
left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-next-decade-btn,
|
||||
.calendar-next-year-btn {
|
||||
.calendar-next-decade-btn,
|
||||
.calendar-next-year-btn {
|
||||
right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-next-month-btn {
|
||||
.calendar-next-month-btn {
|
||||
right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-body {
|
||||
.calendar-body {
|
||||
position: relative;
|
||||
width: 196px;
|
||||
height: 196px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-days {
|
||||
.calendar-days {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-week,
|
||||
.calendar-date {
|
||||
.calendar-week,
|
||||
.calendar-date {
|
||||
font-weight: normal;
|
||||
width: 14.28%;
|
||||
height: 14.28%;
|
||||
@ -652,96 +586,96 @@ onMounted(() => {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-week:before,
|
||||
.calendar-date:before {
|
||||
.calendar-week:before,
|
||||
.calendar-date:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-date {
|
||||
.calendar-date {
|
||||
cursor: pointer;
|
||||
line-height: 29px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-date-out {
|
||||
.calendar-date-out {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-date:hover,
|
||||
.calendar-date-on {
|
||||
.calendar-date:hover,
|
||||
.calendar-date-on {
|
||||
color: #3f97e3;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-date-selected,
|
||||
.calendar-date-selected:hover {
|
||||
.calendar-date-selected,
|
||||
.calendar-date-selected:hover {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
border-radius: 14px;
|
||||
background: #3f97e3;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-date-disabled {
|
||||
.calendar-date-disabled {
|
||||
cursor: not-allowed !important;
|
||||
color: #ccc !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-foot {
|
||||
.calendar-foot {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-hour {
|
||||
.calendar-hour {
|
||||
display: inline-block;
|
||||
border: 1px solid #e6e5e5;
|
||||
color: #9e9e9e;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-hour a {
|
||||
.calendar-hour a {
|
||||
display: inline-block;
|
||||
padding: 2px 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-hour a:hover,
|
||||
.calendar-hour a.on {
|
||||
.calendar-hour a:hover,
|
||||
.calendar-hour a.on {
|
||||
color: #3f97e3;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-years,
|
||||
.calendar-months,
|
||||
.calendar-hours,
|
||||
.calendar-minutes,
|
||||
.calendar-seconds {
|
||||
.calendar-years,
|
||||
.calendar-months,
|
||||
.calendar-hours,
|
||||
.calendar-minutes,
|
||||
.calendar-seconds {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-months a {
|
||||
.calendar-months a {
|
||||
width: 33.33%;
|
||||
height: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-years a {
|
||||
.calendar-years a {
|
||||
width: 33.33%;
|
||||
height: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-overflow {
|
||||
.calendar-overflow {
|
||||
overflow-x: scroll;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* .calendar-hours a {
|
||||
/* .calendar-hours a {
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
}
|
||||
@ -752,12 +686,12 @@ onMounted(() => {
|
||||
height: 10%;
|
||||
} */
|
||||
|
||||
.calendar-title {
|
||||
.calendar-title {
|
||||
margin-top: -30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,11 +19,7 @@ limitations under the License. -->
|
||||
<div class="tools" @click="associateMetrics" v-if="associate.length">
|
||||
{{ t("associateMetrics") }}
|
||||
</div>
|
||||
<div
|
||||
class="tools"
|
||||
@click="viewTrace"
|
||||
v-if="relatedTrace && relatedTrace.enableRelate"
|
||||
>
|
||||
<div class="tools" @click="viewTrace" v-if="relatedTrace && relatedTrace.enableRelate">
|
||||
{{ t("viewTrace") }}
|
||||
</div>
|
||||
</div>
|
||||
@ -40,39 +36,29 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
watch,
|
||||
ref,
|
||||
Ref,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
unref,
|
||||
computed,
|
||||
} from "vue";
|
||||
import type { PropType } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { EventParams } from "@/types/app";
|
||||
import { Filters, RelatedTrace } from "@/types/dashboard";
|
||||
import { useECharts } from "@/hooks/useEcharts";
|
||||
import { addResizeListener, removeResizeListener } from "@/utils/event";
|
||||
import Trace from "@/views/dashboard/related/trace/Index.vue";
|
||||
import associateProcessor from "@/hooks/useAssociateProcessor";
|
||||
import { watch, ref, onMounted, onBeforeUnmount, unref, computed } from "vue";
|
||||
import type { PropType, Ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import type { EventParams } from "@/types/app";
|
||||
import type { Filters, RelatedTrace } from "@/types/dashboard";
|
||||
import { useECharts } from "@/hooks/useEcharts";
|
||||
import { addResizeListener, removeResizeListener } from "@/utils/event";
|
||||
import Trace from "@/views/dashboard/related/trace/Index.vue";
|
||||
import associateProcessor from "@/hooks/useAssociateProcessor";
|
||||
|
||||
/*global Nullable, defineProps, defineEmits*/
|
||||
const emits = defineEmits(["select"]);
|
||||
const { t } = useI18n();
|
||||
const chartRef = ref<Nullable<HTMLDivElement>>(null);
|
||||
const menus = ref<Nullable<HTMLDivElement>>(null);
|
||||
const visMenus = ref<boolean>(false);
|
||||
const { setOptions, resize, getInstance } = useECharts(
|
||||
chartRef as Ref<HTMLDivElement>
|
||||
);
|
||||
const currentParams = ref<Nullable<EventParams>>(null);
|
||||
const showTrace = ref<boolean>(false);
|
||||
const traceOptions = ref<{ type: string; filters?: unknown }>({
|
||||
/*global Nullable, defineProps, defineEmits*/
|
||||
const emits = defineEmits(["select"]);
|
||||
const { t } = useI18n();
|
||||
const chartRef = ref<Nullable<HTMLDivElement>>(null);
|
||||
const menus = ref<Nullable<HTMLDivElement>>(null);
|
||||
const visMenus = ref<boolean>(false);
|
||||
const { setOptions, resize, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
const currentParams = ref<Nullable<EventParams>>(null);
|
||||
const showTrace = ref<boolean>(false);
|
||||
const traceOptions = ref<{ type: string; filters?: unknown }>({
|
||||
type: "Trace",
|
||||
});
|
||||
const props = defineProps({
|
||||
});
|
||||
const props = defineProps({
|
||||
height: { type: String, default: "100%" },
|
||||
width: { type: String, default: "100%" },
|
||||
option: {
|
||||
@ -89,21 +75,21 @@ const props = defineProps({
|
||||
type: Array as PropType<{ widgetId: string }[]>,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const available = computed(
|
||||
});
|
||||
const available = computed(
|
||||
() =>
|
||||
(Array.isArray(props.option.series) &&
|
||||
props.option.series[0] &&
|
||||
props.option.series[0].data) ||
|
||||
(Array.isArray(props.option.series.data) && props.option.series.data[0])
|
||||
);
|
||||
onMounted(async () => {
|
||||
(Array.isArray(props.option.series.data) && props.option.series.data[0]),
|
||||
);
|
||||
onMounted(async () => {
|
||||
await setOptions(props.option);
|
||||
chartRef.value && addResizeListener(unref(chartRef), resize);
|
||||
instanceEvent();
|
||||
});
|
||||
});
|
||||
|
||||
function instanceEvent() {
|
||||
function instanceEvent() {
|
||||
setTimeout(() => {
|
||||
const instance = getInstance();
|
||||
|
||||
@ -141,21 +127,21 @@ function instanceEvent() {
|
||||
currTrigger: "leave",
|
||||
});
|
||||
},
|
||||
true
|
||||
true,
|
||||
);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function associateMetrics() {
|
||||
function associateMetrics() {
|
||||
emits("select", currentParams.value);
|
||||
const { dataIndex, seriesIndex } = currentParams.value || {
|
||||
dataIndex: 0,
|
||||
seriesIndex: 0,
|
||||
};
|
||||
updateOptions({ dataIndex, seriesIndex });
|
||||
}
|
||||
}
|
||||
|
||||
function updateOptions(params?: { dataIndex: number; seriesIndex: number }) {
|
||||
function updateOptions(params?: { dataIndex: number; seriesIndex: number }) {
|
||||
const instance = getInstance();
|
||||
if (!instance) {
|
||||
return;
|
||||
@ -180,9 +166,9 @@ function updateOptions(params?: { dataIndex: number; seriesIndex: number }) {
|
||||
seriesIndex: ids,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function viewTrace() {
|
||||
function viewTrace() {
|
||||
const item = associateProcessor(props).traceFilters(currentParams.value);
|
||||
traceOptions.value = {
|
||||
...traceOptions.value,
|
||||
@ -190,9 +176,9 @@ function viewTrace() {
|
||||
};
|
||||
showTrace.value = true;
|
||||
visMenus.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => props.option,
|
||||
(newVal, oldVal) => {
|
||||
if (!available.value) {
|
||||
@ -207,21 +193,21 @@ watch(
|
||||
options = eventAssociate();
|
||||
}
|
||||
setOptions(options || props.option);
|
||||
}
|
||||
);
|
||||
watch(
|
||||
},
|
||||
);
|
||||
watch(
|
||||
() => props.filters,
|
||||
() => {
|
||||
updateOptions();
|
||||
}
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
onBeforeUnmount(() => {
|
||||
removeResizeListener(unref(chartRef), resize);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.no-data {
|
||||
.no-data {
|
||||
font-size: 12px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
@ -230,14 +216,14 @@ onBeforeUnmount(() => {
|
||||
-webkit-box-pack: center;
|
||||
-webkit-box-align: center;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
.chart {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.menus {
|
||||
.menus {
|
||||
position: absolute;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
@ -248,9 +234,9 @@ onBeforeUnmount(() => {
|
||||
border-radius: 4px;
|
||||
color: rgb(51, 51, 51);
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.tools {
|
||||
.tools {
|
||||
padding: 5px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
@ -259,5 +245,5 @@ onBeforeUnmount(() => {
|
||||
color: #409eff;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,15 +28,15 @@ limitations under the License. -->
|
||||
</svg>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
/*global defineProps */
|
||||
defineProps({
|
||||
/*global defineProps */
|
||||
defineProps({
|
||||
iconName: { type: String, default: "" },
|
||||
size: { type: String, default: "sm" },
|
||||
loading: { type: Boolean, default: false },
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.icon {
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
@ -70,8 +70,8 @@ defineProps({
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
@keyframes loading {
|
||||
}
|
||||
@keyframes loading {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
@ -81,5 +81,5 @@ defineProps({
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,17 +20,17 @@ limitations under the License. -->
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
import { ref } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
|
||||
interface Option {
|
||||
interface Option {
|
||||
label: string | number;
|
||||
value: string | number;
|
||||
}
|
||||
}
|
||||
|
||||
/*global defineProps, defineEmits */
|
||||
const emit = defineEmits(["change"]);
|
||||
const props = defineProps({
|
||||
/*global defineProps, defineEmits */
|
||||
const emit = defineEmits(["change"]);
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array as PropType<Option[]>,
|
||||
default: () => [],
|
||||
@ -40,11 +40,11 @@ const props = defineProps({
|
||||
default: "",
|
||||
},
|
||||
size: { type: null, default: "default" },
|
||||
});
|
||||
});
|
||||
|
||||
const selected = ref<string>(props.value);
|
||||
const selected = ref<string>(props.value);
|
||||
|
||||
function checked(opt: unknown) {
|
||||
function checked(opt: unknown) {
|
||||
emit("change", opt);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -19,9 +19,7 @@ limitations under the License. -->
|
||||
{{ selected.label }}
|
||||
</span>
|
||||
<span class="no-data" v-else>Please select a option</span>
|
||||
<span class="remove-icon" @click="removeSelected" v-if="clearable">
|
||||
×
|
||||
</span>
|
||||
<span class="remove-icon" @click="removeSelected" v-if="clearable"> × </span>
|
||||
</div>
|
||||
<div class="opt-wrapper" v-show="visible">
|
||||
<div
|
||||
@ -37,13 +35,13 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
import { Option } from "@/types/app";
|
||||
import { ref, watch } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
import type { Option } from "@/types/app";
|
||||
|
||||
/*global defineProps, defineEmits*/
|
||||
const emit = defineEmits(["change"]);
|
||||
const props = defineProps({
|
||||
/*global defineProps, defineEmits*/
|
||||
const emit = defineEmits(["change"]);
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array as PropType<Option[]>,
|
||||
default: () => [],
|
||||
@ -53,38 +51,38 @@ const props = defineProps({
|
||||
default: () => "",
|
||||
},
|
||||
clearable: { type: Boolean, default: false },
|
||||
});
|
||||
const visible = ref<boolean>(false);
|
||||
const opt = props.options.find((d: Option) => props.value === d.value);
|
||||
const selected = ref<Option>(opt || { label: "", value: "" });
|
||||
});
|
||||
const visible = ref<boolean>(false);
|
||||
const opt = props.options.find((d: Option) => props.value === d.value);
|
||||
const selected = ref<Option>(opt || { label: "", value: "" });
|
||||
|
||||
function handleSelect(i: Option) {
|
||||
function handleSelect(i: Option) {
|
||||
selected.value = i;
|
||||
emit("change", i.value);
|
||||
}
|
||||
function removeSelected() {
|
||||
}
|
||||
function removeSelected() {
|
||||
selected.value = { label: "", value: "" };
|
||||
emit("change", "");
|
||||
}
|
||||
watch(
|
||||
}
|
||||
watch(
|
||||
() => props.value,
|
||||
(data) => {
|
||||
const opt = props.options.find((d: Option) => data === d.value);
|
||||
selected.value = opt || { label: "", value: "" };
|
||||
}
|
||||
);
|
||||
document.body.addEventListener("click", handleClick, false);
|
||||
},
|
||||
);
|
||||
document.body.addEventListener("click", handleClick, false);
|
||||
|
||||
function handleClick() {
|
||||
function handleClick() {
|
||||
visible.value = false;
|
||||
}
|
||||
function setPopper(event: any) {
|
||||
}
|
||||
function setPopper(event: any) {
|
||||
event.stopPropagation();
|
||||
visible.value = !visible.value;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bar-select {
|
||||
.bar-select {
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #ddd;
|
||||
@ -103,13 +101,13 @@ function setPopper(event: any) {
|
||||
border: 1px solid #e8e8e8;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-data {
|
||||
.no-data {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-i {
|
||||
.bar-i {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 2px 10px;
|
||||
@ -122,9 +120,9 @@ function setPopper(event: any) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remove-icon {
|
||||
.remove-icon {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 0;
|
||||
@ -132,9 +130,9 @@ function setPopper(event: any) {
|
||||
display: none;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.opt-wrapper {
|
||||
.opt-wrapper {
|
||||
color: #606266;
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
@ -160,9 +158,9 @@ function setPopper(event: any) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opt {
|
||||
.opt {
|
||||
padding: 7px 15px;
|
||||
|
||||
&.select-disabled {
|
||||
@ -173,5 +171,5 @@ function setPopper(event: any) {
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -37,17 +37,17 @@ limitations under the License. -->
|
||||
</el-select>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
import { ref, watch } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
|
||||
interface Option {
|
||||
interface Option {
|
||||
label: string | number;
|
||||
value: string | number;
|
||||
}
|
||||
}
|
||||
|
||||
/*global defineProps, defineEmits*/
|
||||
const emit = defineEmits(["change", "query"]);
|
||||
const props = defineProps({
|
||||
/*global defineProps, defineEmits*/
|
||||
const emit = defineEmits(["change", "query"]);
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array as PropType<(Option & { disabled?: boolean })[]>,
|
||||
default: () => [],
|
||||
@ -67,33 +67,31 @@ const props = defineProps({
|
||||
clearable: { type: Boolean, default: false },
|
||||
isRemote: { type: Boolean, default: false },
|
||||
filterable: { type: Boolean, default: true },
|
||||
});
|
||||
});
|
||||
|
||||
const selected = ref<string[] | string>(props.value);
|
||||
function changeSelected() {
|
||||
const selected = ref<string[] | string>(props.value);
|
||||
function changeSelected() {
|
||||
const options = props.options.filter((d: any) =>
|
||||
props.multiple
|
||||
? selected.value.includes(d.value)
|
||||
: selected.value === d.value
|
||||
props.multiple ? selected.value.includes(d.value) : selected.value === d.value,
|
||||
);
|
||||
emit("change", options);
|
||||
}
|
||||
}
|
||||
|
||||
function remoteMethod(query: string) {
|
||||
function remoteMethod(query: string) {
|
||||
if (props.isRemote) {
|
||||
emit("query", query);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => props.value,
|
||||
(data) => {
|
||||
selected.value = data;
|
||||
}
|
||||
);
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-input__inner {
|
||||
.el-input__inner {
|
||||
border-radius: unset !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -35,56 +35,28 @@ limitations under the License. -->
|
||||
<transition name="datepicker-anim">
|
||||
<div
|
||||
class="datepicker-popup"
|
||||
:class="[
|
||||
popupClass,
|
||||
{ 'datepicker-inline': type === 'inline' },
|
||||
position,
|
||||
]"
|
||||
:class="[popupClass, { 'datepicker-inline': type === 'inline' }, position]"
|
||||
tabindex="-1"
|
||||
v-if="show || type === 'inline'"
|
||||
>
|
||||
<template v-if="range">
|
||||
<div class="datepicker-popup__sidebar">
|
||||
<button
|
||||
type="button"
|
||||
class="datepicker-popup__shortcut"
|
||||
@click="quickPick('quarter')"
|
||||
>
|
||||
<button type="button" class="datepicker-popup__shortcut" @click="quickPick('quarter')">
|
||||
{{ local.quarterHourCutTip }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="datepicker-popup__shortcut"
|
||||
@click="quickPick('half')"
|
||||
>
|
||||
<button type="button" class="datepicker-popup__shortcut" @click="quickPick('half')">
|
||||
{{ local.halfHourCutTip }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="datepicker-popup__shortcut"
|
||||
@click="quickPick('hour')"
|
||||
>
|
||||
<button type="button" class="datepicker-popup__shortcut" @click="quickPick('hour')">
|
||||
{{ local.hourCutTip }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="datepicker-popup__shortcut"
|
||||
@click="quickPick('day')"
|
||||
>
|
||||
<button type="button" class="datepicker-popup__shortcut" @click="quickPick('day')">
|
||||
{{ local.dayCutTip }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="datepicker-popup__shortcut"
|
||||
@click="quickPick('week')"
|
||||
>
|
||||
<button type="button" class="datepicker-popup__shortcut" @click="quickPick('week')">
|
||||
{{ local.weekCutTip }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="datepicker-popup__shortcut"
|
||||
@click="quickPick('month')"
|
||||
>
|
||||
<button type="button" class="datepicker-popup__shortcut" @click="quickPick('month')">
|
||||
{{ local.monthCutTip }}
|
||||
</button>
|
||||
</div>
|
||||
@ -123,16 +95,10 @@ limitations under the License. -->
|
||||
/>
|
||||
</template>
|
||||
<div v-if="showButtons" class="datepicker__buttons">
|
||||
<button
|
||||
@click.prevent.stop="cancel"
|
||||
class="datepicker__button-cancel"
|
||||
>
|
||||
<button @click.prevent.stop="cancel" class="datepicker__button-cancel">
|
||||
{{ local.cancelTip }}
|
||||
</button>
|
||||
<button
|
||||
@click.prevent.stop="submit"
|
||||
class="datepicker__button-select"
|
||||
>
|
||||
<button @click.prevent.stop="submit" class="datepicker__button-select">
|
||||
{{ local.submitTip }}
|
||||
</button>
|
||||
</div>
|
||||
@ -142,16 +108,16 @@ limitations under the License. -->
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import DateCalendar from "./DateCalendar.vue";
|
||||
import { useTimeoutFn } from "@/hooks/useTimeout";
|
||||
/*global defineProps, defineEmits */
|
||||
const datepicker = ref(null);
|
||||
const { t } = useI18n();
|
||||
const show = ref<boolean>(false);
|
||||
const dates = ref<Date | string[] | any>([]);
|
||||
const props = defineProps({
|
||||
import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import DateCalendar from "./DateCalendar.vue";
|
||||
import { useTimeoutFn } from "@/hooks/useTimeout";
|
||||
/*global defineProps, defineEmits */
|
||||
const datepicker = ref(null);
|
||||
const { t } = useI18n();
|
||||
const show = ref<boolean>(false);
|
||||
const dates = ref<Date | string[] | any>([]);
|
||||
const props = defineProps({
|
||||
position: { type: String, default: "bottom" },
|
||||
name: [String],
|
||||
inputClass: [String],
|
||||
@ -184,9 +150,9 @@ const props = defineProps({
|
||||
default: false,
|
||||
},
|
||||
dateRangeSelect: [Function],
|
||||
});
|
||||
const emit = defineEmits(["clear", "input", "confirm", "cancel"]);
|
||||
const local = computed(() => {
|
||||
});
|
||||
const emit = defineEmits(["clear", "input", "confirm", "cancel"]);
|
||||
const local = computed(() => {
|
||||
return {
|
||||
dow: 1, // Monday is the first day of the week
|
||||
hourTip: t("hourTip"), // tip of select hour
|
||||
@ -205,8 +171,8 @@ const local = computed(() => {
|
||||
weekCutTip: t("weekCutTip"),
|
||||
monthCutTip: t("monthCutTip"),
|
||||
};
|
||||
});
|
||||
const tf = (time: Date, format?: any): string => {
|
||||
});
|
||||
const tf = (time: Date, format?: any): string => {
|
||||
const year = time.getFullYear();
|
||||
const month = time.getMonth();
|
||||
const day = time.getDate();
|
||||
@ -234,58 +200,51 @@ const tf = (time: Date, format?: any): string => {
|
||||
s: seconds,
|
||||
S: milliseconds,
|
||||
};
|
||||
return (format || props.format).replace(
|
||||
/Y+|M+|D+|H+|h+|m+|s+|S+/g,
|
||||
(str: string) => map[str]
|
||||
);
|
||||
};
|
||||
const range = computed(() => {
|
||||
return (format || props.format).replace(/Y+|M+|D+|H+|h+|m+|s+|S+/g, (str: string) => map[str]);
|
||||
};
|
||||
const range = computed(() => {
|
||||
return dates.value.length === 2;
|
||||
});
|
||||
const text = computed(() => {
|
||||
});
|
||||
const text = computed(() => {
|
||||
const val = props.value;
|
||||
const txt = dates.value
|
||||
.map((date: Date) => tf(date))
|
||||
.join(` ${props.rangeSeparator} `);
|
||||
const txt = dates.value.map((date: Date) => tf(date)).join(` ${props.rangeSeparator} `);
|
||||
if (Array.isArray(val)) {
|
||||
return val.length > 1 ? txt : "";
|
||||
}
|
||||
return val ? txt : "";
|
||||
});
|
||||
const get = () => {
|
||||
});
|
||||
const get = () => {
|
||||
return Array.isArray(props.value) ? dates.value : dates.value[0];
|
||||
};
|
||||
const cls = () => {
|
||||
};
|
||||
const cls = () => {
|
||||
emit("clear");
|
||||
emit("input", range.value ? [] : "");
|
||||
};
|
||||
const vi = (val: any) => {
|
||||
};
|
||||
const vi = (val: any) => {
|
||||
if (Array.isArray(val)) {
|
||||
return val.length > 1
|
||||
? val.map((item) => new Date(item))
|
||||
: [new Date(), new Date()];
|
||||
return val.length > 1 ? val.map((item) => new Date(item)) : [new Date(), new Date()];
|
||||
}
|
||||
return val ? [new Date(val)] : [new Date()];
|
||||
};
|
||||
const ok = (leaveOpened: boolean) => {
|
||||
};
|
||||
const ok = (leaveOpened: boolean) => {
|
||||
emit("input", get());
|
||||
!leaveOpened &&
|
||||
!props.showButtons &&
|
||||
useTimeoutFn(() => {
|
||||
show.value = range.value;
|
||||
}, 1);
|
||||
};
|
||||
const setDates = (d: Date, pos: string) => {
|
||||
};
|
||||
const setDates = (d: Date, pos: string) => {
|
||||
if (pos === "right") {
|
||||
dates.value[1] = d;
|
||||
return;
|
||||
}
|
||||
dates.value[0] = d;
|
||||
};
|
||||
const dc = (e: any) => {
|
||||
};
|
||||
const dc = (e: any) => {
|
||||
show.value = (datepicker.value as any).contains(e.target) && !props.disabled;
|
||||
};
|
||||
const quickPick = (type: string) => {
|
||||
};
|
||||
const quickPick = (type: string) => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
switch (type) {
|
||||
@ -312,32 +271,32 @@ const quickPick = (type: string) => {
|
||||
}
|
||||
dates.value = [start, end];
|
||||
emit("input", get());
|
||||
};
|
||||
const submit = () => {
|
||||
};
|
||||
const submit = () => {
|
||||
emit("confirm", get());
|
||||
show.value = false;
|
||||
};
|
||||
const cancel = () => {
|
||||
};
|
||||
const cancel = () => {
|
||||
emit("cancel");
|
||||
show.value = false;
|
||||
};
|
||||
onMounted(() => {
|
||||
};
|
||||
onMounted(() => {
|
||||
dates.value = vi(props.value);
|
||||
document.addEventListener("click", dc, true);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener("click", dc, true);
|
||||
});
|
||||
watch(
|
||||
});
|
||||
watch(
|
||||
() => props.value,
|
||||
(val: unknown) => {
|
||||
dates.value = vi(val);
|
||||
}
|
||||
);
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@keyframes datepicker-anim-in {
|
||||
@keyframes datepicker-anim-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.8);
|
||||
@ -347,9 +306,9 @@ watch(
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes datepicker-anim-out {
|
||||
@keyframes datepicker-anim-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
@ -359,22 +318,22 @@ watch(
|
||||
opacity: 0;
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker {
|
||||
.datepicker {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-icon {
|
||||
.datepicker-icon {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
color: #515a6ecc;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-close {
|
||||
.datepicker-close {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 34px;
|
||||
@ -382,9 +341,9 @@ watch(
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-close:before {
|
||||
.datepicker-close:before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -400,21 +359,21 @@ watch(
|
||||
background: #ccc
|
||||
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==")
|
||||
no-repeat 50% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker__clearable:hover:before {
|
||||
.datepicker__clearable:hover:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker__clearable:hover .datepicker-close {
|
||||
.datepicker__clearable:hover .datepicker-close {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-close:hover:before {
|
||||
.datepicker-close:hover:before {
|
||||
background-color: #afafaf;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker > input {
|
||||
.datepicker > input {
|
||||
color: inherit;
|
||||
// transition: all 200ms ease;
|
||||
border-radius: 4px;
|
||||
@ -428,23 +387,23 @@ watch(
|
||||
user-select: none;
|
||||
font-family: "Monaco";
|
||||
letter-spacing: -0.7px;
|
||||
}
|
||||
}
|
||||
|
||||
// .datepicker > input.focus {
|
||||
// border-color: #3f97e3;
|
||||
// -webkit-box-shadow: 0 0 5px rgba(59, 180, 242, 0.3);
|
||||
// box-shadow: 0 0 5px rgba(59, 180, 242, 0.3);
|
||||
// }
|
||||
// .datepicker > input.focus {
|
||||
// border-color: #3f97e3;
|
||||
// -webkit-box-shadow: 0 0 5px rgba(59, 180, 242, 0.3);
|
||||
// box-shadow: 0 0 5px rgba(59, 180, 242, 0.3);
|
||||
// }
|
||||
|
||||
.datepicker > input:disabled {
|
||||
.datepicker > input:disabled {
|
||||
cursor: not-allowed;
|
||||
background-color: #ebebe4;
|
||||
border-color: #e5e5e5;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-popup {
|
||||
.datepicker-popup {
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
transition: all 200ms ease;
|
||||
@ -514,52 +473,52 @@ watch(
|
||||
margin-left: 100px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-inline {
|
||||
.datepicker-inline {
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-range {
|
||||
.datepicker-range {
|
||||
min-width: 238px;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-range .datepicker-popup {
|
||||
.datepicker-range .datepicker-popup {
|
||||
width: 520px;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-bottom {
|
||||
.datepicker-bottom {
|
||||
float: left;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-btn {
|
||||
.datepicker-btn {
|
||||
padding: 5px 10px;
|
||||
background: #3f97e3;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-anim-enter-active {
|
||||
.datepicker-anim-enter-active {
|
||||
transform-origin: 0 0;
|
||||
animation: datepicker-anim-in 0.2s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-anim-leave-active {
|
||||
.datepicker-anim-leave-active {
|
||||
transform-origin: 0 0;
|
||||
animation: datepicker-anim-out 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker__buttons {
|
||||
.datepicker__buttons {
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker__buttons button {
|
||||
.datepicker__buttons button {
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
border: none;
|
||||
@ -567,13 +526,13 @@ watch(
|
||||
margin: 10px 0 0 5px;
|
||||
padding: 5px 15px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker__buttons .datepicker__button-select {
|
||||
.datepicker__buttons .datepicker__button-select {
|
||||
background: #3f97e3;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker__buttons .datepicker__button-cancel {
|
||||
.datepicker__buttons .datepicker__button-cancel {
|
||||
background: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,22 +14,18 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import axios, { AxiosResponse } from "axios";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import axios from "axios";
|
||||
import { cancelToken } from "@/utils/cancelToken";
|
||||
|
||||
async function query(param: {
|
||||
queryStr: string;
|
||||
conditions: { [key: string]: unknown };
|
||||
}) {
|
||||
async function query(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
|
||||
const res: AxiosResponse = await axios.post(
|
||||
"/graphql",
|
||||
{ query: param.queryStr, variables: { ...param.conditions } },
|
||||
{ cancelToken: cancelToken() }
|
||||
{ cancelToken: cancelToken() },
|
||||
);
|
||||
if (res.data.errors) {
|
||||
res.data.errors = res.data.errors
|
||||
.map((e: { message: string }) => e.message)
|
||||
.join(" ");
|
||||
res.data.errors = res.data.errors.map((e: { message: string }) => e.message).join(" ");
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
@ -33,8 +33,7 @@ export const createEBPFTask = {
|
||||
}`,
|
||||
};
|
||||
export const queryEBPFTasks = {
|
||||
variable:
|
||||
"$serviceId: ID, $serviceInstanceId: ID, $targets: [EBPFProfilingTargetType!]",
|
||||
variable: "$serviceId: ID, $serviceInstanceId: ID, $targets: [EBPFProfilingTargetType!]",
|
||||
query: `
|
||||
queryEBPFTasks: queryEBPFProfilingTasks(serviceId: $serviceId, serviceInstanceId: $serviceInstanceId, targets: $targets) {
|
||||
taskId
|
||||
|
||||
@ -53,8 +53,7 @@ export const EndpointTopology = {
|
||||
}`,
|
||||
};
|
||||
export const InstanceTopology = {
|
||||
variable:
|
||||
"$clientServiceId: ID!, $serverServiceId: ID!, $duration: Duration!",
|
||||
variable: "$clientServiceId: ID!, $serverServiceId: ID!, $duration: Duration!",
|
||||
query: `
|
||||
topology: getServiceInstanceTopology(clientServiceId: $clientServiceId,
|
||||
serverServiceId: $serverServiceId, duration: $duration) {
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import axios, { AxiosPromise, AxiosResponse } from "axios";
|
||||
import type { AxiosPromise, AxiosResponse } from "axios";
|
||||
import axios from "axios";
|
||||
import { cancelToken } from "@/utils/cancelToken";
|
||||
import * as app from "./query/app";
|
||||
import * as selector from "./query/selector";
|
||||
@ -55,13 +56,11 @@ class Graphql {
|
||||
query: query[this.queryData],
|
||||
variables: variablesData,
|
||||
},
|
||||
{ cancelToken: cancelToken() }
|
||||
{ cancelToken: cancelToken() },
|
||||
)
|
||||
.then((res: AxiosResponse) => {
|
||||
if (res.data.errors) {
|
||||
res.data.errors = res.data.errors
|
||||
.map((e: { message: string }) => e.message)
|
||||
.join(" ");
|
||||
res.data.errors = res.data.errors.map((e: { message: string }) => e.message).join(" ");
|
||||
}
|
||||
return res;
|
||||
})
|
||||
|
||||
@ -15,12 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {
|
||||
Traces,
|
||||
TraceSpans,
|
||||
TraceTagKeys,
|
||||
TraceTagValues,
|
||||
} from "../fragments/trace";
|
||||
import { Traces, TraceSpans, TraceTagKeys, TraceTagValues } from "../fragments/trace";
|
||||
|
||||
export const queryTraces = `query queryTraces(${Traces.variable}) {${Traces.query}}`;
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import dateFormatStep from "@/utils/dateFormat";
|
||||
import getLocalTime from "@/utils/localtime";
|
||||
import { EventParams } from "@/types/app";
|
||||
import type { EventParams } from "@/types/app";
|
||||
|
||||
export default function associateProcessor(props: any) {
|
||||
function eventAssociate() {
|
||||
@ -30,9 +30,7 @@ export default function associateProcessor(props: any) {
|
||||
if (!props.option.series[0]) {
|
||||
return;
|
||||
}
|
||||
const list = props.option.series[0].data.map(
|
||||
(d: (number | string)[]) => d[0]
|
||||
);
|
||||
const list = props.option.series[0].data.map((d: (number | string)[]) => d[0]);
|
||||
if (!list.includes(props.filters.duration.endTime)) {
|
||||
return;
|
||||
}
|
||||
@ -77,16 +75,8 @@ export default function associateProcessor(props: any) {
|
||||
if (start) {
|
||||
const end = start;
|
||||
duration = {
|
||||
start: dateFormatStep(
|
||||
getLocalTime(appStore.utc, new Date(start)),
|
||||
step,
|
||||
true
|
||||
),
|
||||
end: dateFormatStep(
|
||||
getLocalTime(appStore.utc, new Date(end)),
|
||||
step,
|
||||
true
|
||||
),
|
||||
start: dateFormatStep(getLocalTime(appStore.utc, new Date(start)), step, true),
|
||||
end: dateFormatStep(getLocalTime(appStore.utc, new Date(end)), step, true),
|
||||
step,
|
||||
};
|
||||
}
|
||||
@ -101,36 +91,27 @@ export default function associateProcessor(props: any) {
|
||||
status,
|
||||
};
|
||||
if (latency) {
|
||||
const latencyList = series.map(
|
||||
(d: { name: string; data: number[][] }, index: number) => {
|
||||
const latencyList = series.map((d: { name: string; data: number[][] }, index: number) => {
|
||||
const data = [
|
||||
d.data[currentParams.dataIndex][1],
|
||||
series[index + 1]
|
||||
? series[index + 1].data[currentParams.dataIndex][1]
|
||||
: Infinity,
|
||||
series[index + 1] ? series[index + 1].data[currentParams.dataIndex][1] : Infinity,
|
||||
];
|
||||
return {
|
||||
label:
|
||||
d.name +
|
||||
"--" +
|
||||
(series[index + 1] ? series[index + 1].name : "Infinity"),
|
||||
label: d.name + "--" + (series[index + 1] ? series[index + 1].name : "Infinity"),
|
||||
value: String(index),
|
||||
data,
|
||||
};
|
||||
}
|
||||
);
|
||||
});
|
||||
item.latency = latencyList;
|
||||
}
|
||||
const value = series.map(
|
||||
(d: { name: string; data: number[][] }, index: number) => {
|
||||
const value = series.map((d: { name: string; data: number[][] }, index: number) => {
|
||||
return {
|
||||
label: d.name,
|
||||
value: String(index),
|
||||
data: d.data[currentParams.dataIndex][1],
|
||||
date: d.data[currentParams.dataIndex][0],
|
||||
};
|
||||
}
|
||||
);
|
||||
});
|
||||
item.metricValue = value;
|
||||
return item;
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ref, computed, ComputedRef, unref } from "vue";
|
||||
import type { ComputedRef } from "vue";
|
||||
import { ref, computed, unref } from "vue";
|
||||
import { useEventListener } from "./useEventListener";
|
||||
import { screenMap, sizeEnum, screenEnum } from "./data";
|
||||
|
||||
@ -40,9 +41,7 @@ export function useBreakpoint(): any {
|
||||
};
|
||||
}
|
||||
|
||||
export function createBreakpointListen(
|
||||
fn?: (opt: CreateCallbackParams) => void
|
||||
): any {
|
||||
export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void): any {
|
||||
const screenRef = ref<sizeEnum>(sizeEnum.XL || "");
|
||||
const realWidthRef = ref(window.innerWidth);
|
||||
|
||||
|
||||
@ -16,19 +16,15 @@
|
||||
*/
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { LayoutConfig } from "@/types/dashboard";
|
||||
import type { LayoutConfig } from "@/types/dashboard";
|
||||
|
||||
export default function getDashboard(param?: {
|
||||
name: string;
|
||||
layer: string;
|
||||
entity: string;
|
||||
}) {
|
||||
export default function getDashboard(param?: { name: string; layer: string; entity: string }) {
|
||||
const dashboardStore = useDashboardStore();
|
||||
const opt = param || dashboardStore.currentDashboard;
|
||||
const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
|
||||
const dashboard = list.find(
|
||||
(d: { name: string; layer: string; entity: string }) =>
|
||||
d.name === opt.name && d.entity === opt.entity && d.layer === opt.layer
|
||||
d.name === opt.name && d.entity === opt.entity && d.layer === opt.layer,
|
||||
);
|
||||
const all = dashboardStore.layout;
|
||||
const widgets: LayoutConfig[] = [];
|
||||
|
||||
@ -14,13 +14,13 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
import type {
|
||||
BarSeriesOption,
|
||||
LineSeriesOption,
|
||||
HeatmapSeriesOption,
|
||||
SankeySeriesOption,
|
||||
} from "echarts/charts";
|
||||
import {
|
||||
import type {
|
||||
TitleComponentOption,
|
||||
TooltipComponentOption,
|
||||
GridComponentOption,
|
||||
@ -50,7 +50,7 @@ export type ECOption = echarts.ComposeOption<
|
||||
|
||||
export function useECharts(
|
||||
elRef: Ref<HTMLDivElement>,
|
||||
theme: "light" | "dark" | "default" = "default"
|
||||
theme: "light" | "dark" | "default" = "default",
|
||||
): any {
|
||||
const getDarkMode = computed(() => {
|
||||
return theme === "default" ? "light" : theme;
|
||||
@ -131,7 +131,7 @@ export function useECharts(
|
||||
initCharts(theme as "default");
|
||||
setOptions(cacheOptions.value);
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
tryOnUnmounted(() => {
|
||||
|
||||
@ -43,16 +43,13 @@ export function useEventListener({
|
||||
if (el) {
|
||||
const element = ref(el as Element) as Ref<Element>;
|
||||
|
||||
const handler = isDebounce
|
||||
? useDebounceFn(listener, wait)
|
||||
: useThrottleFn(listener, wait);
|
||||
const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait);
|
||||
const realHandler = wait ? handler : listener;
|
||||
const removeEventListener = (e: Element) => {
|
||||
isAddRef.value = true;
|
||||
e.removeEventListener(name, realHandler, options);
|
||||
};
|
||||
const addEventListener = (e: Element) =>
|
||||
e.addEventListener(name, realHandler, options);
|
||||
const addEventListener = (e: Element) => e.addEventListener(name, realHandler, options);
|
||||
|
||||
const removeWatch = watch(
|
||||
element,
|
||||
@ -64,7 +61,7 @@ export function useEventListener({
|
||||
});
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
remove = () => {
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { LegendOptions } from "@/types/dashboard";
|
||||
import type { LegendOptions } from "@/types/dashboard";
|
||||
import { isDef } from "@/utils/is";
|
||||
|
||||
export default function useLegendProcess(legend?: LegendOptions) {
|
||||
@ -37,13 +37,10 @@ export default function useLegendProcess(legend?: LegendOptions) {
|
||||
}
|
||||
return true;
|
||||
}
|
||||
function aggregations(
|
||||
data: { [key: string]: number[] },
|
||||
intervalTime: string[]
|
||||
) {
|
||||
function aggregations(data: { [key: string]: number[] }, intervalTime: string[]) {
|
||||
const source: { [key: string]: unknown }[] = [];
|
||||
const keys = Object.keys(data || {}).filter(
|
||||
(i: any) => Array.isArray(data[i]) && data[i].length
|
||||
(i: any) => Array.isArray(data[i]) && data[i].length,
|
||||
);
|
||||
const headers = [];
|
||||
|
||||
@ -59,10 +56,8 @@ export default function useLegendProcess(legend?: LegendOptions) {
|
||||
};
|
||||
})
|
||||
.sort(
|
||||
(
|
||||
a: { key: string; value: number },
|
||||
b: { key: string; value: number }
|
||||
) => b.value - a.value
|
||||
(a: { key: string; value: number }, b: { key: string; value: number }) =>
|
||||
b.value - a.value,
|
||||
)
|
||||
.filter((_: unknown, index: number) => index < 10),
|
||||
};
|
||||
|
||||
@ -17,25 +17,17 @@
|
||||
import { MetricQueryTypes, Calculations } from "./data";
|
||||
export function useListConfig(config: any, index: string) {
|
||||
const i = Number(index);
|
||||
const types = [
|
||||
Calculations.Average,
|
||||
Calculations.ApdexAvg,
|
||||
Calculations.PercentageAvg,
|
||||
];
|
||||
const types = [Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg];
|
||||
const calculation =
|
||||
config.metricConfig &&
|
||||
config.metricConfig[i] &&
|
||||
config.metricConfig[i].calculation;
|
||||
config.metricConfig && config.metricConfig[i] && config.metricConfig[i].calculation;
|
||||
const isLinear =
|
||||
[
|
||||
MetricQueryTypes.ReadMetricsValues,
|
||||
MetricQueryTypes.ReadLabeledMetricsValues,
|
||||
].includes(config.metricTypes[i]) && !types.includes(calculation);
|
||||
[MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(
|
||||
config.metricTypes[i],
|
||||
) && !types.includes(calculation);
|
||||
const isAvg =
|
||||
[
|
||||
MetricQueryTypes.ReadMetricsValues,
|
||||
MetricQueryTypes.ReadLabeledMetricsValues,
|
||||
].includes(config.metricTypes[i]) && types.includes(calculation);
|
||||
[MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(
|
||||
config.metricTypes[i],
|
||||
) && types.includes(calculation);
|
||||
return {
|
||||
isLinear,
|
||||
isAvg,
|
||||
|
||||
@ -20,8 +20,8 @@ import { ElMessage } from "element-plus";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { Instance, Endpoint, Service } from "@/types/selector";
|
||||
import { MetricConfigOpt } from "@/types/dashboard";
|
||||
import type { Instance, Endpoint, Service } from "@/types/selector";
|
||||
import type { MetricConfigOpt } from "@/types/dashboard";
|
||||
import { MetricCatalog } from "@/views/dashboard/data";
|
||||
|
||||
export function useQueryProcessor(config: any) {
|
||||
@ -54,21 +54,14 @@ export function useQueryProcessor(config: any) {
|
||||
const fragment = config.metrics.map((name: string, index: number) => {
|
||||
const metricType = config.metricTypes[index] || "";
|
||||
const c = (config.metricConfig && config.metricConfig[index]) || {};
|
||||
if (
|
||||
[
|
||||
MetricQueryTypes.ReadSampledRecords,
|
||||
MetricQueryTypes.SortMetrics,
|
||||
].includes(metricType)
|
||||
) {
|
||||
if ([MetricQueryTypes.ReadSampledRecords, MetricQueryTypes.SortMetrics].includes(metricType)) {
|
||||
variables.push(`$condition${index}: TopNCondition!`);
|
||||
conditions[`condition${index}`] = {
|
||||
name,
|
||||
parentService: ["All"].includes(dashboardStore.entity)
|
||||
? null
|
||||
: selectorStore.currentService.value,
|
||||
normal: selectorStore.currentService
|
||||
? selectorStore.currentService.normal
|
||||
: true,
|
||||
normal: selectorStore.currentService ? selectorStore.currentService.normal : true,
|
||||
scope: config.catalog,
|
||||
topN: c.topN || 10,
|
||||
order: c.sortOrder || "DES",
|
||||
@ -77,13 +70,8 @@ export function useQueryProcessor(config: any) {
|
||||
const entity = {
|
||||
scope: config.catalog,
|
||||
serviceName:
|
||||
dashboardStore.entity === "All"
|
||||
? undefined
|
||||
: selectorStore.currentService.value,
|
||||
normal:
|
||||
dashboardStore.entity === "All"
|
||||
? undefined
|
||||
: selectorStore.currentService.normal,
|
||||
dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
|
||||
normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
|
||||
serviceInstanceName: [
|
||||
"ServiceInstance",
|
||||
"ServiceInstanceRelation",
|
||||
@ -97,16 +85,11 @@ export function useQueryProcessor(config: any) {
|
||||
processName: dashboardStore.entity.includes("Process")
|
||||
? selectorStore.currentProcess && selectorStore.currentProcess.value
|
||||
: undefined,
|
||||
destNormal: isRelation
|
||||
? selectorStore.currentDestService.normal
|
||||
: undefined,
|
||||
destServiceName: isRelation
|
||||
? selectorStore.currentDestService.value
|
||||
: undefined,
|
||||
destServiceInstanceName: [
|
||||
"ServiceInstanceRelation",
|
||||
"ProcessRelation",
|
||||
].includes(dashboardStore.entity)
|
||||
destNormal: isRelation ? selectorStore.currentDestService.normal : undefined,
|
||||
destServiceName: isRelation ? selectorStore.currentDestService.value : undefined,
|
||||
destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(
|
||||
dashboardStore.entity,
|
||||
)
|
||||
? selectorStore.currentDestPod && selectorStore.currentDestPod.value
|
||||
: undefined,
|
||||
destEndpointName:
|
||||
@ -114,8 +97,7 @@ export function useQueryProcessor(config: any) {
|
||||
? selectorStore.currentDestPod && selectorStore.currentDestPod.value
|
||||
: undefined,
|
||||
destProcessName: dashboardStore.entity.includes("ProcessRelation")
|
||||
? selectorStore.currentDestProcess &&
|
||||
selectorStore.currentDestProcess.value
|
||||
? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value
|
||||
: undefined,
|
||||
};
|
||||
if ([MetricQueryTypes.ReadRecords].includes(metricType)) {
|
||||
@ -161,7 +143,7 @@ export function useSourceProcessor(
|
||||
metrics: string[];
|
||||
metricTypes: string[];
|
||||
metricConfig: MetricConfigOpt[];
|
||||
}
|
||||
},
|
||||
) {
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
@ -180,9 +162,7 @@ export function useSourceProcessor(
|
||||
|
||||
if (type === MetricQueryTypes.ReadMetricsValues) {
|
||||
source[c.label || m] =
|
||||
(resp.data[keys[index]] &&
|
||||
calculateExp(resp.data[keys[index]].values.values, c)) ||
|
||||
[];
|
||||
(resp.data[keys[index]] && calculateExp(resp.data[keys[index]].values.values, c)) || [];
|
||||
}
|
||||
if (type === MetricQueryTypes.ReadLabeledMetricsValues) {
|
||||
const resVal = Object.values(resp.data)[0] || [];
|
||||
@ -194,7 +174,7 @@ export function useSourceProcessor(
|
||||
.map((item: string) => item.replace(/^\s*|\s*$/g, ""));
|
||||
for (const item of resVal) {
|
||||
const values = item.values.values.map((d: { value: number }) =>
|
||||
aggregation(Number(d.value), c)
|
||||
aggregation(Number(d.value), c),
|
||||
);
|
||||
const indexNum = labelsIdx.findIndex((d: string) => d === item.label);
|
||||
if (labels[indexNum] && indexNum > -1) {
|
||||
@ -216,13 +196,11 @@ export function useSourceProcessor(
|
||||
] as string[]
|
||||
).includes(type)
|
||||
) {
|
||||
source[m] = (Object.values(resp.data)[0] || []).map(
|
||||
(d: { value: unknown; name: string }) => {
|
||||
source[m] = (Object.values(resp.data)[0] || []).map((d: { value: unknown; name: string }) => {
|
||||
d.value = aggregation(Number(d.value), c);
|
||||
|
||||
return d;
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
if (type === MetricQueryTypes.READHEATMAP) {
|
||||
const resVal = Object.values(resp.data)[0] || {};
|
||||
@ -240,9 +218,7 @@ export function useSourceProcessor(
|
||||
if (resVal.buckets.length) {
|
||||
buckets = [
|
||||
resVal.buckets[0].min,
|
||||
...resVal.buckets.map(
|
||||
(item: { min: string; max: string }) => item.max
|
||||
),
|
||||
...resVal.buckets.map((item: { min: string; max: string }) => item.max),
|
||||
];
|
||||
}
|
||||
|
||||
@ -260,7 +236,7 @@ export function useQueryPodsMetrics(
|
||||
metricTypes: string[];
|
||||
metricConfig: MetricConfigOpt[];
|
||||
},
|
||||
scope: string
|
||||
scope: string,
|
||||
) {
|
||||
const metricTypes = (config.metricTypes || []).filter((m: string) => m);
|
||||
if (!metricTypes.length) {
|
||||
@ -278,10 +254,7 @@ export function useQueryPodsMetrics(
|
||||
const variables: string[] = [`$duration: Duration!`];
|
||||
const currentService = selectorStore.currentService || {};
|
||||
const fragmentList = pods.map(
|
||||
(
|
||||
d: (Instance | Endpoint | Service) & { normal: boolean },
|
||||
index: number
|
||||
) => {
|
||||
(d: (Instance | Endpoint | Service) & { normal: boolean }, index: number) => {
|
||||
const param = {
|
||||
scope,
|
||||
serviceName: scope === "Service" ? d.label : currentService.label,
|
||||
@ -309,7 +282,7 @@ export function useQueryPodsMetrics(
|
||||
return `${name}${index}${idx}: ${metricType}(condition: $condition${index}${idx}, ${labelStr}duration: $duration)${RespFields[metricType]}`;
|
||||
});
|
||||
return f;
|
||||
}
|
||||
},
|
||||
);
|
||||
const fragment = fragmentList.flat(1).join(" ");
|
||||
const queryStr = `query queryData(${variables}) {${fragment}}`;
|
||||
@ -324,7 +297,7 @@ export function usePodsSource(
|
||||
metrics: string[];
|
||||
metricTypes: string[];
|
||||
metricConfig: MetricConfigOpt[];
|
||||
}
|
||||
},
|
||||
): any {
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
@ -348,16 +321,14 @@ export function usePodsSource(
|
||||
if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues) {
|
||||
d[name] = {};
|
||||
if (
|
||||
[
|
||||
Calculations.Average,
|
||||
Calculations.ApdexAvg,
|
||||
Calculations.PercentageAvg,
|
||||
].includes(c.calculation)
|
||||
[Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(
|
||||
c.calculation,
|
||||
)
|
||||
) {
|
||||
d[name]["avg"] = calculateExp(resp.data[key].values.values, c);
|
||||
}
|
||||
d[name]["values"] = resp.data[key].values.values.map(
|
||||
(val: { value: number }) => aggregation(val.value, c)
|
||||
d[name]["values"] = resp.data[key].values.values.map((val: { value: number }) =>
|
||||
aggregation(val.value, c),
|
||||
);
|
||||
if (idx === 0) {
|
||||
names.push(name);
|
||||
@ -365,9 +336,7 @@ export function usePodsSource(
|
||||
metricTypesArr.push(config.metricTypes[index]);
|
||||
}
|
||||
}
|
||||
if (
|
||||
config.metricTypes[index] === MetricQueryTypes.ReadLabeledMetricsValues
|
||||
) {
|
||||
if (config.metricTypes[index] === MetricQueryTypes.ReadLabeledMetricsValues) {
|
||||
const resVal = resp.data[key] || [];
|
||||
const labels = (c.label || "")
|
||||
.split(",")
|
||||
@ -378,7 +347,7 @@ export function usePodsSource(
|
||||
for (let i = 0; i < resVal.length; i++) {
|
||||
const item = resVal[i];
|
||||
const values = item.values.values.map((d: { value: number }) =>
|
||||
aggregation(Number(d.value), c)
|
||||
aggregation(Number(d.value), c),
|
||||
);
|
||||
const indexNum = labelsIdx.findIndex((d: string) => d === item.label);
|
||||
let key = item.label;
|
||||
@ -389,11 +358,9 @@ export function usePodsSource(
|
||||
d[key] = {};
|
||||
}
|
||||
if (
|
||||
[
|
||||
Calculations.Average,
|
||||
Calculations.ApdexAvg,
|
||||
Calculations.PercentageAvg,
|
||||
].includes(c.calculation)
|
||||
[Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(
|
||||
c.calculation,
|
||||
)
|
||||
) {
|
||||
d[key]["avg"] = calculateExp(item.values.values, c);
|
||||
}
|
||||
@ -437,11 +404,9 @@ export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
|
||||
}
|
||||
function calculateExp(
|
||||
arr: { value: number }[],
|
||||
config: { calculation?: string }
|
||||
config: { calculation?: string },
|
||||
): (number | string)[] {
|
||||
const sum = arr
|
||||
.map((d: { value: number }) => d.value)
|
||||
.reduce((a, b) => a + b);
|
||||
const sum = arr.map((d: { value: number }) => d.value).reduce((a, b) => a + b);
|
||||
let data: (number | string)[] = [];
|
||||
switch (config.calculation) {
|
||||
case Calculations.Average:
|
||||
@ -460,10 +425,7 @@ function calculateExp(
|
||||
return data;
|
||||
}
|
||||
|
||||
export function aggregation(
|
||||
val: number,
|
||||
config: { calculation?: string }
|
||||
): number | string {
|
||||
export function aggregation(val: number, config: { calculation?: string }): number | string {
|
||||
let data: number | string = Number(val);
|
||||
|
||||
switch (config.calculation) {
|
||||
|
||||
@ -18,11 +18,7 @@ import { ref, watch } from "vue";
|
||||
import { tryOnUnmounted } from "@vueuse/core";
|
||||
import { isFunction } from "@/utils/is";
|
||||
|
||||
export function useTimeoutFn(
|
||||
handle: Fn<any>,
|
||||
wait: number,
|
||||
native = false
|
||||
): any {
|
||||
export function useTimeoutFn(handle: Fn<any>, wait: number, native = false): any {
|
||||
if (!isFunction(handle)) {
|
||||
throw new Error("handle is not Function!");
|
||||
}
|
||||
@ -36,7 +32,7 @@ export function useTimeoutFn(
|
||||
(maturity) => {
|
||||
maturity && handle();
|
||||
},
|
||||
{ immediate: false }
|
||||
{ immediate: false },
|
||||
);
|
||||
}
|
||||
return { readyRef, stop, start };
|
||||
|
||||
@ -22,15 +22,15 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { AppMain, SideBar, NavBar } from "./components";
|
||||
import { AppMain, SideBar, NavBar } from "./components";
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.app-wrapper {
|
||||
.app-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.main-container {
|
||||
.main-container {
|
||||
flex-grow: 2;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -22,8 +22,8 @@ limitations under the License. -->
|
||||
</section>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.app-main {
|
||||
.app-main {
|
||||
height: calc(100% - 40px);
|
||||
background: #f7f9fa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,8 +24,7 @@ limitations under the License. -->
|
||||
@input="changeTimeRange"
|
||||
/>
|
||||
<span>
|
||||
UTC{{ appStore.utcHour >= 0 ? "+" : ""
|
||||
}}{{ `${appStore.utcHour}:${appStore.utcMin}` }}
|
||||
UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }}
|
||||
</span>
|
||||
<span title="refresh" class="ghost ml-5 cp" @click="handleReload">
|
||||
<Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
|
||||
@ -49,54 +48,52 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import timeFormat from "@/utils/timeFormat";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import timeFormat from "@/utils/timeFormat";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const { t } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const route = useRoute();
|
||||
const pageName = ref<string>("");
|
||||
const timeRange = ref<number>(0);
|
||||
const { t } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const route = useRoute();
|
||||
const pageName = ref<string>("");
|
||||
const timeRange = ref<number>(0);
|
||||
|
||||
resetDuration();
|
||||
getVersion();
|
||||
const setConfig = (value: string) => {
|
||||
resetDuration();
|
||||
getVersion();
|
||||
const setConfig = (value: string) => {
|
||||
pageName.value = value || "";
|
||||
};
|
||||
};
|
||||
|
||||
function handleReload() {
|
||||
const gap =
|
||||
appStore.duration.end.getTime() - appStore.duration.start.getTime();
|
||||
function handleReload() {
|
||||
const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
|
||||
const dates: Date[] = [new Date(new Date().getTime() - gap), new Date()];
|
||||
appStore.setDuration(timeFormat(dates));
|
||||
}
|
||||
}
|
||||
|
||||
function changeTimeRange(val: Date[] | any) {
|
||||
timeRange.value =
|
||||
val[1].getTime() - val[0].getTime() > 60 * 24 * 60 * 60 * 1000 ? 1 : 0;
|
||||
function changeTimeRange(val: Date[] | any) {
|
||||
timeRange.value = val[1].getTime() - val[0].getTime() > 60 * 24 * 60 * 60 * 1000 ? 1 : 0;
|
||||
if (timeRange.value) {
|
||||
return;
|
||||
}
|
||||
appStore.setDuration(timeFormat(val));
|
||||
}
|
||||
setConfig(String(route.meta.title));
|
||||
watch(
|
||||
}
|
||||
setConfig(String(route.meta.title));
|
||||
watch(
|
||||
() => route.meta.title,
|
||||
(title: unknown) => {
|
||||
setConfig(String(title));
|
||||
}
|
||||
);
|
||||
async function getVersion() {
|
||||
},
|
||||
);
|
||||
async function getVersion() {
|
||||
const res = await appStore.fetchVersion();
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
}
|
||||
function resetDuration() {
|
||||
}
|
||||
function resetDuration() {
|
||||
const { duration }: any = route.params;
|
||||
if (duration) {
|
||||
const d = JSON.parse(duration);
|
||||
@ -108,10 +105,10 @@ function resetDuration() {
|
||||
});
|
||||
appStore.updateUTC(d.utc);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.nav-bar {
|
||||
.nav-bar {
|
||||
padding: 5px 10px 5px 28px;
|
||||
text-align: left;
|
||||
justify-content: space-between;
|
||||
@ -119,22 +116,22 @@ function resetDuration() {
|
||||
border-bottom: 1px solid #dfe4e8;
|
||||
color: #222;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-bar.dark {
|
||||
.nav-bar.dark {
|
||||
background-color: #333840;
|
||||
border-bottom: 1px solid #252a2f;
|
||||
color: #fafbfc;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.nav-tabs {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,10 +15,7 @@ limitations under the License. -->
|
||||
<template>
|
||||
<div class="side-bar">
|
||||
<div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
|
||||
<Icon
|
||||
:size="isCollapse ? 'xl' : 'logo'"
|
||||
:iconName="isCollapse ? 'logo' : 'logo-sw'"
|
||||
/>
|
||||
<Icon :size="isCollapse ? 'xl' : 'logo'" :iconName="isCollapse ? 'logo' : 'logo-sw'" />
|
||||
</div>
|
||||
<el-menu
|
||||
active-text-color="#448dfe"
|
||||
@ -43,22 +40,14 @@ limitations under the License. -->
|
||||
</router-link>
|
||||
</template>
|
||||
<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">
|
||||
<span class="title">{{ m.meta && t(m.meta.title) }}</span>
|
||||
</router-link>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-sub-menu>
|
||||
<el-menu-item
|
||||
:index="String(menu.name)"
|
||||
@click="changePage(menu)"
|
||||
v-else
|
||||
>
|
||||
<el-menu-item :index="String(menu.name)" @click="changePage(menu)" v-else>
|
||||
<el-icon class="menu-icons" :style="{ marginRight: '12px' }">
|
||||
<router-link class="items" :to="menu.children[0].path">
|
||||
<Icon size="lg" :iconName="menu.meta.icon" />
|
||||
@ -79,82 +68,77 @@ limitations under the License. -->
|
||||
color: theme === 'light' ? '#eee' : '#252a2f',
|
||||
}"
|
||||
>
|
||||
<Icon
|
||||
size="middle"
|
||||
iconName="format_indent_decrease"
|
||||
@click="controlMenu"
|
||||
/>
|
||||
<Icon size="middle" iconName="format_indent_decrease" @click="controlMenu" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useRouter, RouteRecordRaw } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import Icon from "@/components/Icon.vue";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { ref } from "vue";
|
||||
import type { RouteRecordRaw } from "vue-router";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import Icon from "@/components/Icon.vue";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
|
||||
const appStore = useAppStoreWithOut();
|
||||
const { t } = useI18n();
|
||||
const name = ref<string>(String(useRouter().currentRoute.value.name));
|
||||
const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
|
||||
const appStore = useAppStoreWithOut();
|
||||
const { t } = useI18n();
|
||||
const name = ref<string>(String(useRouter().currentRoute.value.name));
|
||||
const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
|
||||
? ref("light")
|
||||
: ref("black");
|
||||
const routes = ref<RouteRecordRaw[] | any>(useRouter().options.routes);
|
||||
if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
|
||||
const routes = ref<RouteRecordRaw[] | any>(useRouter().options.routes);
|
||||
if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
|
||||
appStore.setIsMobile(true);
|
||||
} else {
|
||||
} else {
|
||||
appStore.setIsMobile(false);
|
||||
}
|
||||
const isCollapse = ref(false);
|
||||
const controlMenu = () => {
|
||||
}
|
||||
const isCollapse = ref(false);
|
||||
const controlMenu = () => {
|
||||
isCollapse.value = !isCollapse.value;
|
||||
};
|
||||
const changePage = (menu: RouteRecordRaw) => {
|
||||
theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name))
|
||||
? "light"
|
||||
: "black";
|
||||
};
|
||||
const filterMenus = (menus: any[]) => {
|
||||
};
|
||||
const changePage = (menu: RouteRecordRaw) => {
|
||||
theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name)) ? "light" : "black";
|
||||
};
|
||||
const filterMenus = (menus: any[]) => {
|
||||
return menus.filter((d) => d.meta && !d.meta.notShow);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bar {
|
||||
.side-bar {
|
||||
background: #252a2f;
|
||||
height: 100%;
|
||||
margin-bottom: 100px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-vertical:not(.el-menu--collapse) {
|
||||
.el-menu-vertical:not(.el-menu--collapse) {
|
||||
width: 220px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-icon-collapse {
|
||||
.logo-icon-collapse {
|
||||
width: 65px;
|
||||
margin: 15px 0 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
span.collapse {
|
||||
span.collapse {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
.logo-icon {
|
||||
margin: 15px 0 10px 20px;
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-control {
|
||||
.menu-control {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 220px;
|
||||
@ -162,22 +146,22 @@ span.collapse {
|
||||
transition: all 0.2s linear;
|
||||
z-index: 99;
|
||||
color: #252a2f;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-control.collapse {
|
||||
.menu-control.collapse {
|
||||
left: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon.el-sub-menu__icon-arrow {
|
||||
.el-icon.el-sub-menu__icon-arrow {
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.items {
|
||||
.items {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.version {
|
||||
.version {
|
||||
color: #eee;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
@ -186,17 +170,17 @@ span.collapse {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
.empty {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
.title {
|
||||
display: inline-block;
|
||||
max-width: 110px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -176,10 +176,8 @@ const msg = {
|
||||
toTheRight: "To The Right",
|
||||
legendValues: "Legend Values",
|
||||
minDuration: "Minimal Request Duration",
|
||||
when4xx:
|
||||
"Sample HTTP requests and responses with tracing when response code between 400 and 499",
|
||||
when5xx:
|
||||
"Sample HTTP requests and responses with tracing when response code between 500 and 599",
|
||||
when4xx: "Sample HTTP requests and responses with tracing when response code between 400 and 499",
|
||||
when5xx: "Sample HTTP requests and responses with tracing when response code between 500 and 599",
|
||||
taskTitle: "HTTP request and response collecting rules",
|
||||
seconds: "Seconds",
|
||||
hourTip: "Select Hour",
|
||||
@ -315,8 +313,7 @@ const msg = {
|
||||
viewLogs: "View Logs",
|
||||
logsTagsTip: `Only tags defined in the core/default/searchableLogsTags are searchable.
|
||||
Check more details on the Configuration Vocabulary page`,
|
||||
keywordsOfContentLogTips:
|
||||
"Current storage of SkyWalking OAP server does not support this.",
|
||||
keywordsOfContentLogTips: "Current storage of SkyWalking OAP server does not support this.",
|
||||
setEvent: "Set Event",
|
||||
viewAttributes: "View",
|
||||
serviceEvents: "Service Events",
|
||||
|
||||
@ -77,10 +77,8 @@ const msg = {
|
||||
editGraph: "Editar Opciones",
|
||||
dashboardName: "Selecciona Nombre del Panel",
|
||||
linkDashboard: "Nombre del panel relacionado con llamadas de la topología",
|
||||
linkServerMetrics:
|
||||
"Métricas de servidor relacionadas con llamadas de la topología",
|
||||
linkClientMetrics:
|
||||
"Métricas de cliente relacionadas con llamadas de la topología",
|
||||
linkServerMetrics: "Métricas de servidor relacionadas con llamadas de la topología",
|
||||
linkClientMetrics: "Métricas de cliente relacionadas con llamadas de la topología",
|
||||
nodeDashboard: "Nombre del panel relacionado con nodos de la topología",
|
||||
nodeMetrics: "Mêtricas relacionas con nodos de la topología",
|
||||
instanceDashboard: "Nombre del panel relacionado con instancias de servicio",
|
||||
@ -315,8 +313,7 @@ const msg = {
|
||||
viewLogs: "Ver Registro de Datos",
|
||||
logsTagsTip: `Solamente etiquetas definidas en core/default/searchableLogsTags pueden ser buscadas.
|
||||
Más información en la página de Vocabulario de Configuración`,
|
||||
keywordsOfContentLogTips:
|
||||
"El almacenamiento actual del servidor SkyWalking OAP no lo soporta.",
|
||||
keywordsOfContentLogTips: "El almacenamiento actual del servidor SkyWalking OAP no lo soporta.",
|
||||
setEvent: "Establecer Evento",
|
||||
viewAttributes: "Ver",
|
||||
serviceEvents: "Eventos Servico",
|
||||
@ -347,8 +344,7 @@ const msg = {
|
||||
destEndpoint: "Endpoint Destinación",
|
||||
eventSource: "Fuente Envento",
|
||||
modalTitle: "Inspección",
|
||||
selectRedirectPage:
|
||||
"Quiere inspeccionar las Trazas or Registros de datos del servicio %s?",
|
||||
selectRedirectPage: "Quiere inspeccionar las Trazas or Registros de datos del servicio %s?",
|
||||
logAnalysis: "Lenguaje de Análisis de Registro de Datos",
|
||||
logDataBody: "Contenido del Registro de Datos",
|
||||
addType: "Por favor introduzca un tipo",
|
||||
@ -369,10 +365,8 @@ const msg = {
|
||||
addTraceID: "Por favor introduzca el ID de la traza",
|
||||
addTags: "Por favor introduzaca una etiqueta",
|
||||
addKeywordsOfContent: "Por favor introduzca una clave de contenido",
|
||||
addExcludingKeywordsOfContent:
|
||||
"Por favor introduzca una clave excluyente de contenido",
|
||||
noticeTag:
|
||||
"Por favor presione Intro después de introducir una etiqueta(clave=valor).",
|
||||
addExcludingKeywordsOfContent: "Por favor introduzca una clave excluyente de contenido",
|
||||
noticeTag: "Por favor presione Intro después de introducir una etiqueta(clave=valor).",
|
||||
conditionNotice:
|
||||
"Aviso: Por favor presione Intro después de introducir una clave de contenido, excluir clave de contenido(clave=valor).",
|
||||
language: "Lenguaje",
|
||||
|
||||
@ -368,8 +368,7 @@ const msg = {
|
||||
addKeywordsOfContent: "请输入一个内容关键词",
|
||||
addExcludingKeywordsOfContent: "请输入一个内容不包含的关键词",
|
||||
noticeTag: "请输入一个标签(key=value)之后回车",
|
||||
conditionNotice:
|
||||
"请输入一个内容关键词或者内容不包含的关键词(key=value)之后回车",
|
||||
conditionNotice: "请输入一个内容关键词或者内容不包含的关键词(key=value)之后回车",
|
||||
language: "语言",
|
||||
gateway: "网关",
|
||||
virtualMQ: "虚拟消息队列",
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { RouteRecordRaw } from "vue-router";
|
||||
import type { RouteRecordRaw } from "vue-router";
|
||||
import Layout from "@/layout/Index.vue";
|
||||
|
||||
export const routesAlarm: Array<RouteRecordRaw> = [
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { RouteRecordRaw } from "vue-router";
|
||||
import type { RouteRecordRaw } from "vue-router";
|
||||
import Layout from "@/layout/Index.vue";
|
||||
|
||||
export const routesDashboard: Array<RouteRecordRaw> = [
|
||||
@ -88,8 +88,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
|
||||
},
|
||||
{
|
||||
path: "",
|
||||
redirect:
|
||||
"/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
|
||||
redirect: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
|
||||
component: () => import("@/views/dashboard/Edit.vue"),
|
||||
name: "ViewServiceRelation",
|
||||
meta: {
|
||||
@ -131,8 +130,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
|
||||
},
|
||||
{
|
||||
path: "",
|
||||
redirect:
|
||||
"/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
|
||||
redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
|
||||
component: () => import("@/views/dashboard/Edit.vue"),
|
||||
name: "PodRelation",
|
||||
meta: {
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
|
||||
import type { RouteRecordRaw } from "vue-router";
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import { routesDashboard } from "./dashboard";
|
||||
import { routesSetting } from "./setting";
|
||||
import { routesAlarm } from "./alarm";
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { RouteRecordRaw } from "vue-router";
|
||||
import type { RouteRecordRaw } from "vue-router";
|
||||
import Layout from "@/layout/Index.vue";
|
||||
|
||||
export const routesSetting: Array<RouteRecordRaw> = [
|
||||
|
||||
@ -17,8 +17,8 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { store } from "@/store";
|
||||
import graphql from "@/graphql";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { Alarm } from "@/types/alarm";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import type { Alarm } from "@/types/alarm";
|
||||
|
||||
interface AlarmState {
|
||||
loading: boolean;
|
||||
@ -35,9 +35,7 @@ export const alarmStore = defineStore({
|
||||
}),
|
||||
actions: {
|
||||
async getAlarms(params: any) {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("queryAlarms")
|
||||
.params(params);
|
||||
const res: AxiosResponse = await graphql.query("queryAlarms").params(params);
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
|
||||
@ -17,9 +17,9 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { store } from "@/store";
|
||||
import graphql from "@/graphql";
|
||||
import { Duration, DurationTime } from "@/types/app";
|
||||
import type { Duration, DurationTime } from "@/types/app";
|
||||
import getLocalTime from "@/utils/localtime";
|
||||
import { AxiosResponse } from "axios";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
|
||||
import { TimeType } from "@/constants/data";
|
||||
/*global Nullable*/
|
||||
@ -93,8 +93,7 @@ export const appStore = defineStore({
|
||||
break;
|
||||
}
|
||||
const utcSpace =
|
||||
(this.utcHour + new Date().getTimezoneOffset() / 60) * 3600000 +
|
||||
this.utcMin * 60000;
|
||||
(this.utcHour + new Date().getTimezoneOffset() / 60) * 3600000 + this.utcMin * 60000;
|
||||
const startUnix: number = this.duration.start.getTime();
|
||||
const endUnix: number = this.duration.end.getTime();
|
||||
const timeIntervals: number[] = [];
|
||||
@ -157,13 +156,11 @@ export const appStore = defineStore({
|
||||
this.eventStack.forEach((event: any) => {
|
||||
setTimeout(event(), 0);
|
||||
}),
|
||||
500
|
||||
500,
|
||||
);
|
||||
},
|
||||
async queryOAPTimeInfo() {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("queryOAPTimeInfo")
|
||||
.params({});
|
||||
const res: AxiosResponse = await graphql.query("queryOAPTimeInfo").params({});
|
||||
if (res.data.errors) {
|
||||
this.utc = -(new Date().getTimezoneOffset() / 60) + ":0";
|
||||
} else {
|
||||
@ -176,9 +173,7 @@ export const appStore = defineStore({
|
||||
return res.data;
|
||||
},
|
||||
async fetchVersion(): Promise<void> {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("queryOAPVersion")
|
||||
.params({});
|
||||
const res: AxiosResponse = await graphql.query("queryOAPVersion").params({});
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
|
||||
@ -16,13 +16,13 @@
|
||||
*/
|
||||
import { defineStore } from "pinia";
|
||||
import { store } from "@/store";
|
||||
import { LayoutConfig } from "@/types/dashboard";
|
||||
import type { LayoutConfig } from "@/types/dashboard";
|
||||
import graphql from "@/graphql";
|
||||
import query from "@/graphql/fetch";
|
||||
import { DashboardItem } from "@/types/dashboard";
|
||||
import type { DashboardItem } from "@/types/dashboard";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { NewControl, TextConfig, TimeRangeConfig } from "../data";
|
||||
import { AxiosResponse } from "axios";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { EntityType } from "@/views/dashboard/data";
|
||||
@ -106,23 +106,10 @@ export const dashboardStore = defineStore({
|
||||
newItem.graph = {
|
||||
showDepth: true,
|
||||
depth:
|
||||
this.entity === EntityType[1].value
|
||||
? 1
|
||||
: this.entity === EntityType[0].value
|
||||
? 2
|
||||
: 3,
|
||||
this.entity === EntityType[1].value ? 1 : this.entity === EntityType[0].value ? 2 : 3,
|
||||
};
|
||||
}
|
||||
if (
|
||||
[
|
||||
"Trace",
|
||||
"Profile",
|
||||
"Log",
|
||||
"DemandLog",
|
||||
"Ebpf",
|
||||
"NetworkProfiling",
|
||||
].includes(type)
|
||||
) {
|
||||
if (["Trace", "Profile", "Log", "DemandLog", "Ebpf", "NetworkProfiling"].includes(type)) {
|
||||
newItem.h = 36;
|
||||
}
|
||||
if (type === "Text") {
|
||||
@ -156,9 +143,7 @@ export const dashboardStore = defineStore({
|
||||
},
|
||||
addTabControls(type: string) {
|
||||
const activedGridItem = this.activedGridItem.split("-")[0];
|
||||
const idx = this.layout.findIndex(
|
||||
(d: LayoutConfig) => d.i === activedGridItem
|
||||
);
|
||||
const idx = this.layout.findIndex((d: LayoutConfig) => d.i === activedGridItem);
|
||||
if (idx < 0) {
|
||||
return;
|
||||
}
|
||||
@ -184,16 +169,7 @@ export const dashboardStore = defineStore({
|
||||
showDepth: true,
|
||||
};
|
||||
}
|
||||
if (
|
||||
[
|
||||
"Trace",
|
||||
"Profile",
|
||||
"Log",
|
||||
"DemandLog",
|
||||
"Ebpf",
|
||||
"NetworkProfiling",
|
||||
].includes(type)
|
||||
) {
|
||||
if (["Trace", "Profile", "Log", "DemandLog", "Ebpf", "NetworkProfiling"].includes(type)) {
|
||||
newItem.h = 32;
|
||||
}
|
||||
if (type === "Text") {
|
||||
@ -238,18 +214,14 @@ export const dashboardStore = defineStore({
|
||||
},
|
||||
removeControls(item: LayoutConfig) {
|
||||
const actived = this.activedGridItem.split("-");
|
||||
const index = this.layout.findIndex(
|
||||
(d: LayoutConfig) => actived[0] === d.i
|
||||
);
|
||||
const index = this.layout.findIndex((d: LayoutConfig) => actived[0] === d.i);
|
||||
|
||||
if (this.selectedGrid && this.selectedGrid.i === item.i) {
|
||||
this.selectedGrid = null;
|
||||
}
|
||||
if (actived.length === 3) {
|
||||
const tabIndex = Number(actived[1]);
|
||||
this.currentTabItems = this.currentTabItems.filter(
|
||||
(d: LayoutConfig) => actived[2] !== d.i
|
||||
);
|
||||
this.currentTabItems = this.currentTabItems.filter((d: LayoutConfig) => actived[2] !== d.i);
|
||||
this.layout[index].children[tabIndex].children = this.currentTabItems;
|
||||
return;
|
||||
}
|
||||
@ -285,21 +257,18 @@ export const dashboardStore = defineStore({
|
||||
},
|
||||
setConfigs(param: { [key: string]: unknown }) {
|
||||
const actived = this.activedGridItem.split("-");
|
||||
const index = this.layout.findIndex(
|
||||
(d: LayoutConfig) => actived[0] === d.i
|
||||
);
|
||||
const index = this.layout.findIndex((d: LayoutConfig) => actived[0] === d.i);
|
||||
if (actived.length === 3) {
|
||||
const tabIndex = Number(actived[1]);
|
||||
const itemIndex = this.layout[index].children[
|
||||
tabIndex
|
||||
].children.findIndex((d: LayoutConfig) => actived[2] === d.i);
|
||||
const itemIndex = this.layout[index].children[tabIndex].children.findIndex(
|
||||
(d: LayoutConfig) => actived[2] === d.i,
|
||||
);
|
||||
|
||||
this.layout[index].children[tabIndex].children[itemIndex] = {
|
||||
...this.layout[index].children[tabIndex].children[itemIndex],
|
||||
...param,
|
||||
};
|
||||
this.selectedGrid =
|
||||
this.layout[index].children[tabIndex].children[itemIndex];
|
||||
this.selectedGrid = this.layout[index].children[tabIndex].children[itemIndex];
|
||||
this.setCurrentTabItems(this.layout[index].children[tabIndex].children);
|
||||
return;
|
||||
}
|
||||
@ -332,23 +301,16 @@ export const dashboardStore = defineStore({
|
||||
}
|
||||
},
|
||||
async fetchMetricType(item: string) {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("queryTypeOfMetrics")
|
||||
.params({ name: item });
|
||||
const res: AxiosResponse = await graphql.query("queryTypeOfMetrics").params({ name: item });
|
||||
|
||||
return res.data;
|
||||
},
|
||||
async fetchMetricList(regex: string) {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("queryMetrics")
|
||||
.params({ regex });
|
||||
const res: AxiosResponse = await graphql.query("queryMetrics").params({ regex });
|
||||
|
||||
return res.data;
|
||||
},
|
||||
async fetchMetricValue(param: {
|
||||
queryStr: string;
|
||||
conditions: { [key: string]: unknown };
|
||||
}) {
|
||||
async fetchMetricValue(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
|
||||
const res: AxiosResponse = await query(param);
|
||||
return res.data;
|
||||
},
|
||||
@ -371,10 +333,7 @@ export const dashboardStore = defineStore({
|
||||
name: c.name,
|
||||
isRoot: c.isRoot,
|
||||
});
|
||||
sessionStorage.setItem(
|
||||
key,
|
||||
JSON.stringify({ id: t.id, configuration: c })
|
||||
);
|
||||
sessionStorage.setItem(key, JSON.stringify({ id: t.id, configuration: c }));
|
||||
}
|
||||
list = list.sort((a, b) => {
|
||||
const nameA = a.name.toUpperCase();
|
||||
@ -399,9 +358,7 @@ export const dashboardStore = defineStore({
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.dashboards = JSON.parse(
|
||||
sessionStorage.getItem("dashboards") || "[]"
|
||||
);
|
||||
this.dashboards = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
|
||||
},
|
||||
async resetTemplates() {
|
||||
const res = await this.fetchTemplates();
|
||||
@ -410,9 +367,7 @@ export const dashboardStore = defineStore({
|
||||
ElMessage.error(res.errors);
|
||||
return;
|
||||
}
|
||||
this.dashboards = JSON.parse(
|
||||
sessionStorage.getItem("dashboards") || "[]"
|
||||
);
|
||||
this.dashboards = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
|
||||
},
|
||||
async updateDashboard(setting: { id: string; configuration: string }) {
|
||||
const res: AxiosResponse = await graphql.query("updateTemplate").params({
|
||||
@ -454,7 +409,7 @@ export const dashboardStore = defineStore({
|
||||
(d: DashboardItem) =>
|
||||
d.name === this.currentDashboard.name &&
|
||||
d.entity === this.currentDashboard.entity &&
|
||||
d.layer === this.currentDashboard.layerId
|
||||
d.layer === this.currentDashboard.layerId,
|
||||
);
|
||||
if (index > -1) {
|
||||
const { t } = useI18n();
|
||||
@ -487,7 +442,7 @@ export const dashboardStore = defineStore({
|
||||
if (this.currentDashboard.id) {
|
||||
sessionStorage.removeItem(key);
|
||||
this.dashboards = this.dashboards.filter(
|
||||
(d: DashboardItem) => d.id !== this.currentDashboard.id
|
||||
(d: DashboardItem) => d.id !== this.currentDashboard.id,
|
||||
);
|
||||
}
|
||||
this.dashboards.push(this.currentDashboard);
|
||||
@ -511,9 +466,7 @@ export const dashboardStore = defineStore({
|
||||
ElMessage.error(json.message);
|
||||
return res.data;
|
||||
}
|
||||
this.dashboards = this.dashboards.filter(
|
||||
(d: any) => d.id !== this.currentDashboard.id
|
||||
);
|
||||
this.dashboards = this.dashboards.filter((d: any) => d.id !== this.currentDashboard.id);
|
||||
const key = [
|
||||
this.currentDashboard.layer,
|
||||
this.currentDashboard.entity,
|
||||
|
||||
@ -15,13 +15,13 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { defineStore } from "pinia";
|
||||
import { Instance } from "@/types/selector";
|
||||
import type { Instance } from "@/types/selector";
|
||||
import { store } from "@/store";
|
||||
import graphql from "@/graphql";
|
||||
import { AxiosResponse } from "axios";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { Conditions, Log } from "@/types/demand-log";
|
||||
import type { Conditions, Log } from "@/types/demand-log";
|
||||
|
||||
interface DemandLogState {
|
||||
containers: Instance[];
|
||||
@ -75,16 +75,12 @@ export const demandLogStore = defineStore({
|
||||
},
|
||||
async getContainers(serviceInstanceId: string) {
|
||||
if (!serviceInstanceId) {
|
||||
return new Promise((resolve) =>
|
||||
resolve({ errors: "No service instance" })
|
||||
);
|
||||
return new Promise((resolve) => resolve({ errors: "No service instance" }));
|
||||
}
|
||||
const condition = {
|
||||
serviceInstanceId,
|
||||
};
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("fetchContainers")
|
||||
.params({ condition });
|
||||
const res: AxiosResponse = await graphql.query("fetchContainers").params({ condition });
|
||||
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
@ -112,9 +108,7 @@ export const demandLogStore = defineStore({
|
||||
return res.data;
|
||||
}
|
||||
this.total = res.data.data.logs.logs.length;
|
||||
const logs = res.data.data.logs.logs
|
||||
.map((d: Log) => d.content)
|
||||
.join("\n");
|
||||
const logs = res.data.data.logs.logs.map((d: Log) => d.content).join("\n");
|
||||
this.setLogs(logs);
|
||||
return res.data;
|
||||
},
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { defineStore } from "pinia";
|
||||
import { Option } from "@/types/app";
|
||||
import {
|
||||
import type { Option } from "@/types/app";
|
||||
import type {
|
||||
EBPFTaskCreationRequest,
|
||||
EBPFProfilingSchedule,
|
||||
EBPFTaskList,
|
||||
@ -24,7 +24,7 @@ import {
|
||||
} from "@/types/ebpf";
|
||||
import { store } from "@/store";
|
||||
import graphql from "@/graphql";
|
||||
import { AxiosResponse } from "axios";
|
||||
import type { AxiosResponse } from "axios";
|
||||
interface EbpfState {
|
||||
taskList: EBPFTaskList[];
|
||||
eBPFSchedules: EBPFProfilingSchedule[];
|
||||
@ -61,9 +61,7 @@ export const ebpfStore = defineStore({
|
||||
this.analyzeTrees = tree;
|
||||
},
|
||||
async getCreateTaskData(serviceId: string) {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("getCreateTaskData")
|
||||
.params({ serviceId });
|
||||
const res: AxiosResponse = await graphql.query("getCreateTaskData").params({ serviceId });
|
||||
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
@ -76,9 +74,7 @@ export const ebpfStore = defineStore({
|
||||
return res.data;
|
||||
},
|
||||
async createTask(param: EBPFTaskCreationRequest) {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("saveEBPFTask")
|
||||
.params({ request: param });
|
||||
const res: AxiosResponse = await graphql.query("saveEBPFTask").params({ request: param });
|
||||
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
@ -89,17 +85,11 @@ export const ebpfStore = defineStore({
|
||||
});
|
||||
return res.data;
|
||||
},
|
||||
async getTaskList(params: {
|
||||
serviceId: string;
|
||||
serviceInstanceId: string;
|
||||
targets: string[];
|
||||
}) {
|
||||
async getTaskList(params: { serviceId: string; serviceInstanceId: string; targets: string[] }) {
|
||||
if (!params.serviceId) {
|
||||
return new Promise((resolve) => resolve({}));
|
||||
}
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("getEBPFTasks")
|
||||
.params(params);
|
||||
const res: AxiosResponse = await graphql.query("getEBPFTasks").params(params);
|
||||
|
||||
this.tip = "";
|
||||
if (res.data.errors) {
|
||||
@ -118,9 +108,7 @@ export const ebpfStore = defineStore({
|
||||
if (!params.taskId) {
|
||||
return new Promise((resolve) => resolve({}));
|
||||
}
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("getEBPFSchedules")
|
||||
.params({ ...params });
|
||||
const res: AxiosResponse = await graphql.query("getEBPFSchedules").params({ ...params });
|
||||
|
||||
if (res.data.errors) {
|
||||
this.eBPFSchedules = [];
|
||||
@ -148,9 +136,7 @@ export const ebpfStore = defineStore({
|
||||
if (!params.timeRanges.length) {
|
||||
return new Promise((resolve) => resolve({}));
|
||||
}
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("getEBPFResult")
|
||||
.params(params);
|
||||
const res: AxiosResponse = await graphql.query("getEBPFResult").params(params);
|
||||
|
||||
if (res.data.errors) {
|
||||
this.analyzeTrees = [];
|
||||
|
||||
@ -17,9 +17,9 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { store } from "@/store";
|
||||
import graphql from "@/graphql";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { Event, QueryEventCondition } from "@/types/events";
|
||||
import { Instance, Endpoint } from "@/types/selector";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import type { Event, QueryEventCondition } from "@/types/events";
|
||||
import type { Instance, Endpoint } from "@/types/selector";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
|
||||
@ -94,8 +94,7 @@ export const eventStore = defineStore({
|
||||
return res.data;
|
||||
}
|
||||
if (res.data.data.fetchEvents) {
|
||||
this.events = (res.data.data.fetchEvents.events || []).map(
|
||||
(item: Event) => {
|
||||
this.events = (res.data.data.fetchEvents.events || []).map((item: Event) => {
|
||||
let scope = "Service";
|
||||
if (item.source.serviceInstance) {
|
||||
scope = "ServiceInstance";
|
||||
@ -108,8 +107,7 @@ export const eventStore = defineStore({
|
||||
item.endTime = Number(item.startTime) + 60000;
|
||||
}
|
||||
return item;
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
return res.data;
|
||||
},
|
||||
|
||||
@ -15,10 +15,10 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { defineStore } from "pinia";
|
||||
import { Instance, Endpoint, Service } from "@/types/selector";
|
||||
import type { Instance, Endpoint, Service } from "@/types/selector";
|
||||
import { store } from "@/store";
|
||||
import graphql from "@/graphql";
|
||||
import { AxiosResponse } from "axios";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
@ -82,10 +82,9 @@ export const logStore = defineStore({
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
this.instances = [
|
||||
{ value: "0", label: "All" },
|
||||
...res.data.data.pods,
|
||||
] || [{ value: " 0", label: "All" }];
|
||||
this.instances = [{ value: "0", label: "All" }, ...res.data.data.pods] || [
|
||||
{ value: " 0", label: "All" },
|
||||
];
|
||||
return res.data;
|
||||
},
|
||||
async getEndpoints(id: string, keyword?: string) {
|
||||
@ -100,16 +99,13 @@ export const logStore = defineStore({
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
this.endpoints = [
|
||||
this.endpoints = [{ value: "0", label: "All" }, ...res.data.data.pods] || [
|
||||
{ value: "0", label: "All" },
|
||||
...res.data.data.pods,
|
||||
] || [{ value: "0", label: "All" }];
|
||||
];
|
||||
return res.data;
|
||||
},
|
||||
async getLogsByKeywords() {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("queryLogsByKeywords")
|
||||
.params({});
|
||||
const res: AxiosResponse = await graphql.query("queryLogsByKeywords").params({});
|
||||
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
|
||||
@ -15,12 +15,12 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { defineStore } from "pinia";
|
||||
import { EBPFTaskList, ProcessNode } from "@/types/ebpf";
|
||||
import type { EBPFTaskList, ProcessNode } from "@/types/ebpf";
|
||||
import { store } from "@/store";
|
||||
import graphql from "@/graphql";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { Call } from "@/types/topology";
|
||||
import { LayoutConfig } from "@/types/dashboard";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import type { Call } from "@/types/topology";
|
||||
import type { LayoutConfig } from "@/types/dashboard";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
interface NetworkProfilingState {
|
||||
@ -117,11 +117,9 @@ export const networkProfilingStore = defineStore({
|
||||
when4xx: string;
|
||||
when5xx: string;
|
||||
minDuration: number;
|
||||
}[]
|
||||
}[],
|
||||
) {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("newNetworkProfiling")
|
||||
.params({
|
||||
const res: AxiosResponse = await graphql.query("newNetworkProfiling").params({
|
||||
request: {
|
||||
instanceId,
|
||||
samplings: params,
|
||||
@ -133,17 +131,11 @@ export const networkProfilingStore = defineStore({
|
||||
}
|
||||
return res.data;
|
||||
},
|
||||
async getTaskList(params: {
|
||||
serviceId: string;
|
||||
serviceInstanceId: string;
|
||||
targets: string[];
|
||||
}) {
|
||||
async getTaskList(params: { serviceId: string; serviceInstanceId: string; targets: string[] }) {
|
||||
if (!params.serviceId) {
|
||||
return new Promise((resolve) => resolve({}));
|
||||
}
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("getEBPFTasks")
|
||||
.params(params);
|
||||
const res: AxiosResponse = await graphql.query("getEBPFTasks").params(params);
|
||||
|
||||
this.networkTip = "";
|
||||
if (res.data.errors) {
|
||||
@ -162,9 +154,7 @@ export const networkProfilingStore = defineStore({
|
||||
if (!taskId) {
|
||||
return new Promise((resolve) => resolve({}));
|
||||
}
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("aliveNetworkProfiling")
|
||||
.params({ taskId });
|
||||
const res: AxiosResponse = await graphql.query("aliveNetworkProfiling").params({ taskId });
|
||||
|
||||
this.aliveMessage = "";
|
||||
if (res.data.errors) {
|
||||
@ -176,14 +166,9 @@ export const networkProfilingStore = defineStore({
|
||||
}
|
||||
return res.data;
|
||||
},
|
||||
async getProcessTopology(params: {
|
||||
duration: any;
|
||||
serviceInstanceId: string;
|
||||
}) {
|
||||
async getProcessTopology(params: { duration: any; serviceInstanceId: string }) {
|
||||
this.loadNodes = true;
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("getProcessTopology")
|
||||
.params(params);
|
||||
const res: AxiosResponse = await graphql.query("getProcessTopology").params(params);
|
||||
this.loadNodes = false;
|
||||
if (res.data.errors) {
|
||||
this.nodes = [];
|
||||
|
||||
@ -15,18 +15,18 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { defineStore } from "pinia";
|
||||
import { Endpoint } from "@/types/selector";
|
||||
import {
|
||||
import type { Endpoint } from "@/types/selector";
|
||||
import type {
|
||||
TaskListItem,
|
||||
SegmentSpan,
|
||||
ProfileAnalyzationTrees,
|
||||
TaskLog,
|
||||
ProfileTaskCreationRequest,
|
||||
} from "@/types/profile";
|
||||
import { Trace, Span } from "@/types/trace";
|
||||
import type { Trace, Span } from "@/types/trace";
|
||||
import { store } from "@/store";
|
||||
import graphql from "@/graphql";
|
||||
import { AxiosResponse } from "axios";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
|
||||
interface ProfileState {
|
||||
@ -99,9 +99,7 @@ export const profileStore = defineStore({
|
||||
return res.data;
|
||||
},
|
||||
async getTaskList() {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("getProfileTaskList")
|
||||
.params(this.condition);
|
||||
const res: AxiosResponse = await graphql.query("getProfileTaskList").params(this.condition);
|
||||
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
@ -122,9 +120,7 @@ export const profileStore = defineStore({
|
||||
if (!params.taskID) {
|
||||
return new Promise((resolve) => resolve({}));
|
||||
}
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("getProfileTaskSegmentList")
|
||||
.params(params);
|
||||
const res: AxiosResponse = await graphql.query("getProfileTaskSegmentList").params(params);
|
||||
|
||||
if (res.data.errors) {
|
||||
this.segmentList = [];
|
||||
@ -151,9 +147,7 @@ export const profileStore = defineStore({
|
||||
if (!params.segmentId) {
|
||||
return new Promise((resolve) => resolve({}));
|
||||
}
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("queryProfileSegment")
|
||||
.params(params);
|
||||
const res: AxiosResponse = await graphql.query("queryProfileSegment").params(params);
|
||||
if (res.data.errors) {
|
||||
this.segmentSpans = [];
|
||||
return res.data;
|
||||
@ -189,9 +183,7 @@ export const profileStore = defineStore({
|
||||
if (!params.timeRanges.length) {
|
||||
return new Promise((resolve) => resolve({}));
|
||||
}
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("getProfileAnalyze")
|
||||
.params(params);
|
||||
const res: AxiosResponse = await graphql.query("getProfileAnalyze").params(params);
|
||||
|
||||
if (res.data.errors) {
|
||||
this.analyzeTrees = [];
|
||||
@ -222,9 +214,7 @@ export const profileStore = defineStore({
|
||||
return res.data;
|
||||
},
|
||||
async getTaskLogs(param: { taskID: string }) {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("getProfileTaskLogs")
|
||||
.params(param);
|
||||
const res: AxiosResponse = await graphql.query("getProfileTaskLogs").params(param);
|
||||
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
|
||||
@ -15,10 +15,10 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { defineStore } from "pinia";
|
||||
import { Service, Instance, Endpoint, Process } from "@/types/selector";
|
||||
import type { Service, Instance, Endpoint, Process } from "@/types/selector";
|
||||
import { store } from "@/store";
|
||||
import graphql from "@/graphql";
|
||||
import { AxiosResponse } from "axios";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
interface SelectorState {
|
||||
services: Service[];
|
||||
@ -82,9 +82,7 @@ export const selectorStore = defineStore({
|
||||
return res.data || {};
|
||||
},
|
||||
async fetchServices(layer: string): Promise<AxiosResponse> {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("queryServices")
|
||||
.params({ layer });
|
||||
const res: AxiosResponse = await graphql.query("queryServices").params({ layer });
|
||||
|
||||
if (!res.data.errors) {
|
||||
this.services = res.data.data.services || [];
|
||||
|
||||
@ -16,12 +16,12 @@
|
||||
*/
|
||||
import { defineStore } from "pinia";
|
||||
import { store } from "@/store";
|
||||
import { Service } from "@/types/selector";
|
||||
import { Node, Call } from "@/types/topology";
|
||||
import type { Service } from "@/types/selector";
|
||||
import type { Node, Call } from "@/types/topology";
|
||||
import graphql from "@/graphql";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { AxiosResponse } from "axios";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import query from "@/graphql/fetch";
|
||||
import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
|
||||
import { ElMessage } from "element-plus";
|
||||
@ -139,9 +139,7 @@ export const topologyStore = defineStore({
|
||||
if (depth > 3) {
|
||||
const services = topo.nodes
|
||||
.map((item: Node) => item.id)
|
||||
.filter(
|
||||
(d: string) => ![...ids, ...pods, ...serviceIds].includes(d)
|
||||
);
|
||||
.filter((d: string) => ![...ids, ...pods, ...serviceIds].includes(d));
|
||||
if (!services.length) {
|
||||
const nodes = [...res.nodes, ...json.nodes, ...topo.nodes];
|
||||
const calls = [...res.calls, ...json.calls, ...topo.calls];
|
||||
@ -152,23 +150,10 @@ export const topologyStore = defineStore({
|
||||
if (depth > 4) {
|
||||
const nodeIds = data.nodes
|
||||
.map((item: Node) => item.id)
|
||||
.filter(
|
||||
(d: string) =>
|
||||
![...services, ...ids, ...pods, ...serviceIds].includes(d)
|
||||
);
|
||||
.filter((d: string) => ![...services, ...ids, ...pods, ...serviceIds].includes(d));
|
||||
if (!nodeIds.length) {
|
||||
const nodes = [
|
||||
...res.nodes,
|
||||
...json.nodes,
|
||||
...topo.nodes,
|
||||
...data.nodes,
|
||||
];
|
||||
const calls = [
|
||||
...res.calls,
|
||||
...json.calls,
|
||||
...topo.calls,
|
||||
...data.calls,
|
||||
];
|
||||
const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
|
||||
const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls];
|
||||
this.setTopology({ nodes, calls });
|
||||
return;
|
||||
}
|
||||
@ -189,18 +174,8 @@ export const topologyStore = defineStore({
|
||||
];
|
||||
this.setTopology({ nodes, calls });
|
||||
} else {
|
||||
const nodes = [
|
||||
...res.nodes,
|
||||
...json.nodes,
|
||||
...topo.nodes,
|
||||
...data.nodes,
|
||||
];
|
||||
const calls = [
|
||||
...res.calls,
|
||||
...json.calls,
|
||||
...topo.calls,
|
||||
...data.calls,
|
||||
];
|
||||
const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
|
||||
const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls];
|
||||
this.setTopology({ nodes, calls });
|
||||
}
|
||||
} else {
|
||||
@ -220,9 +195,7 @@ export const topologyStore = defineStore({
|
||||
},
|
||||
async getServicesTopology(serviceIds: string[]) {
|
||||
const duration = useAppStoreWithOut().durationTime;
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("getServicesTopology")
|
||||
.params({
|
||||
const res: AxiosResponse = await graphql.query("getServicesTopology").params({
|
||||
serviceIds,
|
||||
duration,
|
||||
});
|
||||
@ -235,9 +208,7 @@ export const topologyStore = defineStore({
|
||||
const serverServiceId = useSelectorStore().currentService.id;
|
||||
const clientServiceId = useSelectorStore().currentDestService.id;
|
||||
const duration = useAppStoreWithOut().durationTime;
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("getInstanceTopology")
|
||||
.params({
|
||||
const res: AxiosResponse = await graphql.query("getInstanceTopology").params({
|
||||
clientServiceId,
|
||||
serverServiceId,
|
||||
duration,
|
||||
@ -272,9 +243,7 @@ export const topologyStore = defineStore({
|
||||
if (depth > 3) {
|
||||
const endpoints = topo.nodes
|
||||
.map((item: Node) => item.id)
|
||||
.filter(
|
||||
(d: string) => ![...ids, ...pods, ...endpointIds].includes(d)
|
||||
);
|
||||
.filter((d: string) => ![...ids, ...pods, ...endpointIds].includes(d));
|
||||
if (!endpoints.length) {
|
||||
const nodes = [...res.nodes, ...json.nodes, ...topo.nodes];
|
||||
const calls = [...res.calls, ...json.calls, ...topo.calls];
|
||||
@ -286,22 +255,11 @@ export const topologyStore = defineStore({
|
||||
const nodeIds = data.nodes
|
||||
.map((item: Node) => item.id)
|
||||
.filter(
|
||||
(d: string) =>
|
||||
![...endpoints, ...ids, ...pods, ...endpointIds].includes(d)
|
||||
(d: string) => ![...endpoints, ...ids, ...pods, ...endpointIds].includes(d),
|
||||
);
|
||||
if (!nodeIds.length) {
|
||||
const nodes = [
|
||||
...res.nodes,
|
||||
...json.nodes,
|
||||
...topo.nodes,
|
||||
...data.nodes,
|
||||
];
|
||||
const calls = [
|
||||
...res.calls,
|
||||
...json.calls,
|
||||
...topo.calls,
|
||||
...data.calls,
|
||||
];
|
||||
const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
|
||||
const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls];
|
||||
this.setTopology({ nodes, calls });
|
||||
return;
|
||||
}
|
||||
@ -322,18 +280,8 @@ export const topologyStore = defineStore({
|
||||
];
|
||||
this.setTopology({ nodes, calls });
|
||||
} else {
|
||||
const nodes = [
|
||||
...res.nodes,
|
||||
...json.nodes,
|
||||
...topo.nodes,
|
||||
...data.nodes,
|
||||
];
|
||||
const calls = [
|
||||
...res.calls,
|
||||
...json.calls,
|
||||
...topo.calls,
|
||||
...data.calls,
|
||||
];
|
||||
const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
|
||||
const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls];
|
||||
this.setTopology({ nodes, calls });
|
||||
}
|
||||
} else {
|
||||
@ -390,10 +338,7 @@ export const topologyStore = defineStore({
|
||||
|
||||
return { calls, nodes };
|
||||
},
|
||||
async getNodeMetricValue(param: {
|
||||
queryStr: string;
|
||||
conditions: { [key: string]: unknown };
|
||||
}) {
|
||||
async getNodeMetricValue(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
|
||||
const res: AxiosResponse = await query(param);
|
||||
|
||||
if (res.data.errors) {
|
||||
@ -454,10 +399,7 @@ export const topologyStore = defineStore({
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
},
|
||||
async getLegendMetrics(param: {
|
||||
queryStr: string;
|
||||
conditions: { [key: string]: unknown };
|
||||
}) {
|
||||
async getLegendMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
|
||||
const res: AxiosResponse = await query(param);
|
||||
|
||||
if (res.data.errors) {
|
||||
|
||||
@ -15,11 +15,11 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { defineStore } from "pinia";
|
||||
import { Instance, Endpoint, Service } from "@/types/selector";
|
||||
import { Trace, Span } from "@/types/trace";
|
||||
import type { Instance, Endpoint, Service } from "@/types/selector";
|
||||
import type { Trace, Span } from "@/types/trace";
|
||||
import { store } from "@/store";
|
||||
import graphql from "@/graphql";
|
||||
import { AxiosResponse } from "axios";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { QueryOrders } from "@/views/dashboard/data";
|
||||
@ -169,9 +169,7 @@ export const traceStore = defineStore({
|
||||
return res.data;
|
||||
},
|
||||
async getTraceSpans(params: { traceId: string }) {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("queryTrace")
|
||||
.params(params);
|
||||
const res: AxiosResponse = await graphql.query("queryTrace").params(params);
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
@ -180,9 +178,7 @@ export const traceStore = defineStore({
|
||||
return res.data;
|
||||
},
|
||||
async getSpanLogs(params: any) {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("queryServiceLogs")
|
||||
.params(params);
|
||||
const res: AxiosResponse = await graphql.query("queryServiceLogs").params(params);
|
||||
if (res.data.errors) {
|
||||
this.traceSpanLogs = [];
|
||||
return res.data;
|
||||
|
||||
1
src/types/dashboard.d.ts
vendored
1
src/types/dashboard.d.ts
vendored
@ -1,4 +1,3 @@
|
||||
import { DurationTime } from "@/types/app";
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { DurationTime } from "./app";
|
||||
import type { DurationTime } from "./app";
|
||||
|
||||
export interface Conditions {
|
||||
container: string;
|
||||
|
||||
2
src/types/ebpf.d.ts
vendored
2
src/types/ebpf.d.ts
vendored
@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Process } from "./selector";
|
||||
import type { Process } from "./selector";
|
||||
export interface EBPFTaskCreationRequest {
|
||||
serviceId: string;
|
||||
processLabels: string[];
|
||||
|
||||
3
src/types/index.d.ts
vendored
3
src/types/index.d.ts
vendored
@ -38,7 +38,6 @@ declare interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
|
||||
$el: T;
|
||||
}
|
||||
|
||||
declare type ComponentRef<T extends HTMLElement = HTMLDivElement> =
|
||||
ComponentElRef<T> | null;
|
||||
declare type ComponentRef<T extends HTMLElement = HTMLDivElement> = ComponentElRef<T> | null;
|
||||
|
||||
declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
|
||||
|
||||
@ -15,11 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import dayjs from "dayjs";
|
||||
export default function dateFormatStep(
|
||||
date: Date,
|
||||
step: string,
|
||||
monthDayDiff?: boolean
|
||||
): string {
|
||||
export default function dateFormatStep(date: Date, step: string, monthDayDiff?: boolean): string {
|
||||
const year = date.getFullYear();
|
||||
const monthTemp = date.getMonth() + 1;
|
||||
let month = `${monthTemp}`;
|
||||
|
||||
@ -39,10 +39,7 @@ export function addResizeListener(element: any, fn: () => unknown): void {
|
||||
|
||||
export function removeResizeListener(element: any, fn: () => unknown): void {
|
||||
if (!element || !element.__resizeListeners__) return;
|
||||
element.__resizeListeners__.splice(
|
||||
element.__resizeListeners__.indexOf(fn),
|
||||
1
|
||||
);
|
||||
element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
|
||||
if (!element.__resizeListeners__.length) {
|
||||
element.__ro__.disconnect();
|
||||
}
|
||||
|
||||
@ -53,12 +53,7 @@ export function isNumber(val: unknown): val is number {
|
||||
}
|
||||
|
||||
export function isPromise<T = any>(val: unknown): val is Promise<T> {
|
||||
return (
|
||||
is(val, "Promise") &&
|
||||
isObject(val) &&
|
||||
isFunction(val.then) &&
|
||||
isFunction(val.catch)
|
||||
);
|
||||
return is(val, "Promise") && isObject(val) && isFunction(val.then) && isFunction(val.catch);
|
||||
}
|
||||
|
||||
export function isString(val: unknown): val is string {
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { Duration } from "@/types/app";
|
||||
import type { Duration } from "@/types/app";
|
||||
import { TimeType } from "@/constants/data";
|
||||
|
||||
const timeFormat = (time: Date[]): Duration => {
|
||||
|
||||
@ -17,11 +17,7 @@
|
||||
class Vec2 extends Float32Array {
|
||||
constructor(v?: unknown, y?: unknown) {
|
||||
super(2);
|
||||
if (
|
||||
v instanceof Vec2 ||
|
||||
v instanceof Float32Array ||
|
||||
(v instanceof Array && v.length == 2)
|
||||
) {
|
||||
if (v instanceof Vec2 || v instanceof Float32Array || (v instanceof Array && v.length == 2)) {
|
||||
this[0] = v[0];
|
||||
this[1] = v[1];
|
||||
} else if (typeof v === "number" && typeof y === "number") {
|
||||
|
||||
@ -17,19 +17,11 @@
|
||||
class Vec3 extends Float32Array {
|
||||
constructor(v?: unknown, y?: unknown, z?: unknown) {
|
||||
super(3);
|
||||
if (
|
||||
v instanceof Vec3 ||
|
||||
v instanceof Float32Array ||
|
||||
(v instanceof Array && v.length == 3)
|
||||
) {
|
||||
if (v instanceof Vec3 || v instanceof Float32Array || (v instanceof Array && v.length == 3)) {
|
||||
this[0] = v[0];
|
||||
this[1] = v[1];
|
||||
this[2] = v[2];
|
||||
} else if (
|
||||
typeof v === "number" &&
|
||||
typeof y === "number" &&
|
||||
typeof z === "number"
|
||||
) {
|
||||
} else if (typeof v === "number" && typeof y === "number" && typeof z === "number") {
|
||||
this[0] = v;
|
||||
this[1] = y;
|
||||
this[2] = z;
|
||||
@ -158,17 +150,9 @@ class Vec3 extends Float32Array {
|
||||
}
|
||||
static norm(x: unknown, y: unknown, z: unknown): Vec3 {
|
||||
const rtn = new Vec3();
|
||||
if (
|
||||
x instanceof Vec3 ||
|
||||
x instanceof Float32Array ||
|
||||
(x instanceof Array && x.length == 3)
|
||||
) {
|
||||
if (x instanceof Vec3 || x instanceof Float32Array || (x instanceof Array && x.length == 3)) {
|
||||
rtn.copy(x);
|
||||
} else if (
|
||||
typeof x === "number" &&
|
||||
typeof y === "number" &&
|
||||
typeof z === "number"
|
||||
) {
|
||||
} else if (typeof x === "number" && typeof y === "number" && typeof z === "number") {
|
||||
rtn.xyz(x, y, z);
|
||||
}
|
||||
return rtn.norm();
|
||||
|
||||
@ -19,17 +19,17 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import Header from "./alarm/Header.vue";
|
||||
import Content from "./alarm/Content.vue";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import Header from "./alarm/Header.vue";
|
||||
import Content from "./alarm/Content.vue";
|
||||
|
||||
const appStore = useAppStoreWithOut();
|
||||
appStore.setPageTitle("Alerting");
|
||||
const appStore = useAppStoreWithOut();
|
||||
appStore.setPageTitle("Alerting");
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.alarm {
|
||||
.alarm {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,18 +19,18 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import Header from "./event/Header.vue";
|
||||
import Content from "./event/Content.vue";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import Header from "./event/Header.vue";
|
||||
import Content from "./event/Content.vue";
|
||||
|
||||
const appStore = useAppStoreWithOut();
|
||||
const appStore = useAppStoreWithOut();
|
||||
|
||||
appStore.setPageTitle("Events");
|
||||
appStore.setPageTitle("Events");
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.event {
|
||||
.event {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,29 +14,27 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<Dashboard v-if="dashboardStore.currentDashboard" />
|
||||
<div v-else class="no-root">
|
||||
{{ t("noRoot") }} {{ dashboardStore.layerId }}
|
||||
</div>
|
||||
<div v-else class="no-root"> {{ t("noRoot") }} {{ dashboardStore.layerId }} </div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { EntityType } from "./dashboard/data";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import Dashboard from "./dashboard/Edit.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { EntityType } from "./dashboard/data";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import Dashboard from "./dashboard/Edit.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const layer = ref<string>("GENERAL");
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const layer = ref<string>("GENERAL");
|
||||
|
||||
getDashboard();
|
||||
getDashboard();
|
||||
|
||||
async function getDashboard() {
|
||||
async function getDashboard() {
|
||||
layer.value = String(route.meta.layer);
|
||||
dashboardStore.setLayer(layer.value);
|
||||
dashboardStore.setMode(false);
|
||||
@ -45,7 +43,7 @@ async function getDashboard() {
|
||||
(d: { name: string; isRoot: boolean; layer: string; entity: string }) =>
|
||||
d.layer === dashboardStore.layerId &&
|
||||
[EntityType[0].value, EntityType[1].value].includes(d.entity) &&
|
||||
d.isRoot
|
||||
d.isRoot,
|
||||
);
|
||||
if (!item) {
|
||||
appStore.setPageTitle(dashboardStore.layer);
|
||||
@ -55,13 +53,13 @@ async function getDashboard() {
|
||||
}
|
||||
dashboardStore.setEntity(item.entity);
|
||||
dashboardStore.setCurrentDashboard(item);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.no-root {
|
||||
.no-root {
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -55,12 +55,7 @@ limitations under the License. -->
|
||||
<el-switch v-model="auto" @change="handleAuto" style="height: 25px" />
|
||||
<div class="auto-time ml-5">
|
||||
<span class="auto-select">
|
||||
<input
|
||||
type="number"
|
||||
v-model="autoTime"
|
||||
@change="changeAutoTime"
|
||||
min="1"
|
||||
/>
|
||||
<input type="number" v-model="autoTime" @change="changeAutoTime" min="1" />
|
||||
</span>
|
||||
{{ t("second") }}
|
||||
<i class="ml-10">{{ t("timeReload") }}</i>
|
||||
@ -69,33 +64,32 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import timeFormat from "@/utils/timeFormat";
|
||||
import { Languages } from "@/constants/data";
|
||||
import Selector from "@/components/Selector.vue";
|
||||
import getLocalTime from "@/utils/localtime";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import timeFormat from "@/utils/timeFormat";
|
||||
import { Languages } from "@/constants/data";
|
||||
import Selector from "@/components/Selector.vue";
|
||||
import getLocalTime from "@/utils/localtime";
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const lang = ref<string>(locale.value || "en");
|
||||
const autoTime = ref<number>(6);
|
||||
const auto = ref<boolean>(appStore.autoRefresh || false);
|
||||
const utcHour = ref<number>(appStore.utcHour);
|
||||
const utcMin = ref<number>(appStore.utcMin);
|
||||
const { t, locale } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const lang = ref<string>(locale.value || "en");
|
||||
const autoTime = ref<number>(6);
|
||||
const auto = ref<boolean>(appStore.autoRefresh || false);
|
||||
const utcHour = ref<number>(appStore.utcHour);
|
||||
const utcMin = ref<number>(appStore.utcMin);
|
||||
|
||||
appStore.setPageTitle("Setting");
|
||||
const handleReload = () => {
|
||||
const gap =
|
||||
appStore.duration.end.getTime() - appStore.duration.start.getTime();
|
||||
appStore.setPageTitle("Setting");
|
||||
const handleReload = () => {
|
||||
const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
|
||||
const dates: Date[] = [
|
||||
getLocalTime(appStore.utc, new Date(new Date().getTime() - gap)),
|
||||
getLocalTime(appStore.utc, new Date()),
|
||||
];
|
||||
appStore.setDuration(timeFormat(dates));
|
||||
};
|
||||
const handleAuto = () => {
|
||||
};
|
||||
const handleAuto = () => {
|
||||
if (autoTime.value < 1) {
|
||||
return;
|
||||
}
|
||||
@ -108,8 +102,8 @@ const handleAuto = () => {
|
||||
clearInterval(appStore.reloadTimer);
|
||||
}
|
||||
}
|
||||
};
|
||||
const changeAutoTime = () => {
|
||||
};
|
||||
const changeAutoTime = () => {
|
||||
if (autoTime.value < 1) {
|
||||
return;
|
||||
}
|
||||
@ -120,12 +114,12 @@ const changeAutoTime = () => {
|
||||
handleReload();
|
||||
appStore.setReloadTimer(setInterval(handleReload, autoTime.value * 1000));
|
||||
}
|
||||
};
|
||||
const setLang = (): void => {
|
||||
};
|
||||
const setLang = (): void => {
|
||||
locale.value = lang.value;
|
||||
window.localStorage.setItem("language", lang.value);
|
||||
};
|
||||
const setUTCHour = () => {
|
||||
};
|
||||
const setUTCHour = () => {
|
||||
if (utcHour.value < -12) {
|
||||
utcHour.value = -12;
|
||||
}
|
||||
@ -136,8 +130,8 @@ const setUTCHour = () => {
|
||||
utcHour.value = 0;
|
||||
}
|
||||
appStore.setUTC(utcHour.value, utcMin.value);
|
||||
};
|
||||
const setUTCMin = () => {
|
||||
};
|
||||
const setUTCMin = () => {
|
||||
if (utcMin.value < 0) {
|
||||
utcMin.value = 0;
|
||||
}
|
||||
@ -148,23 +142,23 @@ const setUTCMin = () => {
|
||||
utcMin.value = 0;
|
||||
}
|
||||
appStore.setUTC(utcHour.value, utcMin.value);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.utc-input {
|
||||
.utc-input {
|
||||
color: inherit;
|
||||
background: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.utc-min {
|
||||
.utc-min {
|
||||
display: inline-block;
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.auto-select {
|
||||
.auto-select {
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
padding: 1px;
|
||||
@ -174,9 +168,9 @@ const setUTCMin = () => {
|
||||
border-style: unset;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
.settings {
|
||||
color: #606266;
|
||||
font-size: 13px;
|
||||
padding: 20px;
|
||||
@ -201,5 +195,5 @@ const setUTCMin = () => {
|
||||
color: #000;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,11 +14,7 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="timeline-table clear">
|
||||
<div
|
||||
v-for="(i, index) in alarmStore.alarms"
|
||||
:key="index"
|
||||
class="clear timeline-item"
|
||||
>
|
||||
<div v-for="(i, index) in alarmStore.alarms" :key="index" class="clear timeline-item">
|
||||
<div class="g-sm-3 grey sm hide-xs time-line tr">
|
||||
{{ dateFormat(parseInt(i.startTime)) }}
|
||||
</div>
|
||||
@ -50,11 +46,7 @@ limitations under the License. -->
|
||||
:destroy-on-close="true"
|
||||
@closed="isShowDetails = false"
|
||||
>
|
||||
<div
|
||||
class="mb-10 clear alarm-detail"
|
||||
v-for="(item, index) in AlarmDetailCol"
|
||||
:key="index"
|
||||
>
|
||||
<div class="mb-10 clear alarm-detail" v-for="(item, index) in AlarmDetailCol" :key="index">
|
||||
<span class="g-sm-2 grey">{{ t(item.value) }}:</span>
|
||||
<span v-if="item.label === 'startTime'">
|
||||
{{ dateFormat(currentDetail[item.label]) }}
|
||||
@ -74,11 +66,7 @@ limitations under the License. -->
|
||||
{{ t(i.text) }}
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
v-for="event in currentEvents"
|
||||
:key="event.uuid"
|
||||
@click="viewEventDetail(event)"
|
||||
>
|
||||
<li v-for="event in currentEvents" :key="event.uuid" @click="viewEventDetail(event)">
|
||||
<span
|
||||
v-for="(d, index) of EventsDetailHeaders"
|
||||
:class="d.class"
|
||||
@ -106,29 +94,18 @@ limitations under the License. -->
|
||||
@closed="showEventDetails = false"
|
||||
>
|
||||
<div class="event-detail">
|
||||
<div
|
||||
class="mb-10"
|
||||
v-for="(eventKey, index) in EventsDetailKeys"
|
||||
:key="index"
|
||||
>
|
||||
<div class="mb-10" v-for="(eventKey, index) in EventsDetailKeys" :key="index">
|
||||
<span class="keys">{{ t(eventKey.text) }}</span>
|
||||
<span v-if="eventKey.class === 'parameters'">
|
||||
<span v-for="(d, index) of currentEvent[eventKey.class]" :key="index">
|
||||
{{ d.key }}={{ d.value }};
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
v-else-if="
|
||||
eventKey.class === 'startTime' || eventKey.class === 'endTime'
|
||||
"
|
||||
>
|
||||
<span v-else-if="eventKey.class === 'startTime' || eventKey.class === 'endTime'">
|
||||
{{ dateFormat(currentEvent[eventKey.class]) }}
|
||||
</span>
|
||||
<span v-else-if="eventKey.class === 'source'" class="source">
|
||||
<span
|
||||
>{{ t("service") }}:
|
||||
{{ currentEvent[eventKey.class].service }}</span
|
||||
>
|
||||
<span>{{ t("service") }}: {{ currentEvent[eventKey.class].service }}</span>
|
||||
<div v-show="currentEvent[eventKey.class].endpoint">
|
||||
{{ t("endpoint") }}:
|
||||
{{ currentEvent[eventKey.class].endpoint }}
|
||||
@ -144,45 +121,43 @@ limitations under the License. -->
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { Alarm, Event } from "@/types/alarm";
|
||||
import { useAlarmStore } from "@/store/modules/alarm";
|
||||
import { EventsDetailHeaders, AlarmDetailCol, EventsDetailKeys } from "./data";
|
||||
import { dateFormat } from "@/utils/dateFormat";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import type { Alarm, Event } from "@/types/alarm";
|
||||
import { useAlarmStore } from "@/store/modules/alarm";
|
||||
import { EventsDetailHeaders, AlarmDetailCol, EventsDetailKeys } from "./data";
|
||||
import { dateFormat } from "@/utils/dateFormat";
|
||||
|
||||
const { t } = useI18n();
|
||||
const alarmStore = useAlarmStore();
|
||||
const isShowDetails = ref<boolean>(false);
|
||||
const showEventDetails = ref<boolean>(false);
|
||||
const currentDetail = ref<Alarm | any>({});
|
||||
const alarmTags = ref<string[]>([]);
|
||||
const currentEvents = ref<any[]>([]);
|
||||
const currentEvent = ref<Event | any>({});
|
||||
const { t } = useI18n();
|
||||
const alarmStore = useAlarmStore();
|
||||
const isShowDetails = ref<boolean>(false);
|
||||
const showEventDetails = ref<boolean>(false);
|
||||
const currentDetail = ref<Alarm | any>({});
|
||||
const alarmTags = ref<string[]>([]);
|
||||
const currentEvents = ref<any[]>([]);
|
||||
const currentEvent = ref<Event | any>({});
|
||||
|
||||
function showDetails(item: Alarm) {
|
||||
function showDetails(item: Alarm) {
|
||||
isShowDetails.value = true;
|
||||
currentDetail.value = item;
|
||||
currentEvents.value = item.events;
|
||||
alarmTags.value = currentDetail.value.tags.map(
|
||||
(d: { key: string; value: string }) => {
|
||||
alarmTags.value = currentDetail.value.tags.map((d: { key: string; value: string }) => {
|
||||
return `${d.key} = ${d.value}`;
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function viewEventDetail(event: Event) {
|
||||
function viewEventDetail(event: Event) {
|
||||
currentEvent.value = event;
|
||||
showEventDetails.value = true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../components/style.scss";
|
||||
@import "../components/style.scss";
|
||||
|
||||
.tips {
|
||||
.tips {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -55,30 +55,28 @@ limitations under the License. -->
|
||||
</nav>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import ConditionTags from "@/views/components/ConditionTags.vue";
|
||||
import { AlarmOptions } from "./data";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useAlarmStore } from "@/store/modules/alarm";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import ConditionTags from "@/views/components/ConditionTags.vue";
|
||||
import { AlarmOptions } from "./data";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useAlarmStore } from "@/store/modules/alarm";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const appStore = useAppStoreWithOut();
|
||||
const alarmStore = useAlarmStore();
|
||||
const { t } = useI18n();
|
||||
const pageSize = 20;
|
||||
const entity = ref<string>("");
|
||||
const keyword = ref<string>("");
|
||||
const pageNum = ref<number>(1);
|
||||
const total = computed(() =>
|
||||
alarmStore.alarms.length === pageSize
|
||||
? pageSize * pageNum.value + 1
|
||||
: pageSize * pageNum.value
|
||||
);
|
||||
const appStore = useAppStoreWithOut();
|
||||
const alarmStore = useAlarmStore();
|
||||
const { t } = useI18n();
|
||||
const pageSize = 20;
|
||||
const entity = ref<string>("");
|
||||
const keyword = ref<string>("");
|
||||
const pageNum = ref<number>(1);
|
||||
const total = computed(() =>
|
||||
alarmStore.alarms.length === pageSize ? pageSize * pageNum.value + 1 : pageSize * pageNum.value,
|
||||
);
|
||||
|
||||
refreshAlarms({ pageNum: 1 });
|
||||
refreshAlarms({ pageNum: 1 });
|
||||
|
||||
async function refreshAlarms(param: { pageNum: number; tagsMap?: any }) {
|
||||
async function refreshAlarms(param: { pageNum: number; tagsMap?: any }) {
|
||||
const params: any = {
|
||||
duration: appStore.durationTime,
|
||||
paging: {
|
||||
@ -94,38 +92,38 @@ async function refreshAlarms(param: { pageNum: number; tagsMap?: any }) {
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function changeEntity(param: any) {
|
||||
function changeEntity(param: any) {
|
||||
entity.value = param[0].value;
|
||||
refreshAlarms({ pageNum: 1 });
|
||||
}
|
||||
}
|
||||
|
||||
function changePage(p: number) {
|
||||
function changePage(p: number) {
|
||||
pageNum.value = p;
|
||||
refreshAlarms({ pageNum: p });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.alarm-tool {
|
||||
.alarm-tool {
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid #c1c5ca41;
|
||||
background-color: #f0f2f5;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.alarm-tool-input {
|
||||
.alarm-tool-input {
|
||||
border-style: unset;
|
||||
outline: 0;
|
||||
padding: 2px 5px;
|
||||
width: 250px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.pagination {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -52,10 +52,7 @@ limitations under the License. -->
|
||||
</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
<span
|
||||
class="tags-tip"
|
||||
:class="type !== 'ALARM' && tagArr.length ? 'link-tips' : ''"
|
||||
>
|
||||
<span class="tags-tip" :class="type !== 'ALARM' && tagArr.length ? 'link-tips' : ''">
|
||||
<a
|
||||
target="blank"
|
||||
href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
|
||||
@ -72,50 +69,50 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useTraceStore } from "@/store/modules/trace";
|
||||
import { useLogStore } from "@/store/modules/log";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { ref, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useTraceStore } from "@/store/modules/trace";
|
||||
import { useLogStore } from "@/store/modules/log";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
|
||||
/*global defineEmits, defineProps */
|
||||
const emit = defineEmits(["update"]);
|
||||
const props = defineProps({
|
||||
/*global defineEmits, defineProps */
|
||||
const emit = defineEmits(["update"]);
|
||||
const props = defineProps({
|
||||
type: { type: String, default: "TRACE" },
|
||||
});
|
||||
const traceStore = useTraceStore();
|
||||
const logStore = useLogStore();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const { t } = useI18n();
|
||||
const tags = ref<string>("");
|
||||
const tagsList = ref<string[]>([]);
|
||||
const tagArr = ref<string[]>([]);
|
||||
const tagList = ref<string[]>([]);
|
||||
const tagKeys = ref<string[]>([]);
|
||||
const keysList = ref<string[]>([]);
|
||||
const visible = ref<boolean>(false);
|
||||
const tipsMap = {
|
||||
});
|
||||
const traceStore = useTraceStore();
|
||||
const logStore = useLogStore();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const { t } = useI18n();
|
||||
const tags = ref<string>("");
|
||||
const tagsList = ref<string[]>([]);
|
||||
const tagArr = ref<string[]>([]);
|
||||
const tagList = ref<string[]>([]);
|
||||
const tagKeys = ref<string[]>([]);
|
||||
const keysList = ref<string[]>([]);
|
||||
const visible = ref<boolean>(false);
|
||||
const tipsMap = {
|
||||
LOG: "logTagsTip",
|
||||
TRACE: "traceTagsTip",
|
||||
ALARM: "alarmTagsTip",
|
||||
};
|
||||
};
|
||||
|
||||
fetchTagKeys();
|
||||
fetchTagKeys();
|
||||
|
||||
function removeTags(index: number) {
|
||||
function removeTags(index: number) {
|
||||
tagsList.value.splice(index, 1);
|
||||
updateTags();
|
||||
}
|
||||
function addLabels() {
|
||||
}
|
||||
function addLabels() {
|
||||
if (!tags.value) {
|
||||
return;
|
||||
}
|
||||
tagsList.value.push(tags.value);
|
||||
tags.value = "";
|
||||
updateTags();
|
||||
}
|
||||
function updateTags() {
|
||||
}
|
||||
function updateTags() {
|
||||
const tagsMap = tagsList.value.map((item: string) => {
|
||||
const key = item.substring(0, item.indexOf("="));
|
||||
return {
|
||||
@ -124,8 +121,8 @@ function updateTags() {
|
||||
};
|
||||
});
|
||||
emit("update", { tagsMap, tagsList: tagsList.value });
|
||||
}
|
||||
async function fetchTagKeys() {
|
||||
}
|
||||
async function fetchTagKeys() {
|
||||
let resp: any = {};
|
||||
if (props.type === "TRACE") {
|
||||
resp = await traceStore.getTagKeys();
|
||||
@ -141,9 +138,9 @@ async function fetchTagKeys() {
|
||||
tagKeys.value = resp.data.tagKeys;
|
||||
keysList.value = resp.data.tagKeys;
|
||||
searchTags();
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchTagValues() {
|
||||
async function fetchTagValues() {
|
||||
const param = tags.value.split("=")[0];
|
||||
let resp: any = {};
|
||||
if (props.type === "TRACE") {
|
||||
@ -158,9 +155,9 @@ async function fetchTagValues() {
|
||||
}
|
||||
tagArr.value = resp.data.tagValues;
|
||||
searchTags();
|
||||
}
|
||||
}
|
||||
|
||||
function inputTags() {
|
||||
function inputTags() {
|
||||
if (!tags.value) {
|
||||
tagArr.value = keysList.value;
|
||||
tagKeys.value = keysList.value;
|
||||
@ -175,18 +172,18 @@ function inputTags() {
|
||||
search = tags.value;
|
||||
}
|
||||
tagList.value = tagArr.value.filter((d: string) => d.includes(search));
|
||||
}
|
||||
}
|
||||
|
||||
function addTags() {
|
||||
function addTags() {
|
||||
if (!tags.value.includes("=")) {
|
||||
return;
|
||||
}
|
||||
addLabels();
|
||||
tagArr.value = tagKeys.value;
|
||||
searchTags();
|
||||
}
|
||||
}
|
||||
|
||||
function selectTag(item: string) {
|
||||
function selectTag(item: string) {
|
||||
if (tags.value.includes("=")) {
|
||||
const key = tags.value.split("=")[0];
|
||||
tags.value = key + "=" + item;
|
||||
@ -195,9 +192,9 @@ function selectTag(item: string) {
|
||||
}
|
||||
tags.value = item + "=";
|
||||
fetchTagValues();
|
||||
}
|
||||
}
|
||||
|
||||
function searchTags() {
|
||||
function searchTags() {
|
||||
let search = "";
|
||||
if (tags.value.includes("=")) {
|
||||
search = tags.value.split("=")[1];
|
||||
@ -205,25 +202,25 @@ function searchTags() {
|
||||
search = tags.value;
|
||||
}
|
||||
tagList.value = tagArr.value.filter((d: string) => d.includes(search));
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => appStore.durationTime,
|
||||
() => {
|
||||
fetchTagKeys();
|
||||
}
|
||||
);
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.trace-tags {
|
||||
.trace-tags {
|
||||
padding: 1px 5px 0 0;
|
||||
border-radius: 3px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
.selected {
|
||||
display: inline-block;
|
||||
padding: 0 3px;
|
||||
border-radius: 3px;
|
||||
@ -231,23 +228,23 @@ watch(
|
||||
border: 1px dashed #aaa;
|
||||
font-size: 12px;
|
||||
margin: 3px 2px 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.trace-new-tag {
|
||||
.trace-new-tag {
|
||||
border-style: unset;
|
||||
outline: 0;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-icon {
|
||||
.remove-icon {
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
.tag-item {
|
||||
display: inline-block;
|
||||
min-width: 210px;
|
||||
cursor: pointer;
|
||||
@ -256,17 +253,17 @@ watch(
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags-tip {
|
||||
.tags-tip {
|
||||
color: #a7aebb;
|
||||
}
|
||||
}
|
||||
|
||||
.link-tips {
|
||||
.link-tips {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.light {
|
||||
.light {
|
||||
color: #3d444f;
|
||||
|
||||
input {
|
||||
@ -276,15 +273,15 @@ watch(
|
||||
.selected {
|
||||
color: #3d444f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-help {
|
||||
.icon-help {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.content {
|
||||
width: 300px;
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -33,17 +33,17 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRoute } from "vue-router";
|
||||
import GridLayout from "./panel/Layout.vue";
|
||||
import Tool from "./panel/Tool.vue";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import Configuration from "./configuration";
|
||||
import { LayoutConfig } from "@/types/dashboard";
|
||||
import { ref, defineComponent } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRoute } from "vue-router";
|
||||
import GridLayout from "./panel/Layout.vue";
|
||||
import Tool from "./panel/Tool.vue";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import Configuration from "./configuration";
|
||||
import type { LayoutConfig } from "@/types/dashboard";
|
||||
|
||||
export default defineComponent({
|
||||
export default defineComponent({
|
||||
name: "Dashboard",
|
||||
components: { ...Configuration, GridLayout, Tool },
|
||||
setup() {
|
||||
@ -64,7 +64,7 @@ export default defineComponent({
|
||||
layoutKey.value = `${layer}_${entity}_${name}`;
|
||||
}
|
||||
const c: { configuration: string; id: string } = JSON.parse(
|
||||
sessionStorage.getItem(layoutKey.value) || "{}"
|
||||
sessionStorage.getItem(layoutKey.value) || "{}",
|
||||
);
|
||||
const layout: any = c.configuration || {};
|
||||
|
||||
@ -112,10 +112,10 @@ export default defineComponent({
|
||||
dashboardStore,
|
||||
};
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ds-main {
|
||||
.ds-main {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -33,9 +33,7 @@ limitations under the License. -->
|
||||
{{ t("reloadDashboards") }}
|
||||
</el-button>
|
||||
<router-link to="/dashboard/new">
|
||||
<el-button size="small" type="primary">
|
||||
+ {{ t("newDashboard") }}
|
||||
</el-button>
|
||||
<el-button size="small" type="primary"> + {{ t("newDashboard") }} </el-button>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="table">
|
||||
@ -74,10 +72,7 @@ limitations under the License. -->
|
||||
<el-button size="small" @click="handleRename(scope.row)">
|
||||
{{ t("rename") }}
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
:title="t('deleteTitle')"
|
||||
@confirm="handleDelete(scope.row)"
|
||||
>
|
||||
<el-popconfirm :title="t('deleteTitle')" @confirm="handleDelete(scope.row)">
|
||||
<template #reference>
|
||||
<el-button size="small" type="danger">
|
||||
{{ t("delete") }}
|
||||
@ -87,11 +82,7 @@ limitations under the License. -->
|
||||
<el-popconfirm
|
||||
:title="t('rootTitle')"
|
||||
@confirm="setRoot(scope.row)"
|
||||
v-if="
|
||||
[EntityType[0].value, EntityType[1].value].includes(
|
||||
scope.row.entity
|
||||
)
|
||||
"
|
||||
v-if="[EntityType[0].value, EntityType[1].value].includes(scope.row.entity)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button size="small" style="width: 110px" type="danger">
|
||||
@ -140,48 +131,48 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ElMessageBox, ElMessage } from "element-plus";
|
||||
import type { ElTable } from "element-plus";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import router from "@/router";
|
||||
import { DashboardItem, LayoutConfig } from "@/types/dashboard";
|
||||
import { saveFile, readFile } from "@/utils/file";
|
||||
import { EntityType } from "./data";
|
||||
import { isEmptyObject } from "@/utils/is";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ElMessageBox, ElMessage } from "element-plus";
|
||||
import { ElTable } from "element-plus";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import router from "@/router";
|
||||
import type { DashboardItem, LayoutConfig } from "@/types/dashboard";
|
||||
import { saveFile, readFile } from "@/utils/file";
|
||||
import { EntityType } from "./data";
|
||||
import { isEmptyObject } from "@/utils/is";
|
||||
|
||||
/*global Nullable*/
|
||||
const { t } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const pageSize = 20;
|
||||
const dashboards = ref<DashboardItem[]>([]);
|
||||
const searchText = ref<string>("");
|
||||
const loading = ref<boolean>(false);
|
||||
const currentPage = ref<number>(1);
|
||||
const total = ref<number>(0);
|
||||
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
|
||||
const multipleSelection = ref<DashboardItem[]>([]);
|
||||
const dashboardFile = ref<Nullable<HTMLDivElement>>(null);
|
||||
/*global Nullable*/
|
||||
const { t } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const pageSize = 20;
|
||||
const dashboards = ref<DashboardItem[]>([]);
|
||||
const searchText = ref<string>("");
|
||||
const loading = ref<boolean>(false);
|
||||
const currentPage = ref<number>(1);
|
||||
const total = ref<number>(0);
|
||||
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
|
||||
const multipleSelection = ref<DashboardItem[]>([]);
|
||||
const dashboardFile = ref<Nullable<HTMLDivElement>>(null);
|
||||
|
||||
appStore.setPageTitle("Dashboard List");
|
||||
const handleSelectionChange = (val: DashboardItem[]) => {
|
||||
appStore.setPageTitle("Dashboard List");
|
||||
const handleSelectionChange = (val: DashboardItem[]) => {
|
||||
multipleSelection.value = val;
|
||||
};
|
||||
setList();
|
||||
async function setList() {
|
||||
};
|
||||
setList();
|
||||
async function setList() {
|
||||
await dashboardStore.setDashboards();
|
||||
searchDashboards(1);
|
||||
}
|
||||
async function importTemplates(event: any) {
|
||||
}
|
||||
async function importTemplates(event: any) {
|
||||
const arr: any = await readFile(event);
|
||||
for (const item of arr) {
|
||||
const { layer, name, entity } = item.configuration;
|
||||
const index = dashboardStore.dashboards.findIndex(
|
||||
(d: DashboardItem) =>
|
||||
d.name === name && d.entity === entity && d.layer === layer && !item.id
|
||||
d.name === name && d.entity === entity && d.layer === layer && !item.id,
|
||||
);
|
||||
if (index > -1) {
|
||||
return ElMessage.error(t("nameError"));
|
||||
@ -190,9 +181,7 @@ async function importTemplates(event: any) {
|
||||
loading.value = true;
|
||||
for (const item of arr) {
|
||||
const { layer, name, entity, isRoot, children } = item.configuration;
|
||||
const index = dashboardStore.dashboards.findIndex(
|
||||
(d: DashboardItem) => d.id === item.id
|
||||
);
|
||||
const index = dashboardStore.dashboards.findIndex((d: DashboardItem) => d.id === item.id);
|
||||
const p: DashboardItem = {
|
||||
name: name.split(" ").join("-"),
|
||||
layer: layer,
|
||||
@ -210,16 +199,14 @@ async function importTemplates(event: any) {
|
||||
dashboards.value = dashboardStore.dashboards;
|
||||
loading.value = false;
|
||||
dashboardFile.value = null;
|
||||
}
|
||||
function exportTemplates() {
|
||||
}
|
||||
function exportTemplates() {
|
||||
if (!multipleSelection.value.length) {
|
||||
return;
|
||||
}
|
||||
const arr = multipleSelection.value.sort(
|
||||
(a: DashboardItem, b: DashboardItem) => {
|
||||
const arr = multipleSelection.value.sort((a: DashboardItem, b: DashboardItem) => {
|
||||
return a.name.localeCompare(b.name);
|
||||
}
|
||||
);
|
||||
});
|
||||
const templates = arr.map((d: DashboardItem) => {
|
||||
const key = [d.layer, d.entity, d.name].join("_");
|
||||
const layout = JSON.parse(sessionStorage.getItem(key) || "{}");
|
||||
@ -233,15 +220,15 @@ function exportTemplates() {
|
||||
setTimeout(() => {
|
||||
multipleTableRef.value!.clearSelection();
|
||||
}, 2000);
|
||||
}
|
||||
function optimizeTemplate(
|
||||
}
|
||||
function optimizeTemplate(
|
||||
children: (LayoutConfig & {
|
||||
moved?: boolean;
|
||||
standard?: unknown;
|
||||
label?: string;
|
||||
value?: string;
|
||||
})[]
|
||||
) {
|
||||
})[],
|
||||
) {
|
||||
for (const child of children || []) {
|
||||
delete child.moved;
|
||||
delete child.activedTabIndex;
|
||||
@ -266,9 +253,7 @@ function optimizeTemplate(
|
||||
if (!(child.metrics && child.metrics.length && child.metrics[0])) {
|
||||
delete child.metrics;
|
||||
}
|
||||
if (
|
||||
!(child.metricTypes && child.metricTypes.length && child.metricTypes[0])
|
||||
) {
|
||||
if (!(child.metricTypes && child.metricTypes.length && child.metricTypes[0])) {
|
||||
delete child.metricTypes;
|
||||
}
|
||||
if (child.metricConfig && child.metricConfig.length) {
|
||||
@ -295,32 +280,28 @@ function optimizeTemplate(
|
||||
optimizeTemplate(item.children);
|
||||
}
|
||||
}
|
||||
if (
|
||||
["Trace", "Topology", "Tab", "Profile", "Ebpf", "Log"].includes(
|
||||
child.type
|
||||
)
|
||||
) {
|
||||
if (["Trace", "Topology", "Tab", "Profile", "Ebpf", "Log"].includes(child.type)) {
|
||||
delete child.widget;
|
||||
}
|
||||
}
|
||||
}
|
||||
function handleEdit(row: DashboardItem) {
|
||||
}
|
||||
function handleEdit(row: DashboardItem) {
|
||||
dashboardStore.setMode(true);
|
||||
dashboardStore.setEntity(row.entity);
|
||||
dashboardStore.setLayer(row.layer);
|
||||
dashboardStore.setCurrentDashboard(row);
|
||||
router.push(`/dashboard/${row.layer}/${row.entity}/${row.name}`);
|
||||
}
|
||||
}
|
||||
|
||||
function handleView(row: DashboardItem) {
|
||||
function handleView(row: DashboardItem) {
|
||||
dashboardStore.setMode(false);
|
||||
dashboardStore.setEntity(row.entity);
|
||||
dashboardStore.setLayer(row.layer);
|
||||
dashboardStore.setCurrentDashboard(row);
|
||||
router.push(`/dashboard/${row.layer}/${row.entity}/${row.name}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function setRoot(row: DashboardItem) {
|
||||
async function setRoot(row: DashboardItem) {
|
||||
const items: DashboardItem[] = [];
|
||||
loading.value = true;
|
||||
for (const d of dashboardStore.dashboards) {
|
||||
@ -345,7 +326,7 @@ async function setRoot(row: DashboardItem) {
|
||||
JSON.stringify({
|
||||
id: d.id,
|
||||
configuration: c,
|
||||
})
|
||||
}),
|
||||
);
|
||||
}
|
||||
} else {
|
||||
@ -373,7 +354,7 @@ async function setRoot(row: DashboardItem) {
|
||||
JSON.stringify({
|
||||
id: d.id,
|
||||
configuration: c,
|
||||
})
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -383,8 +364,8 @@ async function setRoot(row: DashboardItem) {
|
||||
dashboardStore.resetDashboards(items);
|
||||
searchDashboards(1);
|
||||
loading.value = false;
|
||||
}
|
||||
function handleRename(row: DashboardItem) {
|
||||
}
|
||||
function handleRename(row: DashboardItem) {
|
||||
ElMessageBox.prompt("Please input dashboard name", "Edit", {
|
||||
confirmButtonText: "OK",
|
||||
cancelButtonText: "Cancel",
|
||||
@ -399,8 +380,8 @@ function handleRename(row: DashboardItem) {
|
||||
message: "Input canceled",
|
||||
});
|
||||
});
|
||||
}
|
||||
async function updateName(d: DashboardItem, value: string) {
|
||||
}
|
||||
async function updateName(d: DashboardItem, value: string) {
|
||||
if (new RegExp(/\s/).test(value)) {
|
||||
ElMessage.error("The name cannot contain spaces, carriage returns, etc");
|
||||
return;
|
||||
@ -447,11 +428,11 @@ async function updateName(d: DashboardItem, value: string) {
|
||||
JSON.stringify({
|
||||
id: d.id,
|
||||
configuration: c,
|
||||
})
|
||||
}),
|
||||
);
|
||||
searchText.value = "";
|
||||
}
|
||||
async function handleDelete(row: DashboardItem) {
|
||||
}
|
||||
async function handleDelete(row: DashboardItem) {
|
||||
dashboardStore.setCurrentDashboard(row);
|
||||
loading.value = true;
|
||||
await dashboardStore.deleteDashboard();
|
||||
@ -459,47 +440,45 @@ async function handleDelete(row: DashboardItem) {
|
||||
loading.value = false;
|
||||
sessionStorage.setItem("dashboards", JSON.stringify(dashboards.value));
|
||||
sessionStorage.removeItem(`${row.layer}_${row.entity}_${row.name}`);
|
||||
}
|
||||
function searchDashboards(pageIndex?: any) {
|
||||
}
|
||||
function searchDashboards(pageIndex?: any) {
|
||||
const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
|
||||
const arr = list.filter((d: { name: string }) =>
|
||||
d.name.includes(searchText.value)
|
||||
);
|
||||
const arr = list.filter((d: { name: string }) => d.name.includes(searchText.value));
|
||||
|
||||
total.value = arr.length;
|
||||
dashboards.value = arr.filter(
|
||||
(d: { name: string }, index: number) =>
|
||||
index < pageIndex * pageSize && index >= (pageIndex - 1) * pageSize
|
||||
index < pageIndex * pageSize && index >= (pageIndex - 1) * pageSize,
|
||||
);
|
||||
currentPage.value = pageIndex;
|
||||
}
|
||||
}
|
||||
|
||||
async function reloadTemplates() {
|
||||
async function reloadTemplates() {
|
||||
loading.value = true;
|
||||
await dashboardStore.resetTemplates();
|
||||
loading.value = false;
|
||||
}
|
||||
function changePage(pageIndex: number) {
|
||||
}
|
||||
function changePage(pageIndex: number) {
|
||||
currentPage.value = pageIndex;
|
||||
searchDashboards(pageIndex);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
.header {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-list {
|
||||
.dashboard-list {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.input-with-search {
|
||||
.input-with-search {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
.table {
|
||||
padding: 20px 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 1px 4px 0px #00000029;
|
||||
@ -507,43 +486,43 @@ function changePage(pageIndex: number) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-selection {
|
||||
.toggle-selection {
|
||||
margin-top: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.pagination {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
.btn {
|
||||
width: 220px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.import-template {
|
||||
.import-template {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.input-label {
|
||||
.input-label {
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
width: 220px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
.name {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.reload {
|
||||
.reload {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.reload-btn {
|
||||
.reload-btn {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,11 +17,7 @@ limitations under the License. -->
|
||||
<div class="title">{{ t("newDashboard") }}</div>
|
||||
<div class="item">
|
||||
<div class="label">{{ t("name") }}</div>
|
||||
<el-input
|
||||
size="default"
|
||||
v-model="states.name"
|
||||
placeholder="Please input name"
|
||||
/>
|
||||
<el-input size="default" v-model="states.name" placeholder="Please input name" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">{{ t("layer") }}</div>
|
||||
@ -51,35 +47,33 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import router from "@/router";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { EntityType } from "./data";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { reactive } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import router from "@/router";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { EntityType } from "./data";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const appStore = useAppStoreWithOut();
|
||||
const dashboardStore = useDashboardStore();
|
||||
appStore.setPageTitle("Dashboard New");
|
||||
const { t } = useI18n();
|
||||
const selectorStore = useSelectorStore();
|
||||
const states = reactive({
|
||||
const appStore = useAppStoreWithOut();
|
||||
const dashboardStore = useDashboardStore();
|
||||
appStore.setPageTitle("Dashboard New");
|
||||
const { t } = useI18n();
|
||||
const selectorStore = useSelectorStore();
|
||||
const states = reactive({
|
||||
name: "",
|
||||
selectedLayer: "",
|
||||
entity: EntityType[0].value,
|
||||
layers: [],
|
||||
});
|
||||
setLayers();
|
||||
dashboardStore.setDashboards();
|
||||
});
|
||||
setLayers();
|
||||
dashboardStore.setDashboards();
|
||||
|
||||
const onCreate = () => {
|
||||
const onCreate = () => {
|
||||
const index = dashboardStore.dashboards.findIndex(
|
||||
(d: { name: string; entity: string; layer: string }) =>
|
||||
d.name === states.name &&
|
||||
states.entity === d.entity &&
|
||||
states.selectedLayer === d.layer
|
||||
d.name === states.name && states.entity === d.entity && states.selectedLayer === d.layer,
|
||||
);
|
||||
if (!states.name) {
|
||||
ElMessage.error(t("nameEmptyError"));
|
||||
@ -97,8 +91,8 @@ const onCreate = () => {
|
||||
const name = states.name;
|
||||
const path = `/dashboard/${states.selectedLayer}/${states.entity}/${name}`;
|
||||
router.push(path);
|
||||
};
|
||||
async function setLayers() {
|
||||
};
|
||||
async function setLayers() {
|
||||
const resp = await selectorStore.fetchLayers();
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
@ -107,39 +101,39 @@ async function setLayers() {
|
||||
states.layers = resp.data.layers.map((d: string) => {
|
||||
return { label: d, value: d };
|
||||
});
|
||||
}
|
||||
function changeLayer(opt: { label: string; value: string }[] | any) {
|
||||
}
|
||||
function changeLayer(opt: { label: string; value: string }[] | any) {
|
||||
states.selectedLayer = opt[0].value;
|
||||
}
|
||||
function changeEntity(opt: { label: string; value: string }[] | any) {
|
||||
}
|
||||
function changeEntity(opt: { label: string; value: string }[] | any) {
|
||||
states.entity = opt[0].value;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.new-dashboard {
|
||||
.new-dashboard {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
.item {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.new-dashboard,
|
||||
.selectors {
|
||||
.new-dashboard,
|
||||
.selectors {
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.create {
|
||||
.create {
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
.btn {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -30,46 +30,46 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref } from "vue";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref } from "vue";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const originConfig = dashboardStore.selectedGrid;
|
||||
const eventAssociate = ref(dashboardStore.selectedGrid.eventAssociate || false);
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const originConfig = dashboardStore.selectedGrid;
|
||||
const eventAssociate = ref(dashboardStore.selectedGrid.eventAssociate || false);
|
||||
|
||||
function updateConfig() {
|
||||
function updateConfig() {
|
||||
dashboardStore.selectedGrid = {
|
||||
...dashboardStore.selectedGrid,
|
||||
eventAssociate,
|
||||
};
|
||||
dashboardStore.selectWidget(dashboardStore.selectedGrid);
|
||||
}
|
||||
}
|
||||
|
||||
function applyConfig() {
|
||||
function applyConfig() {
|
||||
dashboardStore.setConfigPanel(false);
|
||||
dashboardStore.setConfigs(dashboardStore.selectedGrid);
|
||||
}
|
||||
}
|
||||
|
||||
function cancelConfig() {
|
||||
function cancelConfig() {
|
||||
dashboardStore.selectWidget(originConfig);
|
||||
dashboardStore.setConfigPanel(false);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
.item {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
@ -78,5 +78,5 @@ function cancelConfig() {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,21 +13,11 @@ limitations under the License. -->
|
||||
<template>
|
||||
<div class="item">
|
||||
<span class="label">{{ t("textUrl") }}</span>
|
||||
<el-input
|
||||
class="input"
|
||||
v-model="url"
|
||||
size="small"
|
||||
@change="changeConfig({ url })"
|
||||
/>
|
||||
<el-input class="input" v-model="url" size="small" @change="changeConfig({ url })" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">{{ t("content") }}</span>
|
||||
<el-input
|
||||
class="input"
|
||||
v-model="content"
|
||||
size="small"
|
||||
@change="changeConfig({ content })"
|
||||
/>
|
||||
<el-input class="input" v-model="content" size="small" @change="changeConfig({ content })" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">{{ t("textAlign") }}</span>
|
||||
@ -85,20 +75,20 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref } from "vue";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const originConfig = dashboardStore.selectedGrid;
|
||||
const graph = originConfig.graph || {};
|
||||
const url = ref(graph.url || "");
|
||||
const backgroundColor = ref(graph.backgroundColor || "green");
|
||||
const fontColor = ref(graph.fontColor || "white");
|
||||
const content = ref<string>(graph.content || "");
|
||||
const fontSize = ref<number>(graph.fontSize || 12);
|
||||
const textAlign = ref(graph.textAlign || "left");
|
||||
const Colors = [
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref } from "vue";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const originConfig = dashboardStore.selectedGrid;
|
||||
const graph = originConfig.graph || {};
|
||||
const url = ref(graph.url || "");
|
||||
const backgroundColor = ref(graph.backgroundColor || "green");
|
||||
const fontColor = ref(graph.fontColor || "white");
|
||||
const content = ref<string>(graph.content || "");
|
||||
const fontSize = ref<number>(graph.fontSize || 12);
|
||||
const textAlign = ref(graph.textAlign || "left");
|
||||
const Colors = [
|
||||
{
|
||||
label: "Green",
|
||||
value: "green",
|
||||
@ -109,55 +99,55 @@ const Colors = [
|
||||
{ label: "White", value: "white" },
|
||||
{ label: "Black", value: "black" },
|
||||
{ label: "Orange", value: "orange" },
|
||||
];
|
||||
const AlignStyle = [
|
||||
];
|
||||
const AlignStyle = [
|
||||
{
|
||||
label: "Left",
|
||||
value: "left",
|
||||
},
|
||||
{ label: "Center", value: "center" },
|
||||
{ label: "Right", value: "right" },
|
||||
];
|
||||
function changeConfig(param: { [key: string]: unknown }) {
|
||||
];
|
||||
function changeConfig(param: { [key: string]: unknown }) {
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const graph = {
|
||||
...selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...selectedGrid, graph });
|
||||
}
|
||||
function applyConfig() {
|
||||
}
|
||||
function applyConfig() {
|
||||
dashboardStore.setConfigPanel(false);
|
||||
dashboardStore.setConfigs(dashboardStore.selectedGrid);
|
||||
}
|
||||
}
|
||||
|
||||
function cancelConfig() {
|
||||
function cancelConfig() {
|
||||
dashboardStore.selectWidget(originConfig);
|
||||
dashboardStore.setConfigPanel(false);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.slider {
|
||||
.slider {
|
||||
width: 500px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
.input {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
.item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
@ -166,5 +156,5 @@ function cancelConfig() {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,12 +13,7 @@ limitations under the License. -->
|
||||
<template>
|
||||
<div class="item">
|
||||
<span class="label">{{ t("text") }}</span>
|
||||
<el-input
|
||||
class="input"
|
||||
v-model="text"
|
||||
size="small"
|
||||
@change="changeConfig({ text })"
|
||||
/>
|
||||
<el-input class="input" v-model="text" size="small" @change="changeConfig({ text })" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">{{ t("textAlign") }}</span>
|
||||
@ -76,20 +71,20 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref } from "vue";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref } from "vue";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const originConfig = dashboardStore.selectedGrid;
|
||||
const graph = originConfig.graph || {};
|
||||
const backgroundColor = ref(graph.backgroundColor || "green");
|
||||
const fontColor = ref(graph.fontColor || "white");
|
||||
const fontSize = ref<number>(graph.fontSize || 12);
|
||||
const textAlign = ref(graph.textAlign || "left");
|
||||
const text = ref<string>(graph.text || "");
|
||||
const Colors = [
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const originConfig = dashboardStore.selectedGrid;
|
||||
const graph = originConfig.graph || {};
|
||||
const backgroundColor = ref(graph.backgroundColor || "green");
|
||||
const fontColor = ref(graph.fontColor || "white");
|
||||
const fontSize = ref<number>(graph.fontSize || 12);
|
||||
const textAlign = ref(graph.textAlign || "left");
|
||||
const text = ref<string>(graph.text || "");
|
||||
const Colors = [
|
||||
{
|
||||
label: "Green",
|
||||
value: "green",
|
||||
@ -100,55 +95,55 @@ const Colors = [
|
||||
{ label: "White", value: "white" },
|
||||
{ label: "Black", value: "black" },
|
||||
{ label: "Orange", value: "orange" },
|
||||
];
|
||||
const AlignStyle = [
|
||||
];
|
||||
const AlignStyle = [
|
||||
{
|
||||
label: "Left",
|
||||
value: "left",
|
||||
},
|
||||
{ label: "Center", value: "center" },
|
||||
{ label: "Right", value: "right" },
|
||||
];
|
||||
function changeConfig(param: { [key: string]: unknown }) {
|
||||
];
|
||||
function changeConfig(param: { [key: string]: unknown }) {
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const graph = {
|
||||
...selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...selectedGrid, graph });
|
||||
}
|
||||
function applyConfig() {
|
||||
}
|
||||
function applyConfig() {
|
||||
dashboardStore.setConfigPanel(false);
|
||||
dashboardStore.setConfigs(dashboardStore.selectedGrid);
|
||||
}
|
||||
}
|
||||
|
||||
function cancelConfig() {
|
||||
function cancelConfig() {
|
||||
dashboardStore.selectWidget(originConfig);
|
||||
dashboardStore.setConfigPanel(false);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.slider {
|
||||
.slider {
|
||||
width: 500px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
.input {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
.item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
@ -157,5 +152,5 @@ function cancelConfig() {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -40,37 +40,37 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { DepthList } from "../data";
|
||||
import { Option } from "@/types/app";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { DepthList } from "../data";
|
||||
import type { Option } from "@/types/app";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
const showDepth = ref<boolean>(graph.showDepth);
|
||||
const depth = ref<number>(graph.depth || 2);
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
const showDepth = ref<boolean>(graph.showDepth);
|
||||
const depth = ref<number>(graph.depth || 2);
|
||||
|
||||
function applyConfig() {
|
||||
function applyConfig() {
|
||||
dashboardStore.setConfigs(dashboardStore.selectedGrid);
|
||||
dashboardStore.setConfigPanel(false);
|
||||
}
|
||||
function changeConfig(param: { [key: string]: unknown }) {
|
||||
}
|
||||
function changeConfig(param: { [key: string]: unknown }) {
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const graph = {
|
||||
...selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...selectedGrid, graph });
|
||||
}
|
||||
function changeDepth(opt: Option[] | any) {
|
||||
}
|
||||
function changeDepth(opt: Option[] | any) {
|
||||
const val = opt[0].value;
|
||||
changeConfig({ depth: val });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.footer {
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
@ -79,16 +79,16 @@ function changeDepth(opt: Option[] | any) {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
.item {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -60,18 +60,10 @@ limitations under the License. -->
|
||||
<el-collapse-item :title="t('widgetOptions')" name="3">
|
||||
<WidgetOptions />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:title="t('associateOptions')"
|
||||
name="4"
|
||||
v-if="hasAssociate"
|
||||
>
|
||||
<el-collapse-item :title="t('associateOptions')" name="4" v-if="hasAssociate">
|
||||
<AssociateOptions />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:title="t('relatedTraceOptions')"
|
||||
name="5"
|
||||
v-if="hasAssociate"
|
||||
>
|
||||
<el-collapse-item :title="t('relatedTraceOptions')" name="5" v-if="hasAssociate">
|
||||
<RelatedTraceOptions />
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
@ -87,15 +79,15 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { reactive, defineComponent, ref, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { Option } from "@/types/app";
|
||||
import graphs from "../graphs";
|
||||
import CustomOptions from "./widget/index";
|
||||
import { reactive, defineComponent, ref, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import type { Option } from "@/types/app";
|
||||
import graphs from "../graphs";
|
||||
import CustomOptions from "./widget/index";
|
||||
|
||||
export default defineComponent({
|
||||
export default defineComponent({
|
||||
name: "WidgetEdit",
|
||||
components: {
|
||||
...graphs,
|
||||
@ -125,9 +117,8 @@ export default defineComponent({
|
||||
const tips = computed(() => encodeURIComponent(widget.value.tips || ""));
|
||||
const hasAssociate = computed(() =>
|
||||
["Bar", "Line", "Area", "TopList"].includes(
|
||||
dashboardStore.selectedGrid.graph &&
|
||||
dashboardStore.selectedGrid.graph.type
|
||||
)
|
||||
dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type,
|
||||
),
|
||||
);
|
||||
|
||||
function getSource(source: unknown) {
|
||||
@ -166,64 +157,64 @@ export default defineComponent({
|
||||
hasAssociate,
|
||||
};
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.widget-config {
|
||||
.widget-config {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.graph {
|
||||
.graph {
|
||||
position: relative;
|
||||
min-width: 1280px;
|
||||
border: 1px solid #eee;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
.header {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
background-color: aliceblue;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
.tips {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.render-chart {
|
||||
.render-chart {
|
||||
padding: 5px;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.selectors {
|
||||
.selectors {
|
||||
width: 500px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
.el-collapse-item__header {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.config {
|
||||
.config {
|
||||
min-width: 1280px;
|
||||
}
|
||||
}
|
||||
|
||||
.no-data {
|
||||
.no-data {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
@ -232,19 +223,19 @@ export default defineComponent({
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse {
|
||||
.collapse {
|
||||
margin-top: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.ds-name {
|
||||
.ds-name {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
.unit {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,32 +28,28 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import { Option } from "@/types/app";
|
||||
import { ref, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import type { Option } from "@/types/app";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const associate = dashboardStore.selectedGrid.associate || [];
|
||||
const widgetIds = ref<string[]>(
|
||||
associate.map((d: { widgetId: string }) => d.widgetId)
|
||||
);
|
||||
const widgets: any = computed(() => {
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const associate = dashboardStore.selectedGrid.associate || [];
|
||||
const widgetIds = ref<string[]>(associate.map((d: { widgetId: string }) => d.widgetId));
|
||||
const widgets: any = computed(() => {
|
||||
const widgetList = getDashboard(dashboardStore.currentDashboard).widgets;
|
||||
const items = [];
|
||||
for (const d of widgetList) {
|
||||
const isLinear = ["Bar", "Line", "Area"].includes(
|
||||
(d.graph && d.graph.type) || ""
|
||||
);
|
||||
const isLinear = ["Bar", "Line", "Area"].includes((d.graph && d.graph.type) || "");
|
||||
if (isLinear && d.id && dashboardStore.selectedGrid.id !== d.id) {
|
||||
items.push({ value: d.id, label: (d.widget && d.widget.name) || d.id });
|
||||
}
|
||||
}
|
||||
return items;
|
||||
});
|
||||
function updateWidgetConfig(options: Option[]) {
|
||||
});
|
||||
function updateWidgetConfig(options: Option[]) {
|
||||
const arr: any = getDashboard(dashboardStore.currentDashboard).widgets;
|
||||
const opt = options.map((d: Option) => {
|
||||
return { widgetId: d.value };
|
||||
@ -89,25 +85,25 @@ function updateWidgetConfig(options: Option[]) {
|
||||
dashboardStore.setWidget(config);
|
||||
}
|
||||
widgetIds.value = newVal;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
.input {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
.item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.selectors {
|
||||
.selectors {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -68,52 +68,52 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { RefIdTypes } from "../../data";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { RefIdTypes } from "../../data";
|
||||
|
||||
const QueryOrders = [
|
||||
const QueryOrders = [
|
||||
{ label: "None", value: "BY_START_TIME" },
|
||||
{ label: "Duration", value: "BY_DURATION" },
|
||||
];
|
||||
const Status = [
|
||||
];
|
||||
const Status = [
|
||||
{ label: "None", value: "ALL" },
|
||||
{ label: "Success", value: "SUCCESS" },
|
||||
{ label: "Error", value: "ERROR" },
|
||||
];
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const { graph, relatedTrace } = dashboardStore.selectedGrid;
|
||||
const traceOpt = relatedTrace || {};
|
||||
const status = ref<string>(traceOpt.status || Status[0].value);
|
||||
const queryOrder = ref<string>(traceOpt.queryOrder || QueryOrders[0].value);
|
||||
const latency = ref<boolean>(traceOpt.latency || false);
|
||||
const enableRelate = ref<boolean>(traceOpt.enableRelate || false);
|
||||
const type = ref<string>((graph && graph.type) || "");
|
||||
const refIdType = ref<string>(traceOpt.refIdType || "traceId");
|
||||
];
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const { graph, relatedTrace } = dashboardStore.selectedGrid;
|
||||
const traceOpt = relatedTrace || {};
|
||||
const status = ref<string>(traceOpt.status || Status[0].value);
|
||||
const queryOrder = ref<string>(traceOpt.queryOrder || QueryOrders[0].value);
|
||||
const latency = ref<boolean>(traceOpt.latency || false);
|
||||
const enableRelate = ref<boolean>(traceOpt.enableRelate || false);
|
||||
const type = ref<string>((graph && graph.type) || "");
|
||||
const refIdType = ref<string>(traceOpt.refIdType || "traceId");
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const relatedTrace = {
|
||||
...dashboardStore.selectedGrid.relatedTrace,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, relatedTrace });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
.item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.selector {
|
||||
.selector {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -45,21 +45,21 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import { LayoutConfig } from "@/types/dashboard";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import type { LayoutConfig } from "@/types/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const widget = dashboardStore.selectedGrid.widget || {};
|
||||
const title = ref<string>(widget.title || "");
|
||||
const tips = ref<string>(widget.tips || "");
|
||||
const name = ref<string>(widget.name || "");
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const widget = dashboardStore.selectedGrid.widget || {};
|
||||
const title = ref<string>(widget.title || "");
|
||||
const tips = ref<string>(widget.tips || "");
|
||||
const name = ref<string>(widget.name || "");
|
||||
|
||||
function updateWidgetConfig(param: { [key: string]: string }) {
|
||||
function updateWidgetConfig(param: { [key: string]: string }) {
|
||||
const key = Object.keys(param)[0];
|
||||
if (!key) {
|
||||
return;
|
||||
@ -70,8 +70,8 @@ function updateWidgetConfig(param: { [key: string]: string }) {
|
||||
[key]: decodeURIComponent(param[key]),
|
||||
};
|
||||
dashboardStore.selectWidget({ ...selectedGrid, widget });
|
||||
}
|
||||
function updateWidgetName(param: { [key: string]: string }) {
|
||||
}
|
||||
function updateWidgetName(param: { [key: string]: string }) {
|
||||
const key = Object.keys(param)[0];
|
||||
const n = decodeURIComponent(param[key]);
|
||||
const pattern = /^[A-Za-z0-9-_\u4e00-\u9fa5]{1,300}$/;
|
||||
@ -80,29 +80,27 @@ function updateWidgetName(param: { [key: string]: string }) {
|
||||
return;
|
||||
}
|
||||
const { widgets } = getDashboard(dashboardStore.currentDashboard);
|
||||
const item = widgets.find(
|
||||
(d: LayoutConfig) => d.widget && d.widget.name === n
|
||||
);
|
||||
const item = widgets.find((d: LayoutConfig) => d.widget && d.widget.name === n);
|
||||
if (item) {
|
||||
ElMessage.error(t("duplicateName"));
|
||||
return;
|
||||
}
|
||||
updateWidgetConfig(param);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
.input {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
.item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -29,35 +29,35 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import Legend from "./components/Legend.vue";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import Legend from "./components/Legend.vue";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
|
||||
const opacity = ref(graph.opacity);
|
||||
const opacity = ref(graph.opacity);
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bar-width {
|
||||
.bar-width {
|
||||
width: 500px;
|
||||
margin-top: -13px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -25,34 +25,34 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import Legend from "./components/Legend.vue";
|
||||
import { ref } from "vue";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import Legend from "./components/Legend.vue";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph;
|
||||
const showBackground = ref(graph.showBackground || false);
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph;
|
||||
const showBackground = ref(graph.showBackground || false);
|
||||
|
||||
function changeConfig(param: { [key: string]: unknown }) {
|
||||
function changeConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bar-width {
|
||||
.bar-width {
|
||||
width: 500px;
|
||||
margin-top: -13px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -37,34 +37,34 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
const fontSize = ref(graph.fontSize);
|
||||
const showUnit = ref<boolean>(graph.showUnit);
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
const fontSize = ref(graph.fontSize);
|
||||
const showUnit = ref<boolean>(graph.showUnit);
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.slider {
|
||||
.slider {
|
||||
width: 500px;
|
||||
margin-top: -13px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,34 +28,34 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph;
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph;
|
||||
const { t } = useI18n();
|
||||
|
||||
const fontSize = ref(graph.fontSize);
|
||||
const fontSize = ref(graph.fontSize);
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.slider {
|
||||
.slider {
|
||||
width: 500px;
|
||||
margin-top: -13px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,33 +28,33 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
const fontSize = ref(graph.fontSize);
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
const fontSize = ref(graph.fontSize);
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.slider {
|
||||
.slider {
|
||||
width: 500px;
|
||||
margin-top: -13px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,33 +28,33 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph;
|
||||
const fontSize = ref(graph.fontSize);
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph;
|
||||
const fontSize = ref(graph.fontSize);
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.slider {
|
||||
.slider {
|
||||
width: 500px;
|
||||
margin-top: -13px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -61,31 +61,31 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import Legend from "./components/Legend.vue";
|
||||
import { ref, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import Legend from "./components/Legend.vue";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
|
||||
const smooth = ref(graph.value.smooth);
|
||||
const showSymbol = ref(graph.value.showSymbol);
|
||||
const step = ref(graph.value.step);
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
|
||||
const smooth = ref(graph.value.smooth);
|
||||
const showSymbol = ref(graph.value.showSymbol);
|
||||
const step = ref(graph.value.step);
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -37,38 +37,38 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { ref, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
|
||||
const fontSize = ref(graph.value.fontSize);
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
|
||||
const fontSize = ref(graph.value.fontSize);
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const graph = {
|
||||
...selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...selectedGrid, graph });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.slider {
|
||||
.slider {
|
||||
width: 500px;
|
||||
margin-top: -13px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
.item {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -44,39 +44,39 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
const showTableValues = ref(graph.showTableValues);
|
||||
const tableHeaderCol1 = ref(graph.tableHeaderCol1);
|
||||
const tableHeaderCol2 = ref(graph.tableHeaderCol2);
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
const showTableValues = ref(graph.showTableValues);
|
||||
const tableHeaderCol1 = ref(graph.tableHeaderCol1);
|
||||
const tableHeaderCol2 = ref(graph.tableHeaderCol2);
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.slider {
|
||||
.slider {
|
||||
width: 500px;
|
||||
margin-top: -13px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -26,15 +26,15 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
const color = ref(graph.color || "purple");
|
||||
const Colors = [
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
const color = ref(graph.color || "purple");
|
||||
const Colors = [
|
||||
{ label: "Purple", value: "purple" },
|
||||
{
|
||||
label: "Green",
|
||||
@ -43,25 +43,25 @@ const Colors = [
|
||||
{ label: "Blue", value: "blue" },
|
||||
{ label: "Red", value: "red" },
|
||||
{ label: "Orange", value: "orange" },
|
||||
];
|
||||
];
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
.input {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -82,15 +82,15 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, reactive } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { LegendOptions } from "@/types/dashboard";
|
||||
import { computed, reactive } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import type { LegendOptions } from "@/types/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
|
||||
const legend = reactive<LegendOptions>({
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
|
||||
const legend = reactive<LegendOptions>({
|
||||
show: true,
|
||||
total: false,
|
||||
min: false,
|
||||
@ -100,9 +100,9 @@ const legend = reactive<LegendOptions>({
|
||||
toTheRight: false,
|
||||
width: 130,
|
||||
...graph.value.legend,
|
||||
});
|
||||
});
|
||||
|
||||
function updateLegendConfig(param: { [key: string]: unknown }) {
|
||||
function updateLegendConfig(param: { [key: string]: unknown }) {
|
||||
const g = {
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
legend: {
|
||||
@ -114,25 +114,25 @@ function updateLegendConfig(param: { [key: string]: unknown }) {
|
||||
...dashboardStore.selectedGrid,
|
||||
graph: g,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.label {
|
||||
.label {
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
.title {
|
||||
font-size: 12px;
|
||||
display: inline-flex;
|
||||
height: 32px;
|
||||
line-height: 34px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.inputs {
|
||||
.inputs {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -26,11 +26,7 @@ limitations under the License. -->
|
||||
/>
|
||||
</div>
|
||||
<div>{{ t("metrics") }}</div>
|
||||
<div
|
||||
v-for="(metric, index) in states.metrics"
|
||||
:key="index"
|
||||
class="metric-item"
|
||||
>
|
||||
<div v-for="(metric, index) in states.metrics" :key="index" class="metric-item">
|
||||
<Selector
|
||||
:value="metric"
|
||||
:options="states.metricList"
|
||||
@ -53,24 +49,12 @@ limitations under the License. -->
|
||||
<Icon class="cp mr-5" iconName="mode_edit" size="middle" />
|
||||
</span>
|
||||
</template>
|
||||
<Standard
|
||||
@update="queryMetrics"
|
||||
:currentMetricConfig="currentMetricConfig"
|
||||
:index="index"
|
||||
/>
|
||||
<Standard @update="queryMetrics" :currentMetricConfig="currentMetricConfig" :index="index" />
|
||||
</el-popover>
|
||||
<span
|
||||
v-show="
|
||||
states.isList ||
|
||||
states.metricTypes[0] === ProtocolTypes.ReadMetricsValues
|
||||
"
|
||||
>
|
||||
<span v-show="states.isList || states.metricTypes[0] === ProtocolTypes.ReadMetricsValues">
|
||||
<Icon
|
||||
class="cp mr-5"
|
||||
v-if="
|
||||
index === states.metrics.length - 1 &&
|
||||
states.metrics.length < defaultLen
|
||||
"
|
||||
v-if="index === states.metrics.length - 1 && states.metrics.length < defaultLen"
|
||||
iconName="add_circle_outlinecontrol_point"
|
||||
size="middle"
|
||||
@click="addMetric"
|
||||
@ -98,10 +82,10 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, computed } from "vue";
|
||||
import { Option } from "@/types/app";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import {
|
||||
import { reactive, ref, computed } from "vue";
|
||||
import type { Option } from "@/types/app";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import {
|
||||
MetricTypes,
|
||||
ListChartTypes,
|
||||
DefaultGraphConfig,
|
||||
@ -110,28 +94,26 @@ import {
|
||||
PodsChartTypes,
|
||||
MetricsType,
|
||||
ProtocolTypes,
|
||||
} from "../../../data";
|
||||
import { ElMessage } from "element-plus";
|
||||
import Icon from "@/components/Icon.vue";
|
||||
import {
|
||||
} from "../../../data";
|
||||
import { ElMessage } from "element-plus";
|
||||
import Icon from "@/components/Icon.vue";
|
||||
import {
|
||||
useQueryProcessor,
|
||||
useSourceProcessor,
|
||||
useGetMetricEntity,
|
||||
} from "@/hooks/useMetricsProcessor";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
|
||||
import Standard from "./Standard.vue";
|
||||
} from "@/hooks/useMetricsProcessor";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
|
||||
import Standard from "./Standard.vue";
|
||||
|
||||
/*global defineEmits */
|
||||
const { t } = useI18n();
|
||||
const emit = defineEmits(["update", "loading"]);
|
||||
const dashboardStore = useDashboardStore();
|
||||
const metrics = computed(() => dashboardStore.selectedGrid.metrics || []);
|
||||
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
|
||||
const metricTypes = computed(
|
||||
() => dashboardStore.selectedGrid.metricTypes || []
|
||||
);
|
||||
const states = reactive<{
|
||||
/*global defineEmits */
|
||||
const { t } = useI18n();
|
||||
const emit = defineEmits(["update", "loading"]);
|
||||
const dashboardStore = useDashboardStore();
|
||||
const metrics = computed(() => dashboardStore.selectedGrid.metrics || []);
|
||||
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
|
||||
const metricTypes = computed(() => dashboardStore.selectedGrid.metricTypes || []);
|
||||
const states = reactive<{
|
||||
metrics: string[];
|
||||
metricTypes: string[];
|
||||
metricTypeList: Option[][];
|
||||
@ -139,7 +121,7 @@ const states = reactive<{
|
||||
metricList: (Option & { type: string })[];
|
||||
dashboardName: string;
|
||||
dashboardList: ((DashboardItem & { label: string; value: string }) | any)[];
|
||||
}>({
|
||||
}>({
|
||||
metrics: metrics.value.length ? metrics.value : [""],
|
||||
metricTypes: metricTypes.value.length ? metricTypes.value : [""],
|
||||
metricTypeList: [],
|
||||
@ -147,41 +129,36 @@ const states = reactive<{
|
||||
metricList: [],
|
||||
dashboardName: graph.value.dashboardName,
|
||||
dashboardList: [{ label: "", value: "" }],
|
||||
});
|
||||
const currentMetricConfig = ref<MetricConfigOpt>({
|
||||
});
|
||||
const currentMetricConfig = ref<MetricConfigOpt>({
|
||||
unit: "",
|
||||
label: "",
|
||||
labelsIndex: "",
|
||||
calculation: "",
|
||||
sortOrder: "DES",
|
||||
});
|
||||
});
|
||||
|
||||
states.isList = ListChartTypes.includes(graph.value.type);
|
||||
const defaultLen = ref<number>(states.isList ? 5 : 20);
|
||||
setDashboards();
|
||||
setMetricType();
|
||||
states.isList = ListChartTypes.includes(graph.value.type);
|
||||
const defaultLen = ref<number>(states.isList ? 5 : 20);
|
||||
setDashboards();
|
||||
setMetricType();
|
||||
|
||||
const setVisTypes = computed(() => {
|
||||
const setVisTypes = computed(() => {
|
||||
let graphs = [];
|
||||
if (dashboardStore.entity === EntityType[0].value) {
|
||||
graphs = ChartTypes.filter(
|
||||
(d: Option) =>
|
||||
![ChartTypes[7].value, ChartTypes[8].value].includes(d.value)
|
||||
(d: Option) => ![ChartTypes[7].value, ChartTypes[8].value].includes(d.value),
|
||||
);
|
||||
} else if (dashboardStore.entity === EntityType[1].value) {
|
||||
graphs = ChartTypes.filter(
|
||||
(d: Option) => !PodsChartTypes.includes(d.value)
|
||||
);
|
||||
graphs = ChartTypes.filter((d: Option) => !PodsChartTypes.includes(d.value));
|
||||
} else {
|
||||
graphs = ChartTypes.filter(
|
||||
(d: Option) => !ListChartTypes.includes(d.value)
|
||||
);
|
||||
graphs = ChartTypes.filter((d: Option) => !ListChartTypes.includes(d.value));
|
||||
}
|
||||
|
||||
return graphs;
|
||||
});
|
||||
});
|
||||
|
||||
async function setMetricType(chart?: any) {
|
||||
async function setMetricType(chart?: any) {
|
||||
const g = chart || dashboardStore.selectedGrid.graph || {};
|
||||
let arr: any[] = states.metricList;
|
||||
if (!chart) {
|
||||
@ -192,29 +169,21 @@ async function setMetricType(chart?: any) {
|
||||
}
|
||||
arr = json.data.metrics;
|
||||
}
|
||||
states.metricList = (arr || []).filter(
|
||||
(d: { catalog: string; type: string }) => {
|
||||
states.metricList = (arr || []).filter((d: { catalog: string; type: string }) => {
|
||||
if (states.isList) {
|
||||
if (
|
||||
d.type === MetricsType.REGULAR_VALUE ||
|
||||
d.type === MetricsType.LABELED_VALUE
|
||||
) {
|
||||
if (d.type === MetricsType.REGULAR_VALUE || d.type === MetricsType.LABELED_VALUE) {
|
||||
return d;
|
||||
}
|
||||
} else if (g.type === "Table") {
|
||||
if (
|
||||
d.type === MetricsType.LABELED_VALUE ||
|
||||
d.type === MetricsType.REGULAR_VALUE
|
||||
) {
|
||||
if (d.type === MetricsType.LABELED_VALUE || d.type === MetricsType.REGULAR_VALUE) {
|
||||
return d;
|
||||
}
|
||||
} else {
|
||||
return d;
|
||||
}
|
||||
}
|
||||
);
|
||||
const metrics: any = states.metricList.filter(
|
||||
(d: { value: string; type: string }) => states.metrics.includes(d.value)
|
||||
});
|
||||
const metrics: any = states.metricList.filter((d: { value: string; type: string }) =>
|
||||
states.metrics.includes(d.value),
|
||||
);
|
||||
|
||||
if (metrics.length) {
|
||||
@ -243,19 +212,14 @@ async function setMetricType(chart?: any) {
|
||||
} else {
|
||||
emit("update", {});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setDashboards(type?: string) {
|
||||
function setDashboards(type?: string) {
|
||||
const chart =
|
||||
type ||
|
||||
(dashboardStore.selectedGrid.graph &&
|
||||
dashboardStore.selectedGrid.graph.type);
|
||||
type || (dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type);
|
||||
const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
|
||||
const arr = list.reduce(
|
||||
(
|
||||
prev: (DashboardItem & { label: string; value: string })[],
|
||||
d: DashboardItem
|
||||
) => {
|
||||
(prev: (DashboardItem & { label: string; value: string })[], d: DashboardItem) => {
|
||||
if (d.layer === dashboardStore.layerId) {
|
||||
if (
|
||||
(d.entity === EntityType[0].value && chart === "ServiceList") ||
|
||||
@ -271,13 +235,13 @@ function setDashboards(type?: string) {
|
||||
}
|
||||
return prev;
|
||||
},
|
||||
[]
|
||||
[],
|
||||
);
|
||||
|
||||
states.dashboardList = arr.length ? arr : [{ label: "", value: "" }];
|
||||
}
|
||||
}
|
||||
|
||||
function changeChartType(item: Option) {
|
||||
function changeChartType(item: Option) {
|
||||
const chart = DefaultGraphConfig[item.value] || {};
|
||||
states.isList = ListChartTypes.includes(chart.type);
|
||||
if (states.isList) {
|
||||
@ -294,12 +258,9 @@ function changeChartType(item: Option) {
|
||||
setDashboards(chart.type);
|
||||
states.dashboardName = "";
|
||||
defaultLen.value = 10;
|
||||
}
|
||||
}
|
||||
|
||||
function changeMetrics(
|
||||
index: number,
|
||||
arr: (Option & { type: string })[] | any
|
||||
) {
|
||||
function changeMetrics(index: number, arr: (Option & { type: string })[] | any) {
|
||||
if (!arr.length) {
|
||||
states.metricTypeList = [];
|
||||
states.metricTypes = [];
|
||||
@ -322,13 +283,11 @@ function changeMetrics(
|
||||
return;
|
||||
}
|
||||
queryMetrics();
|
||||
}
|
||||
}
|
||||
|
||||
function changeMetricType(index: number, opt: Option[] | any) {
|
||||
function changeMetricType(index: number, opt: Option[] | any) {
|
||||
const metric =
|
||||
states.metricList.filter(
|
||||
(d: Option) => states.metrics[index] === d.value
|
||||
)[0] || {};
|
||||
states.metricList.filter((d: Option) => states.metrics[index] === d.value)[0] || {};
|
||||
const l = setMetricTypeList(metric.type);
|
||||
if (states.isList) {
|
||||
states.metricTypes[index] = opt[0].value;
|
||||
@ -352,8 +311,8 @@ function changeMetricType(index: number, opt: Option[] | any) {
|
||||
return;
|
||||
}
|
||||
queryMetrics();
|
||||
}
|
||||
async function queryMetrics() {
|
||||
}
|
||||
async function queryMetrics() {
|
||||
if (states.isList) {
|
||||
return;
|
||||
}
|
||||
@ -377,9 +336,9 @@ async function queryMetrics() {
|
||||
}
|
||||
const source = useSourceProcessor(json, { ...states, metricConfig });
|
||||
emit("update", source);
|
||||
}
|
||||
}
|
||||
|
||||
function changeDashboard(opt: any) {
|
||||
function changeDashboard(opt: any) {
|
||||
if (!opt[0]) {
|
||||
states.dashboardName = "";
|
||||
} else {
|
||||
@ -393,8 +352,8 @@ function changeDashboard(opt: any) {
|
||||
...dashboardStore.selectedGrid,
|
||||
graph,
|
||||
});
|
||||
}
|
||||
function addMetric() {
|
||||
}
|
||||
function addMetric() {
|
||||
states.metrics.push("");
|
||||
if (!states.isList) {
|
||||
states.metricTypes.push(states.metricTypes[0]);
|
||||
@ -402,8 +361,8 @@ function addMetric() {
|
||||
return;
|
||||
}
|
||||
states.metricTypes.push("");
|
||||
}
|
||||
function deleteMetric(index: number) {
|
||||
}
|
||||
function deleteMetric(index: number) {
|
||||
if (states.metrics.length === 1) {
|
||||
states.metrics = [""];
|
||||
states.metricTypes = [""];
|
||||
@ -423,8 +382,8 @@ function deleteMetric(index: number) {
|
||||
...{ metricTypes: states.metricTypes, metrics: states.metrics },
|
||||
metricConfig,
|
||||
});
|
||||
}
|
||||
function setMetricTypeList(type: string) {
|
||||
}
|
||||
function setMetricTypeList(type: string) {
|
||||
if (type !== MetricsType.REGULAR_VALUE) {
|
||||
return MetricTypes[type];
|
||||
}
|
||||
@ -432,8 +391,8 @@ function setMetricTypeList(type: string) {
|
||||
return [MetricTypes.REGULAR_VALUE[0], MetricTypes.REGULAR_VALUE[1]];
|
||||
}
|
||||
return MetricTypes[type];
|
||||
}
|
||||
function setMetricConfig(index: number) {
|
||||
}
|
||||
function setMetricConfig(index: number) {
|
||||
const n = {
|
||||
unit: "",
|
||||
label: "",
|
||||
@ -452,23 +411,23 @@ function setMetricConfig(index: number) {
|
||||
...n,
|
||||
...dashboardStore.selectedGrid.metricConfig[index],
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ds-name {
|
||||
.ds-name {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.selectors {
|
||||
.selectors {
|
||||
width: 500px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
.metric-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-types {
|
||||
.chart-types {
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
@ -481,10 +440,10 @@ function setMetricConfig(index: number) {
|
||||
span:nth-last-child(1) {
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.active {
|
||||
span.active {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -91,61 +91,55 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, computed } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { SortOrder, CalculationOpts } from "../../../data";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { MetricConfigOpt } from "@/types/dashboard";
|
||||
import { ListChartTypes, ProtocolTypes } from "../../../data";
|
||||
import { ref, watch, computed } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { SortOrder, CalculationOpts } from "../../../data";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import type { MetricConfigOpt } from "@/types/dashboard";
|
||||
import { ListChartTypes, ProtocolTypes } from "../../../data";
|
||||
|
||||
/*global defineEmits, defineProps */
|
||||
const props = defineProps({
|
||||
/*global defineEmits, defineProps */
|
||||
const props = defineProps({
|
||||
currentMetricConfig: {
|
||||
type: Object as PropType<MetricConfigOpt>,
|
||||
default: () => ({ unit: "" }),
|
||||
},
|
||||
index: { type: Number, default: 0 },
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const emit = defineEmits(["update"]);
|
||||
const dashboardStore = useDashboardStore();
|
||||
const currentMetric = ref<MetricConfigOpt>({
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const emit = defineEmits(["update"]);
|
||||
const dashboardStore = useDashboardStore();
|
||||
const currentMetric = ref<MetricConfigOpt>({
|
||||
...props.currentMetricConfig,
|
||||
topN: props.currentMetricConfig.topN || 10,
|
||||
});
|
||||
const metricTypes = dashboardStore.selectedGrid.metricTypes || [];
|
||||
const metricType = computed(
|
||||
() => (dashboardStore.selectedGrid.metricTypes || [])[props.index]
|
||||
);
|
||||
const hasLabel = computed(() => {
|
||||
});
|
||||
const metricTypes = dashboardStore.selectedGrid.metricTypes || [];
|
||||
const metricType = computed(() => (dashboardStore.selectedGrid.metricTypes || [])[props.index]);
|
||||
const hasLabel = computed(() => {
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
return (
|
||||
ListChartTypes.includes(graph.type) ||
|
||||
[
|
||||
ProtocolTypes.ReadLabeledMetricsValues,
|
||||
ProtocolTypes.ReadMetricsValues,
|
||||
].includes(metricType.value)
|
||||
[ProtocolTypes.ReadLabeledMetricsValues, ProtocolTypes.ReadMetricsValues].includes(
|
||||
metricType.value,
|
||||
)
|
||||
);
|
||||
});
|
||||
const isTopn = computed(() =>
|
||||
});
|
||||
const isTopn = computed(() =>
|
||||
[
|
||||
ProtocolTypes.SortMetrics,
|
||||
ProtocolTypes.ReadSampledRecords,
|
||||
ProtocolTypes.ReadRecords,
|
||||
].includes(metricTypes[props.index])
|
||||
);
|
||||
function updateConfig(index: number, param: { [key: string]: string }) {
|
||||
].includes(metricTypes[props.index]),
|
||||
);
|
||||
function updateConfig(index: number, param: { [key: string]: string }) {
|
||||
const key = Object.keys(param)[0];
|
||||
if (!key) {
|
||||
return;
|
||||
}
|
||||
changeConfigs(index, { [key]: decodeURIComponent(param[key]) });
|
||||
}
|
||||
function changeConfigs(
|
||||
index: number,
|
||||
param: { [key: string]: string | number }
|
||||
) {
|
||||
}
|
||||
function changeConfigs(index: number, param: { [key: string]: string | number }) {
|
||||
const metricConfig = dashboardStore.selectedGrid.metricConfig || [];
|
||||
|
||||
metricConfig[index] = { ...metricConfig[index], ...param };
|
||||
@ -154,36 +148,36 @@ function changeConfigs(
|
||||
metricConfig,
|
||||
});
|
||||
emit("update");
|
||||
}
|
||||
watch(
|
||||
}
|
||||
watch(
|
||||
() => props.currentMetricConfig,
|
||||
() => {
|
||||
currentMetric.value = {
|
||||
...props.currentMetricConfig,
|
||||
topN: props.currentMetricConfig.topN || 10,
|
||||
};
|
||||
}
|
||||
);
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.config-panel {
|
||||
.config-panel {
|
||||
padding: 10px 5px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label {
|
||||
width: 150px;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
.close {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.selectors {
|
||||
.selectors {
|
||||
width: 365px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user