@jfvilas/plugin-kwirth-metrics 0.12.7 → 0.12.9

package/README.md

@@ -3,14 +3,15 @@ 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.13.0|0.4.131|
+|0.12.8|0.4.45|
 |0.12.5|0.4.20|
 
 
-
 ## What for?
 This Backstage plugin allows you viewing **Kubernetes metrics** in real time that are linked to your Backstage entities. It's very important to understand that for this plugin to work you need to install Kwirth on your Kubernetes cluster (aside from Kwirth Backstage backend plugin), that is, this plugin is just another frontend for [Kwirth](https://jfvilas.github.io/kwirth).
 
@@ -38,14 +39,15 @@ 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:
 
 1. A Backstage user searchs for an entity in the Backstage.
 2. In the entity page there will be a new tab named 'KWIRTHMETRICS'.
 3. When the user clicks on KWIRTHMETRICS the frontend plugin sends a request to the backend plugin asking for metrics information on several Kubernetes clusters.
-4. The backend plugin sends requests to the Kwirth instances that are running on all the clusters previously added to Backstage (via app-config YAML). These requests ask for the following: *'Tell me all the pods that are labeled with a specific kubernetes-id label and do correspond with the entity I'm looking for'*. In response to this query, each Kwirth instance answers with a list of pods and the namespaces where they are running.
+4. Next step is to identify the Kubernetes objects that match requested entity. As well as it occurs with other Backstage Kwirth plugins, Kwirth implements two strategies for getting the listo of kubernetes objects that match:
+  - *Option 1*. Your catalog-info contains an annotation of this type: **backstage.io/kubernetes-id**. In this case, the Backstage Kwirth backend plugin sends requests to the Kwirth instances that are running inside all the clusters previously added to Backstage (via app-config YAML). These requests ask for the following: *'Tell me all the pods that are labeled with the kubernetes-id label and do correspond with the entity I'm looking for'*. In response to this query, each Kwirth instance answers with a list of pods and the namespaces where they are running.
+  - *Option 2*. Your catalog-info contains an annotation of this type: **backstage.io/kubernetes-label-selector**. In this case, the Backstage Kwirth backend plugin sends requests to the Kwirth instances that are running inside all the clusters previously added to Backstage (via app-config YAML). These requests ask for the following: *'Tell me all the pods whose labels match with the kubernetes-label-selector label selector*. In response to this query, each Kwirth instance answers with a list of pods and the namespaces where they are running.
 5. The backend plugin checks the permissions of the connected user and prunes the pods list removing the ones that the user has not access to.
 6. With the final pod list, the backend plugin sends requests to the Kwirth instances on the clusters asking for specific API Keys for streaming metrics and/or restarting Kubernetes objects.
 7. The backend plugin then asks for a metrics list, that is, a list of the metrics the Kubernetes cluster can offer (the ones managed by the kubelet)
@@ -63,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.
@@ -75,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>
@@ -92,16 +95,45 @@ 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. Add `backstage.io/kubernetes-id` annotation to your `catalog-info.yaml` for the entities deployed to Kubernetes whose metrics you want to stream. This is the same annotation that the Kubernetes core plugin uses, so, maybe you already have added it to your components. It is also the same annotation other Kwirth plugins use.
+2. Label your catalog-info according to one of these two startegies:
+
+- **Strategy 1: one-to-one**. Add `backstage.io/kubernetes-id` annotation to your `catalog-info.yaml` for the entities deployed to Kubernetes you want to work with on Backstage. This is the same annotation that the Kubernetes core plugin uses, so, maybe you already have added it to your components. Exmaple:
 
     ```yaml
     metadata:
       annotations:
-        backstage.io/kubernetes-id: entity-name
+        backstage.io/kubernetes-id: entity001
     ```
 
-3. Add proper **labels** to your Kubernetes objects so Backstage can *link* **forward and backward** the Backstage entities with the Kubernetes objects. To do this, you need to add `labels` to your Kubernetes YAML objects (please, don't get confused: **annotations in Backstage YAML, labels in Kubernetes YAML**). This is an example of a typical Kubernetes deployment with the required label:
+- **Strategy 2: use selectors**. Add `backstage.io/kubernetes-label-selector` annotation to your `catalog-info.yaml` for the entities you want to work with. This is the same annotation that the Kubernetes core plugin uses, so, maybe you already have added it to your components. The label selector value follows Kubernetes [label selector semantics](https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/). Example:
+
+    ```yaml
+    metadata:
+      annotations:
+        backstage.io/kubernetes-id: 'app=core,artifact=backend'
+    ```
+
+3. Add proper **labels** to your Kubernetes objects so Backstage can *link* forward and backward the Backstage entities with the Kubernetes objects. To do this, you need to add `labels` to your Kubernetes YAML objects (please, don't get confused: **annotations in Backstage YAML, labels in Kubernetes YAML**).
+
+- ***VERY IMPORTANT NOTE:*** If you opted for using label selectors **you have nothing new to add to your pods**.
+
+- If you use labels (no label selectors), please note that the kubernetes-id label is **on the deployment** and on the **spec pod template** also. This is an example of a typical Kubernetes deployment with the required label:
 
     ```yaml
     apiVersion: apps/v1
@@ -127,9 +159,6 @@ If everyting is correctly configured and tagged, the user should see a list of c
         ...    
     ```
 
-    Please note that the kubernetes-id label is **on the deployment** and on the **spec pod template** also.
-
-
 ## Ready, set, go!
 If you performed all these steps you would see a 'KwirthMetrics' tab in your **Entity Page**, like this one:
 

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 };