frontend: Resource: Add environment variables display for containers

gambtho · gambtho · commit 66c3bf5a331c · 2026-02-12T10:20:37.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
@@ -365,6 +365,8 @@
   "Delete port forward": "Portweiterleitung löschen",
   "Stop port forward": "Portweiterleitung stoppen",
   "Copied": "",
+  "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}}",
+  "Value": "Wert",
   "Mount Path": "Mount Path",
   "from": "von",
   "I/O": "I/O",
@@ -481,7 +483,6 @@
   "Suspend": "Pausieren",
   "Key": "Schlüssel",
   "Operator": "Betreiber",
-  "Value": "Wert",
   "Effect": "Wirkung",
   "Current": "Aktuell",
   "Desired//context:pods": "Gewünscht",
diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json
@@ -365,6 +365,8 @@
   "Delete port forward": "Delete port forward",
   "Stop port forward": "Stop port forward",
   "Copied": "Copied",
+  "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}}",
+  "Value": "Value",
   "Mount Path": "Mount Path",
   "from": "from",
   "I/O": "I/O",
@@ -481,7 +483,6 @@
   "Suspend": "Suspend",
   "Key": "Key",
   "Operator": "Operator",
-  "Value": "Value",
   "Effect": "Effect",
   "Current": "Current",
   "Desired//context:pods": "Desired",
diff --git a/frontend/src/i18n/locales/es/translation.json b/frontend/src/i18n/locales/es/translation.json
@@ -367,6 +367,8 @@
   "Delete port forward": "Eliminar redireccionamiento de puerto",
   "Stop port forward": "Parar redireccionamiento de puerto",
   "Copied": "",
+  "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}}",
+  "Value": "Valor",
   "Mount Path": "Camino de montaje",
   "from": "desde",
   "I/O": "I/O",
@@ -484,7 +486,6 @@
   "Suspend": "Suspender",
   "Key": "Clave",
   "Operator": "Operador",
-  "Value": "Valor",
   "Effect": "Efecto",
   "Current": "Actual",
   "Desired//context:pods": "Deseados",
diff --git a/frontend/src/i18n/locales/fr/translation.json b/frontend/src/i18n/locales/fr/translation.json
@@ -367,6 +367,8 @@
   "Delete port forward": "Supprimer le transfert de port",
   "Stop port forward": "Arrêter le transfert de port",
   "Copied": "Copié",
+  "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}}",
+  "Value": "Valeur",
   "Mount Path": "Chemin de montage",
   "from": "de",
   "I/O": "Entrées/Sorties",
@@ -484,7 +486,6 @@
   "Suspend": "Suspendu",
   "Key": "Key",
   "Operator": "Opérateur",
-  "Value": "Valeur",
   "Effect": "Effet",
   "Current": "Actuel",
   "Desired//context:pods": "Actuels",
diff --git a/frontend/src/i18n/locales/hi/translation.json b/frontend/src/i18n/locales/hi/translation.json
@@ -365,6 +365,8 @@
   "Delete port forward": "पोर्ट फॉरवर्ड हटाएँ",
   "Stop port forward": "पोर्ट फॉरवर्ड रोकें",
   "Copied": "",
+  "This value may differ in the container, since the pod is older than {{from}}": "",
+  "Value": "मान",
   "Mount Path": "माउंट पाथ",
   "from": "से",
   "I/O": "I/O",
@@ -481,7 +483,6 @@
   "Suspend": "निलंबित करें",
   "Key": "कुंजी",
   "Operator": "ऑपरेटर",
-  "Value": "मान",
   "Effect": "प्रभाव",
   "Current": "वर्तमान",
   "Desired//context:pods": "वांछित",
diff --git a/frontend/src/i18n/locales/it/translation.json b/frontend/src/i18n/locales/it/translation.json
@@ -367,6 +367,8 @@
   "Delete port forward": "Elimina port forwarding",
   "Stop port forward": "Ferma port forwarding",
   "Copied": "",
+  "This value may differ in the container, since the pod is older than {{from}}": "",
+  "Value": "Valore",
   "Mount Path": "Percorso di montaggio",
   "from": "da",
   "I/O": "I/O",
@@ -484,7 +486,6 @@
   "Suspend": "Sospendi",
   "Key": "Chiave",
   "Operator": "Operatore",
-  "Value": "Valore",
   "Effect": "Effetto",
   "Current": "Attuale",
   "Desired//context:pods": "Desiderato//context:pods",
diff --git a/frontend/src/i18n/locales/ja/translation.json b/frontend/src/i18n/locales/ja/translation.json
@@ -363,6 +363,8 @@
   "Delete port forward": "ポートフォワードを削除",
   "Stop port forward": "ポートフォワードを停止",
   "Copied": "",
+  "This value may differ in the container, since the pod is older than {{from}}": "",
+  "Value": "値",
   "Mount Path": "マウントパス",
   "from": "から",
   "I/O": "I/O",
@@ -478,7 +480,6 @@
   "Suspend": "一時停止",
   "Key": "キー",
   "Operator": "演算子",
-  "Value": "値",
   "Effect": "効果",
   "Current": "現在",
   "Desired//context:pods": "希望",
diff --git a/frontend/src/i18n/locales/ko/translation.json b/frontend/src/i18n/locales/ko/translation.json
@@ -363,6 +363,8 @@
   "Delete port forward": "포트 포워딩 삭제",
   "Stop port forward": "포트 포워딩 중지",
   "Copied": "",
+  "This value may differ in the container, since the pod is older than {{from}}": "",
+  "Value": "값",
   "Mount Path": "마운트 경로",
   "from": "from",
   "I/O": "I/O",
@@ -478,7 +480,6 @@
   "Suspend": "일시중지",
   "Key": "키",
   "Operator": "Operator",
-  "Value": "값",
   "Effect": "효과",
   "Current": "Current",
   "Desired//context:pods": "Desired",
diff --git a/frontend/src/i18n/locales/pt/translation.json b/frontend/src/i18n/locales/pt/translation.json
@@ -367,6 +367,8 @@
   "Delete port forward": "Eliminar redir. de porta",
   "Stop port forward": "Parar redir. de porta",
   "Copied": "",
+  "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}}",
+  "Value": "Valor",
   "Mount Path": "Cam. de montagem",
   "from": "desde",
   "I/O": "I/O",
@@ -484,7 +486,6 @@
   "Suspend": "Suspender",
   "Key": "Chave",
   "Operator": "Operador",
-  "Value": "Valor",
   "Effect": "Efeito",
   "Current": "Actual",
   "Desired//context:pods": "Desejados",
diff --git a/frontend/src/i18n/locales/ta/translation.json b/frontend/src/i18n/locales/ta/translation.json
@@ -365,6 +365,8 @@
   "Delete port forward": "போர்ட் ஃபார்வர்ட் அழி",
   "Stop port forward": "போர்ட் ஃபார்வர்ட் நிறுத்து",
   "Copied": "",
+  "This value may differ in the container, since the pod is older than {{from}}": "",
+  "Value": "வேல்யூ",
   "Mount Path": "மவுண்ட் பாத்",
   "from": "இலிருந்து",
   "I/O": "I/O",
@@ -481,7 +483,6 @@
   "Suspend": "இடைநிறுத்து",
   "Key": "கீ",
   "Operator": "ஆபரேட்டர்",
-  "Value": "வேல்யூ",
   "Effect": "எஃபெக்ட்",
   "Current": "தற்போதைய",
   "Desired//context:pods": "விரும்பியவை",
diff --git a/frontend/src/i18n/locales/zh-tw/translation.json b/frontend/src/i18n/locales/zh-tw/translation.json
@@ -363,6 +363,8 @@
   "Delete port forward": "刪除連接埠轉發",
   "Stop port forward": "停止連接埠轉發",
   "Copied": "已複製",
+  "This value may differ in the container, since the pod is older than {{from}}": "",
+  "Value": "值",
   "Mount Path": "掛載路徑",
   "from": "來自",
   "I/O": "I/O",
@@ -478,7 +480,6 @@
   "Suspend": "暫停",
   "Key": "鍵",
   "Operator": "運算子",
-  "Value": "值",
   "Effect": "效果",
   "Current": "當前",
   "Desired//context:pods": "期望",
diff --git a/frontend/src/i18n/locales/zh/translation.json b/frontend/src/i18n/locales/zh/translation.json
@@ -363,6 +363,8 @@
   "Delete port forward": "删除端口转发",
   "Stop port forward": "停止端口转发",
   "Copied": "已复制",
+  "This value may differ in the container, since the pod is older than {{from}}": "",
+  "Value": "值",
   "Mount Path": "挂载路径",
   "from": "来自",
   "I/O": "I/O",
@@ -478,7 +480,6 @@
   "Suspend": "暂停",
   "Key": "键",
   "Operator": "操作",
-  "Value": "值",
   "Effect": "效果",
   "Current": "当前",
   "Desired//context:pods": "期望",
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
