@netdata/charts/dist/es6/components/filterToolbox/columns.js

Netdata frontend SDK and chart utilities

import React, { useMemo } from "react";
import { Flex, ProgressBar, TextSmall, TextMicro, MasterCard } from "@netdata/netdata-ui";
import Color from "../line/dimensions/color";
import Units from "../line/dimensions/units";
import { useChart, useConverted } from "../provider";
import Label from "./label";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var useMetricsByValue = function useMetricsByValue(chart) {
  return useMemo(function () {
    return {
      dimension: "dimensions",
      node: "nodes",
      instance: chart.intl("instance", {
        count: 2
      }),
      label: "labels",
      value: "values",
      "default": "values"
    };
  }, []);
};
export var labelColumn = function labelColumn(fallbackExpandKey) {
  return {
    id: "label",
    header: function header() {
      return /*#__PURE__*/_jsx(TextSmall, {
        strong: true,
        children: "Name"
      });
    },
    size: 200,
    minSize: 60,
    maxSize: 800,
    cell: function cell(_ref) {
      var getValue = _ref.getValue,
        row = _ref.row;
      var chart = useChart();
      var metricsByValue = useMetricsByValue(chart);
      return /*#__PURE__*/_jsxs(Flex, {
        justifyContent: "between",
        alignItems: "center",
        padding: [0, 0, 0, row.depth * 3],
        width: "100%",
        children: [/*#__PURE__*/_jsxs(Flex, {
          gap: 1,
          children: [/*#__PURE__*/_jsx(Color, {
            id: getValue()
          }), /*#__PURE__*/_jsx(TextSmall, {
            strong: true,
            onClick: !row.original.disabled ? function (e) {
              e.preventDefault();
              e.stopPropagation();
              row.getToggleSelectedHandler()(e);
            } : undefined,
            cursor: row.original.disabled ? "default" : "pointer",
            whiteSpace: "normal",
            wordBreak: "break-word",
            children: getValue()
          })]
        }), row.getCanExpand() && /*#__PURE__*/_jsx(Label, {
          label: metricsByValue[getValue()] || metricsByValue[fallbackExpandKey] || metricsByValue["default"],
          onClick: function onClick(e) {
            e.preventDefault();
            e.stopPropagation();
            row.getToggleExpandedHandler()(e);
            setTimeout(function () {
              return e.target.scrollIntoView({
                behavior: "smooth",
                block: "nearest"
              });
            });
          },
          iconRotate: row.getIsExpanded() ? 2 : null,
          textProps: {
            fontSize: "10px",
            color: "textLite"
          },
          alignItems: "center"
        })]
      });
    }
  };
};
export var uniqueColumn = function uniqueColumn() {
  return {
    id: "unique",
    header: /*#__PURE__*/_jsx(TextMicro, {
      strong: true,
      children: "Unique"
    }),
    size: 45,
    minSize: 30,
    maxSize: 90,
    cell: function cell(_ref2) {
      var getValue = _ref2.getValue;
      return /*#__PURE__*/_jsx(TextSmall, {
        color: "textLite",
        children: getValue()
      });
    },
    sortingFn: "basic"
  };
};
export var minColumn = function minColumn() {
  return {
    id: "min",
    header: /*#__PURE__*/_jsxs(TextMicro, {
      strong: true,
      children: ["Min ", /*#__PURE__*/_jsx(Units, {
        visible: true
      })]
    }),
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref3) {
      var getValue = _ref3.getValue;
      var value = useConverted(getValue());
      return /*#__PURE__*/_jsx(TextSmall, {
        color: "textLite",
        children: value
      });
    },
    sortingFn: "basic"
  };
};
export var avgColumn = function avgColumn() {
  return {
    id: "avg",
    header: /*#__PURE__*/_jsxs(TextMicro, {
      strong: true,
      children: ["Avg ", /*#__PURE__*/_jsx(Units, {
        visible: true
      })]
    }),
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref4) {
      var getValue = _ref4.getValue;
      var value = useConverted(getValue());
      return /*#__PURE__*/_jsx(TextSmall, {
        color: "textLite",
        children: value
      });
    },
    sortingFn: "basic"
  };
};
export var maxColumn = function maxColumn() {
  return {
    id: "max",
    header: /*#__PURE__*/_jsxs(TextMicro, {
      strong: true,
      children: ["Max ", /*#__PURE__*/_jsx(Units, {
        visible: true
      })]
    }),
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref5) {
      var getValue = _ref5.getValue;
      var value = useConverted(getValue());
      return /*#__PURE__*/_jsx(TextSmall, {
        color: "textLite",
        children: value
      });
    },
    sortingFn: "basic"
  };
};
export var instancesColumn = function instancesColumn() {
  return {
    id: "instances",
    header: /*#__PURE__*/_jsx(TextMicro, {
      strong: true,
      children: "Instances"
    }),
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref6) {
      var _row$original$info;
      var getValue = _ref6.getValue,
        row = _ref6.row;
      if (!((_row$original$info = row.original.info) !== null && _row$original$info !== void 0 && _row$original$info.is)) return /*#__PURE__*/_jsx(TextSmall, {
        color: "textLite",
        children: getValue()
      });
      var _row$original$info$is = row.original.info.is,
        _row$original$info$is2 = _row$original$info$is.qr,
        qr = _row$original$info$is2 === void 0 ? 0 : _row$original$info$is2,
        _row$original$info$is3 = _row$original$info$is.sl,
        sl = _row$original$info$is3 === void 0 ? 0 : _row$original$info$is3,
        _row$original$info$is4 = _row$original$info$is.ex,
        ex = _row$original$info$is4 === void 0 ? 0 : _row$original$info$is4;
      return /*#__PURE__*/_jsxs(Flex, {
        flex: true,
        column: true,
        gap: 0.5,
        children: [/*#__PURE__*/_jsxs(TextSmall, {
          color: "textLite",
          children: [/*#__PURE__*/_jsx(TextSmall, {
            color: "primary",
            children: qr
          }), " of ", sl + ex]
        }), /*#__PURE__*/_jsx(ProgressBar, {
          background: "progressBg",
          color: ["green", "deyork"],
          height: 2,
          width: "".concat(qr / (sl + ex) * 100, "%"),
          containerWidth: "100%",
          border: "none"
        })]
      });
    },
    sortingFn: "basic"
  };
};
export var metricsColumn = function metricsColumn() {
  return {
    id: "metrics",
    header: /*#__PURE__*/_jsx(TextMicro, {
      strong: true,
      children: "Metrics"
    }),
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref7) {
      var _row$original$info2;
      var row = _ref7.row,
        getValue = _ref7.getValue;
      if (!((_row$original$info2 = row.original.info) !== null && _row$original$info2 !== void 0 && _row$original$info2.ds)) return /*#__PURE__*/_jsx(TextSmall, {
        color: "textLite",
        children: getValue()
      });
      var _row$original$info$ds = row.original.info.ds,
        _row$original$info$ds2 = _row$original$info$ds.qr,
        qr = _row$original$info$ds2 === void 0 ? 0 : _row$original$info$ds2,
        _row$original$info$ds3 = _row$original$info$ds.sl,
        sl = _row$original$info$ds3 === void 0 ? 0 : _row$original$info$ds3,
        _row$original$info$ds4 = _row$original$info$ds.ex,
        ex = _row$original$info$ds4 === void 0 ? 0 : _row$original$info$ds4;
      return /*#__PURE__*/_jsxs(Flex, {
        flex: true,
        column: true,
        gap: 0.5,
        children: [/*#__PURE__*/_jsxs(TextSmall, {
          color: "textLite",
          children: [/*#__PURE__*/_jsx(TextSmall, {
            color: "primary",
            children: qr
          }), " of ", sl + ex]
        }), /*#__PURE__*/_jsx(ProgressBar, {
          background: "progressBg",
          color: ["green", "deyork"],
          height: 2,
          width: "".concat(qr / (sl + ex) * 100, "%"),
          containerWidth: "100%",
          border: "none"
        })]
      });
    },
    sortingFn: "basic"
  };
};
export var contributionColumn = function contributionColumn() {
  return {
    id: "contribution",
    header: /*#__PURE__*/_jsx(TextMicro, {
      strong: true,
      children: "Vol %"
    }),
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref8) {
      var _row$original$info3;
      var row = _ref8.row,
        getValue = _ref8.getValue;
      if (!((_row$original$info3 = row.original.info) !== null && _row$original$info3 !== void 0 && _row$original$info3.sts)) return /*#__PURE__*/_jsx(TextSmall, {
        color: "textLite",
        children: getValue()
      });
      return /*#__PURE__*/_jsxs(Flex, {
        flex: true,
        column: true,
        gap: 0.5,
        children: [/*#__PURE__*/_jsxs(TextSmall, {
          color: "primary",
          children: [Math.round((getValue() + Number.EPSILON) * 100) / 100, "%"]
        }), /*#__PURE__*/_jsx(ProgressBar, {
          background: "progressBg",
          color: ["green", "deyork"],
          height: 2,
          width: "".concat(getValue(), "%"),
          containerWidth: "100%",
          border: "none"
        })]
      });
    },
    sortingFn: "basic"
  };
};
export var anomalyRateColumn = function anomalyRateColumn() {
  return {
    id: "anomalyRate",
    header: /*#__PURE__*/_jsx(TextMicro, {
      strong: true,
      children: "Anomaly%"
    }),
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref9) {
      var _row$original$info4;
      var row = _ref9.row,
        getValue = _ref9.getValue;
      if (!((_row$original$info4 = row.original.info) !== null && _row$original$info4 !== void 0 && _row$original$info4.sts)) return /*#__PURE__*/_jsx(TextSmall, {
        color: "textLite",
        children: getValue()
      });
      return /*#__PURE__*/_jsxs(Flex, {
        flex: true,
        column: true,
        gap: 0.5,
        children: [/*#__PURE__*/_jsxs(TextSmall, {
          color: "textLite",
          children: [Math.round((getValue() + Number.EPSILON) * 100) / 100, "%"]
        }), /*#__PURE__*/_jsx(ProgressBar, {
          background: "progressBg",
          color: "anomalyText",
          height: 2,
          width: "".concat(getValue(), "%"),
          containerWidth: "100%",
          border: "none"
        })]
      });
    },
    sortingFn: "basic"
  };
};
export var alertsColumn = function alertsColumn() {
  return {
    id: "alerts",
    header: /*#__PURE__*/_jsx(TextMicro, {
      strong: true,
      children: "Alerts"
    }),
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref10) {
      var _row$original$info5;
      var row = _ref10.row,
        getValue = _ref10.getValue;
      if (!((_row$original$info5 = row.original.info) !== null && _row$original$info5 !== void 0 && _row$original$info5.al)) return /*#__PURE__*/_jsx(TextSmall, {
        color: "textLite",
        children: getValue()
      });
      var _row$original$info$al = row.original.info.al,
        _row$original$info$al2 = _row$original$info$al.cl,
        cl = _row$original$info$al2 === void 0 ? 0 : _row$original$info$al2,
        _row$original$info$al3 = _row$original$info$al.cr,
        cr = _row$original$info$al3 === void 0 ? 0 : _row$original$info$al3,
        _row$original$info$al4 = _row$original$info$al.wr,
        wr = _row$original$info$al4 === void 0 ? 0 : _row$original$info$al4;
      var pillLeft = {
        text: cr,
        flavour: cr ? "error" : "disabledError"
      };
      var pillRight = {
        text: wr,
        flavour: wr ? "warning" : "disabledWarning"
      };
      var pillEnd = {
        text: cl,
        flavour: cl ? "clear" : "disabledClear"
      };
      return /*#__PURE__*/_jsx(Flex, {
        children: /*#__PURE__*/_jsx(MasterCard, {
          pillLeft: pillLeft,
          pillRight: pillRight,
          pillEnd: pillEnd
        })
      });
    },
    sortingFn: "basic"
  };
};