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

Netdata frontend SDK and chart utilities

"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.uniqueColumn = exports.minColumn = exports.metricsColumn = exports.maxColumn = exports.labelColumn = exports.instancesColumn = exports.contributionColumn = exports.avgColumn = exports.anomalyRateColumn = exports.alertsColumn = void 0;
var _react = _interopRequireWildcard(require("react"));
var _netdataUi = require("@netdata/netdata-ui");
var _color = _interopRequireDefault(require("../line/dimensions/color"));
var _units = _interopRequireDefault(require("../line/dimensions/units"));
var _provider = require("../provider");
var _label = _interopRequireDefault(require("./label"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var useMetricsByValue = function useMetricsByValue(chart) {
  return (0, _react.useMemo)(function () {
    return {
      dimension: "dimensions",
      node: "nodes",
      instance: chart.intl("instance", {
        count: 2
      }),
      label: "labels",
      value: "values",
      "default": "values"
    };
  }, []);
};
var labelColumn = exports.labelColumn = function labelColumn(fallbackExpandKey) {
  return {
    id: "label",
    header: function header() {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
        strong: true,
        children: "Name"
      });
    },
    size: 200,
    minSize: 60,
    maxSize: 800,
    cell: function cell(_ref) {
      var getValue = _ref.getValue,
        row = _ref.row;
      var chart = (0, _provider.useChart)();
      var metricsByValue = useMetricsByValue(chart);
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
        justifyContent: "between",
        alignItems: "center",
        padding: [0, 0, 0, row.depth * 3],
        width: "100%",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
          gap: 1,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_color["default"], {
            id: getValue()
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.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__*/(0, _jsxRuntime.jsx)(_label["default"], {
          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"
        })]
      });
    }
  };
};
var uniqueColumn = exports.uniqueColumn = function uniqueColumn() {
  return {
    id: "unique",
    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextMicro, {
      strong: true,
      children: "Unique"
    }),
    size: 45,
    minSize: 30,
    maxSize: 90,
    cell: function cell(_ref2) {
      var getValue = _ref2.getValue;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
        color: "textLite",
        children: getValue()
      });
    },
    sortingFn: "basic"
  };
};
var minColumn = exports.minColumn = function minColumn() {
  return {
    id: "min",
    header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextMicro, {
      strong: true,
      children: ["Min ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_units["default"], {
        visible: true
      })]
    }),
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref3) {
      var getValue = _ref3.getValue;
      var value = (0, _provider.useConverted)(getValue());
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
        color: "textLite",
        children: value
      });
    },
    sortingFn: "basic"
  };
};
var avgColumn = exports.avgColumn = function avgColumn() {
  return {
    id: "avg",
    header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextMicro, {
      strong: true,
      children: ["Avg ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_units["default"], {
        visible: true
      })]
    }),
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref4) {
      var getValue = _ref4.getValue;
      var value = (0, _provider.useConverted)(getValue());
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
        color: "textLite",
        children: value
      });
    },
    sortingFn: "basic"
  };
};
var maxColumn = exports.maxColumn = function maxColumn() {
  return {
    id: "max",
    header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextMicro, {
      strong: true,
      children: ["Max ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_units["default"], {
        visible: true
      })]
    }),
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref5) {
      var getValue = _ref5.getValue;
      var value = (0, _provider.useConverted)(getValue());
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
        color: "textLite",
        children: value
      });
    },
    sortingFn: "basic"
  };
};
var instancesColumn = exports.instancesColumn = function instancesColumn() {
  return {
    id: "instances",
    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.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__*/(0, _jsxRuntime.jsx)(_netdataUi.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__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
        flex: true,
        column: true,
        gap: 0.5,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextSmall, {
          color: "textLite",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
            color: "primary",
            children: qr
          }), " of ", sl + ex]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.ProgressBar, {
          background: "progressBg",
          color: ["green", "deyork"],
          height: 2,
          width: "".concat(qr / (sl + ex) * 100, "%"),
          containerWidth: "100%",
          border: "none"
        })]
      });
    },
    sortingFn: "basic"
  };
};
var metricsColumn = exports.metricsColumn = function metricsColumn() {
  return {
    id: "metrics",
    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.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__*/(0, _jsxRuntime.jsx)(_netdataUi.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__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
        flex: true,
        column: true,
        gap: 0.5,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextSmall, {
          color: "textLite",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
            color: "primary",
            children: qr
          }), " of ", sl + ex]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.ProgressBar, {
          background: "progressBg",
          color: ["green", "deyork"],
          height: 2,
          width: "".concat(qr / (sl + ex) * 100, "%"),
          containerWidth: "100%",
          border: "none"
        })]
      });
    },
    sortingFn: "basic"
  };
};
var contributionColumn = exports.contributionColumn = function contributionColumn() {
  return {
    id: "contribution",
    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.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__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
        color: "textLite",
        children: getValue()
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
        flex: true,
        column: true,
        gap: 0.5,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextSmall, {
          color: "primary",
          children: [Math.round((getValue() + Number.EPSILON) * 100) / 100, "%"]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.ProgressBar, {
          background: "progressBg",
          color: ["green", "deyork"],
          height: 2,
          width: "".concat(getValue(), "%"),
          containerWidth: "100%",
          border: "none"
        })]
      });
    },
    sortingFn: "basic"
  };
};
var anomalyRateColumn = exports.anomalyRateColumn = function anomalyRateColumn() {
  return {
    id: "anomalyRate",
    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.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__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
        color: "textLite",
        children: getValue()
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
        flex: true,
        column: true,
        gap: 0.5,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextSmall, {
          color: "textLite",
          children: [Math.round((getValue() + Number.EPSILON) * 100) / 100, "%"]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.ProgressBar, {
          background: "progressBg",
          color: "anomalyText",
          height: 2,
          width: "".concat(getValue(), "%"),
          containerWidth: "100%",
          border: "none"
        })]
      });
    },
    sortingFn: "basic"
  };
};
var alertsColumn = exports.alertsColumn = function alertsColumn() {
  return {
    id: "alerts",
    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.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__*/(0, _jsxRuntime.jsx)(_netdataUi.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__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.MasterCard, {
          pillLeft: pillLeft,
          pillRight: pillRight,
          pillEnd: pillEnd
        })
      });
    },
    sortingFn: "basic"
  };
};