frontend: Resource: Add environment variables display for containers

gambtho · gambtho · commit 6dd2c8ee7abf · 2026-02-01T15:16:51.000-05:00
diff --git a/frontend/src/components/common/Resource/Resource.tsx b/frontend/src/components/common/Resource/Resource.tsx
diff --git a/frontend/src/components/secret/Details.tsx b/frontend/src/components/secret/Details.tsx
@@ -60,12 +60,13 @@ export default function SecretDetails(props: {
           {
             id: 'headlamp.secrets-data',
             section: () => {
-              const initialData = _.mapValues(item.data, (v: string) => Base64.decode(v));
+              // Keep data in base64 format - SecretField handles decoding for display
+              const initialData = item.data || {};
               const [data, setData] = React.useState(initialData);
               const lastDataRef = React.useRef(initialData);
 
               React.useEffect(() => {
-                const newData = _.mapValues(item.data, (v: string) => Base64.decode(v));
+                const newData = item.data || {};
                 if (!_.isEqual(newData, lastDataRef.current)) {
                   if (_.isEqual(data, lastDataRef.current)) {
                     setData(newData);
@@ -75,12 +76,13 @@ export default function SecretDetails(props: {
               }, [item.data]);
 
               const handleFieldChange = (key: string, newValue: string) => {
-                setData(prev => ({ ...prev, [key]: newValue }));
+                // User edits in plaintext, encode back to base64 for storage
+                setData(prev => ({ ...prev, [key]: Base64.encode(newValue) }));
               };
 
               const handleSave = () => {
-                const encodedData = _.mapValues(data, (v: string) => Base64.encode(v));
-                const updatedSecret = { ...item.jsonData, data: encodedData };
+                // Data is already base64 encoded
+                const updatedSecret = { ...item.jsonData, data };
                 dispatch(
                   clusterAction(() => item.update(updatedSecret), {
                     startMessage: t('translation|Applying changes to {{ itemName }}…', {
diff --git a/frontend/src/components/secret/__snapshots__/Details.WithBase.stories.storyshot b/frontend/src/components/secret/__snapshots__/Details.WithBase.stories.storyshot
@@ -280,7 +280,7 @@
                           class="MuiInputBase-input MuiInput-input Mui-readOnly MuiInputBase-readOnly css-1x51dt5-MuiInputBase-input-MuiInput-input"
                           readonly=""
                           type="password"
-                          value="******"
+                          value="••••••••"
                         />
                       </div>
                     </div>
@@ -334,7 +334,7 @@
                           class="MuiInputBase-input MuiInput-input Mui-readOnly MuiInputBase-readOnly css-1x51dt5-MuiInputBase-input-MuiInput-input"
                           readonly=""
                           type="password"
-                          value="******"
+                          value="••••••••"
                         />
                       </div>
                     </div>
@@ -388,7 +388,7 @@
                           class="MuiInputBase-input MuiInput-input Mui-readOnly MuiInputBase-readOnly css-1x51dt5-MuiInputBase-input-MuiInput-input"
                           readonly=""
                           type="password"
-                          value="******"
+                          value="••••••••"
                         />
                       </div>
                     </div>
diff --git a/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithService.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithService.stories.storyshot
@@ -334,7 +334,7 @@
                           class="MuiInputBase-input MuiInput-input Mui-readOnly MuiInputBase-readOnly css-1x51dt5-MuiInputBase-input-MuiInput-input"
                           readonly=""
                           type="password"
-                          value="******"
+                          value="••••••••"
                         />
                       </div>
                     </div>
diff --git a/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithURL.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithURL.stories.storyshot
@@ -331,7 +331,7 @@
                           class="MuiInputBase-input MuiInput-input Mui-readOnly MuiInputBase-readOnly css-1x51dt5-MuiInputBase-input-MuiInput-input"
                           readonly=""
                           type="password"
-                          value="******"
+                          value="••••••••"
                         />
                       </div>
                     </div>
diff --git a/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithService.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithService.stories.storyshot
@@ -334,7 +334,7 @@
                           class="MuiInputBase-input MuiInput-input Mui-readOnly MuiInputBase-readOnly css-1x51dt5-MuiInputBase-input-MuiInput-input"
                           readonly=""
                           type="password"
-                          value="******"
+                          value="••••••••"
                         />
                       </div>
                     </div>
diff --git a/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithURL.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithURL.stories.storyshot
@@ -331,7 +331,7 @@
                           class="MuiInputBase-input MuiInput-input Mui-readOnly MuiInputBase-readOnly css-1x51dt5-MuiInputBase-input-MuiInput-input"
                           readonly=""
                           type="password"
-                          value="******"
+                          value="••••••••"
                         />
                       </div>
                     </div>
diff --git a/frontend/src/i18n/locales/de/translation.json b/frontend/src/i18n/locales/de/translation.json
@@ -673,5 +673,6 @@
   "\"{{metricName}}\" on pods": "\"{{metricName}}\" auf Pods",
   "resource {{resourceName}} on pods": "Ressource {{resourceName}} auf Pods",
   "resource {{resourceName}} of container {{containerName}} on pods": "Ressource {{resourceName}} des Containers {{containerName}} auf Pods",
-  "Warning. Incompatible plugins disabled: ({{ pluginList }})": "Warnung. Inkompatible Plugins deaktiviert: ({{ pluginList }})"
+  "Warning. Incompatible plugins disabled: ({{ pluginList }})": "Warnung. Inkompatible Plugins deaktiviert: ({{ pluginList }})",
+  "This value may differ in the container, since the pod is older than {{from}}": "Dieser Wert kann im Container abweichen, da der Pod älter ist als {{from}}"
 }
diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json
@@ -673,5 +673,6 @@
   "\"{{metricName}}\" on pods": "\"{{metricName}}\" on pods",
   "resource {{resourceName}} on pods": "resource {{resourceName}} on pods",
   "resource {{resourceName}} of container {{containerName}} on pods": "resource {{resourceName}} of container {{containerName}} on pods",
-  "Warning. Incompatible plugins disabled: ({{ pluginList }})": "Warning. Incompatible plugins disabled: ({{ pluginList }})"
+  "Warning. Incompatible plugins disabled: ({{ pluginList }})": "Warning. Incompatible plugins disabled: ({{ pluginList }})",
+  "This value may differ in the container, since the pod is older than {{from}}": "This value may differ in the container, since the pod is older than {{from}}"
 }
diff --git a/frontend/src/i18n/locales/es/translation.json b/frontend/src/i18n/locales/es/translation.json
@@ -677,5 +677,6 @@
   "\"{{metricName}}\" on pods": "\"{{metricName}}\" en pods",
   "resource {{resourceName}} on pods": "recurso {{resourceName}} en pods",
   "resource {{resourceName}} of container {{containerName}} on pods": "recurso {{resourceName}} del contenedor {{containerName}} en pods",
-  "Warning. Incompatible plugins disabled: ({{ pluginList }})": "Advertencia. Plugins incompatibles deshabilitados: ({{ pluginList }})"
+  "Warning. Incompatible plugins disabled: ({{ pluginList }})": "Advertencia. Plugins incompatibles deshabilitados: ({{ pluginList }})",
+  "This value may differ in the container, since the pod is older than {{from}}": "Este valor puede diferir en el contenedor, ya que el pod es más antiguo que {{from}}"
 }
diff --git a/frontend/src/i18n/locales/fr/translation.json b/frontend/src/i18n/locales/fr/translation.json
@@ -677,5 +677,6 @@
   "\"{{metricName}}\" on pods": "\"{{metricName}}\" sur les pods",
   "resource {{resourceName}} on pods": "ressource {{resourceName}} sur les pods",
   "resource {{resourceName}} of container {{containerName}} on pods": "ressource {{resourceName}} du conteneur {{containerName}} sur les pods",
-  "Warning. Incompatible plugins disabled: ({{ pluginList }})": "Attention. Plugins incompatibles désactivés : ({{ pluginList }})"
+  "Warning. Incompatible plugins disabled: ({{ pluginList }})": "Attention. Plugins incompatibles désactivés : ({{ pluginList }})",
+  "This value may differ in the container, since the pod is older than {{from}}": "Cette valeur peut différer dans le conteneur, car le pod est plus ancien que {{from}}"
 }
diff --git a/frontend/src/i18n/locales/pt/translation.json b/frontend/src/i18n/locales/pt/translation.json
@@ -677,5 +677,6 @@
   "\"{{metricName}}\" on pods": "\"{{metricName}}\" em pods",
   "resource {{resourceName}} on pods": "resource {{resourceName}} em pods",
   "resource {{resourceName}} of container {{containerName}} on pods": "resource {{resourceName}} do container {{containerName}} em pods",
-  "Warning. Incompatible plugins disabled: ({{ pluginList }})": "Aviso. Plugins incompatíveis desactivados: ({{ pluginList }})"
+  "Warning. Incompatible plugins disabled: ({{ pluginList }})": "Aviso. Plugins incompatíveis desactivados: ({{ pluginList }})",
+  "This value may differ in the container, since the pod is older than {{from}}": "Este valor pode diferir no contentor, pois o pod é mais antigo que {{from}}"
 }
diff --git a/frontend/src/lib/units.test.ts b/frontend/src/lib/units.test.ts
@@ -15,7 +15,7 @@
  */
 
 import * as fc from 'fast-check';
-import { parseCpu, parseRam, unparseCpu, unparseRam } from './units';
+import { divideK8sResources, parseCpu, parseRam, unparseCpu, unparseRam } from './units';
 
 describe('parseRam', () => {
   it('should parse simple numbers', () => {
@@ -169,3 +169,52 @@ describe('unparseCpu', () => {
     expect(unparseCpu('1333333')).toEqual({ value: 1.33, unit: 'm' });
   });
 });
+
+describe('divideK8sResources', () => {
+  it('should divide two resource quantities with binary units', () => {
+    expect(divideK8sResources('1Gi', '1Mi')).toBe(1024);
+    expect(divideK8sResources('2Gi', '1Gi')).toBe(2);
+    expect(divideK8sResources('1Mi', '1Ki')).toBe(1024);
+  });
+
+  it('should handle plain numbers', () => {
+    expect(divideK8sResources('1000', '100')).toBe(10);
+    expect(divideK8sResources('1', '1')).toBe(1);
+  });
+
+  it('should handle decimal units', () => {
+    expect(divideK8sResources('1M', '1K')).toBe(1000);
+    expect(divideK8sResources('1G', '1M')).toBe(1000);
+  });
+
+  it('should handle mixed units', () => {
+    // 1Gi = 1073741824 bytes, 1G = 1000000000 bytes
+    expect(divideK8sResources('1Gi', '1G')).toBeCloseTo(1.073741824, 5);
+  });
+
+  it('should handle CPU units when resourceType is cpu', () => {
+    // 500m (millicores) / 1 (core) = 0.5
+    expect(divideK8sResources('500m', '1', 'cpu')).toBe(0.5);
+    // 1 core / 1m (millicore) = 1000
+    expect(divideK8sResources('1', '1m', 'cpu')).toBe(1000);
+    // 2 cores / 1 core = 2
+    expect(divideK8sResources('2', '1', 'cpu')).toBe(2);
+    // 100m / 100m = 1
+    expect(divideK8sResources('100m', '100m', 'cpu')).toBe(1);
+  });
+
+  it('should handle CPU with nano and micro units', () => {
+    // 1000n / 1n = 1000
+    expect(divideK8sResources('1000n', '1n', 'cpu')).toBe(1000);
+    // 1u / 1n = 1000
+    expect(divideK8sResources('1u', '1n', 'cpu')).toBe(1000);
+    // 1m / 1u = 1000
+    expect(divideK8sResources('1m', '1u', 'cpu')).toBe(1000);
+  });
+
+  it('should default to memory parsing when resourceType is not specified', () => {
+    // These should still work as before (memory)
+    expect(divideK8sResources('1Gi', '1Mi')).toBe(1024);
+    expect(divideK8sResources('1M', '1K')).toBe(1000);
+  });
+});
diff --git a/frontend/src/lib/units.ts b/frontend/src/lib/units.ts
@@ -93,3 +93,22 @@ export function unparseCpu(value: string) {
     unit: 'm',
   };
 }
+
+/**
+ * Divides two Kubernetes resource quantities.
+ * Useful for computing resource field references with divisors.
+ * @param a - The dividend resource string (e.g., "1Gi", "500m")
+ * @param b - The divisor resource string (e.g., "1Mi", "1")
+ * @param resourceType - The type of resource ('cpu' or 'memory'). Defaults to 'memory'.
+ * @returns The result of dividing a by b
+ */
+export function divideK8sResources(
+  a: string,
+  b: string,
+  resourceType: 'cpu' | 'memory' = 'memory'
+): number {
+  if (resourceType === 'cpu') {
+    return parseCpu(a) / parseCpu(b);
+  }
+  return parseUnitsOfBytes(a) / parseUnitsOfBytes(b);
+}
diff --git a/frontend/src/plugin/__snapshots__/pluginLib.snapshot b/frontend/src/plugin/__snapshots__/pluginLib.snapshot
@@ -43,6 +43,7 @@
     "ConditionsTable": [Function],
     "ConfirmButton": [Function],
     "ConfirmDialog": [Function],
+    "ContainerEnvironmentVariables": [Function],
     "ContainerInfo": [Function],
     "ContainersSection": [Function],
     "CopyButton": [Function],
@@ -94,6 +95,7 @@
       "CircularChart": [Function],
       "ConditionsSection": [Function],
       "ConditionsTable": [Function],
+      "ContainerEnvironmentVariables": [Function],
       "ContainerInfo": [Function],
       "ContainersSection": [Function],
       "CopyButton": [Function],
@@ -462,6 +464,7 @@
       "TO_GB": 1073741824,
       "TO_ONE_CPU": 1000000000,
       "TO_ONE_M_CPU": 1000000,
+      "divideK8sResources": [Function],
       "parseCpu": [Function],
       "parseDiskSpace": [Function],
       "parseRam": [Function],

Original file line number	Diff line number	Diff line change
`@@ -673,5 +673,6 @@`
`673`	`673`	`"\"{{metricName}}\" on pods": "\"{{metricName}}\" auf Pods",`
`674`	`674`	`"resource {{resourceName}} on pods": "Ressource {{resourceName}} auf Pods",`
`675`	`675`	`"resource {{resourceName}} of container {{containerName}} on pods": "Ressource {{resourceName}} des Containers {{containerName}} auf Pods",`
`676`		`- "Warning. Incompatible plugins disabled: ({{ pluginList }})": "Warnung. Inkompatible Plugins deaktiviert: ({{ pluginList }})"`
	`676`	`+ "Warning. Incompatible plugins disabled: ({{ pluginList }})": "Warnung. Inkompatible Plugins deaktiviert: ({{ pluginList }})",`
	`677`	`+ "This value may differ in the container, since the pod is older than {{from}}": "Dieser Wert kann im Container abweichen, da der Pod älter ist als {{from}}"`
`677`	`678`	`}`
Original file line number	Diff line number	Diff line change
`@@ -677,5 +677,6 @@`
`677`	`677`	`"\"{{metricName}}\" on pods": "\"{{metricName}}\" en pods",`
`678`	`678`	`"resource {{resourceName}} on pods": "recurso {{resourceName}} en pods",`
`679`	`679`	`"resource {{resourceName}} of container {{containerName}} on pods": "recurso {{resourceName}} del contenedor {{containerName}} en pods",`
`680`		`- "Warning. Incompatible plugins disabled: ({{ pluginList }})": "Advertencia. Plugins incompatibles deshabilitados: ({{ pluginList }})"`
	`680`	`+ "Warning. Incompatible plugins disabled: ({{ pluginList }})": "Advertencia. Plugins incompatibles deshabilitados: ({{ pluginList }})",`
	`681`	`+ "This value may differ in the container, since the pod is older than {{from}}": "Este valor puede diferir en el contenedor, ya que el pod es más antiguo que {{from}}"`
`681`	`682`	`}`