@jfvilas/plugin-kwirth-metrics 0.12.8 → 0.12.9

package/README.md

@@ -3,13 +3,13 @@ This package is a Backstage plugin for **showing real-time streamed Kubernetes o
 
 
 ## Version compatibility
-This very first version of KwirthMetrics is compatible with Kwirth core server versions according to following table.
+KwirthMetrics is compatible with Kwirth core server versions according to following table.
 
 | Plugin Kwirth version | Kwirth version |
 |-|-|
-|0.12.5|0.4.20|
+|0.13.0|0.4.131|
 |0.12.8|0.4.45|
-
+|0.12.5|0.4.20|
 
 
 ## What for?
@@ -39,7 +39,6 @@ This frontend plugin **includes just the visualization of metrics** charts. All
 The ability to restart pods is also configured in the app-config (YAML, env or whatever), and **restartig permissions are set independently than chart streaming permissions**.
 The backend plugin is the only responsible for configuration and permissionism, all the capabilities related with showing charts are implemented in the frontend plugin, which is in charge of establishing the connections to the corresponding Kwirth instances (running inside your Kubernetes clusters).
 
-
 ## How does it work?
 Let's explain this by following a user working sequence:
 
@@ -66,7 +65,7 @@ If everyting is correctly configured and tagged, the user should see a list of c
 
     ```bash
     # From your Backstage root directory
-    yarn --cwd packages/app add @jfvilas/plugin-kwirth-metrics @jfvilas/plugin-kwirth-common @jfvilas/kwirth-common
+    yarn --cwd packages/app add @jfvilas/plugin-kwirth-metrics @jfvilas/plugin-kwirth-common @jfvilas/plugin-kwirth-frontend @jfvilas/kwirth-common
     ```
 
 3. Make sure the [Kwirth backend plugin](https://www.npmjs.com/package/@jfvilas/plugin-kwirth-backend#configure) is installed and configured.
@@ -78,13 +77,14 @@ If everyting is correctly configured and tagged, the user should see a list of c
 1. Add the KwirthMetrics plugin as a tab in your Entity pages:
 
     Firstly, import the plugin module.
+
     ```typescript
     // In packages/app/src/components/catalog/EntityPage.tsx
     import { EntityKwirthMetricsContent, isKwirthAvailable } from '@jfvilas/plugin-kwirth-metrics';
     ```
 
     Then, add a tab to your EntityPage (the 'if' is optional, you can keep the 'KwirthMetrics' tab always visible if you prefer to do it that way).
-    ````jsx
+    ```jsx
     // Note: Add to any other Pages as well (e.g. defaultEntityPage or webSiteEntityPage, for example)
     const serviceEntityPage = (
       <EntityLayout>
@@ -95,6 +95,21 @@ If everyting is correctly configured and tagged, the user should see a list of c
       </EntityLayout>
     )
     ```
+    You can setup some default *viewing* options on the `EntityKwirthMetricsContent` component, so, when the entity loads the default options will be set. These options are:
+    - `depth`
+    - `width`
+    - `interval`
+    - `chart`
+    (The meaning of these properties are explained at the end of this document)
+
+    If you want to setup a long-running histogram as a default chart for your entities you should setup your entity page like this:
+    ```jsx
+      ...
+      <EntityLayout.Route if={isKwirthAvailable} path="/kwirthmetrics" title="KwirthMetrics">
+        <EntityKwirthMetricsContent allMetrics={true} enableRestart={false} depth={100} chart={'bar'}/>
+      </EntityLayout.Route>
+      ...
+    ```
 
 2. Label your catalog-info according to one of these two startegies:
 
@@ -102,7 +117,7 @@ If everyting is correctly configured and tagged, the user should see a list of c
 
     ```yaml
     metadata:
-      annotaations:
+      annotations:
         backstage.io/kubernetes-id: entity001
     ```
 
@@ -110,7 +125,7 @@ If everyting is correctly configured and tagged, the user should see a list of c
 
     ```yaml
     metadata:
-      annotaations:
+      annotations:
         backstage.io/kubernetes-id: 'app=core,artifact=backend'
     ```
 

package/dist/api/KwirthMetricsClient.esm.js

@@ -1,4 +1,4 @@
-import { getVersion, getResources, requestAccess } from '@jfvilas/plugin-kwirth-common';
+import { getInfo, getVersion, getResources, requestAccess } from '@jfvilas/plugin-kwirth-common';
 
 class KwirthMetricsClient {
   discoveryApi;
@@ -7,71 +7,18 @@ class KwirthMetricsClient {
     this.discoveryApi = options.discoveryApi;
     this.fetchApi = options.fetchApi;
   }
-  // +++ test
+  async getInfo() {
+    return getInfo(this.discoveryApi, this.fetchApi);
+  }
   async getVersion() {
     return getVersion(this.discoveryApi, this.fetchApi);
   }
-  // move to common
-  // async getVersion(): Promise<string> {
-  //     try {
-  //         const baseUrl = await this.discoveryApi.getBaseUrl('kwirth')
-  //         const targetUrl = `${baseUrl}/version`
-  //         const result = await this.fetchApi.fetch(targetUrl)
-  //         const data = await result.json()
-  //         if (!result.ok) {
-  //             throw new Error(`getVersion error: not ok`)
-  //         }
-  //         return data.version
-  //     }
-  //     catch (err) {
-  //         throw new Error(`getVersion error: ${err}`)
-  //     }
-  // }
-  // async getResources(entity:Entity): Promise<ClusterValidPods> {
-  //     try {
-  //         const baseUrl = await this.discoveryApi.getBaseUrl('kwirth')
-  //         const targetUrl = `${baseUrl}/start`
-  //         var payload=JSON.stringify(entity)
-  //         const result = await this.fetchApi.fetch(targetUrl, {method:'POST', body:payload, headers:{'Content-Type':'application/json'}})
-  //         const data = await result.json() as ClusterValidPods
-  //         if (!result.ok) {
-  //             throw new Error(`getResources error: not ok`)
-  //         }
-  //         return data
-  //     }
-  //     catch (err) {
-  //         throw new Error(`getResources error: ${err}`)
-  //     }
-  // }
   async getResources(entity) {
     return getResources(this.discoveryApi, this.fetchApi, entity);
   }
   async requestAccess(entity, channel, scopes) {
     return requestAccess(this.discoveryApi, this.fetchApi, entity, channel, scopes);
   }
-  //+++ move to backstage-common
-  // async requestAccess(entity:Entity, channel:string, scopes:InstanceConfigScopeEnum[]): Promise<ClusterValidPods[]> {
-  //     try {
-  //         const baseUrl = await this.discoveryApi.getBaseUrl('kwirth')
-  //         var targetUrl:URL= new URL (`${baseUrl}/access`)
-  //         targetUrl.searchParams.append('scopes',scopes.join(','))
-  //         targetUrl.searchParams.append('channel',channel)
-  //         var payload=JSON.stringify(entity)
-  //         const result = await this.fetchApi.fetch(targetUrl, {method:'POST', body:payload, headers:{'Content-Type':'application/json'}})
-  //         const data = await result.json() as ClusterValidPods[]
-  //         // we reconstruct the 'Map' from string of arrays
-  //         for (var c of data) {
-  //             c.accessKeys = new Map(JSON.parse(((c as any).accessKeys)))
-  //         }
-  //         if (!result.ok) {
-  //             throw new Error(`requestAccess error: not ok`)
-  //         }
-  //         return data
-  //     }
-  //     catch (err) {
-  //         throw new Error(`requestAccess error: ${err}`)
-  //     }
-  // }
 }
 
 export { KwirthMetricsClient };

package/dist/api/KwirthMetricsClient.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"KwirthMetricsClient.esm.js","sources":["../../src/api/KwirthMetricsClient.ts"],"sourcesContent":["/*\r\nCopyright 2024 Julio Fernandez\r\n\r\nLicensed under the Apache License, Version 2.0 (the \"License\");\r\nyou may not use this file except in compliance with the License.\r\nYou may obtain a copy of the License at\r\n\r\n    http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nUnless required by applicable law or agreed to in writing, software\r\ndistributed under the License is distributed on an \"AS IS\" BASIS,\r\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\nSee the License for the specific language governing permissions and\r\nlimitations under the License.\r\n*/\r\nimport { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api'\r\nimport { KwirthMetricsApi } from './types'\r\nimport { Entity } from '@backstage/catalog-model'\r\nimport { ClusterValidPods, getResources, getVersion, requestAccess } from '@jfvilas/plugin-kwirth-common'\r\nimport { InstanceConfigScopeEnum } from '@jfvilas/kwirth-common'\r\n\r\nexport interface KwirthMetricsClientOptions {\r\n    discoveryApi: DiscoveryApi\r\n    fetchApi: FetchApi\r\n}\r\n\r\nexport class KwirthMetricsClient implements KwirthMetricsApi {\r\n    private readonly discoveryApi: DiscoveryApi\r\n    private readonly fetchApi: FetchApi\r\n\r\n\r\n    constructor(options: KwirthMetricsClientOptions) {\r\n        this.discoveryApi = options.discoveryApi\r\n        this.fetchApi = options.fetchApi\r\n    }\r\n\r\n    // +++ test\r\n    async getVersion() : Promise<string> {\r\n        return getVersion(this.discoveryApi, this.fetchApi)\r\n    }\r\n\r\n    // move to common\r\n    // async getVersion(): Promise<string> {\r\n    //     try {\r\n    //         const baseUrl = await this.discoveryApi.getBaseUrl('kwirth')\r\n    //         const targetUrl = `${baseUrl}/version`\r\n\r\n    //         const result = await this.fetchApi.fetch(targetUrl)\r\n    //         const data = await result.json()\r\n\r\n    //         if (!result.ok) {\r\n    //             throw new Error(`getVersion error: not ok`)\r\n    //         }\r\n    //         return data.version\r\n    //     }\r\n    //     catch (err) {\r\n    //         throw new Error(`getVersion error: ${err}`)\r\n    //     }\r\n    // }\r\n\r\n    // async getResources(entity:Entity): Promise<ClusterValidPods> {\r\n    //     try {\r\n    //         const baseUrl = await this.discoveryApi.getBaseUrl('kwirth')\r\n    //         const targetUrl = `${baseUrl}/start`\r\n\r\n    //         var payload=JSON.stringify(entity)\r\n    //         const result = await this.fetchApi.fetch(targetUrl, {method:'POST', body:payload, headers:{'Content-Type':'application/json'}})\r\n    //         const data = await result.json() as ClusterValidPods\r\n\r\n    //         if (!result.ok) {\r\n    //             throw new Error(`getResources error: not ok`)\r\n    //         }\r\n    //         return data\r\n    //     }\r\n    //     catch (err) {\r\n    //         throw new Error(`getResources error: ${err}`)\r\n    //     }\r\n    // }\r\n    async getResources(entity:Entity): Promise<ClusterValidPods> {\r\n        return getResources(this.discoveryApi, this.fetchApi, entity)\r\n    }\r\n\r\n    async requestAccess(entity:Entity, channel:string, scopes:InstanceConfigScopeEnum[]): Promise<ClusterValidPods[]> {\r\n        return requestAccess(this.discoveryApi, this.fetchApi, entity, channel, scopes)\r\n    }\r\n\r\n    //+++ move to backstage-common\r\n    // async requestAccess(entity:Entity, channel:string, scopes:InstanceConfigScopeEnum[]): Promise<ClusterValidPods[]> {\r\n    //     try {\r\n    //         const baseUrl = await this.discoveryApi.getBaseUrl('kwirth')\r\n    //         var targetUrl:URL= new URL (`${baseUrl}/access`)\r\n    //         targetUrl.searchParams.append('scopes',scopes.join(','))\r\n    //         targetUrl.searchParams.append('channel',channel)\r\n\r\n    //         var payload=JSON.stringify(entity)\r\n    //         const result = await this.fetchApi.fetch(targetUrl, {method:'POST', body:payload, headers:{'Content-Type':'application/json'}})\r\n    //         const data = await result.json() as ClusterValidPods[]\r\n\r\n    //         // we reconstruct the 'Map' from string of arrays\r\n    //         for (var c of data) {\r\n    //             c.accessKeys = new Map(JSON.parse(((c as any).accessKeys)))\r\n    //         }\r\n    //         if (!result.ok) {\r\n    //             throw new Error(`requestAccess error: not ok`)\r\n    //         }\r\n    //         return data\r\n    //     }\r\n    //     catch (err) {\r\n    //         throw new Error(`requestAccess error: ${err}`)\r\n    //     }\r\n    // }\r\n\r\n}\r\n"],"names":[],"mappings":";;AA0BO,MAAM,mBAAgD,CAAA;AAAA,EACxC,YAAA;AAAA,EACA,QAAA;AAAA,EAGjB,YAAY,OAAqC,EAAA;AAC7C,IAAA,IAAA,CAAK,eAAe,OAAQ,CAAA,YAAA;AAC5B,IAAA,IAAA,CAAK,WAAW,OAAQ,CAAA,QAAA;AAAA;AAC5B;AAAA,EAGA,MAAM,UAA+B,GAAA;AACjC,IAAA,OAAO,UAAW,CAAA,IAAA,CAAK,YAAc,EAAA,IAAA,CAAK,QAAQ,CAAA;AAAA;AACtD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuCA,MAAM,aAAa,MAA0C,EAAA;AACzD,IAAA,OAAO,YAAa,CAAA,IAAA,CAAK,YAAc,EAAA,IAAA,CAAK,UAAU,MAAM,CAAA;AAAA;AAChE,EAEA,MAAM,aAAA,CAAc,MAAe,EAAA,OAAA,EAAgB,MAA+D,EAAA;AAC9G,IAAA,OAAO,cAAc,IAAK,CAAA,YAAA,EAAc,KAAK,QAAU,EAAA,MAAA,EAAQ,SAAS,MAAM,CAAA;AAAA;AAClF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BJ;;;;"}
+{"version":3,"file":"KwirthMetricsClient.esm.js","sources":["../../src/api/KwirthMetricsClient.ts"],"sourcesContent":["/*\r\nCopyright 2024 Julio Fernandez\r\n\r\nLicensed under the Apache License, Version 2.0 (the \"License\");\r\nyou may not use this file except in compliance with the License.\r\nYou may obtain a copy of the License at\r\n\r\n    http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nUnless required by applicable law or agreed to in writing, software\r\ndistributed under the License is distributed on an \"AS IS\" BASIS,\r\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\nSee the License for the specific language governing permissions and\r\nlimitations under the License.\r\n*/\r\nimport { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api'\r\nimport { KwirthMetricsApi } from './types'\r\nimport { Entity } from '@backstage/catalog-model'\r\nimport { ClusterValidPods, getInfo, getResources, getVersion, IBackendInfo, requestAccess } from '@jfvilas/plugin-kwirth-common'\r\nimport { InstanceConfigScopeEnum } from '@jfvilas/kwirth-common'\r\n\r\nexport interface KwirthMetricsClientOptions {\r\n    discoveryApi: DiscoveryApi\r\n    fetchApi: FetchApi\r\n}\r\n\r\nexport class KwirthMetricsClient implements KwirthMetricsApi {\r\n    private readonly discoveryApi: DiscoveryApi\r\n    private readonly fetchApi: FetchApi\r\n\r\n\r\n    constructor(options: KwirthMetricsClientOptions) {\r\n        this.discoveryApi = options.discoveryApi\r\n        this.fetchApi = options.fetchApi\r\n    }\r\n\r\n    async getInfo() : Promise<IBackendInfo> {\r\n        return getInfo(this.discoveryApi, this.fetchApi)\r\n    }\r\n\r\n    async getVersion() : Promise<string> {\r\n        return getVersion(this.discoveryApi, this.fetchApi)\r\n    }\r\n\r\n    async getResources(entity:Entity): Promise<ClusterValidPods> {\r\n        return getResources(this.discoveryApi, this.fetchApi, entity)\r\n    }\r\n\r\n    async requestAccess(entity:Entity, channel:string, scopes:InstanceConfigScopeEnum[]): Promise<ClusterValidPods[]> {\r\n        return requestAccess(this.discoveryApi, this.fetchApi, entity, channel, scopes)\r\n    }\r\n\r\n}\r\n"],"names":[],"mappings":";;AA0BO,MAAM,mBAAA,CAAgD;AAAA,EACxC,YAAA;AAAA,EACA,QAAA;AAAA,EAGjB,YAAY,OAAA,EAAqC;AAC7C,IAAA,IAAA,CAAK,eAAe,OAAA,CAAQ,YAAA;AAC5B,IAAA,IAAA,CAAK,WAAW,OAAA,CAAQ,QAAA;AAAA,EAC5B;AAAA,EAEA,MAAM,OAAA,GAAkC;AACpC,IAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,YAAA,EAAc,IAAA,CAAK,QAAQ,CAAA;AAAA,EACnD;AAAA,EAEA,MAAM,UAAA,GAA+B;AACjC,IAAA,OAAO,UAAA,CAAW,IAAA,CAAK,YAAA,EAAc,IAAA,CAAK,QAAQ,CAAA;AAAA,EACtD;AAAA,EAEA,MAAM,aAAa,MAAA,EAA0C;AACzD,IAAA,OAAO,YAAA,CAAa,IAAA,CAAK,YAAA,EAAc,IAAA,CAAK,UAAU,MAAM,CAAA;AAAA,EAChE;AAAA,EAEA,MAAM,aAAA,CAAc,MAAA,EAAe,OAAA,EAAgB,MAAA,EAA+D;AAC9G,IAAA,OAAO,cAAc,IAAA,CAAK,YAAA,EAAc,KAAK,QAAA,EAAU,MAAA,EAAQ,SAAS,MAAM,CAAA;AAAA,EAClF;AAEJ;;;;"}

package/dist/api/types.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.esm.js","sources":["../../src/api/types.ts"],"sourcesContent":["/*\r\nCopyright 2024 Julio Fernandez\r\n\r\nLicensed under the Apache License, Version 2.0 (the \"License\");\r\nyou may not use this file except in compliance with the License.\r\nYou may obtain a copy of the License at\r\n\r\n    http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nUnless required by applicable law or agreed to in writing, software\r\ndistributed under the License is distributed on an \"AS IS\" BASIS,\r\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\nSee the License for the specific language governing permissions and\r\nlimitations under the License.\r\n*/\r\nimport { Entity } from '@backstage/catalog-model'\r\nimport { createApiRef } from '@backstage/core-plugin-api'\r\nimport { InstanceConfigScopeEnum } from '@jfvilas/kwirth-common'\r\nimport { ClusterValidPods } from '@jfvilas/plugin-kwirth-common'\r\n\r\nexport interface KwirthMetricsApi {\r\n    requestAccess(entity:Entity, channel:string, scopes:InstanceConfigScopeEnum[]): Promise<ClusterValidPods[]>\r\n    getResources(entity:Entity): Promise<ClusterValidPods>\r\n    getVersion(): Promise<string>\r\n}\r\n\r\nexport const kwirthMetricsApiRef = createApiRef<KwirthMetricsApi>({\r\n  id: 'plugin.kwirthmetrics.api',\r\n})\r\n"],"names":[],"mappings":";;AA0BO,MAAM,sBAAsB,YAA+B,CAAA;AAAA,EAChE,EAAI,EAAA;AACN,CAAC;;;;"}
+{"version":3,"file":"types.esm.js","sources":["../../src/api/types.ts"],"sourcesContent":["/*\r\nCopyright 2024 Julio Fernandez\r\n\r\nLicensed under the Apache License, Version 2.0 (the \"License\");\r\nyou may not use this file except in compliance with the License.\r\nYou may obtain a copy of the License at\r\n\r\n    http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nUnless required by applicable law or agreed to in writing, software\r\ndistributed under the License is distributed on an \"AS IS\" BASIS,\r\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\nSee the License for the specific language governing permissions and\r\nlimitations under the License.\r\n*/\r\nimport { Entity } from '@backstage/catalog-model'\r\nimport { createApiRef } from '@backstage/core-plugin-api'\r\nimport { InstanceConfigScopeEnum } from '@jfvilas/kwirth-common'\r\nimport { ClusterValidPods, IBackendInfo } from '@jfvilas/plugin-kwirth-common'\r\n\r\nexport interface KwirthMetricsApi {\r\n    requestAccess(entity:Entity, channel:string, scopes:InstanceConfigScopeEnum[]): Promise<ClusterValidPods[]>\r\n    getResources(entity:Entity): Promise<ClusterValidPods>\r\n    getVersion(): Promise<string>\r\n    getInfo(): Promise<IBackendInfo>\r\n}\r\n\r\nexport const kwirthMetricsApiRef = createApiRef<KwirthMetricsApi>({\r\n  id: 'plugin.kwirthmetrics.api',\r\n})\r\n"],"names":[],"mappings":";;AA2BO,MAAM,sBAAsB,YAAA,CAA+B;AAAA,EAChE,EAAA,EAAI;AACN,CAAC;;;;"}

package/dist/components/{EntityKwirthMetricsContent/EntityKwirthMetricsContent.esm.js → EntityKwirthMetricsContent.esm.js}

@@ -2,20 +2,12 @@ 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_BACKSTAGE_KUBERNETES_LABELID, ANNOTATION_BACKSTAGE_KUBERNETES_LABELSELECTOR } from '@jfvilas/plugin-kwirth-common';
+import { isKwirthAvailable, ANNOTATION_BACKSTAGE_KUBERNETES_LABELID, ANNOTATION_BACKSTAGE_KUBERNETES_LABELSELECTOR, getPodList, getContainerList } from '@jfvilas/plugin-kwirth-common';
 import { useEntity, MissingAnnotationEmptyState } from '@backstage/plugin-catalog-react';
-import { kwirthMetricsApiRef } from '../../api/types.esm.js';
+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 { ShowError, ComponentNotFound, ErrorType, ClusterList, KwirthNews, ObjectSelector, StatusLog } from '@jfvilas/plugin-kwirth-frontend';
+import { Box, Grid, Card, CardHeader, Typography, FormControl, Select, MenuItem, Checkbox, Divider, CardContent, IconButton, Tooltip as Tooltip$1 } from '@material-ui/core';
 import PlayIcon from '@material-ui/icons/PlayArrow';
 import PauseIcon from '@material-ui/icons/Pause';
 import StopIcon from '@material-ui/icons/Stop';
@@ -23,14 +15,15 @@ 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 KwirthMetricsLogo from '../assets/kwirthmetrics-logo.svg';
 import { BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar, LabelList, AreaChart, Area, LineChart, Line, ResponsiveContainer } from 'recharts';
+import { Options } from './Options.esm.js';
 
 const EntityKwirthMetricsContent = (props) => {
   const kwirthMetricsApi = useApi(kwirthMetricsApiRef);
   const alertApi = useApi(alertApiRef);
   const { entity } = useEntity();
-  const [clusterValidPods, setClusterValidPods] = useState([]);
+  const [validClusters, setValidClusters] = useState([]);
   const [selectedClusterName, setSelectedClusterName] = useState("");
   const [selectedNamespaces, setSelectedNamespaces] = useState([]);
   const [selectedPodNames, setSelectedPodNames] = useState([]);
@@ -44,10 +37,19 @@ const EntityKwirthMetricsContent = (props) => {
   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 kwirthMetricsOptionsRef = useRef({
+    depth: props.depth !== void 0 ? props.depth : 10,
+    width: props.width !== void 0 ? props.width : 3,
+    interval: props.interval !== void 0 ? props.interval : 15,
+    chart: props.chart !== void 0 ? props.chart : "area",
+    aggregate: false,
+    merge: false,
+    stack: false
+  });
   const [showStatusDialog, setShowStatusDialog] = useState(false);
   const [statusLevel, setStatusLevel] = useState(SignalMessageLevelEnum.INFO);
   const [backendVersion, setBackendVersion] = useState("");
+  const [backendInfo, setBackendInfo] = useState();
   const [_refresh, setRefresh] = useState(0);
   const [allMetrics, setAllMetrics] = useState(
     [
@@ -61,10 +63,11 @@ const EntityKwirthMetricsContent = (props) => {
   );
   const { loading, error } = useAsync(async () => {
     if (backendVersion === "") setBackendVersion(await kwirthMetricsApi.getVersion());
+    if (!backendInfo) setBackendInfo(await kwirthMetricsApi.getInfo());
     let reqScopes = [InstanceConfigScopeEnum.STREAM];
     if (props.enableRestart) reqScopes.push(InstanceConfigScopeEnum.RESTART);
     let data = await kwirthMetricsApi.requestAccess(entity, "metrics", reqScopes);
-    setClusterValidPods(data);
+    setValidClusters(data);
   });
   const colours = [
     "#6e5bb8",
@@ -148,25 +151,32 @@ const EntityKwirthMetricsContent = (props) => {
     setStarted(false);
     paused.current = true;
   };
-  const clickStop = () => {
+  const onClickStop = () => {
     setStarted(false);
     setStopped(true);
     paused.current = false;
     stopMetricsViewer();
   };
   const onSelectCluster = async (clusterName) => {
+    if (started) onClickStop();
     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);
+      let cluster = validClusters.find((cluster2) => cluster2.name === clusterName);
+      if (cluster && cluster.pods && cluster.metrics) {
+        cluster.metrics.sort((a, _b) => a.metric.startsWith("kwirth") ? -1 : 1);
         setAllMetrics(cluster.metrics);
+        let validNamespaces = Array.from(new Set(cluster.pods.map((pod) => pod.namespace)));
+        if (validNamespaces.length === 1) {
+          setSelectedNamespaces(validNamespaces);
+          let podList = getPodList(cluster.pods, validNamespaces);
+          setSelectedPodNames(podList.map((pod) => pod.name));
+          setSelectedContainerNames(getContainerList(cluster.pods, validNamespaces, podList.map((pod) => pod.name)));
+        } else {
+          setSelectedNamespaces([]);
+        }
       }
     }
   };
@@ -196,24 +206,28 @@ const EntityKwirthMetricsContent = (props) => {
             setInstance(instanceMessage.instance);
           else {
             let signalMessage = instanceMessage;
-            alertApi.post({ message: signalMessage.text, severity: "error", display: "transient" });
+            if (signalMessage.text) {
+              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;
+          if (signalMessage.text) {
+            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;
@@ -249,12 +263,12 @@ const EntityKwirthMetricsContent = (props) => {
     }
   };
   const websocketOnOpen = (ws) => {
-    let cluster = clusterValidPods.find((cluster2) => cluster2.name === selectedClusterName);
+    let cluster = validClusters.find((cluster2) => cluster2.name === selectedClusterName);
     if (!cluster) {
       addMessage(SignalMessageLevelEnum.ERROR, "Cluster not found");
       return;
     }
-    let pods = cluster.data.filter((p2) => selectedNamespaces.includes(p2.namespace));
+    let pods = cluster.pods.filter((p2) => selectedNamespaces.includes(p2.namespace));
     if (!pods || pods.length === 0) {
       addMessage(SignalMessageLevelEnum.ERROR, "Pod not found");
       return;
@@ -298,7 +312,7 @@ const EntityKwirthMetricsContent = (props) => {
     }
   };
   const startMetricsViewer = () => {
-    let cluster = clusterValidPods.find((cluster2) => cluster2.name === selectedClusterName);
+    let cluster = validClusters.find((cluster2) => cluster2.name === selectedClusterName);
     if (!cluster) {
       addMessage(SignalMessageLevelEnum.ERROR, "Cluster not found");
       return;
@@ -328,28 +342,25 @@ const EntityKwirthMetricsContent = (props) => {
   };
   const actionButtons = () => {
     let hasStreamKey = false, hasRestartKey = false;
-    let cluster = clusterValidPods.find((cluster2) => cluster2.name === selectedClusterName);
+    let cluster = validClusters.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)));
+    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: onClickStop, 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 prepareText = (txt) => {
+      return txt ? txt.length > 25 ? txt.substring(0, 25) + "..." : txt : "N/A";
+    };
+    return /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "row" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, prepareText(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" } }))));
   };
   const statusClear = (level) => {
     setStatusMessages(statusMessages.filter((m) => m.level !== level));
@@ -382,7 +393,7 @@ const EntityKwirthMetricsContent = (props) => {
     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) => {
+        result = /* @__PURE__ */ React.createElement(Grid, null, /* @__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;
@@ -400,7 +411,16 @@ const EntityKwirthMetricsContent = (props) => {
         ));
         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));
+    let title = metric.metric.replaceAll("_", " ");
+    title = title[0].toLocaleUpperCase() + title.substring(1);
+    title = title.replaceAll("cpu", "CPU");
+    title = title.replaceAll(" fs ", " FS ");
+    title = title.replaceAll(" io ", " IO ");
+    title = title.replaceAll("oom", "OOM");
+    title = title.replaceAll("nvm", "NVM");
+    title = title.replaceAll("rss", "RSS");
+    title = title.replaceAll("failcnt", "fail count");
+    return /* @__PURE__ */ React.createElement(Grid, { style: { width: "100%", marginBottom: 32 } }, /* @__PURE__ */ React.createElement(Tooltip$1, { title: /* @__PURE__ */ React.createElement(Typography, { style: { fontSize: 12 } }, /* @__PURE__ */ React.createElement("b", null, metric.metric), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("br", null), metric.help) }, /* @__PURE__ */ React.createElement(Typography, { align: "center" }, title)), /* @__PURE__ */ React.createElement(ResponsiveContainer, { height, key: metric + JSON.stringify(names) }, result));
   };
   const showMetrics = (options) => {
     if (!metricsMessages || metricsMessages.length === 0) {
@@ -409,6 +429,8 @@ const EntityKwirthMetricsContent = (props) => {
       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 cluster = validClusters.find((cluster2) => cluster2.name === selectedClusterName);
+    if (!cluster) return;
     let data = /* @__PURE__ */ new Map();
     for (let metricsMessage of metricsMessages) {
       let ts = new Date(metricsMessage.timestamp);
@@ -428,10 +450,11 @@ const EntityKwirthMetricsContent = (props) => {
       var firstAsset = assetNames[0];
       var allMetrics2 = Array.from(new Set(data.get(firstAsset).keys()));
       for (let metric of allMetrics2) {
+        let metricDefinition = cluster.metrics?.find((m) => m.metric === metric);
         var series = assetNames.map((an) => {
           return data.get(an).get(metric);
         });
-        allCharts.push(/* @__PURE__ */ React.createElement(React.Fragment, null, addChart(options, metric, assetNames, series, "")));
+        allCharts.push(/* @__PURE__ */ React.createElement(React.Fragment, null, addChart(options, metricDefinition, assetNames, series, "")));
       }
       let rows = [];
       for (let i2 = 0; i2 < allCharts.length; i2 += options.width) {
@@ -442,7 +465,8 @@ const EntityKwirthMetricsContent = (props) => {
       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 metricDefinition = cluster.metrics?.find((m) => m.metric === metric);
+          return /* @__PURE__ */ React.createElement(React.Fragment, null, addChart(options, metricDefinition, [asset], [serie], colours[index]));
         });
       });
       let rows = [];
@@ -467,7 +491,7 @@ const EntityKwirthMetricsContent = (props) => {
     }]);
   };
   const onClickRestart = () => {
-    let cluster = clusterValidPods.find((cluster2) => cluster2.name === selectedClusterName);
+    let cluster = validClusters.find((cluster2) => cluster2.name === selectedClusterName);
     if (!cluster) {
       addMessage(SignalMessageLevelEnum.ERROR, "No cluster selected");
       return;
@@ -481,7 +505,7 @@ const EntityKwirthMetricsContent = (props) => {
       addMessage(SignalMessageLevelEnum.ERROR, "No instance has been established");
       return;
     }
-    let pods = cluster.data.filter((pod) => selectedNamespaces.includes(pod.namespace));
+    let pods = cluster.pods.filter((pod) => selectedNamespaces.includes(pod.namespace));
     for (let pod of pods) {
       let om = {
         msgtype: "opsmessage",
@@ -512,14 +536,9 @@ const EntityKwirthMetricsContent = (props) => {
       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_BACKSTAGE_KUBERNETES_LABELID, ANNOTATION_BACKSTAGE_KUBERNETES_LABELSELECTOR] }), 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 }));
+  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_BACKSTAGE_KUBERNETES_LABELID, ANNOTATION_BACKSTAGE_KUBERNETES_LABELSELECTOR] }), isKwirthAvailable(entity) && !loading && validClusters && validClusters.length === 0 && /* @__PURE__ */ React.createElement(ComponentNotFound, { error: ErrorType.NO_CLUSTERS, entity }), isKwirthAvailable(entity) && !loading && validClusters && validClusters.length > 0 && validClusters.reduce((sum, cluster) => sum + cluster.pods.length, 0) === 0 && /* @__PURE__ */ React.createElement(ComponentNotFound, { error: ErrorType.NO_PODS, entity }), isKwirthAvailable(entity) && !loading && validClusters && validClusters.length > 0 && validClusters.reduce((sum, cluster) => sum + cluster.pods.length, 0) > 0 && /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex" } }, /* @__PURE__ */ React.createElement(Box, { sx: { width: "200px", maxWidth: "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: validClusters, selectedClusterName, onSelect: onSelectCluster }))), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(Options, { metricsOptions: kwirthMetricsOptionsRef.current, selectedNamespaces, selectedPodNames, selectedContainerNames, onChange: onChangeOptions, disabled: selectedNamespaces.length === 0 || paused.current }))), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(KwirthNews, { latestVersions: backendInfo, backendVersion }))))), /* @__PURE__ */ React.createElement(Box, { sx: { flexGrow: 1, p: 1, marginLeft: "8px" } }, !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(Grid, { container: true, style: { alignItems: "end" } }, /* @__PURE__ */ React.createElement(Grid, { item: true, style: { width: "66%" } }, /* @__PURE__ */ React.createElement(Typography, { style: { marginLeft: 14 } }, /* @__PURE__ */ React.createElement(ObjectSelector, { cluster: validClusters.find((cluster) => cluster.name === selectedClusterName), onSelect: onSelectObject, disabled: selectedClusterName === "" || started || paused.current, selectedNamespaces, selectedPodNames, selectedContainerNames, scope: InstanceConfigScopeEnum.STREAM }))), /* @__PURE__ */ React.createElement(Grid, { item: true, style: { width: "33%", marginLeft: 0, marginBottom: 6, maxWidth: "33%" } }, /* @__PURE__ */ React.createElement(FormControl, { style: { width: "100%" } }, /* @__PURE__ */ React.createElement(Select, { value: selectedMetrics, MenuProps: { variant: "menu" }, multiple: true, onChange: onMetricsChange, renderValue: (selected) => selected.join(", ").substring(0, 40) + "...", disabled: selectedClusterName === "" || selectedNamespaces.length === 0 || started }, allMetrics.map(
+    (m) => /* @__PURE__ */ React.createElement(MenuItem, { key: m.metric, value: m.metric, style: { marginTop: "-8px", marginBottom: "-8px" } }, /* @__PURE__ */ React.createElement(Checkbox, { checked: selectedMetrics.includes(m.metric), style: { marginTop: "-8px", marginBottom: "-8px" } }), /* @__PURE__ */ React.createElement(Typography, { style: { marginTop: "-8px", marginBottom: "-8px" } }, m.metric))
+  ))))), /* @__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 };