You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2022/04/14 10:15:32 UTC
[skywalking-booster-ui] branch main updated: feat: add Avg calculations (#66)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 26db1ec feat: add Avg calculations (#66)
26db1ec is described below
commit 26db1ec23ed06c662b4da6da022e678937b01b45
Author: Fine0830 <fi...@outlook.com>
AuthorDate: Thu Apr 14 18:15:28 2022 +0800
feat: add Avg calculations (#66)
---
src/hooks/data.ts | 2 ++
src/hooks/useListConfig.ts | 9 +++++++--
src/hooks/useProcessor.ts | 36 ++++++++++++++++++++++++++----------
src/views/dashboard/data.ts | 4 +++-
src/views/dashboard/graphs/Card.vue | 6 ++++--
5 files changed, 42 insertions(+), 15 deletions(-)
diff --git a/src/hooks/data.ts b/src/hooks/data.ts
index 1909362..edafd05 100644
--- a/src/hooks/data.ts
+++ b/src/hooks/data.ts
@@ -34,6 +34,8 @@ export enum Calculations {
ConvertMilliseconds = "convertMilliseconds",
MsTos = "msTos",
Average = "average",
+ PercentageAvg = "percentageAvg",
+ ApdexAvg = "apdexAvg",
}
export enum sizeEnum {
XS = "XS",
diff --git a/src/hooks/useListConfig.ts b/src/hooks/useListConfig.ts
index 47e7269..a7f7ad5 100644
--- a/src/hooks/useListConfig.ts
+++ b/src/hooks/useListConfig.ts
@@ -17,16 +17,21 @@
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 line =
config.metricTypes[i] === MetricQueryTypes.ReadMetricsValues &&
- calculation !== Calculations.Average;
+ !types.includes(calculation);
const isAvg =
config.metricTypes[i] === MetricQueryTypes.ReadMetricsValues &&
- calculation === Calculations.Average;
+ types.includes(calculation);
return {
isLinear: line,
isAvg,
diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts
index 84ab074..e8d25f4 100644
--- a/src/hooks/useProcessor.ts
+++ b/src/hooks/useProcessor.ts
@@ -278,14 +278,20 @@ export function usePodsSource(
}
const data = pods.map((d: Instance | any, idx: number) => {
config.metrics.map((name: string, index: number) => {
- const c = (config.metricConfig && config.metricConfig[index]) || {};
+ const c: any = (config.metricConfig && config.metricConfig[index]) || {};
const key = name + idx + index;
if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValue) {
d[name] = aggregation(resp.data[key], c);
}
if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues) {
d[name] = {};
- if (c.calculation === Calculations.Average) {
+ 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(
@@ -324,18 +330,22 @@ export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
return { queryStr, conditions };
}
function calculateExp(
- arr: any[],
+ 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) {
case Calculations.Average:
- data = [
- (
- arr.map((d: { value: number }) => d.value).reduce((a, b) => a + b) /
- arr.length
- ).toFixed(2),
- ];
+ data = [(sum / arr.length).toFixed(2)];
+ break;
+ case Calculations.PercentageAvg:
+ data = [(sum / arr.length / 100).toFixed(2)];
+ break;
+ case Calculations.ApdexAvg:
+ data = [(sum / arr.length / 10000).toFixed(2)];
break;
default:
data = arr.map((d) => aggregation(d.value, config));
@@ -354,6 +364,9 @@ export function aggregation(
case Calculations.Percentage:
data = (val / 100).toFixed(2);
break;
+ case Calculations.PercentageAvg:
+ data = (val / 100).toFixed(2);
+ break;
case Calculations.ByteToKB:
data = (val / 1024).toFixed(2);
break;
@@ -364,7 +377,10 @@ export function aggregation(
data = (val / 1024 / 1024 / 1024).toFixed(2);
break;
case Calculations.Apdex:
- data = (val / 10000).toFixed(2);
+ data = val / 10000;
+ break;
+ case Calculations.ApdexAvg:
+ data = val / 10000;
break;
case Calculations.ConvertSeconds:
data = dayjs(val).format("YYYY-MM-DD HH:mm:ss");
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 5b80ca3..bed9001 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -263,10 +263,12 @@ export const TextColors: { [key: string]: string } = {
export const CalculationOpts = [
{ label: "Percentage", value: "percentage" },
{ label: "Apdex", value: "apdex" },
+ { label: "Avg-preview", value: "average" },
+ { label: "Percentage + Avg-preview", value: "percentageAvg" },
+ { label: "Apdex + Avg-preview", value: "apdexAvg" },
{ label: "Byte to KB", value: "byteToKB" },
{ label: "Byte to MB", value: "byteToMB" },
{ label: "Byte to GB", value: "byteToGB" },
- { label: "Average", value: "average" },
{
label: "Milliseconds to YYYY-MM-DD HH:mm:ss",
value: "convertMilliseconds",
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index 234f8b9..cfe37f6 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -23,7 +23,7 @@ limitations under the License. -->
}"
>
{{ singleVal.toFixed(2) }}
- <span class="unit" v-show="config.showUnit">
+ <span class="unit" v-show="config.showUnit && unit">
{{ decodeURIComponent(unit) }}
</span>
</div>
@@ -55,7 +55,9 @@ const metricConfig = computed(() => props.config.metricConfig || []);
const key = computed(() => Object.keys(props.data)[0]);
const singleVal = computed(() => Number(props.data[key.value]));
const unit = computed(
- () => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit)
+ () =>
+ metricConfig.value[0] &&
+ encodeURIComponent(metricConfig.value[0].unit || "")
);
</script>
<style lang="scss" scoped>