@jfvilas/plugin-kwirth-metrics 0.12.5

package/dist/components/EntityKwirthMetricsContent/EntityKwirthMetricsContent.esm.js

@@ -0,0 +1,526 @@
+import React, { useState, useRef } from 'react';
+import useAsync from 'react-use/esm/useAsync';
+import { Progress, WarningPanel } from '@backstage/core-components';
+import { useApi, alertApiRef } from '@backstage/core-plugin-api';
+import { isKwirthAvailable, ANNOTATION_KWIRTH_LOCATION } from '@jfvilas/plugin-kwirth-common';
+import { useEntity, MissingAnnotationEmptyState } from '@backstage/plugin-catalog-react';
+import { kwirthMetricsApiRef } from '../../api/types.esm.js';
+import { SignalMessageLevelEnum, InstanceConfigScopeEnum, InstanceMessageTypeEnum, OpsCommandEnum, accessKeySerialize, InstanceMessageChannelEnum, InstanceMessageFlowEnum, InstanceMessageActionEnum, MetricsConfigModeEnum, InstanceConfigViewEnum, InstanceConfigObjectEnum } from '@jfvilas/kwirth-common';
+import { ComponentNotFound, ErrorType } from '../ComponentNotFound/ComponentNotFound.esm.js';
+import { Options } from '../Options/Options.esm.js';
+import { ClusterList } from '../ClusterList/ClusterList.esm.js';
+import { ObjectSelector } from '../ObjectSelector/ObjectSelector.esm.js';
+import { ShowError } from '../ShowError/ShowError.esm.js';
+import { StatusLog } from '../StatusLog/StatusLog.esm.js';
+import { Box, Grid, Card, CardHeader, CardContent, FormControl, Select, MenuItem, Checkbox } from '@material-ui/core';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import PlayIcon from '@material-ui/icons/PlayArrow';
+import PauseIcon from '@material-ui/icons/Pause';
+import StopIcon from '@material-ui/icons/Stop';
+import InfoIcon from '@material-ui/icons/Info';
+import WarningIcon from '@material-ui/icons/Warning';
+import ErrorIcon from '@material-ui/icons/Error';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import KwirthMetricsLogo from '../../assets/kwirthmetrics-logo.svg';
+import { BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar, LabelList, AreaChart, Area, LineChart, Line, ResponsiveContainer } from 'recharts';
+
+const EntityKwirthMetricsContent = (props) => {
+  const kwirthMetricsApi = useApi(kwirthMetricsApiRef);
+  const alertApi = useApi(alertApiRef);
+  const { entity } = useEntity();
+  const [clusterValidPods, setClusterValidPods] = useState([]);
+  const [selectedClusterName, setSelectedClusterName] = useState("");
+  const [selectedNamespaces, setSelectedNamespaces] = useState([]);
+  const [selectedPodNames, setSelectedPodNames] = useState([]);
+  const [selectedContainerNames, setSelectedContainerNames] = useState([]);
+  const [selectedMetrics, setSelectedMetrics] = useState([]);
+  const [showError, setShowError] = useState("");
+  const [started, setStarted] = useState(false);
+  const [stopped, setStopped] = useState(true);
+  const paused = useRef(false);
+  const [metricsMessages, setMetricsMessages] = useState([]);
+  const [statusMessages, setStatusMessages] = useState([]);
+  const [websocket, setWebsocket] = useState();
+  const [instance, setInstance] = useState();
+  const kwirthMetricsOptionsRef = useRef({ depth: 10, width: 3, interval: 10, chart: "area", aggregate: false, merge: false, stack: false });
+  const [showStatusDialog, setShowStatusDialog] = useState(false);
+  const [statusLevel, setStatusLevel] = useState(SignalMessageLevelEnum.INFO);
+  const [backendVersion, setBackendVersion] = useState("");
+  const [_refresh, setRefresh] = useState(0);
+  const [allMetrics, setAllMetrics] = useState(
+    [
+      { metric: "kwirth_container_memory_percentage", help: "", eval: "", type: "counter" },
+      { metric: "kwirth_container_cpu_percentage", help: "", eval: "", type: "counter" },
+      { metric: "kwirth_container_transmit_percentage", help: "", eval: "", type: "counter" },
+      { metric: "kwirth_container_receive_percentage", help: "", eval: "", type: "counter" },
+      { metric: "kwirth_container_transmit_mbps", help: "", eval: "", type: "counter" },
+      { metric: "kwirth_container_receive_mbps", help: "", eval: "", type: "counter" }
+    ]
+  );
+  const { loading, error } = useAsync(async () => {
+    if (backendVersion === "") setBackendVersion(await kwirthMetricsApi.getVersion());
+    let reqScopes = [InstanceConfigScopeEnum.STREAM];
+    if (props.enableRestart) reqScopes.push(InstanceConfigScopeEnum.RESTART);
+    let data = await kwirthMetricsApi.requestAccess(entity, "metrics", reqScopes);
+    setClusterValidPods(data);
+  });
+  const colours = [
+    "#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",
+    // marron claro pastel
+    "#f0e2b6",
+    // crema pastel
+    "#a7c7e7",
+    // azul palido pastel
+    "#f5e6a5",
+    // amarillo palido pastel
+    "#e3c8f5",
+    // lilas pastel
+    "#d0c4e8",
+    // lila palido pastel
+    "#b8d8b8",
+    // verde claro pastel
+    "#d2ebfa",
+    // azul muy claro pastel
+    "#f1c1d2"
+    // rosa bebe pastel
+  ];
+  const clickStart = () => {
+    if (!paused.current) {
+      setMetricsMessages([]);
+      setStarted(true);
+      paused.current = false;
+      setStopped(false);
+      startMetricsViewer();
+    } else {
+      paused.current = false;
+      setStarted(true);
+    }
+  };
+  const clickPause = () => {
+    setStarted(false);
+    paused.current = true;
+  };
+  const clickStop = () => {
+    setStarted(false);
+    setStopped(true);
+    paused.current = false;
+    stopMetricsViewer();
+  };
+  const onSelectCluster = async (clusterName) => {
+    if (clusterName) {
+      setSelectedClusterName(clusterName);
+      setSelectedNamespaces([]);
+      setSelectedPodNames([]);
+      setSelectedContainerNames([]);
+      setMetricsMessages([]);
+      setStatusMessages([]);
+      clickStop();
+      let cluster = clusterValidPods.find((cluster2) => cluster2.name === clusterName);
+      if (cluster && cluster.metrics) {
+        cluster.metrics.sort((a, b) => a.metric.startsWith("kwirth") ? -1 : 1);
+        setAllMetrics(cluster.metrics);
+      }
+    }
+  };
+  const processMetricsMessage = (wsEvent) => {
+    let instanceMessage = JSON.parse(wsEvent.data);
+    switch (instanceMessage.type) {
+      case InstanceMessageTypeEnum.DATA:
+        let metricsMessage = instanceMessage;
+        if (metricsMessage.timestamp === 0) {
+          metricsMessage.timestamp = Date.now();
+          setMetricsMessages([metricsMessage]);
+        } else {
+          setMetricsMessages((prev) => {
+            while (prev.length > kwirthMetricsOptionsRef.current.depth) {
+              prev.splice(0, 1);
+            }
+            if (paused.current)
+              return prev;
+            else
+              return [...prev, metricsMessage];
+          });
+        }
+        break;
+      case InstanceMessageTypeEnum.SIGNAL:
+        if (instanceMessage.flow === InstanceMessageFlowEnum.RESPONSE && instanceMessage.action === InstanceMessageActionEnum.START) {
+          if (instanceMessage.instance !== "")
+            setInstance(instanceMessage.instance);
+          else {
+            let signalMessage = instanceMessage;
+            alertApi.post({ message: signalMessage.text, severity: "error", display: "transient" });
+          }
+        } else {
+          let signalMessage = instanceMessage;
+          addMessage(signalMessage.level, signalMessage.text);
+          switch (signalMessage.level) {
+            case SignalMessageLevelEnum.INFO:
+              alertApi.post({ message: signalMessage.text, severity: "info", display: "transient" });
+              break;
+            case SignalMessageLevelEnum.WARNING:
+              alertApi.post({ message: signalMessage.text, severity: "warning", display: "transient" });
+              break;
+            case SignalMessageLevelEnum.ERROR:
+              alertApi.post({ message: signalMessage.text, severity: "error", display: "transient" });
+              break;
+            default:
+              alertApi.post({ message: signalMessage.text, severity: "success", display: "transient" });
+              break;
+          }
+        }
+        break;
+      default:
+        addMessage(SignalMessageLevelEnum.ERROR, "Invalid message type received: " + instanceMessage.type);
+        alertApi.post({ message: "Invalid message type received: " + instanceMessage.type, severity: "error", display: "transient" });
+        break;
+    }
+  };
+  const websocketOnChunk = (wsEvent) => {
+    let instanceMessage;
+    try {
+      instanceMessage = JSON.parse(wsEvent.data);
+    } catch (err) {
+      console.log(err);
+      console.log(wsEvent.data);
+      return;
+    }
+    switch (instanceMessage.channel) {
+      case InstanceMessageChannelEnum.METRICS:
+        processMetricsMessage(wsEvent);
+        break;
+      case InstanceMessageChannelEnum.OPS:
+        let opsMessage = instanceMessage;
+        if (opsMessage.data?.data)
+          addMessage(SignalMessageLevelEnum.WARNING, "Operations message: " + opsMessage.data.data);
+        else
+          addMessage(SignalMessageLevelEnum.WARNING, "Operations message: " + JSON.stringify(opsMessage));
+        break;
+      default:
+        console.log("Invalid channel in message: ", instanceMessage);
+        break;
+    }
+  };
+  const websocketOnOpen = (ws) => {
+    let cluster = clusterValidPods.find((cluster2) => cluster2.name === selectedClusterName);
+    if (!cluster) {
+      addMessage(SignalMessageLevelEnum.ERROR, "Cluster not found");
+      return;
+    }
+    let pods = cluster.data.filter((p2) => selectedNamespaces.includes(p2.namespace));
+    if (!pods || pods.length === 0) {
+      addMessage(SignalMessageLevelEnum.ERROR, "Pod not found");
+      return;
+    }
+    console.log(`WS connected`);
+    let accessKey = cluster.accessKeys.get(InstanceConfigScopeEnum.STREAM);
+    if (accessKey) {
+      let containers = [];
+      if (selectedContainerNames.length > 0) {
+        for (var p of selectedPodNames) {
+          for (var c of selectedContainerNames) {
+            containers.push(p + "+" + c);
+          }
+        }
+      }
+      var iConfig = {
+        channel: InstanceMessageChannelEnum.METRICS,
+        objects: InstanceConfigObjectEnum.PODS,
+        action: InstanceMessageActionEnum.START,
+        flow: InstanceMessageFlowEnum.REQUEST,
+        instance: "",
+        accessKey: accessKeySerialize(accessKey),
+        scope: InstanceConfigScopeEnum.STREAM,
+        view: selectedContainerNames.length > 0 ? InstanceConfigViewEnum.CONTAINER : InstanceConfigViewEnum.POD,
+        namespace: selectedNamespaces.join(","),
+        group: "",
+        pod: selectedPodNames.join(","),
+        container: containers.join(","),
+        data: {
+          mode: MetricsConfigModeEnum.STREAM,
+          aggregate: kwirthMetricsOptionsRef.current.aggregate,
+          metrics: selectedMetrics,
+          interval: kwirthMetricsOptionsRef.current.interval
+        },
+        type: InstanceMessageTypeEnum.SIGNAL
+      };
+      ws.send(JSON.stringify(iConfig));
+    } else {
+      addMessage(SignalMessageLevelEnum.ERROR, "AccessKey has not been obtained");
+      return;
+    }
+  };
+  const startMetricsViewer = () => {
+    let cluster = clusterValidPods.find((cluster2) => cluster2.name === selectedClusterName);
+    if (!cluster) {
+      addMessage(SignalMessageLevelEnum.ERROR, "Cluster not found");
+      return;
+    }
+    try {
+      let ws = new WebSocket(cluster.url);
+      ws.onopen = () => websocketOnOpen(ws);
+      ws.onmessage = (event) => websocketOnChunk(event);
+      ws.onclose = (event) => websocketOnClose(event);
+      setWebsocket(ws);
+    } catch (err) {
+      addMessage(SignalMessageLevelEnum.ERROR, "Error starting websocket");
+    }
+  };
+  const websocketOnClose = (_event) => {
+    console.log(`WS disconnected from remote`);
+    setStarted(false);
+    paused.current = false;
+    setStopped(true);
+  };
+  const stopMetricsViewer = () => {
+    websocket?.close();
+  };
+  const onChangeOptions = (options) => {
+    kwirthMetricsOptionsRef.current = options;
+    setRefresh(Math.random());
+  };
+  const actionButtons = () => {
+    let hasStreamKey = false, hasRestartKey = false;
+    let cluster = clusterValidPods.find((cluster2) => cluster2.name === selectedClusterName);
+    if (cluster) {
+      hasStreamKey = Boolean(cluster.accessKeys.has(InstanceConfigScopeEnum.STREAM));
+      hasRestartKey = Boolean(cluster.accessKeys.get(InstanceConfigScopeEnum.RESTART));
+    }
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, props.enableRestart && /* @__PURE__ */ React.createElement(IconButton, { title: "Restart", onClick: onClickRestart, disabled: selectedPodNames.length === 0 || !hasRestartKey || !websocket || !started }, /* @__PURE__ */ React.createElement(RefreshIcon, null)), /* @__PURE__ */ React.createElement(IconButton, { onClick: clickStart, title: "Play", disabled: started || !paused || selectedPodNames.length === 0 || selectedMetrics.length == 0 || !hasStreamKey }, /* @__PURE__ */ React.createElement(PlayIcon, null)), /* @__PURE__ */ React.createElement(IconButton, { onClick: clickPause, title: "Pause", disabled: !(started && !paused.current && selectedPodNames.length === 0) }, /* @__PURE__ */ React.createElement(PauseIcon, null)), /* @__PURE__ */ React.createElement(IconButton, { onClick: clickStop, title: "Stop", disabled: stopped || selectedPodNames.length === 0 }, /* @__PURE__ */ React.createElement(StopIcon, null)));
+  };
+  const onMetricsChange = (event) => {
+    setSelectedMetrics(event.target.value);
+  };
+  const metricsSelector = () => {
+    let disabled = selectedClusterName === "" || selectedNamespaces.length === 0;
+    return /* @__PURE__ */ React.createElement(FormControl, { style: { marginLeft: 16, width: "300px" }, size: "small" }, /* @__PURE__ */ React.createElement(Select, { value: selectedMetrics, MenuProps: { variant: "menu" }, multiple: true, onChange: onMetricsChange, renderValue: (selected) => selected.join(", "), disabled: disabled || started }, allMetrics.map(
+      (m) => /* @__PURE__ */ React.createElement(MenuItem, { key: m.metric, value: m.metric, style: { marginTop: "-6px", marginBottom: "-6px" } }, /* @__PURE__ */ React.createElement(Checkbox, { checked: selectedMetrics.includes(m.metric), style: { marginTop: "-6px", marginBottom: "-6px" } }), /* @__PURE__ */ React.createElement(Typography, { style: { marginTop: "-6px", marginBottom: "-6px" } }, m.metric))
+    )));
+  };
+  const statusButtons = (title) => {
+    const show = (level) => {
+      setShowStatusDialog(true);
+      setStatusLevel(level);
+    };
+    return /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "row" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, title)), /* @__PURE__ */ React.createElement(Grid, { item: true, style: { marginTop: "-8px" } }, /* @__PURE__ */ React.createElement(IconButton, { title: "info", disabled: !statusMessages.some((m) => m.type === InstanceMessageTypeEnum.SIGNAL && m.level === SignalMessageLevelEnum.INFO), onClick: () => show(SignalMessageLevelEnum.INFO) }, /* @__PURE__ */ React.createElement(InfoIcon, { style: { color: statusMessages.some((m) => m.type === InstanceMessageTypeEnum.SIGNAL && m.level === SignalMessageLevelEnum.INFO) ? "blue" : "#BDBDBD" } })), /* @__PURE__ */ React.createElement(IconButton, { title: "warning", disabled: !statusMessages.some((m) => m.type === InstanceMessageTypeEnum.SIGNAL && m.level === SignalMessageLevelEnum.WARNING), onClick: () => show(SignalMessageLevelEnum.WARNING), style: { marginLeft: "-16px" } }, /* @__PURE__ */ React.createElement(WarningIcon, { style: { color: statusMessages.some((m) => m.type === InstanceMessageTypeEnum.SIGNAL && m.level === SignalMessageLevelEnum.WARNING) ? "gold" : "#BDBDBD" } })), /* @__PURE__ */ React.createElement(IconButton, { title: "error", disabled: !statusMessages.some((m) => m.type === InstanceMessageTypeEnum.SIGNAL && m.level === SignalMessageLevelEnum.ERROR), onClick: () => show(SignalMessageLevelEnum.ERROR), style: { marginLeft: "-16px" } }, /* @__PURE__ */ React.createElement(ErrorIcon, { style: { color: statusMessages.some((m) => m.type === InstanceMessageTypeEnum.SIGNAL && m.level === SignalMessageLevelEnum.ERROR) ? "red" : "#BDBDBD" } }))), /* @__PURE__ */ React.createElement(Grid, { item: true }, metricsSelector()));
+  };
+  const statusClear = (level) => {
+    setStatusMessages(statusMessages.filter((m) => m.level !== level));
+    setShowStatusDialog(false);
+  };
+  const mergeSeries = (names, series) => {
+    if (!names || names.length === 0) return [];
+    var 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 addChart = (options, metric, names, series, colour) => {
+    var result = /* @__PURE__ */ React.createElement(React.Fragment, null);
+    var mergedSeries = mergeSeries(names, series);
+    const renderLabel = (data) => {
+      var values = series.map((s) => s[data.index]);
+      var total = values.reduce((acc, value) => acc + value.value, 0);
+      return /* @__PURE__ */ React.createElement("text", { x: data.x + data.width / 3.5, y: data.y - 10 }, total.toPrecision(3).replace(/0+$/, ""));
+    };
+    let height = 300;
+    switch (options.chart) {
+      case "value":
+        height = 40 + series.length * 80;
+        result = /* @__PURE__ */ React.createElement(Grid, { direction: "row" }, /* @__PURE__ */ React.createElement(Typography, null, series.map((serie, index) => {
+          return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, null, serie[serie.length - 1].value), /* @__PURE__ */ React.createElement(Typography, null, names[index]));
+        })));
+        break;
+      case "line":
+        result = /* @__PURE__ */ React.createElement(LineChart, { data: mergedSeries }, /* @__PURE__ */ React.createElement(CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ React.createElement(XAxis, { dataKey: "timestamp", fontSize: 8 }), /* @__PURE__ */ React.createElement(YAxis, null), /* @__PURE__ */ React.createElement(Tooltip, null), /* @__PURE__ */ React.createElement(Legend, null), series.map((_serie, index) => /* @__PURE__ */ React.createElement(Line, { key: index, name: names[index], type: "monotone", dataKey: names[index], stroke: series.length === 1 ? colour : colours[index], activeDot: { r: 8 } })));
+        break;
+      case "area":
+        result = /* @__PURE__ */ React.createElement(AreaChart, { data: mergedSeries }, /* @__PURE__ */ React.createElement("defs", null, series.map((_serie, index) => {
+          return /* @__PURE__ */ React.createElement("linearGradient", { key: index, id: `color${series.length === 1 ? colour : colours[index]}`, x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React.createElement("stop", { offset: "7%", stopColor: series.length === 1 ? colour : colours[index], stopOpacity: 0.8 }), /* @__PURE__ */ React.createElement("stop", { offset: "93%", stopColor: series.length === 1 ? colour : colours[index], stopOpacity: 0 }));
+        })), /* @__PURE__ */ React.createElement(CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ React.createElement(XAxis, { dataKey: "timestamp", fontSize: 8 }), /* @__PURE__ */ React.createElement(YAxis, null), /* @__PURE__ */ React.createElement(Tooltip, null), /* @__PURE__ */ React.createElement(Legend, null), series.map((_serie, index) => /* @__PURE__ */ React.createElement(Area, { key: index, name: names[index], type: "monotone", ...options.stack ? { stackId: "1" } : {}, dataKey: names[index], stroke: series.length === 1 ? colour : colours[index], fill: `url(#color${series.length === 1 ? colour : colours[index]})` })));
+        break;
+      case "bar":
+        result = /* @__PURE__ */ React.createElement(BarChart, { data: mergedSeries }, /* @__PURE__ */ React.createElement(CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ React.createElement(XAxis, { dataKey: "timestamp", fontSize: 8 }), /* @__PURE__ */ React.createElement(YAxis, null), /* @__PURE__ */ React.createElement(Tooltip, null), /* @__PURE__ */ React.createElement(Legend, null), series.map(
+          (_serie, index) => /* @__PURE__ */ React.createElement(Bar, { name: names[index], ...options.stack ? { stackId: "1" } : {}, dataKey: names[index], stroke: series.length === 1 ? colour : colours[index], fill: series.length === 1 ? colour : colours[index] }, index === series.length - 1 && series.length > 1 ? /* @__PURE__ */ React.createElement(LabelList, { dataKey: names[index], position: "insideTop", content: renderLabel }) : null)
+        ));
+        break;
+    }
+    return /* @__PURE__ */ React.createElement(Grid, { direction: "column", style: { width: "100%", marginBottom: 8 } }, /* @__PURE__ */ React.createElement(Typography, { align: "center" }, metric), /* @__PURE__ */ React.createElement(ResponsiveContainer, { height, key: metric + JSON.stringify(names) }, result));
+  };
+  const showMetrics = (options) => {
+    if (!metricsMessages || metricsMessages.length === 0) {
+      if (selectedNamespaces.length === 0)
+        return /* @__PURE__ */ React.createElement(Typography, null, "Select namespace chip on top.");
+      else
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, started ? /* @__PURE__ */ React.createElement(Typography, null, "Waiting for first data, be patient...") : /* @__PURE__ */ React.createElement(Typography, null, "Configure ", /* @__PURE__ */ React.createElement("b", null, "chart options"), ", select some ", /* @__PURE__ */ React.createElement("b", null, "metrics on top"), ", and ", /* @__PURE__ */ React.createElement("b", null, "press PLAY"), " on top-right button to start viewing."));
+    }
+    let data = /* @__PURE__ */ new Map();
+    for (let metricsMessage of metricsMessages) {
+      let ts = new Date(metricsMessage.timestamp);
+      let timestamp = `${ts.getHours().toString().padStart(2, "0")}:${ts.getMinutes().toString().padStart(2, "0")}:${ts.getSeconds().toString().padStart(2, "0")}`;
+      for (var i = 0; i < metricsMessage.assets.length; i++) {
+        var assetName = metricsMessage.assets[i].assetName;
+        for (var metrics of metricsMessage.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 (options.merge) {
+      var assetNames = Array.from(data.keys());
+      var firstAsset = assetNames[0];
+      var allMetrics2 = Array.from(new Set(data.get(firstAsset).keys()));
+      for (let metric of allMetrics2) {
+        var series = assetNames.map((an) => {
+          return data.get(an).get(metric);
+        });
+        allCharts.push(/* @__PURE__ */ React.createElement(React.Fragment, null, addChart(options, metric, assetNames, series, "")));
+      }
+      let rows = [];
+      for (let i2 = 0; i2 < allCharts.length; i2 += options.width) {
+        rows.push(allCharts.slice(i2, i2 + options.width));
+      }
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, rows.map((row, index) => /* @__PURE__ */ React.createElement("div", { key: index, style: { 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) => {
+          var serie = data.get(asset)?.get(metric);
+          return /* @__PURE__ */ React.createElement(React.Fragment, null, addChart(options, metric, [asset], [serie], colours[index]));
+        });
+      });
+      let rows = [];
+      for (var resultAsset of allCharts2) {
+        for (let i2 = 0; i2 < resultAsset.length; i2 += options.width) {
+          rows.push(resultAsset.slice(i2, i2 + options.width));
+        }
+      }
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, rows.map((row, index) => /* @__PURE__ */ React.createElement("div", { key: index, style: { display: "flex", justifyContent: "space-around" } }, row)));
+    }
+  };
+  const onSelectObject = (namespaces, podNames, containerNames) => {
+    setSelectedNamespaces(namespaces);
+    setSelectedPodNames(podNames);
+    setSelectedContainerNames(containerNames);
+  };
+  const addMessage = (level, text) => {
+    setStatusMessages((prev) => [...prev, {
+      level,
+      text,
+      type: InstanceMessageTypeEnum.SIGNAL
+    }]);
+  };
+  const onClickRestart = () => {
+    let cluster = clusterValidPods.find((cluster2) => cluster2.name === selectedClusterName);
+    if (!cluster) {
+      addMessage(SignalMessageLevelEnum.ERROR, "No cluster selected");
+      return;
+    }
+    let restartKey = cluster.accessKeys.get(InstanceConfigScopeEnum.RESTART);
+    if (!restartKey) {
+      addMessage(SignalMessageLevelEnum.ERROR, "No access key present");
+      return;
+    }
+    if (!instance) {
+      addMessage(SignalMessageLevelEnum.ERROR, "No instance has been established");
+      return;
+    }
+    let pods = cluster.data.filter((pod) => selectedNamespaces.includes(pod.namespace));
+    for (let pod of pods) {
+      let om = {
+        msgtype: "opsmessage",
+        action: InstanceMessageActionEnum.COMMAND,
+        flow: InstanceMessageFlowEnum.IMMEDIATE,
+        type: InstanceMessageTypeEnum.DATA,
+        channel: InstanceMessageChannelEnum.OPS,
+        instance: "",
+        id: "1",
+        accessKey: accessKeySerialize(restartKey),
+        command: OpsCommandEnum.RESTARTPOD,
+        namespace: pod.namespace,
+        group: "",
+        pod: pod.name,
+        container: ""
+      };
+      let rm = {
+        msgtype: "routemessage",
+        accessKey: accessKeySerialize(restartKey),
+        destChannel: InstanceMessageChannelEnum.OPS,
+        action: InstanceMessageActionEnum.ROUTE,
+        flow: InstanceMessageFlowEnum.IMMEDIATE,
+        type: InstanceMessageTypeEnum.SIGNAL,
+        channel: InstanceMessageChannelEnum.METRICS,
+        instance,
+        data: om
+      };
+      websocket?.send(JSON.stringify(rm));
+    }
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, showError !== "" && /* @__PURE__ */ React.createElement(ShowError, { message: showError, onClose: () => setShowError("") }), loading && /* @__PURE__ */ React.createElement(Progress, null), !isKwirthAvailable(entity) && !loading && error && /* @__PURE__ */ React.createElement(WarningPanel, { title: "An error has ocurred while obtaining data from kuebernetes clusters.", message: error?.message }), !isKwirthAvailable(entity) && !loading && /* @__PURE__ */ React.createElement(MissingAnnotationEmptyState, { readMoreUrl: "https://github.com/jfvilas/kwirth", annotation: ANNOTATION_KWIRTH_LOCATION }), isKwirthAvailable(entity) && !loading && clusterValidPods && clusterValidPods.length === 0 && /* @__PURE__ */ React.createElement(ComponentNotFound, { error: ErrorType.NO_CLUSTERS, entity }), isKwirthAvailable(entity) && !loading && clusterValidPods && clusterValidPods.length > 0 && clusterValidPods.reduce((sum, cluster) => sum + cluster.data.length, 0) === 0 && /* @__PURE__ */ React.createElement(ComponentNotFound, { error: ErrorType.NO_PODS, entity }), isKwirthAvailable(entity) && !loading && clusterValidPods && clusterValidPods.length > 0 && clusterValidPods.reduce((sum, cluster) => sum + cluster.data.length, 0) > 0 && /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex" } }, /* @__PURE__ */ React.createElement(Box, { sx: { width: "200px" } }, /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "column" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(ClusterList, { resources: clusterValidPods, selectedClusterName, onSelect: onSelectCluster }))), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(Options, { options: kwirthMetricsOptionsRef.current, selectedNamespaces, selectedPodNames, selectedContainerNames, onChange: onChangeOptions, disabled: selectedNamespaces.length === 0 || paused.current }))))), /* @__PURE__ */ React.createElement(Box, { sx: { flexGrow: 1, p: 1 } }, !selectedClusterName && /* @__PURE__ */ React.createElement("img", { src: KwirthMetricsLogo, alt: "No cluster selected", style: { left: "40%", marginTop: "10%", width: "20%", position: "relative" } }), selectedClusterName && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Card, { style: { marginTop: -8 } }, /* @__PURE__ */ React.createElement(
+    CardHeader,
+    {
+      title: statusButtons(selectedClusterName),
+      style: { marginTop: -4, marginBottom: 4, flexShrink: 0 },
+      action: actionButtons()
+    }
+  ), /* @__PURE__ */ React.createElement(Typography, { style: { marginLeft: 16, marginBottom: 4 } }, /* @__PURE__ */ React.createElement(ObjectSelector, { cluster: clusterValidPods.find((cluster) => cluster.name === selectedClusterName), onSelect: onSelectObject, disabled: selectedClusterName === "" || started || paused.current, selectedNamespaces, selectedPodNames, selectedContainerNames, scope: InstanceConfigScopeEnum.STREAM })), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(CardContent, { style: { overflow: "auto" } }, showMetrics(kwirthMetricsOptionsRef.current)))))), showStatusDialog && /* @__PURE__ */ React.createElement(StatusLog, { level: statusLevel, onClose: () => setShowStatusDialog(false), statusMessages, onClear: statusClear }));
+};
+
+export { EntityKwirthMetricsContent };
+//# sourceMappingURL=EntityKwirthMetricsContent.esm.js.map