v5.5.0

netdata · Dec 5, 2024 · 1097ead · 1097ead
1 parent 0e73ab7
commit 1097ead
Show file tree

Hide file tree

Showing 27 changed files with 215 additions and 96 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/charts",
-  "version": "5.4.3",
+  "version": "5.5.0",
   "description": "Netdata frontend SDK and chart utilities",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

diff --git a/src/chartLibraries/bars/index.js b/src/chartLibraries/bars/index.js
@@ -48,7 +48,7 @@ export default (sdk, chart) => {
     const [min, max] = getMinMax()
 
     if (min !== prevMin || max !== prevMax) {
-      chartUI.sdk.trigger("yAxisChange", chart, min, max)
+      chart.trigger("yAxisChange", min, max)
     }
 
     prevMin = min

diff --git a/src/chartLibraries/d3pie/index.js b/src/chartLibraries/d3pie/index.js
@@ -89,7 +89,7 @@ export default (sdk, chart) => {
     let [min, max] = getMinMax()
 
     if (min !== prevMin || max !== prevMax) {
-      chartUI.sdk.trigger("yAxisChange", chart, min, max)
+      chart.trigger("yAxisChange", min, max)
     }
 
     prevMin = min

diff --git a/src/chartLibraries/dygraph/index.js b/src/chartLibraries/dygraph/index.js
@@ -228,7 +228,7 @@ export default (sdk, chart) => {
       if (min !== prevMin || max !== prevMax) {
         prevMin = min
         prevMax = max
-        chartUI.sdk.trigger("yAxisChange", chart, min, max)
+        chart.trigger("yAxisChange", min, max)
       }
       return chart.getConvertedValue(y) // TODO Pass { dimensionId: context.id } when multiple contexts with different units
     },
@@ -269,7 +269,7 @@ export default (sdk, chart) => {
         if (min !== prevMin || max !== prevMax) {
           prevMin = min
           prevMax = max
-          chartUI.sdk.trigger("yAxisChange", chart, min, max)
+          chart.trigger("yAxisChange", min, max)
         }
         const value = parseFloat(parseFloat(y).toFixed(5))
         return isNaN(value) ? y : value

diff --git a/src/chartLibraries/dygraph/tickers/numeric.js b/src/chartLibraries/dygraph/tickers/numeric.js
@@ -1,3 +1,7 @@
+const anomalySVG = `<div title="Anomaly detection percent (%)"><svg width="15" height="16" view-box="0 0 15 16" xmlns="http://www.w3.org/2000/svg" fill="#B596F8" fill-opacity="0.4" transform="translate(18, -1) scale(0.6)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.228 3.29597L8.522 0.578973C8.167 0.373973 7.771 0.271973 7.375 0.271973C6.979 0.271973 6.583 0.373973 6.228 0.578973L1.522 3.29597C0.812 3.70597 0.375 4.46297 0.375 5.28297V10.718C0.375 11.537 0.812 12.295 1.522 12.704L6.228 15.421C6.583 15.626 6.979 15.728 7.375 15.728C7.771 15.728 8.167 15.626 8.522 15.421L13.228 12.704C13.938 12.294 14.375 11.537 14.375 10.718V5.28297C14.375 4.46297 13.938 3.70597 13.228 3.29597ZM7.97949 4.76094L7.37505 3.23265L6.7706 4.76094L4.93313 9.40688H4.37505H1.37505V10.7069H4.37505H5.37505H5.81696L5.97949 10.2959L7.37505 6.76735L8.7706 10.2959L9.26618 11.549L9.93839 10.3811L10.375 9.62253L10.8117 10.3811L10.9992 10.7069H11.375H13.375V9.40688H11.7509L10.9384 7.99531L10.375 7.01662L9.8117 7.99531L9.48391 8.56479L7.97949 4.76094Z" />
+</svg></div>`
+
 export default (a, b, pixels, opts, dygraph, vals) => {
   const pixelsPerTick = opts("pixelsPerLabel")
   let ticks = []
@@ -62,10 +66,10 @@ export default (a, b, pixels, opts, dygraph, vals) => {
   const pointHeight = (max - min) / 15 / dygraph.getArea().h
 
   return [
-    { label_v: max - pointHeight, label: "anomaly%" },
+    { label_v: max - pointHeight, label: anomalySVG },
     ...ticks.filter(
       tick => dygraph.toPercentYCoord(tick.v, 0) < 0.92 && dygraph.toPercentYCoord(tick.v, 0) > 0.08
     ),
-    { label_v: min + pointHeight, label: "i" },
+    { label_v: min + pointHeight, label: "" },
   ]
 }
diff --git a/src/chartLibraries/easyPie/index.js b/src/chartLibraries/easyPie/index.js
@@ -111,7 +111,7 @@ export default (sdk, chart) => {
     easyPie.update(percentage)
 
     if (min !== prevMin || max !== prevMax) {
-      chartUI.sdk.trigger("yAxisChange", chart, min, max)
+      chart.trigger("yAxisChange", min, max)
     }
 
     prevMin = min

diff --git a/src/chartLibraries/gauge/index.js b/src/chartLibraries/gauge/index.js
@@ -115,7 +115,7 @@ export default (sdk, chart) => {
     let [min, max] = getMinMax()
 
     if (min !== prevMin || max !== prevMax) {
-      chartUI.sdk.trigger("yAxisChange", chart, min, max)
+      chart.trigger("yAxisChange", min, max)
     }
 
     prevMin = min

diff --git a/src/chartLibraries/number/index.js b/src/chartLibraries/number/index.js
@@ -48,7 +48,7 @@ export default (sdk, chart) => {
     const [min, max] = getMinMax()
 
     if (min !== prevMin || max !== prevMax) {
-      chartUI.sdk.trigger("yAxisChange", chart, min, max)
+      chart.trigger("yAxisChange", min, max)
     }
 
     prevMin = min

diff --git a/src/chartLibraries/table/index.js b/src/chartLibraries/table/index.js
@@ -48,7 +48,7 @@ export default (sdk, chart) => {
 
     if (min !== prevMin || max !== prevMax) {
       // Do not pass min max in order for multi context min-max to take place
-      chartUI.sdk.trigger("yAxisChange", chart)
+      chart.trigger("yAxisChange")
     }
 
     prevMin = min

diff --git a/src/components/filterToolbox/aggregate.js b/src/components/filterToolbox/aggregate.js
@@ -1,7 +1,12 @@
 import React, { memo, useMemo } from "react"
 import { TextMicro } from "@netdata/netdata-ui"
-import { useAttributeValue, useChart } from "@/components/provider"
+import { useAttributeValue, useChart, useIsMinimal } from "@/components/provider"
+import AggrAvg from "@netdata/netdata-ui/dist/components/icon/assets/aggregation_avg.svg"
+import AggrSum from "@netdata/netdata-ui/dist/components/icon/assets/aggregation_sum.svg"
+import AggrMin from "@netdata/netdata-ui/dist/components/icon/assets/aggregation_min.svg"
+import AggrMax from "@netdata/netdata-ui/dist/components/icon/assets/aggregation_max.svg"
 import Dropdown from "./dropdownSingleSelect"
+import Icon from "@/components/icon"
 
 const useItems = chart =>
   useMemo(
@@ -12,6 +17,7 @@ const useItems = chart =>
         description:
           "For each point presented, calculate the average of the metrics contributing to it.",
         short: "AVG()",
+        icon: <Icon svg={AggrAvg} color="textLite" size="10px" />,
         "data-track": chart.track("avg"),
       },
       {
@@ -20,6 +26,7 @@ const useItems = chart =>
         description:
           "For each point presented, calculate the sum of the metrics contributing to it.",
         short: "SUM()",
+        icon: <Icon svg={AggrSum} color="textLite" size="10px" />,
         "data-track": chart.track("sum"),
       },
       {
@@ -28,6 +35,7 @@ const useItems = chart =>
         description:
           "For each point presented, present the minimum of the metrics contributing to it.",
         short: "MIN()",
+        icon: <Icon svg={AggrMin} color="textLite" size="10px" />,
         "data-track": chart.track("min"),
       },
       {
@@ -36,6 +44,7 @@ const useItems = chart =>
         description:
           "For each point presented, present the maximum of the metrics contributing to it.",
         short: "MAX()",
+        icon: <Icon svg={AggrMax} color="textLite" size="10px" />,
         "data-track": chart.track("max"),
       },
     ],
@@ -44,8 +53,8 @@ const useItems = chart =>
 
 const dropTitle = (
   <TextMicro padding={[0, 0, 2]} color="textLite">
-    When aggregating multiple source time-series metrics to one visible dimension on the
-    chart, use the following aggregation function
+    When aggregating multiple source time-series metrics to one visible dimension on the chart, use
+    the following aggregation function
   </TextMicro>
 )
 
@@ -54,13 +63,14 @@ const tooltipProps = {
   body: "View or select the aggregation function applied when multiple source time-series metrics need to be grouped together to be presented as dimensions on this chart.",
 }
 
-const Aggregate = ({ labelProps, ...rest }) => {
+const Aggregate = ({ labelProps, defaultMinimal, ...rest }) => {
   const chart = useChart()
   const value = useAttributeValue("aggregationMethod")
 
   const items = useItems(chart)
+  const isMinimal = useIsMinimal()
 
-  const { short } = items.find(item => item.value === value) || items[0]
+  const { short, icon } = items.find(item => item.value === value) || items[0]
 
   return (
     <Dropdown
@@ -71,8 +81,8 @@ const Aggregate = ({ labelProps, ...rest }) => {
       dropTitle={dropTitle}
       {...rest}
       labelProps={{
-        secondaryLabel: "the",
-        label: short,
+        secondaryLabel: isMinimal || defaultMinimal ? "" : "the",
+        label: isMinimal || defaultMinimal ? icon : short,
         title: tooltipProps.heading,
         tooltipProps,
         ...labelProps,

diff --git a/src/components/filterToolbox/filters.js b/src/components/filterToolbox/filters.js
@@ -1,7 +1,7 @@
 import React from "react"
 import { Flex, TextSmall } from "@netdata/netdata-ui"
 import { useIsHeatmap } from "@/helpers/heatmap"
-import { useAttributeValue } from "@/components/provider"
+import { useAttributeValue, useIsMinimal } from "@/components/provider"
 import Aggregate from "./aggregate"
 import PostAggregate from "./postAggregate"
 import Dimensions from "./dimensions"
@@ -19,6 +19,7 @@ import N from "@netdata/netdata-ui/dist/components/icon/assets/N.svg"
 import I from "@netdata/netdata-ui/dist/components/icon/assets/I.svg"
 import D from "@netdata/netdata-ui/dist/components/icon/assets/D.svg"
 import L from "@netdata/netdata-ui/dist/components/icon/assets/L.svg"
+import GroupBySVG from "@netdata/netdata-ui/dist/components/icon/assets/group_by.svg"
 import gear from "@netdata/netdata-ui/dist/components/icon/assets/gear.svg"
 import chevronRightEnd from "@netdata/netdata-ui/dist/components/icon/assets/chevron_right_end.svg"
 import Icon from "@/components/icon"
@@ -27,6 +28,7 @@ const uppercasedAggrLabel = { secondaryLabel: "The" }
 const emptyObject = {}
 
 const plainLabelProps = {
+  groupBy: { icon: <Icon svg={GroupBySVG} color="textLite" size="12px" />, padding: [0] },
   nodes: { icon: <Icon svg={N} color="textLite" size="16px" />, padding: [0] },
   instances: { icon: <Icon svg={I} color="textLite" size="16px" />, padding: [0] },
   dimensions: { icon: <Icon svg={D} color="textLite" size="16px" />, padding: [0] },
@@ -43,6 +45,7 @@ const FilterToolbox = ({ plain }) => {
 
   const filterElements = useAttributeValue("filterElements")
   const showPostAggregations = useAttributeValue("showPostAggregations")
+  const isMinimal = useIsMinimal()
 
   if (filterElements)
     return filterElements.map((Element, index) => (
@@ -52,7 +55,8 @@ const FilterToolbox = ({ plain }) => {
   if (plain)
     return (
       <>
-        {/*<Config labelProps={plainLabelProps.config} />*/}
+        <GroupBy labelProps={plainLabelProps.groupBy} />
+        <Aggregate labelProps={isHeatmap ? emptyObject : emptyObject} defaultMinimal />
         <Nodes labelProps={plainLabelProps.nodes} />
         <Instances labelProps={plainLabelProps.instances} />
         <Dimensions labelProps={plainLabelProps.dimensions} />
@@ -63,33 +67,47 @@ const FilterToolbox = ({ plain }) => {
   if (showPostAggregations) {
     return (
       <>
-        <Flex padding={[0.5]} flexWrap gap={2}>
+        <Flex padding={isMinimal ? [2, 0.5] : [0.5]} flexWrap gap={2}>
           <Flex alignItems="center">
             <ShowPostAggregations labelProps={plainLabelProps.showPostAggregations} />
             {!isHeatmap && <ContextScope />}
-            {!isHeatmap && <PostGroupBy labelProps={{ secondaryLabel: "Group by" }} />}
+            {!isHeatmap && (
+              <PostGroupBy
+                labelProps={isMinimal ? plainLabelProps.groupBy : { secondaryLabel: "Group by" }}
+              />
+            )}
             <PostAggregate
               labelProps={{
-                ...(isHeatmap ? uppercasedAggrLabel : emptyObject),
+                ...(isHeatmap ? (isMinimal ? emptyObject : uppercasedAggrLabel) : emptyObject),
               }}
             />
-            <TextSmall color="textLite" whiteSpace="nowrap">
-              of the:{" "}
-            </TextSmall>
+            {!isMinimal ? (
+              <TextSmall color="textLite" whiteSpace="nowrap">
+                of the:{" "}
+              </TextSmall>
+            ) : (
+              <TextSmall color="textNoFocus">&lt;</TextSmall>
+            )}
           </Flex>
           <Flex
             round
             border={{ side: "all", size: "2px", type: "dashed", color: "border" }}
             alignItems="center"
           >
-            {!isHeatmap && <GroupBy labelProps={{ secondaryLabel: "Group by" }} />}
-            <Aggregate labelProps={isHeatmap ? uppercasedAggrLabel : emptyObject} />
-            <Nodes />
-            <Instances />
-            <Dimensions />
-            <Labels />
+            {!isHeatmap && (
+              <GroupBy
+                labelProps={isMinimal ? plainLabelProps.groupBy : { secondaryLabel: "Group by" }}
+              />
+            )}
+            <Aggregate
+              labelProps={isHeatmap ? (isMinimal ? emptyObject : uppercasedAggrLabel) : emptyObject}
+            />
+            <Nodes labelProps={isMinimal ? plainLabelProps.nodes : emptyObject} />
+            <Instances labelProps={isMinimal ? plainLabelProps.instances : emptyObject} />
+            <Dimensions labelProps={isMinimal ? plainLabelProps.dimensions : emptyObject} />
+            <Labels labelProps={isMinimal ? plainLabelProps.labels : emptyObject} />
           </Flex>
-          <TimeAggregation />
+          {!isMinimal && <TimeAggregation />}
         </Flex>
         <Reset />
       </>
@@ -98,16 +116,22 @@ const FilterToolbox = ({ plain }) => {
 
   return (
     <>
-      <Flex flexWrap>
+      <Flex flexWrap padding={isMinimal ? [2, 0.5] : [0.5]}>
         <ShowPostAggregations labelProps={plainLabelProps.showPostAggregations} />
         {!isHeatmap && <ContextScope />}
-        {!isHeatmap && <GroupBy labelProps={{ secondaryLabel: "Group by" }} />}
-        <Aggregate labelProps={isHeatmap ? uppercasedAggrLabel : emptyObject} />
-        <Nodes />
-        <Instances />
-        <Dimensions />
-        <Labels />
-        <TimeAggregation />
+        {!isHeatmap && (
+          <GroupBy
+            labelProps={isMinimal ? plainLabelProps.groupBy : { secondaryLabel: "Group by" }}
+          />
+        )}
+        <Aggregate
+          labelProps={isHeatmap ? (isMinimal ? emptyObject : uppercasedAggrLabel) : emptyObject}
+        />
+        <Nodes labelProps={isMinimal ? plainLabelProps.nodes : emptyObject} />
+        <Instances labelProps={isMinimal ? plainLabelProps.instances : emptyObject} />
+        <Dimensions labelProps={isMinimal ? plainLabelProps.dimensions : emptyObject} />
+        <Labels labelProps={isMinimal ? plainLabelProps.labels : emptyObject} />
+        {!isMinimal && <TimeAggregation />}
       </Flex>
       <Reset />
     </>

diff --git a/src/components/filterToolbox/postAggregate.js b/src/components/filterToolbox/postAggregate.js
@@ -1,5 +1,10 @@
 import React, { memo, useMemo } from "react"
-import { useAttributeValue, useChart } from "@/components/provider"
+import { useAttributeValue, useChart, useIsMinimal } from "@/components/provider"
+import AggrAvg from "@netdata/netdata-ui/dist/components/icon/assets/aggregation_avg.svg"
+import AggrSum from "@netdata/netdata-ui/dist/components/icon/assets/aggregation_sum.svg"
+import AggrMin from "@netdata/netdata-ui/dist/components/icon/assets/aggregation_min.svg"
+import AggrMax from "@netdata/netdata-ui/dist/components/icon/assets/aggregation_max.svg"
+import Icon from "@/components/icon"
 import Dropdown from "./dropdownSingleSelect"
 
 const useItems = chart =>
@@ -10,27 +15,31 @@ const useItems = chart =>
         label: "Average",
         description: "For each aggregated point, calculate the average of the metrics.",
         short: "AVG()",
+        icon: <Icon svg={AggrAvg} color="textLite" size="10px" />,
         "data-track": chart.track("avg"),
       },
       {
         value: "sum",
         label: "Sum",
         description: "For each aggregated point, calculate the sum of the metrics.",
         short: "SUM()",
+        icon: <Icon svg={AggrSum} color="textLite" size="10px" />,
         "data-track": chart.track("sum"),
       },
       {
         value: "min",
         label: "Minimum",
         description: "For each aggregated point, present the minimum of the metrics.",
         short: "MIN()",
+        icon: <Icon svg={AggrMin} color="textLite" size="10px" />,
         "data-track": chart.track("min"),
       },
       {
         value: "max",
         label: "Maximum",
         description: "For each aggregated point, present the maximum of the metrics.",
         short: "MAX()",
+        icon: <Icon svg={AggrMax} color="textLite" size="10px" />,
         "data-track": chart.track("max"),
       },
     ],
@@ -46,8 +55,9 @@ const PostAggregate = ({ labelProps, ...rest }) => {
   const value = useAttributeValue("postAggregationMethod")
 
   const items = useItems(chart)
+  const isMinimal = useIsMinimal()
 
-  const { short } = items.find(item => item.value === value) || items[0]
+  const { short, icon } = items.find(item => item.value === value) || items[0]
 
   return (
     <Dropdown
@@ -57,8 +67,8 @@ const PostAggregate = ({ labelProps, ...rest }) => {
       data-track={chart.track("post-aggregate")}
       {...rest}
       labelProps={{
-        secondaryLabel: "the",
-        label: short,
+        secondaryLabel: isMinimal ? "" : "the",
+        label: isMinimal ? icon : short,
         title: tooltipProps.heading,
         tooltipProps,
         ...labelProps,