@kwirthmagnify/kwirth-plugin-metrics 0.0.0-stage → 0.1.1

package/front.js

@@ -0,0 +1,838 @@
+"use strict";
+(() => {
+  var __create = Object.create;
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __commonJS = (cb, mod) => function __require() {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+    // If the importer is in node compatibility mode or this is not an ESM
+    // file that has been converted to a CommonJS file using a Babel-
+    // compatible transform (i.e. "__esModule" has not been set), then set
+    // "default" to the CommonJS "module.exports" for node compatibility.
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    mod
+  ));
+
+  // kwirth-globals:@kwirthmagnify/kwirth-common-front
+  var require_kwirth_common_front = __commonJS({
+    "kwirth-globals:@kwirthmagnify/kwirth-common-front"(exports, module) {
+      var _m = window.__kwirth__.kwirthCommonFront;
+      var _d = _m != null && "default" in Object(_m) ? _m.default : _m;
+      if (typeof _d !== "function" && _d != null && typeof _d.default !== "undefined") _d = _d.default;
+      module.exports = Object.assign({}, typeof _m === "object" && _m !== null ? _m : {}, { default: _d, __esModule: true });
+    }
+  });
+
+  // kwirth-globals:@kwirthmagnify/kwirth-common
+  var require_kwirth_common = __commonJS({
+    "kwirth-globals:@kwirthmagnify/kwirth-common"(exports, module) {
+      var _m = window.__kwirth__.kwirthCommon;
+      var _d = _m != null && "default" in Object(_m) ? _m.default : _m;
+      if (typeof _d !== "function" && _d != null && typeof _d.default !== "undefined") _d = _d.default;
+      module.exports = Object.assign({}, typeof _m === "object" && _m !== null ? _m : {}, { default: _d, __esModule: true });
+    }
+  });
+
+  // kwirth-globals:react
+  var require_react = __commonJS({
+    "kwirth-globals:react"(exports, module) {
+      var _m = window.__kwirth__.React;
+      var _d = _m != null && "default" in Object(_m) ? _m.default : _m;
+      if (typeof _d !== "function" && _d != null && typeof _d.default !== "undefined") _d = _d.default;
+      module.exports = Object.assign({}, typeof _m === "object" && _m !== null ? _m : {}, { default: _d, __esModule: true });
+    }
+  });
+
+  // kwirth-globals:@mui/material
+  var require_material = __commonJS({
+    "kwirth-globals:@mui/material"(exports, module) {
+      var _m = window.__kwirth__.MUI.material;
+      var _d = _m != null && "default" in Object(_m) ? _m.default : _m;
+      if (typeof _d !== "function" && _d != null && typeof _d.default !== "undefined") _d = _d.default;
+      module.exports = Object.assign({}, typeof _m === "object" && _m !== null ? _m : {}, { default: _d, __esModule: true });
+    }
+  });
+
+  // kwirth-globals:@mui/icons-material
+  var require_icons_material = __commonJS({
+    "kwirth-globals:@mui/icons-material"(exports, module) {
+      var _m = window.__kwirth__.MUI.icons;
+      var _d = _m != null && "default" in Object(_m) ? _m.default : _m;
+      if (typeof _d !== "function" && _d != null && typeof _d.default !== "undefined") _d = _d.default;
+      module.exports = Object.assign({}, typeof _m === "object" && _m !== null ? _m : {}, { default: _d, __esModule: true });
+    }
+  });
+
+  // kwirth-globals:recharts
+  var require_recharts = __commonJS({
+    "kwirth-globals:recharts"(exports, module) {
+      var _m = window.__kwirth__.recharts;
+      var _d = _m != null && "default" in Object(_m) ? _m.default : _m;
+      if (typeof _d !== "function" && _d != null && typeof _d.default !== "undefined") _d = _d.default;
+      module.exports = Object.assign({}, typeof _m === "object" && _m !== null ? _m : {}, { default: _d, __esModule: true });
+    }
+  });
+
+  // src/front/MetricsChannel.ts
+  var import_kwirth_common_front2 = __toESM(require_kwirth_common_front(), 1);
+  var import_kwirth_common3 = __toESM(require_kwirth_common(), 1);
+
+  // src/front/MetricsSetup.tsx
+  var import_react3 = __toESM(require_react(), 1);
+  var import_material3 = __toESM(require_material(), 1);
+  var import_kwirth_common = __toESM(require_kwirth_common(), 1);
+  var import_kwirth_common_front = __toESM(require_kwirth_common_front(), 1);
+  var import_icons_material2 = __toESM(require_icons_material(), 1);
+
+  // src/front/MenuChart.tsx
+  var import_react2 = __toESM(require_react(), 1);
+  var import_material2 = __toESM(require_material(), 1);
+  var import_icons_material = __toESM(require_icons_material(), 1);
+
+  // src/front/icons.tsx
+  var import_react = __toESM(require_react(), 1);
+  var import_material = __toESM(require_material(), 1);
+  var AreaChart = (props) => /* @__PURE__ */ import_react.default.createElement(import_material.SvgIcon, { ...props }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M3 13v7h18v-1.5l-9-7L8 17zm0-6 4 3 5-7 5 4h4v8.97l-9.4-7.31-3.98 5.48L3 10.44z" }));
+  var PieChart = (props) => /* @__PURE__ */ import_react.default.createElement(import_material.SvgIcon, { ...props }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M11 2v20c-5.07-.5-9-4.79-9-10s3.93-9.5 9-10m2.03 0v8.99H22c-.47-4.74-4.24-8.52-8.97-8.99m0 11.01V22c4.74-.47 8.5-4.25 8.97-8.99z" }));
+  var LegendToggle = (props) => /* @__PURE__ */ import_react.default.createElement(import_material.SvgIcon, { ...props }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M20 15H4v-2h16zm0 2H4v2h16zm-5-6 5-3.55V5l-5 3.55L10 5 4 8.66V11l5.92-3.61z" }));
+  var ThirtyFps = (props) => /* @__PURE__ */ import_react.default.createElement(import_material.SvgIcon, { ...props }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M2 5v3h6v2.5H3v3h5V16H2v3h6c1.66 0 3-1.34 3-3v-1.9c0-1.16-.94-2.1-2.1-2.1 1.16 0 2.1-.94 2.1-2.1V8c0-1.66-1.34-3-3-3zm17 3v8h-4V8zm0-3h-4c-1.66 0-3 1.34-3 3v8c0 1.66 1.34 3 3 3h4c1.66 0 3-1.34 3-3V8c0-1.66-1.34-3-3-3" }));
+
+  // src/front/MenuChart.tsx
+  var MenuChart = (props) => {
+    return /* @__PURE__ */ import_react2.default.createElement(import_material2.Menu, { anchorEl: props.anchorMenu, open: Boolean(props.anchorMenu), onClose: props.onClose }, /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuList, { dense: true, sx: { width: "180px" } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { key: "chartline", onClick: () => props.onOptionSelected("chart" /* Chart */, "line" /* LineChart */), selected: props.selected === "line" /* LineChart */ }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material.ShowChart, null), "\xA0Line chart"), /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { key: "chartarea", onClick: () => props.onOptionSelected("chart" /* Chart */, "area" /* AreaChart */), selected: props.selected === "area" /* AreaChart */ }, /* @__PURE__ */ import_react2.default.createElement(AreaChart, null), "\xA0Area chart"), /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { key: "chartbar", onClick: () => props.onOptionSelected("chart" /* Chart */, "bar" /* BarChart */), selected: props.selected === "bar" /* BarChart */ }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material.BarChart, null), "\xA0Bar chart"), /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { key: "chartpie", onClick: () => props.onOptionSelected("chart" /* Chart */, "pie" /* PieChart */), selected: props.selected === "pie" /* PieChart */, disabled: props.numSeries < 2 }, /* @__PURE__ */ import_react2.default.createElement(PieChart, null), "\xA0Pie chart"), /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { key: "chartvalue", onClick: () => props.onOptionSelected("chart" /* Chart */, "value" /* ValueChart */), selected: props.selected === "value" /* ValueChart */ }, /* @__PURE__ */ import_react2.default.createElement(ThirtyFps, null), "\xA0Show value"), /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { key: "charttreemap", onClick: () => props.onOptionSelected("chart" /* Chart */, "treemap" /* TreemapChart */), selected: props.selected === "treemap" /* TreemapChart */ }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material.Analytics, null), "\xA0Tree map"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Divider, null), /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { key: "chartstack", onClick: () => props.onOptionSelected("stack" /* Stack */), selected: props.stacked, disabled: props.selected !== "area" /* AreaChart */ && props.selected !== "bar" /* BarChart */ }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material.StackedLineChart, null), "\xA0Stack values"), /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { key: "charttooltip", onClick: () => props.onOptionSelected("tooltip" /* Tooltip */), selected: props.tooltip }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material.Info, null), "\xA0Show tooltip"), /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { key: "chartlabel", onClick: () => props.onOptionSelected("labels" /* Labels */), selected: props.labels }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material.LocalOffer, null), "\xA0Show labels"), /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { key: "chartlegend", onClick: () => props.onOptionSelected("legend" /* Legend */), selected: props.legend }, /* @__PURE__ */ import_react2.default.createElement(LegendToggle, null), "\xA0Show legend"), props.setDefault && /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { key: "chartdefault", onClick: () => props.onOptionSelected("default" /* Default */) }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material.DoneAll, null), "\xA0Set default"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Divider, null), /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { key: "chartexport", onClick: () => props.onOptionSelected("export" /* Export */) }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material.ImportExport, null), "\xA0Export data"), /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { key: "chartremove", disabled: false, onClick: () => props.onOptionSelected("remove" /* Remove */) }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material.Delete, null), "\xA0Remove chart")));
+  };
+
+  // src/front/MetricsConfig.ts
+  var MetricsConfig = class {
+    constructor() {
+      this.depth = 20;
+      this.width = 3;
+      this.lineHeight = 300;
+      this.configurable = true;
+      this.compact = false;
+      this.legend = true;
+      this.merge = false;
+      this.stack = false;
+      this.chart = "line" /* LineChart */;
+      this.metricsDefault = {};
+    }
+  };
+  var MetricsInstanceConfig = class {
+    constructor() {
+      this.mode = "stream" /* STREAM */;
+      this.aggregate = false;
+      this.interval = 15;
+      this.metrics = [];
+    }
+  };
+  var METRICSCOLOURS = [
+    "#6e5bb8",
+    // morado oscuro
+    "#4a9076",
+    // verde oscuro
+    "#b56c52",
+    // naranja oscuro
+    "#7f6b97",
+    // color lavanda oscuro
+    "#b0528f",
+    // rosa oscuro
+    "#b0b052",
+    // amarillo oscuro
+    "#b05252",
+    // rojo oscuro
+    "#5285b0",
+    // azul oscuro
+    "#a38ad6",
+    // morado pastel
+    "#89c1a0",
+    // verde pastel
+    "#e4a28a",
+    // naranja pastel
+    "#b09dbd",
+    // lavanda pastel
+    "#e2a4c6",
+    // rosa pastel
+    "#c5c89e",
+    // amarillo pastel
+    "#e2a4a4",
+    // rojo pastel
+    "#90b7e2",
+    // azul pastel
+    "#f8d5e1",
+    // rosa claro pastel
+    "#b2d7f0",
+    // azul muy claro pastel
+    "#f7e1b5",
+    // amarillo muy claro pastel
+    "#d0f0c0",
+    // verde muy claro pastel
+    "#f5b0a1",
+    // coral pastel
+    "#d8a7db",
+    // lavanda muy claro pastel
+    "#f4c2c2",
+    // rosa suave pastel
+    "#e6c7b9",
+    // marrón claro pastel
+    "#f0e2b6",
+    // crema pastel
+    "#a7c7e7",
+    // azul pálido pastel
+    "#f5e6a5",
+    // amarillo pálido pastel
+    "#e3c8f5",
+    // lilas pastel
+    "#d0c4e8",
+    // lila pálido pastel
+    "#b8d8b8",
+    // verde claro pastel
+    "#d2ebfa",
+    // azul muy claro pastel
+    "#f1c1d2"
+    // rosa bebé pastel
+  ];
+
+  // src/front/MetricsSetup.tsx
+  var MetricsIcon = /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.BarChart, null);
+  var MetricsSetup = (props) => {
+    let metricsInstanceConfig = props.setupConfig?.channelInstanceConfig || new MetricsInstanceConfig();
+    let metricsConfig = props.setupConfig?.channelConfig || new MetricsConfig();
+    let allMetricsList = props.channelObject.metricsList;
+    let multiAssets = false;
+    if (props.channelObject) {
+      switch (props.channelObject.view) {
+        case import_kwirth_common.EInstanceConfigView.NAMESPACE:
+          multiAssets = props.channelObject.namespace.split(",").length > 1;
+          break;
+        case import_kwirth_common.EInstanceConfigView.GROUP:
+          multiAssets = props.channelObject.group.split(",").length > 1;
+          break;
+        case import_kwirth_common.EInstanceConfigView.POD:
+          multiAssets = props.channelObject.pod.split(",").length > 1;
+          break;
+        case import_kwirth_common.EInstanceConfigView.CONTAINER:
+          multiAssets = props.channelObject.container.split(",").length > 1;
+          break;
+      }
+    }
+    let merge = multiAssets ? metricsConfig.merge : false;
+    let aggregate = multiAssets ? !merge && metricsInstanceConfig.aggregate : false;
+    let stack = multiAssets ? merge && metricsConfig.stack : false;
+    const [metricsNames, setMetricsNames] = import_react3.default.useState(metricsInstanceConfig.metrics);
+    const [metricsMode, setMetricsMode] = (0, import_react3.useState)(metricsInstanceConfig.mode);
+    const [metricsInterval, setMetricsInterval] = (0, import_react3.useState)(metricsInstanceConfig.interval);
+    const [metricsDepth, setMetricsDepth] = (0, import_react3.useState)(metricsConfig.depth);
+    const [metricsWidth, setMetricsWidth] = (0, import_react3.useState)(metricsConfig.width);
+    const [assetAggregate, setAssetAggregate] = import_react3.default.useState(aggregate);
+    const [assetMerge, setAssetMerge] = import_react3.default.useState(merge);
+    const [assetStack, setAssetStack] = import_react3.default.useState(stack);
+    const [chart, setChart] = (0, import_react3.useState)(metricsConfig.chart);
+    const [metricsFilter, setMetricsFilter] = (0, import_react3.useState)("");
+    const setDefaultRef = (0, import_react3.useRef)(null);
+    const ok = () => {
+      metricsInstanceConfig.mode = metricsMode;
+      metricsInstanceConfig.interval = metricsInterval;
+      metricsInstanceConfig.aggregate = assetAggregate;
+      metricsInstanceConfig.metrics = metricsNames;
+      metricsConfig.depth = metricsDepth;
+      metricsConfig.width = metricsWidth;
+      metricsConfig.lineHeight = 300;
+      metricsConfig.configurable = true;
+      metricsConfig.compact = false;
+      metricsConfig.legend = true;
+      metricsConfig.merge = assetMerge;
+      metricsConfig.stack = assetStack;
+      metricsConfig.chart = chart;
+      props.onChannelSetupClosed(
+        props.channel,
+        {
+          channelId: props.channel.channelId,
+          channelConfig: metricsConfig,
+          channelInstanceConfig: metricsInstanceConfig
+        },
+        true,
+        setDefaultRef.current?.checked || false
+      );
+    };
+    const cancel = () => {
+      props.onChannelSetupClosed(
+        props.channel,
+        {
+          channelId: props.channel.channelId,
+          channelConfig: void 0,
+          channelInstanceConfig: void 0
+        },
+        false,
+        false
+      );
+    };
+    const metricAddOrRemove = (value) => {
+      const currentIndex = metricsNames.indexOf(value);
+      const newChecked = [...metricsNames];
+      if (currentIndex < 0)
+        newChecked.push(value);
+      else
+        newChecked.splice(currentIndex, 1);
+      setMetricsNames(newChecked);
+    };
+    const metricsDelete = (value) => {
+      const currentIndex = metricsNames.indexOf(value);
+      const newChecked = [...metricsNames];
+      if (currentIndex >= 0) newChecked.splice(currentIndex, 1);
+      setMetricsNames(newChecked);
+    };
+    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(import_material3.Dialog, { open: true, maxWidth: false, sx: { "& .MuiDialog-paper": { width: "50vw", maxWidth: "60vw", height: "60vh", maxHeight: "40vw" } } }, /* @__PURE__ */ import_react3.default.createElement(import_kwirth_common_front.DialogTitleHelp, { section: "guide/user/07-everyday-tasks?id=build-a-metrics-view", docsUrl: (0, import_kwirth_common_front.docsUrl)(props.channelObject.clusterUrl, "core", "kwirth") }, "Configure metrics for ", props.channelObject?.view), /* @__PURE__ */ import_react3.default.createElement(import_material3.DialogContent, null, /* @__PURE__ */ import_react3.default.createElement(import_material3.Stack, { spacing: 2, direction: "column", sx: { mt: "16px" } }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ import_react3.default.createElement(import_material3.FormControl, { sx: { width: "25%" } }, /* @__PURE__ */ import_react3.default.createElement(import_material3.InputLabel, null, "Mode"), /* @__PURE__ */ import_react3.default.createElement(import_material3.Select, { value: metricsMode, onChange: (e) => setMetricsMode(e.target.value), variant: "standard", disabled: true }, /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "snapshot" /* SNAPSHOT */ }, "Snapshot"), /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "stream" /* STREAM */ }, "Stream"))), /* @__PURE__ */ import_react3.default.createElement(import_material3.FormControl, { variant: "standard", sx: { width: "25%" } }, /* @__PURE__ */ import_react3.default.createElement(import_material3.InputLabel, null, "Depth"), /* @__PURE__ */ import_react3.default.createElement(import_material3.Select, { value: metricsDepth, onChange: (e) => setMetricsDepth(+e.target.value), variant: "standard" }, /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: 10 }, "10"), /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: 20 }, "20"), /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: 50 }, "50"), /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: 100 }, "100"))), /* @__PURE__ */ import_react3.default.createElement(import_material3.FormControl, { variant: "standard", sx: { width: "25%" } }, /* @__PURE__ */ import_react3.default.createElement(import_material3.InputLabel, null, "Width"), /* @__PURE__ */ import_react3.default.createElement(import_material3.Select, { value: metricsWidth, onChange: (e) => setMetricsWidth(+e.target.value), variant: "standard" }, /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: 1 }, "1"), /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: 2 }, "2"), /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: 3 }, "3"), /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: 4 }, "4"), /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: 5 }, "5"), /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: 6 }, "6"))), /* @__PURE__ */ import_react3.default.createElement(import_material3.TextField, { value: metricsInterval, onChange: (e) => setMetricsInterval(+e.target.value), sx: { width: "25%" }, variant: "standard", label: "Interval", type: "number" })), /* @__PURE__ */ import_react3.default.createElement(import_material3.TextField, { value: metricsFilter, onChange: (event) => setMetricsFilter(event.target.value), sx: { width: "100%" }, variant: "standard", label: "Filter", autoFocus: true }), /* @__PURE__ */ import_react3.default.createElement(import_material3.Stack, { direction: "row", spacing: 1, sx: { width: "100%", height: "22vh" } }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Stack, { direction: "column", sx: { width: "70%" } }, /* @__PURE__ */ import_react3.default.createElement(import_material3.List, { sx: { width: "100%", overflowY: "auto" } }, allMetricsList && Array.from(allMetricsList.keys()).map((value, index) => {
+      if (value.includes(metricsFilter) && (value.startsWith("container_") || value.startsWith("kwirth_"))) {
+        return /* @__PURE__ */ import_react3.default.createElement(import_material3.ListItem, { key: index, disablePadding: true }, /* @__PURE__ */ import_react3.default.createElement(import_material3.ListItemButton, { onClick: () => metricAddOrRemove(value), dense: true }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Tooltip, { title: /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { fontSize: 12 }, /* @__PURE__ */ import_react3.default.createElement("b", null, allMetricsList && allMetricsList.get(value)?.type)), /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { fontSize: 12 }, allMetricsList && allMetricsList.get(value)?.help)), placement: "bottom-start", enterDelay: 750 }, /* @__PURE__ */ import_react3.default.createElement(import_material3.ListItemText, { primary: value, sx: { color: metricsNames.includes(value) ? "text.primary" : "text.secondary" } }))));
+      } else {
+        return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, { key: index });
+      }
+    }))), /* @__PURE__ */ import_react3.default.createElement(import_material3.Stack, { direction: "column", sx: { width: "30%" }, spacing: 1 }, /* @__PURE__ */ import_react3.default.createElement(import_material3.FormControlLabel, { control: /* @__PURE__ */ import_react3.default.createElement(import_material3.Checkbox, { checked: assetAggregate, onChange: (e) => setAssetAggregate(e.target.checked) }), disabled: !multiAssets || assetMerge, label: "Aggregate" }), /* @__PURE__ */ import_react3.default.createElement(import_material3.FormControlLabel, { control: /* @__PURE__ */ import_react3.default.createElement(import_material3.Checkbox, { checked: assetMerge, onChange: (e) => setAssetMerge(e.target.checked) }), disabled: !multiAssets || assetAggregate, label: "Merge" }), /* @__PURE__ */ import_react3.default.createElement(import_material3.FormControlLabel, { control: /* @__PURE__ */ import_react3.default.createElement(import_material3.Checkbox, { checked: assetStack, onChange: (e) => setAssetStack(e.target.checked) }), disabled: !assetMerge || assetMerge && !"area bar".includes(chart), label: "Stack" }), /* @__PURE__ */ import_react3.default.createElement(import_material3.FormControl, { variant: "standard" }, /* @__PURE__ */ import_react3.default.createElement(import_material3.InputLabel, { sx: { ml: 1 } }, "Chart"), /* @__PURE__ */ import_react3.default.createElement(import_material3.Select, { value: chart, onChange: (e) => setChart(e.target.value), sx: { ml: 1 }, variant: "standard" }, /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "value" }, "Value"), /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "line" }, "Line"), /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "area" }, "Area"), /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "bar" }, "Bar"), /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "pie" }, "Pie"), /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "treemap" }, "Treemap"))))), /* @__PURE__ */ import_react3.default.createElement(import_material3.Stack, { direction: "row", spacing: 1, sx: { width: "100%", flexWrap: "wrap", maxWidth: "100%", height: "25%", overflowY: "auto" } }, metricsNames.map((value, index) => /* @__PURE__ */ import_react3.default.createElement(import_material3.Chip, { key: index, label: value, onDelete: () => metricsDelete(value), size: "small" }))))), /* @__PURE__ */ import_react3.default.createElement(import_material3.DialogActions, null, /* @__PURE__ */ import_react3.default.createElement(import_material3.FormControlLabel, { control: /* @__PURE__ */ import_react3.default.createElement(import_material3.Checkbox, { slotProps: { input: { ref: setDefaultRef } } }), label: "Set as default", sx: { width: "100%", ml: "8px" } }), /* @__PURE__ */ import_react3.default.createElement(import_material3.Button, { onClick: ok, disabled: metricsNames.length === 0 }, "OK"), /* @__PURE__ */ import_react3.default.createElement(import_material3.Button, { onClick: cancel }, "CANCEL"))));
+  };
+
+  // src/front/MetricsTabContent.tsx
+  var import_react5 = __toESM(require_react(), 1);
+  var import_material6 = __toESM(require_material(), 1);
+
+  // src/front/Chart.tsx
+  var import_react4 = __toESM(require_react(), 1);
+  var import_material4 = __toESM(require_material(), 1);
+  var import_recharts = __toESM(require_recharts(), 1);
+  var import_material5 = __toESM(require_material(), 1);
+  var import_icons_material3 = __toESM(require_icons_material(), 1);
+  var Chart = (props) => {
+    const [anchorMenuChart, setAnchorMenuChart] = (0, import_react4.useState)(null);
+    const [chartType, setChartType] = (0, import_react4.useState)(props.viewConfig?.chartType ? props.viewConfig.chartType : props.chartType);
+    const [stack, setStack] = (0, import_react4.useState)(props.viewConfig?.stack ? props.viewConfig.stack : props.stack);
+    const [tooltip, setTooltip] = (0, import_react4.useState)(props.viewConfig?.tooltip ? props.viewConfig.tooltip : props.tooltip);
+    const [labels, setLabels] = (0, import_react4.useState)(props.viewConfig?.labels ? props.viewConfig.labels : props.labels);
+    const [legend, setLegend] = (0, import_react4.useState)(props.viewConfig?.legend ? props.viewConfig.legend : props.legend);
+    const [compact] = (0, import_react4.useState)(props.viewConfig?.compact ? props.viewConfig.compact : props.compact);
+    let result;
+    let height = props.height;
+    let dataSummarized;
+    const mergeSeries = (names, series) => {
+      if (!names || names.length === 0) return [];
+      let resultSeries = [];
+      for (var i = 0; i < series[0].length; i++) {
+        var item = {};
+        for (var j = 0; j < series.length; j++) {
+          if (series[j][i]) {
+            item["timestamp"] = series[0][i].timestamp;
+            item[names[j]] = series[j][i].value;
+          }
+        }
+        resultSeries.push(item);
+      }
+      return resultSeries;
+    };
+    const CustomizedContent = (props2) => {
+      const { root, depth, x, y, width, height: height2, index, name } = props2;
+      return /* @__PURE__ */ import_react4.default.createElement("g", null, /* @__PURE__ */ import_react4.default.createElement(
+        "rect",
+        {
+          x,
+          y,
+          width,
+          height: height2,
+          style: {
+            fill: depth < 2 ? METRICSCOLOURS[Math.floor(index / root.children.length * 6)] : "#ffffff00",
+            stroke: "#fff",
+            strokeWidth: 2 / (depth + 1e-10),
+            strokeOpacity: 1 / (depth + 1e-10)
+          }
+        }
+      ), depth === 1 ? /* @__PURE__ */ import_react4.default.createElement("text", { x: x + width / 2, y: y + height2 / 2 + 7, textAnchor: "middle", fill: "#fff", fontSize: 14, fontFamily: "Roboto, Helvetica, Arial, sans-serif" }, name) : null);
+    };
+    const notifyViewConfigChange = (overrides) => {
+      props.onViewConfigChange?.(props.metricDefinition.metric, {
+        displayName: props.metricDefinition.metric,
+        chartType,
+        configurable: props.configurable,
+        compact,
+        legend,
+        stack,
+        tooltip,
+        labels,
+        ...overrides
+      });
+    };
+    const menuChartOptionSelected = (opt, data) => {
+      setAnchorMenuChart(null);
+      switch (opt) {
+        case "stack" /* Stack */:
+          setStack(!stack);
+          notifyViewConfigChange({ stack: !stack });
+          break;
+        case "remove" /* Remove */:
+          if (props.onRemove) props.onRemove(props.names, props.metricDefinition.metric);
+          break;
+        case "export" /* Export */:
+          if (!props.names?.length || !props.series?.length) return;
+          const headers = ["timestamp", ...props.names];
+          const timestamps = props.series[0].map((point) => point.timestamp);
+          const rows = timestamps.map((timestamp, idx) => {
+            const values = props.series.map((serie) => serie[idx]?.value ?? "");
+            return [timestamp, ...values];
+          });
+          const separator = ",";
+          const csvContent = headers.join(separator) + "\n" + rows.map((r) => r.join(separator)).join("\n");
+          const blob = new Blob(["\uFEFF" + csvContent], { type: "text/csv;charset=utf-8;" });
+          const link = document.createElement("a");
+          link.href = URL.createObjectURL(blob);
+          link.download = `${props.metricDefinition.metric}.csv`;
+          link.click();
+          break;
+        case "tooltip" /* Tooltip */:
+          setTooltip(!tooltip);
+          notifyViewConfigChange({ tooltip: !tooltip });
+          break;
+        case "labels" /* Labels */:
+          setLabels(!labels);
+          notifyViewConfigChange({ labels: !labels });
+          break;
+        case "legend" /* Legend */:
+          setLegend(!legend);
+          notifyViewConfigChange({ legend: !legend });
+          break;
+        case "default" /* Default */:
+          if (props.onSetDefault) {
+            props.onSetDefault(props.metricDefinition.metric, {
+              displayName: props.metricDefinition.metric,
+              chartType,
+              configurable: props.configurable,
+              compact,
+              legend,
+              stack,
+              tooltip,
+              labels
+            });
+          }
+          break;
+        default:
+          setChartType(data);
+          notifyViewConfigChange({ chartType: data });
+          break;
+      }
+    };
+    const renderLabel = (data) => {
+      var values = props.series.map((s) => s[data.index]);
+      var total = values.reduce((acc, value) => acc + (value ? value.value : 0), 0);
+      return /* @__PURE__ */ import_react4.default.createElement("text", { x: data.x + data.width / 3.5, y: data.y - 10 }, total.toPrecision(3).replace(/0+$/, "").replace(/\.+$/, ""));
+    };
+    switch (chartType) {
+      case "line" /* LineChart */:
+        result = /* @__PURE__ */ import_react4.default.createElement(import_recharts.LineChart, { data: mergeSeries(props.names, props.series) }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: "timestamp", fontSize: 8 }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, null), tooltip && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, null), legend && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { maxHeight: "60px", overflowY: "auto", fontSize: "12px" } }), props.series.map((_serie, index) => /* @__PURE__ */ import_react4.default.createElement(import_recharts.Line, { key: index, name: props.names[index], type: "monotone", dataKey: props.names[index], stroke: props.series.length === 1 ? props.colour : METRICSCOLOURS[index], activeDot: { r: 8 } })));
+        break;
+      case "area" /* AreaChart */:
+        result = /* @__PURE__ */ import_react4.default.createElement(import_recharts.AreaChart, { data: mergeSeries(props.names, props.series) }, /* @__PURE__ */ import_react4.default.createElement("defs", null, props.series.map((_serie, index) => {
+          return /* @__PURE__ */ import_react4.default.createElement("linearGradient", { key: index, id: `color${props.series.length === 1 ? props.colour : METRICSCOLOURS[index]}`, x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ import_react4.default.createElement("stop", { offset: "7%", stopColor: props.series.length === 1 ? props.colour : METRICSCOLOURS[index], stopOpacity: 0.8 }), /* @__PURE__ */ import_react4.default.createElement("stop", { offset: "93%", stopColor: props.series.length === 1 ? props.colour : METRICSCOLOURS[index], stopOpacity: 0 }));
+        })), /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: "timestamp", fontSize: 8 }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, null), tooltip && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, null), legend && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { maxHeight: "60px", overflowY: "auto", fontSize: "12px" } }), props.series.map((_serie, index) => /* @__PURE__ */ import_react4.default.createElement(import_recharts.Area, { key: index, name: props.names[index], type: "monotone", ...stack ? { stackId: "1" } : {}, dataKey: props.names[index], stroke: props.series.length === 1 ? props.colour : METRICSCOLOURS[index], fill: `url(#color${props.series.length === 1 ? props.colour : METRICSCOLOURS[index]})` })));
+        break;
+      case "bar" /* BarChart */:
+        result = /* @__PURE__ */ import_react4.default.createElement(import_recharts.BarChart, { data: mergeSeries(props.names, props.series) }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: "timestamp", fontSize: 8 }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, null), tooltip && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, null), legend && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { maxHeight: "60px", overflowY: "auto", fontSize: "12px" } }), props.series.map(
+          (serie, index) => /* @__PURE__ */ import_react4.default.createElement(import_recharts.Bar, { key: index, name: props.names[index], ...stack ? { stackId: "1" } : {}, dataKey: props.names[index], stroke: props.series.length === 1 ? props.colour : METRICSCOLOURS[index], fill: props.series.length === 1 ? props.colour : METRICSCOLOURS[index] }, index === props.series.length - 1 && props.series.length > 1 && labels ? /* @__PURE__ */ import_react4.default.createElement(import_recharts.LabelList, { dataKey: props.names[index], position: "insideTop", content: renderLabel }) : null)
+        ));
+        break;
+      case "pie" /* PieChart */:
+        dataSummarized = props.names.map((name, index) => {
+          return { name, value: props.series[index].reduce((ac, val) => ac + val.value, 0) };
+        });
+        result = /* @__PURE__ */ import_react4.default.createElement(import_recharts.PieChart, null, tooltip && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, null), legend && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { maxHeight: "60px", overflowY: "auto", fontSize: "12px" } }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Pie, { key: "asd", data: dataSummarized, dataKey: "value", fill: METRICSCOLOURS[0], innerRadius: 0, outerRadius: 90 }, dataSummarized.map((entry, index) => /* @__PURE__ */ import_react4.default.createElement(import_recharts.Cell, { key: `cell-${index}`, fill: METRICSCOLOURS[index % METRICSCOLOURS.length] }))));
+        break;
+      case "value" /* ValueChart */:
+        result = /* @__PURE__ */ import_react4.default.createElement("div", { style: { height: height * 0.8, alignItems: "center", justifyContent: "center", display: "flex", width: "100%" } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Stack, { direction: "row", alignItems: "center", justifyContent: "center", spacing: 2, sx: { flexWrap: "wrap", width: "100%" } }, props.series.map((serie, index) => {
+          let value = serie[serie.length - 1].value;
+          let valueStr = "0";
+          if (value) {
+            valueStr = value.toFixed(3);
+            if (value > 10) valueStr = value.toFixed(2);
+            if (value > 100) valueStr = value.toFixed(1);
+            if (value > 1e3) valueStr = value.toFixed(0);
+          }
+          return /* @__PURE__ */ import_react4.default.createElement(import_material4.Stack, { key: index, direction: "column", alignItems: "center", flex: 1, sx: { height } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { sx: { height: "90%", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { mt: 2, textAlign: "center", fontSize: Math.min(48, 192 / props.series.length), color: props.series.length === 1 ? props.colour : METRICSCOLOURS[index] }, valueStr)), /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { sx: { height: "10%", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { textAlign: "center", fontSize: 12, color: props.series.length === 1 ? props.colour : METRICSCOLOURS[index], sx: { maxHeight: "60px", overflowY: "auto", fontSize: "12px" } }, props.names[index])));
+        })));
+        break;
+      case "treemap" /* TreemapChart */:
+        dataSummarized = props.names.map((name, index) => {
+          return { name, value: props.series[index].reduce((ac, val) => ac + val.value, 0) };
+        });
+        result = /* @__PURE__ */ import_react4.default.createElement("div", { style: { paddingLeft: "0px", height: "100%", alignItems: "center", justifyContent: "center", display: "flex" } }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.Treemap, { data: dataSummarized, dataKey: "value", nameKey: "name", aspectRatio: 4 / 3, stroke: "#ffffff", fill: "#6e5bb8", content: import_react4.default.createElement(CustomizedContent) }, tooltip && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, null))));
+        break;
+      default:
+        result = /* @__PURE__ */ import_react4.default.createElement(import_material4.Alert, { severity: "error" }, "Unsupported chart type '", chartType, "'");
+        break;
+    }
+    let title = props.metricDefinition.metric.replace(/_/g, " ");
+    title = title[0].toLocaleUpperCase() + title.substring(1);
+    title = title.replace(/cpu/g, "CPU");
+    title = title.replace(/ fs /g, " FS ");
+    title = title.replace(/ io /g, " IO ");
+    title = title.replace(/oom/g, "OOM");
+    title = title.replace(/nvm/g, "NVM");
+    title = title.replace(/rss/g, "RSS");
+    title = title.replace(/failcnt/g, "fail count");
+    title = title.replace(/mbps/g, "Mbps");
+    return /* @__PURE__ */ import_react4.default.createElement(import_material4.Card, { sx: { margin: compact ? "3px" : "6px", width: "100%" } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.CardHeader, { sx: { border: 0, borderBottom: 1, borderStyle: "solid", borderColor: "divider", backgroundColor: "background.default", height: compact ? "0px" : "24px" }, title: /* @__PURE__ */ import_react4.default.createElement(import_material4.Stack, { direction: "column", alignItems: "center" }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Stack, { direction: "row", alignItems: "center" }, /* @__PURE__ */ import_react4.default.createElement(import_material5.Tooltip, { key: "tooltip" + props.metricDefinition.metric + JSON.stringify(props.names), title: /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { style: { fontSize: 12 } }, /* @__PURE__ */ import_react4.default.createElement("b", null, props.metricDefinition.metric), /* @__PURE__ */ import_react4.default.createElement("br", null), /* @__PURE__ */ import_react4.default.createElement("br", null), props.metricDefinition.help) }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { width: "100%", fontSize: compact ? "10px" : "16px" }, title.length > 40 ? title.substring(0, 40) + "..." : title)), props.configurable && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_material5.IconButton, { onClick: (event) => setAnchorMenuChart(event.currentTarget) }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material3.MoreVert, { fontSize: "small" })), anchorMenuChart && /* @__PURE__ */ import_react4.default.createElement(MenuChart, { onClose: () => setAnchorMenuChart(null), onOptionSelected: menuChartOptionSelected, anchorMenu: anchorMenuChart, selected: chartType, stacked: stack, tooltip, labels, legend, numSeries: props.numSeries, setDefault: true })))) }), /* @__PURE__ */ import_react4.default.createElement(import_material4.CardContent, { sx: { backgroundColor: "background.paper" } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Stack, { direction: "column", alignItems: "center" }, /* @__PURE__ */ import_react4.default.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { height, key: props.metricDefinition.metric + JSON.stringify(props.names) }, result)))));
+  };
+
+  // src/front/MetricsTabContent.tsx
+  var import_kwirth_common2 = __toESM(require_kwirth_common(), 1);
+  var MetricsTabContent = (props) => {
+    let metricsConfig = props.channelObject.config;
+    let metricsData = props.channelObject.data;
+    let metricsInstanceConfig = props.channelObject.instanceConfig;
+    const [alertRefresh, setAlertRefresh] = (0, import_react5.useState)(false);
+    const [refreshTabContent, setRefreshTabContent] = (0, import_react5.useState)(0);
+    const metricsBoxRef = (0, import_react5.useRef)(null);
+    const [metricsBoxTop, setMetricsBoxTop] = (0, import_react5.useState)(0);
+    (0, import_react5.useEffect)(() => {
+      if (metricsBoxRef.current) setMetricsBoxTop(metricsBoxRef.current.getBoundingClientRect().top);
+    });
+    const onViewConfigChange = (name, mvc) => {
+      metricsConfig.metricsDefault[name] = mvc;
+    };
+    const onSetMetricDefault = (name, mvc) => {
+      if (props.channelObject.updateChannelSettings && props.channelObject.channelSettings) {
+        if (!props.channelObject.channelSettings.channelConfig) props.channelObject.channelSettings.channelConfig = new MetricsConfig();
+        props.channelObject.channelSettings.channelConfig.metricsDefault[name] = mvc;
+        props.channelObject.updateChannelSettings(props.channelObject.channelSettings);
+      }
+    };
+    const handleClose = (reason, dataMetrics, event) => {
+      dataMetrics.events = dataMetrics.events.filter((e) => e.severity !== event.severity && e.text !== event.text);
+      setRefreshTabContent(Math.random());
+    };
+    const formatMetricsError = (dataMetrics) => {
+      if (!dataMetrics.events || dataMetrics.events.length === 0) return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null);
+      return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, dataMetrics.events.map((event, index) => {
+        return /* @__PURE__ */ import_react5.default.createElement(import_material6.Snackbar, { open: true, autoHideDuration: 3e3, onClose: (e, r) => handleClose(r, dataMetrics, event), anchorOrigin: { vertical: "bottom", horizontal: "center" } }, /* @__PURE__ */ import_react5.default.createElement(import_material6.Alert, { severity: event.severity, action: /* @__PURE__ */ import_react5.default.createElement(import_material6.Button, { onClick: () => {
+          dataMetrics.events.splice(index, 1);
+          setAlertRefresh(!alertRefresh);
+        } }, "Dismiss"), sx: { alignItems: "center" } }, event.text));
+      }));
+    };
+    const onChartRemove = (assetNames, metricName) => {
+      if (!props.channelObject.webSocket) return;
+      let metricsMessage = {
+        channel: "metrics",
+        data: {
+          mode: "stream" /* STREAM */,
+          aggregate: metricsInstanceConfig.aggregate,
+          interval: metricsInstanceConfig.interval,
+          metrics: metricsInstanceConfig.metrics.filter((m) => m !== metricName)
+        },
+        objects: import_kwirth_common2.EInstanceConfigObject.PODS,
+        accessKey: props.channelObject.accessString,
+        scope: "",
+        view: import_kwirth_common2.EInstanceConfigView.NONE,
+        namespace: "",
+        group: "",
+        pod: "",
+        container: "",
+        action: import_kwirth_common2.EInstanceMessageAction.MODIFY,
+        flow: import_kwirth_common2.EInstanceMessageFlow.REQUEST,
+        type: import_kwirth_common2.EInstanceMessageType.DATA,
+        instance: props.channelObject.instanceId
+      };
+      let payload = JSON.stringify(metricsMessage);
+      if (props.channelObject.webSocket) {
+        props.channelObject.webSocket.send(payload);
+        for (let amv of metricsData.assetMetricsValues) {
+          for (let assetName of assetNames) {
+            for (let asset of amv.assets) {
+              if (asset.assetName === assetName) {
+                asset.values = asset.values.filter((v) => v.metricName !== metricName);
+              }
+            }
+          }
+        }
+        setRefreshTabContent(Math.random());
+      }
+    };
+    const formatMetrics = () => {
+      if (!props.channelObject.metricsList || metricsData.assetMetricsValues.length === 0) {
+        return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, formatMetricsError(metricsData));
+      }
+      let data = /* @__PURE__ */ new Map();
+      for (let assetMetricsValues of metricsData.assetMetricsValues) {
+        var ts = new Date(assetMetricsValues.timestamp);
+        var timestamp = ts.getHours().toString().padStart(2, "0") + ":" + ts.getMinutes().toString().padStart(2, "0") + ":" + ts.getSeconds().toString().padStart(2, "0");
+        for (var i = 0; i < assetMetricsValues.assets.length; i++) {
+          var assetName = assetMetricsValues.assets[i].assetName;
+          for (var metrics of assetMetricsValues.assets[i].values) {
+            if (!data.has(assetName)) data.set(assetName, /* @__PURE__ */ new Map());
+            if (!data.get(assetName)?.has(metrics.metricName)) data.get(assetName)?.set(metrics.metricName, []);
+            data.get(assetName)?.get(metrics.metricName)?.push({ timestamp, value: metrics.metricValue });
+          }
+        }
+      }
+      let allCharts = [];
+      if (metricsConfig.merge) {
+        let selectedMetrics = Array.from(new Set(Array.from(data.values()).flatMap((metrics2) => Array.from(metrics2.keys()))));
+        for (let metric of selectedMetrics) {
+          let metricDefinition = props.channelObject.metricsList.get(metric);
+          if (!metricDefinition) {
+            allCharts.push(/* @__PURE__ */ import_react5.default.createElement(import_material6.Typography, { key: metric }, " Metrics definition not found for ", metric));
+            continue;
+          }
+          let assetNames = Array.from(data.keys()).filter((assetName2) => data.get(assetName2).has(metric));
+          let series = assetNames.map((assetName2) => data.get(assetName2).get(metric));
+          allCharts.push(
+            /* @__PURE__ */ import_react5.default.createElement(
+              Chart,
+              {
+                key: metricDefinition.metric,
+                metricDefinition,
+                names: assetNames,
+                series,
+                colour: "#888",
+                chartType: metricsConfig.chart,
+                stack: metricsConfig.stack,
+                numSeries: series.length,
+                tooltip: true,
+                labels: true,
+                onSetDefault: onSetMetricDefault,
+                onViewConfigChange,
+                viewConfig: metricsConfig.metricsDefault[metricDefinition.metric],
+                onRemove: onChartRemove,
+                configurable: metricsConfig.configurable,
+                height: metricsConfig.lineHeight,
+                compact: metricsConfig.compact,
+                legend: metricsConfig.legend
+              }
+            )
+          );
+        }
+        let rows = [];
+        for (let i2 = 0; i2 < allCharts.length; i2 += metricsConfig.width) {
+          rows.push(allCharts.slice(i2, i2 + metricsConfig.width));
+        }
+        return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, formatMetricsError(metricsData), rows.map((row, index) => /* @__PURE__ */ import_react5.default.createElement(import_material6.Box, { key: index, sx: { display: "flex", justifyContent: "space-around" } }, row)));
+      } else {
+        let allCharts2 = Array.from(data.keys()).map((asset, index) => {
+          return Array.from(data.get(asset)?.keys()).map((metric) => {
+            let metricDefinition = props.channelObject.metricsList?.get(metric);
+            if (metricDefinition) {
+              let series = data.get(asset)?.get(metric);
+              return /* @__PURE__ */ import_react5.default.createElement(
+                Chart,
+                {
+                  key: metricDefinition.metric,
+                  colour: METRICSCOLOURS[index],
+                  labels: true,
+                  tooltip: true,
+                  names: [asset],
+                  series: [series],
+                  chartType: metricsConfig.chart,
+                  stack: metricsConfig.stack,
+                  viewConfig: metricsConfig.metricsDefault[metricDefinition.metric],
+                  numSeries: series.length,
+                  metricDefinition,
+                  onRemove: onChartRemove,
+                  onSetDefault: onSetMetricDefault,
+                  onViewConfigChange,
+                  height: metricsConfig.lineHeight,
+                  configurable: metricsConfig.configurable,
+                  compact: metricsConfig.compact,
+                  legend: metricsConfig.legend
+                }
+              );
+            } else {
+              return /* @__PURE__ */ import_react5.default.createElement(import_material6.Typography, { key: metric }, " Metrics definition not found for ", metric);
+            }
+          });
+        });
+        let rows = [];
+        for (var resultAsset of allCharts2) {
+          for (let i2 = 0; i2 < resultAsset.length; i2 += metricsConfig.width) {
+            rows.push(resultAsset.slice(i2, i2 + metricsConfig.width));
+          }
+        }
+        return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, formatMetricsError(metricsData), rows.map((row, index) => /* @__PURE__ */ import_react5.default.createElement(import_material6.Box, { key: index, sx: { display: "flex", justifyContent: "space-around", mx: 1 } }, row)));
+      }
+    };
+    return /* @__PURE__ */ import_react5.default.createElement(import_material6.Box, { ref: metricsBoxRef, sx: { display: "flex", flexDirection: "column", overflowY: "auto", overflowX: "hidden", width: "100%", flexGrow: 1, height: `calc(100vh - ${metricsBoxTop}px)` }, "data-refresh": refreshTabContent }, formatMetrics());
+  };
+
+  // src/front/MetricsData.ts
+  var MetricsData = class {
+    constructor() {
+      this.assetMetricsValues = [];
+      this.events = [];
+      this.paused = false;
+      this.started = false;
+    }
+  };
+
+  // src/front/MetricsChannel.ts
+  var MetricsChannel = class {
+    constructor() {
+      this.setupVisible = false;
+      this.SetupDialog = MetricsSetup;
+      this.TabContent = MetricsTabContent;
+      this.channelId = "metrics";
+      this.requirements = {
+        accessString: true,
+        clusterUrl: true,
+        clusterInfo: false,
+        exit: false,
+        frontChannels: false,
+        metrics: true,
+        notifications: true,
+        notifier: true,
+        setup: true,
+        settings: true,
+        palette: false,
+        userSettings: false,
+        webSocket: true,
+        backChannels: false
+      };
+    }
+    getScope() {
+      return import_kwirth_common3.InstanceConfigScopeEnum.STREAM;
+    }
+    getChannelIcon() {
+      return MetricsIcon;
+    }
+    getSetupVisibility() {
+      return this.setupVisible;
+    }
+    setSetupVisibility(visibility) {
+      this.setupVisible = visibility;
+    }
+    processChannelMessage(channelObject, wsEvent) {
+      let action = import_kwirth_common_front2.EChannelRefreshAction.NONE;
+      var metricsMessage = JSON.parse(wsEvent.data);
+      let metricsData = channelObject.data;
+      let metricsConfig = channelObject.config;
+      switch (metricsMessage.type) {
+        case import_kwirth_common3.EInstanceMessageType.DATA:
+          if (metricsMessage.timestamp === 0) {
+            if (metricsData.assetMetricsValues.length === 0) {
+              metricsMessage.timestamp = Date.now();
+              metricsData.assetMetricsValues.push(metricsMessage);
+            } else {
+              metricsMessage.timestamp = metricsData.assetMetricsValues[0].timestamp;
+              metricsData.assetMetricsValues[0] = metricsMessage;
+            }
+          } else {
+            metricsData.assetMetricsValues.push(metricsMessage);
+            if (metricsData.assetMetricsValues.length > metricsConfig.depth) metricsData.assetMetricsValues.shift();
+          }
+          if (!metricsData.paused) action = import_kwirth_common_front2.EChannelRefreshAction.REFRESH;
+          break;
+        case import_kwirth_common3.EInstanceMessageType.SIGNAL:
+          let instanceMessage = JSON.parse(wsEvent.data);
+          if (instanceMessage.flow === import_kwirth_common3.EInstanceMessageFlow.RESPONSE && instanceMessage.action === import_kwirth_common3.EInstanceMessageAction.START) {
+            channelObject.instanceId = instanceMessage.instance;
+          } else {
+            let signalMessage = JSON.parse(wsEvent.data);
+            if (instanceMessage.flow === import_kwirth_common3.EInstanceMessageFlow.RESPONSE && instanceMessage.action === import_kwirth_common3.EInstanceMessageAction.RECONNECT) {
+              if (signalMessage.text) {
+                metricsData.events.push({ severity: "info" /* INFO */, text: signalMessage.text });
+              }
+            } else {
+              if (signalMessage.level === import_kwirth_common3.ESignalMessageLevel.ERROR) {
+                if (signalMessage.text) {
+                  metricsData.events.push({ severity: "error" /* ERROR */, text: signalMessage.text });
+                  action = import_kwirth_common_front2.EChannelRefreshAction.REFRESH;
+                }
+              }
+            }
+          }
+          break;
+        default:
+          console.log(`Invalid message type ${metricsMessage.type}`);
+          break;
+      }
+      return {
+        action
+      };
+    }
+    async initChannel(channelObject) {
+      channelObject.data = new MetricsData();
+      channelObject.instanceConfig = new MetricsInstanceConfig();
+      channelObject.config = new MetricsConfig();
+      return false;
+    }
+    startChannel(channelObject) {
+      let metricsData = channelObject.data;
+      metricsData.events = [];
+      metricsData.assetMetricsValues = [];
+      metricsData.paused = false;
+      metricsData.started = true;
+      return true;
+    }
+    pauseChannel(channelObject) {
+      let metricsData = channelObject.data;
+      metricsData.paused = true;
+      return false;
+    }
+    continueChannel(channelObject) {
+      let metricsData = channelObject.data;
+      metricsData.paused = false;
+      return true;
+    }
+    stopChannel(channelObject) {
+      let metricsData = channelObject.data;
+      metricsData.paused = false;
+      metricsData.started = false;
+      return true;
+    }
+    socketDisconnected(channelObject) {
+      let metricsData = channelObject.data;
+      metricsData.events.push({ severity: "info" /* INFO */, text: "*** Lost connection ***" });
+      return true;
+    }
+    socketReconnect(channelObject) {
+      return false;
+    }
+    /*
+        What an embedding channel (Magnify) needs to run metrics inside its own view: the initial data,
+        config and instance config. Compact charts, everything aggregated and the six basic metrics.
+        The embedder still builds its own form (it knows the metrics list it has); formConfig is empty.
+    */
+    prepareExternalChannel(_view, _selectedResources, _container) {
+      return {
+        data: new MetricsData(),
+        config: {
+          depth: 50,
+          width: 3,
+          lineHeight: 300,
+          configurable: true,
+          compact: true,
+          legend: true,
+          merge: false,
+          stack: false,
+          chart: "line" /* LineChart */,
+          metricsDefault: {}
+        },
+        instanceConfig: {
+          mode: "stream" /* STREAM */,
+          aggregate: true,
+          interval: 15,
+          metrics: ["kwirth_container_cpu_percentage", "kwirth_container_memory_percentage", "kwirth_container_transmit_mbps", "kwirth_container_receive_mbps", "kwirth_container_write_mbps", "kwirth_container_read_mbps"]
+        },
+        formConfig: {}
+      };
+    }
+  };
+
+  // src/front/index.ts
+  if (!window.__kwirth_plugins__) window.__kwirth_plugins__ = {};
+  window.__kwirth_plugins__["metrics"] = MetricsChannel;
+})();