diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 3690b0cd..f26b83f4 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -14,7 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -/* eslint-env node */ + require("@rushstack/eslint-patch/modern-module-resolution"); module.exports = { @@ -34,6 +34,10 @@ module.exports = { parserOptions: { ecmaVersion: "latest", }, + env: { + browser: true, + node: true, + }, rules: { "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/explicit-module-boundary-types": "off", diff --git a/commitlint.config.js b/commitlint.config.js index 4b0618c6..d5861f6b 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -14,7 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -/* global module */ + module.exports = { ignores: [(commit) => commit.includes("init")], extends: ["@commitlint/config-conventional"], diff --git a/postcss.config.js b/postcss.config.js index 2c8e7a3c..755d8dca 100755 --- a/postcss.config.js +++ b/postcss.config.js @@ -14,7 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -/* global module */ + module.exports = { autoprefixer: {}, }; diff --git a/prettier.config.js b/prettier.config.js index 96506c10..e51f52a9 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -14,7 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -/* global module */ + module.exports = { printWidth: 120, semi: true, diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue index fc6425c8..c9fb6e02 100755 --- a/src/components/DateCalendar.vue +++ b/src/components/DateCalendar.vue @@ -21,19 +21,12 @@ limitations under the License. --> - + {{ ys + "-" + ye }} - + @@ -88,13 +74,8 @@ limitations under the License. -->
{{ i }} @@ -102,10 +83,7 @@ limitations under the License. -->
{{ i }} @@ -142,17 +110,7 @@ limitations under the License. --> {{ i }} @@ -164,17 +122,7 @@ limitations under the License. --> {{ i }} @@ -185,18 +133,14 @@ limitations under the License. -->
{{ dd(state.hour) }} : {{ dd(state.minute) }} @@ -204,10 +148,7 @@ limitations under the License. --> : {{ dd(state.second) }} @@ -416,10 +357,7 @@ limitations under the License. --> s: seconds, S: milliseconds, }; - return (format || props.format).replace( - /Y+|M+|D+|H+|h+|m+|s+|S+/g, - (str: string) => map[str], - ); + return (format || props.format).replace(/Y+|M+|D+|H+|h+|m+|s+|S+/g, (str: string) => map[str]); }; const classObj: any = {}; let flag = false; @@ -431,10 +369,8 @@ limitations under the License. --> flag = tf(props.value, format) === tf(time, format); } classObj[`${state.pre}-date`] = true; - classObj[`${state.pre}-date-disabled`] = - (props.right && t < start.value) || props.disabledDate(time, format); - classObj[`${state.pre}-date-on`] = - (props.left && t > start.value) || (props.right && t < end.value); + classObj[`${state.pre}-date-disabled`] = (props.right && t < start.value) || props.disabledDate(time, format); + classObj[`${state.pre}-date-on`] = (props.left && t > start.value) || (props.right && t < end.value); classObj[`${state.pre}-date-selected`] = flag; return classObj; }; diff --git a/src/components/Graph.vue b/src/components/Graph.vue index bb348167..24fb20e2 100644 --- a/src/components/Graph.vue +++ b/src/components/Graph.vue @@ -78,9 +78,7 @@ limitations under the License. --> }); const available = computed( () => - (Array.isArray(props.option.series) && - props.option.series[0] && - props.option.series[0].data) || + (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 () => { diff --git a/src/components/Selector.vue b/src/components/Selector.vue index e325f8c2..d1141165 100644 --- a/src/components/Selector.vue +++ b/src/components/Selector.vue @@ -27,12 +27,7 @@ limitations under the License. --> :remote-method="remoteMethod" :filterable="filterable" > - + diff --git a/src/components/__tests__/HelloWorld.spec.ts b/src/components/__tests__/HelloWorld.spec.ts index f67ca96d..5c41d5dd 100644 --- a/src/components/__tests__/HelloWorld.spec.ts +++ b/src/components/__tests__/HelloWorld.spec.ts @@ -1,4 +1,4 @@ -import { describe, it, expect } from "vitest"; +import { describe, it } from "vitest"; // import { mount } from '@vue/test-utils' // import HelloWorld from '../HelloWorld.vue' diff --git a/src/graphql/fragments/alarm.ts b/src/graphql/fragments/alarm.ts index 49d1bbb5..85580955 100644 --- a/src/graphql/fragments/alarm.ts +++ b/src/graphql/fragments/alarm.ts @@ -16,8 +16,7 @@ */ export const Alarm = { - variable: - "$keyword: String, $scope: Scope, $duration:Duration!, $tags:[AlarmTag], $paging: Pagination!", + variable: "$keyword: String, $scope: Scope, $duration:Duration!, $tags:[AlarmTag], $paging: Pagination!", query: ` getAlarm(keyword: $keyword, scope: $scope, duration: $duration, paging: $paging, tags: $tags) { items: msgs { diff --git a/src/graphql/query/topology.ts b/src/graphql/query/topology.ts index bb5333b2..fc627c8c 100644 --- a/src/graphql/query/topology.ts +++ b/src/graphql/query/topology.ts @@ -14,12 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { - InstanceTopology, - EndpointTopology, - ServicesTopology, - ProcessTopology, -} from "../fragments/topology"; +import { InstanceTopology, EndpointTopology, ServicesTopology, ProcessTopology } from "../fragments/topology"; export const getInstanceTopology = `query queryData(${InstanceTopology.variable}) {${InstanceTopology.query}}`; export const getEndpointTopology = `query queryData(${EndpointTopology.variable}) {${EndpointTopology.query}}`; diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts index bb3ba82a..a9772e55 100644 --- a/src/hooks/useEcharts.ts +++ b/src/hooks/useEcharts.ts @@ -14,12 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import type { - BarSeriesOption, - LineSeriesOption, - HeatmapSeriesOption, - SankeySeriesOption, -} from "echarts/charts"; +import type { BarSeriesOption, LineSeriesOption, HeatmapSeriesOption, SankeySeriesOption } from "echarts/charts"; import type { TitleComponentOption, TooltipComponentOption, @@ -48,10 +43,7 @@ export type ECOption = echarts.ComposeOption< | SankeySeriesOption >; -export function useECharts( - elRef: Ref, - theme: "light" | "dark" | "default" = "default", -): any { +export function useECharts(elRef: Ref, theme: "light" | "dark" | "default" = "default"): any { const getDarkMode = computed(() => { return theme === "default" ? "light" : theme; }); diff --git a/src/hooks/useLegendProcessor.ts b/src/hooks/useLegendProcessor.ts index 01528142..58ab6172 100644 --- a/src/hooks/useLegendProcessor.ts +++ b/src/hooks/useLegendProcessor.ts @@ -39,9 +39,7 @@ export default function useLegendProcess(legend?: LegendOptions) { } 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, - ); + const keys = Object.keys(data || {}).filter((i: any) => Array.isArray(data[i]) && data[i].length); const headers = []; for (const [key, value] of keys.entries()) { @@ -55,10 +53,7 @@ export default function useLegendProcess(legend?: LegendOptions) { value: d, }; }) - .sort( - (a: { key: string; value: number }, b: { key: string; value: number }) => - b.value - a.value, - ) + .sort((a: { key: string; value: number }, b: { key: string; value: number }) => b.value - a.value) .filter((_: unknown, index: number) => index < 10), }; if (legend) { diff --git a/src/hooks/useListConfig.ts b/src/hooks/useListConfig.ts index f88a2f2f..61b09248 100644 --- a/src/hooks/useListConfig.ts +++ b/src/hooks/useListConfig.ts @@ -18,16 +18,13 @@ 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 calculation = - config.metricConfig && config.metricConfig[i] && config.metricConfig[i].calculation; + const 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, diff --git a/src/hooks/useMetricsProcessor.ts b/src/hooks/useMetricsProcessor.ts index 6d38ba81..4c08a575 100644 --- a/src/hooks/useMetricsProcessor.ts +++ b/src/hooks/useMetricsProcessor.ts @@ -42,12 +42,9 @@ export function useQueryProcessor(config: any) { duration: appStore.durationTime, }; const variables: string[] = [`$duration: Duration!`]; - const isRelation = [ - "ServiceRelation", - "ServiceInstanceRelation", - "EndpointRelation", - "ProcessRelation", - ].includes(dashboardStore.entity); + const isRelation = ["ServiceRelation", "ServiceInstanceRelation", "EndpointRelation", "ProcessRelation"].includes( + dashboardStore.entity, + ); if (isRelation && !selectorStore.currentDestService) { return; } @@ -58,9 +55,7 @@ export function useQueryProcessor(config: any) { variables.push(`$condition${index}: TopNCondition!`); conditions[`condition${index}`] = { name, - parentService: ["All"].includes(dashboardStore.entity) - ? null - : selectorStore.currentService.value, + parentService: ["All"].includes(dashboardStore.entity) ? null : selectorStore.currentService.value, normal: selectorStore.currentService ? selectorStore.currentService.normal : true, scope: config.catalog, topN: c.topN || 10, @@ -69,14 +64,11 @@ export function useQueryProcessor(config: any) { } else { const entity = { scope: config.catalog, - serviceName: - dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value, + serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value, normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal, - serviceInstanceName: [ - "ServiceInstance", - "ServiceInstanceRelation", - "ProcessRelation", - ].includes(dashboardStore.entity) + serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation"].includes( + dashboardStore.entity, + ) ? selectorStore.currentPod && selectorStore.currentPod.value : undefined, endpointName: dashboardStore.entity.includes("Endpoint") @@ -87,9 +79,7 @@ export function useQueryProcessor(config: any) { : undefined, destNormal: isRelation ? selectorStore.currentDestService.normal : undefined, destServiceName: isRelation ? selectorStore.currentDestService.value : undefined, - destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes( - dashboardStore.entity, - ) + destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(dashboardStore.entity) ? selectorStore.currentDestPod && selectorStore.currentDestPod.value : undefined, destEndpointName: @@ -111,9 +101,7 @@ export function useQueryProcessor(config: any) { } else { entity.scope = dashboardStore.entity; if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) { - const labels = (c.labelsIndex || "") - .split(",") - .map((item: string) => item.replace(/^\s*|\s*$/g, "")); + const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, "")); variables.push(`$labels${index}: [String!]!`); conditions[`labels${index}`] = labels; } @@ -161,21 +149,14 @@ export function useSourceProcessor( const c = (config.metricConfig && config.metricConfig[index]) || {}; if (type === MetricQueryTypes.ReadMetricsValues) { - source[c.label || m] = - (resp.data[keys[index]] && calculateExp(resp.data[keys[index]].values.values, c)) || []; + source[c.label || m] = (resp.data[keys[index]] && calculateExp(resp.data[keys[index]].values.values, c)) || []; } if (type === MetricQueryTypes.ReadLabeledMetricsValues) { const resVal = Object.values(resp.data)[0] || []; - const labels = (c.label || "") - .split(",") - .map((item: string) => item.replace(/^\s*|\s*$/g, "")); - const labelsIdx = (c.labelsIndex || "") - .split(",") - .map((item: string) => item.replace(/^\s*|\s*$/g, "")); + const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, "")); + const labelsIdx = (c.labelsIndex || "").split(",").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), - ); + const values = item.values.values.map((d: { value: number }) => aggregation(Number(d.value), c)); const indexNum = labelsIdx.findIndex((d: string) => d === item.label); if (labels[indexNum] && indexNum > -1) { source[labels[indexNum]] = values; @@ -189,11 +170,7 @@ export function useSourceProcessor( } if ( ( - [ - MetricQueryTypes.ReadRecords, - MetricQueryTypes.ReadSampledRecords, - MetricQueryTypes.SortMetrics, - ] as string[] + [MetricQueryTypes.ReadRecords, MetricQueryTypes.ReadSampledRecords, MetricQueryTypes.SortMetrics] as string[] ).includes(type) ) { source[m] = (Object.values(resp.data)[0] || []).map((d: { value: unknown; name: string }) => { @@ -216,10 +193,7 @@ export function useSourceProcessor( }); let buckets = [] as any; if (resVal.buckets.length) { - buckets = [ - resVal.buckets[0].min, - ...resVal.buckets.map((item: { min: string; max: string }) => item.max), - ]; + buckets = [resVal.buckets[0].min, ...resVal.buckets.map((item: { min: string; max: string }) => item.max)]; } source[m] = { nodes, buckets }; // nodes: number[][] @@ -253,37 +227,33 @@ export function useQueryPodsMetrics( }; const variables: string[] = [`$duration: Duration!`]; const currentService = selectorStore.currentService || {}; - const fragmentList = pods.map( - (d: (Instance | Endpoint | Service) & { normal: boolean }, index: number) => { - const param = { - scope, - serviceName: scope === "Service" ? d.label : currentService.label, - serviceInstanceName: scope === "ServiceInstance" ? d.label : undefined, - endpointName: scope === "Endpoint" ? d.label : undefined, - normal: scope === "Service" ? d.normal : currentService.normal, + const fragmentList = pods.map((d: (Instance | Endpoint | Service) & { normal: boolean }, index: number) => { + const param = { + scope, + serviceName: scope === "Service" ? d.label : currentService.label, + serviceInstanceName: scope === "ServiceInstance" ? d.label : undefined, + endpointName: scope === "Endpoint" ? d.label : undefined, + normal: scope === "Service" ? d.normal : currentService.normal, + }; + const f = metrics.map((name: string, idx: number) => { + const metricType = metricTypes[idx] || ""; + variables.push(`$condition${index}${idx}: MetricsCondition!`); + conditions[`condition${index}${idx}`] = { + name, + entity: param, }; - const f = metrics.map((name: string, idx: number) => { - const metricType = metricTypes[idx] || ""; - variables.push(`$condition${index}${idx}: MetricsCondition!`); - conditions[`condition${index}${idx}`] = { - name, - entity: param, - }; - let labelStr = ""; - if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) { - const c = config.metricConfig[idx] || {}; - variables.push(`$labels${index}${idx}: [String!]!`); - labelStr = `labels: $labels${index}${idx}, `; - const labels = (c.labelsIndex || "") - .split(",") - .map((item: string) => item.replace(/^\s*|\s*$/g, "")); - conditions[`labels${index}${idx}`] = labels; - } - return `${name}${index}${idx}: ${metricType}(condition: $condition${index}${idx}, ${labelStr}duration: $duration)${RespFields[metricType]}`; - }); - return f; - }, - ); + let labelStr = ""; + if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) { + const c = config.metricConfig[idx] || {}; + variables.push(`$labels${index}${idx}: [String!]!`); + labelStr = `labels: $labels${index}${idx}, `; + const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, "")); + conditions[`labels${index}${idx}`] = labels; + } + 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}}`; @@ -320,16 +290,10 @@ export function usePodsSource( } if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues) { d[name] = {}; - if ( - [Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes( - c.calculation, - ) - ) { + if ([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); metricConfigArr.push(c); @@ -338,17 +302,11 @@ export function usePodsSource( } if (config.metricTypes[index] === MetricQueryTypes.ReadLabeledMetricsValues) { const resVal = resp.data[key] || []; - const labels = (c.label || "") - .split(",") - .map((item: string) => item.replace(/^\s*|\s*$/g, "")); - const labelsIdx = (c.labelsIndex || "") - .split(",") - .map((item: string) => item.replace(/^\s*|\s*$/g, "")); + const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, "")); + const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, "")); 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), - ); + const values = item.values.values.map((d: { value: number }) => aggregation(Number(d.value), c)); const indexNum = labelsIdx.findIndex((d: string) => d === item.label); let key = item.label; if (labels[indexNum] && indexNum > -1) { @@ -357,11 +315,7 @@ export function usePodsSource( if (!d[key]) { d[key] = {}; } - if ( - [Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes( - c.calculation, - ) - ) { + if ([Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(c.calculation)) { d[key]["avg"] = calculateExp(item.values.values, c); } d[key]["values"] = values; @@ -402,10 +356,7 @@ export function useQueryTopologyMetrics(metrics: string[], ids: string[]) { return { queryStr, conditions }; } -function calculateExp( - arr: { value: number }[], - config: { calculation?: string }, -): (number | string)[] { +function calculateExp(arr: { value: number }[], config: { calculation?: string }): (number | string)[] { const sum = arr.map((d: { value: number }) => d.value).reduce((a, b) => a + b); let data: (number | string)[] = []; switch (config.calculation) { @@ -480,11 +431,9 @@ export async function useGetMetricEntity(metric: string, metricType: any) { let catalog = ""; const dashboardStore = useDashboardStore(); if ( - [ - MetricQueryTypes.ReadSampledRecords, - MetricQueryTypes.SortMetrics, - MetricQueryTypes.ReadRecords, - ].includes(metricType) + [MetricQueryTypes.ReadSampledRecords, MetricQueryTypes.SortMetrics, MetricQueryTypes.ReadRecords].includes( + metricType, + ) ) { const res = await dashboardStore.fetchMetricList(metric); if (res.errors) { diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue index 1bf5ad6e..fc9c0526 100644 --- a/src/layout/components/NavBar.vue +++ b/src/layout/components/NavBar.vue @@ -23,20 +23,12 @@ limitations under the License. --> format="YYYY-MM-DD HH:mm" @input="changeTimeRange" /> - - UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} - + UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} - +