web: add Values tab to HelmRelease dashboard

Signed-off-by: Stefan Prodan <stefan.prodan@gmail.com>

Author: stefanprodan

.gitignore

@@ -36,3 +36,6 @@ web-config.yaml
 
 # CLI (normally how Claude Code builds it).
 /cli
+
+# MCP config file.
+.mcp.json

api/v1/webconfig_types.go

@@ -107,9 +107,14 @@ type WebConfigSpec struct {
 	Authentication *AuthenticationSpec `json:"authentication"`
 }
 
+// IsAuthEnabled checks if authentication is enabled.
+func (c *WebConfigSpec) IsAuthEnabled() bool {
+	return c != nil && c.Authentication != nil
+}
+
 // UserActionsEnabled checks if user actions are enabled.
 func (c *WebConfigSpec) UserActionsEnabled() bool {
-	return c != nil && c.Authentication != nil
+	return c.IsAuthEnabled()
 }
 
 // AuthenticationSpec holds the Flux Status Page authentication configuration.

internal/web/helm_values.go

@@ -13,11 +13,53 @@ import (
 	"github.com/fluxcd/pkg/runtime/transform"
 	corev1 "k8s.io/api/core/v1"
 	"k8s.io/apimachinery/pkg/api/errors"
+	"k8s.io/apimachinery/pkg/apis/meta/v1/unstructured"
 	"k8s.io/apimachinery/pkg/types"
 	"sigs.k8s.io/controller-runtime/pkg/client"
 	"sigs.k8s.io/yaml"
 )
 
+// getHelmValues extracts valuesFrom references and inline values from a
+// HelmRelease unstructured object, resolves them via helmValuesFromReferences,
+// and returns the merged values map.
+func (h *Handler) getHelmValues(ctx context.Context, obj unstructured.Unstructured) (map[string]any, error) {
+	var refs []meta.ValuesReference
+	if valuesFrom, found, _ := unstructured.NestedSlice(obj.Object, "spec", "valuesFrom"); found {
+		for _, vf := range valuesFrom {
+			m, ok := vf.(map[string]any)
+			if !ok {
+				continue
+			}
+			ref := meta.ValuesReference{}
+			if v, ok := m["kind"].(string); ok {
+				ref.Kind = v
+			}
+			if v, ok := m["name"].(string); ok {
+				ref.Name = v
+			}
+			if v, ok := m["valuesKey"].(string); ok {
+				ref.ValuesKey = v
+			}
+			if v, ok := m["targetPath"].(string); ok {
+				ref.TargetPath = v
+			}
+			if v, ok := m["optional"].(bool); ok {
+				ref.Optional = v
+			}
+			refs = append(refs, ref)
+		}
+	}
+
+	inlineValues, _, _ := unstructured.NestedMap(obj.Object, "spec", "values")
+
+	if len(refs) == 0 && len(inlineValues) == 0 {
+		return nil, nil
+	}
+
+	return helmValuesFromReferences(ctx, h.kubeClient.GetClient(ctx),
+		obj.GetNamespace(), inlineValues, refs...)
+}
+
 // helmValuesFromReferences resolves Helm release values from ConfigMap/Secret
 // references, merging them in the order given. If provided, the values map is
 // merged last overwriting values from references, unless a reference has a

internal/web/resource.go

@@ -191,6 +191,37 @@ func (h *Handler) GetResource(ctx context.Context, kind, name, namespace string)
 		}
 	}
 
+	// Get the final values of the resource if it's a HelmRelease and inject into status.
+	// Since values can come from Kubernetes Secrets, we fetch them only
+	// if authentication is enabled to enforce RBAC via impersonation.
+	if h.conf.IsAuthEnabled() && gvk.Kind == fluxcdv1.FluxHelmReleaseKind {
+		var valuesError string
+		helmValues, err := h.getHelmValues(ctx, *obj)
+		if err != nil {
+			if !errors.IsForbidden(err) {
+				return nil, err
+			}
+			log.FromContext(ctx).Error(err, "user does not have access to Helm values references")
+			perms := user.Permissions(ctx)
+			valuesError = fmt.Sprintf("You do not have access to the values references of this resource. "+
+				"Contact your administrator if you believe this is an error. "+
+				"User: %s, Groups: [%s]",
+				perms.Username, strings.Join(perms.Groups, ", "))
+		}
+
+		if len(helmValues) > 0 {
+			if err := unstructured.SetNestedMap(obj.Object, helmValues, "status", "helmValues"); err != nil {
+				return nil, fmt.Errorf("unable to set helmValues in status: %w", err)
+			}
+		}
+
+		if valuesError != "" {
+			if err := unstructured.SetNestedField(obj.Object, valuesError, "status", "helmValuesError"); err != nil {
+				return nil, fmt.Errorf("unable to set helmValuesError in status: %w", err)
+			}
+		}
+	}
+
 	// List which actions the user can perform on this resource.
 	if h.conf.UserActionsEnabled() {
 		var actions []string

web/src/components/dashboards/resource/ArtifactPanel.jsx

@@ -100,7 +100,7 @@ export function ArtifactPanel({ resourceData }) {
     <DashboardPanel title="Artifact" id="artifact-panel">
       {/* Tab Navigation */}
       <div class="border-b border-gray-200 dark:border-gray-700 mb-4">
-        <nav class="flex space-x-4">
+        <nav class="flex space-x-4 overflow-x-auto">
           <TabButton active={activeTab === 'overview'} onClick={() => setActiveTab('overview')}>
             <span class="sm:hidden">Info</span>
             <span class="hidden sm:inline">Overview</span>

web/src/components/dashboards/resource/ExportedInputsPanel.jsx

@@ -74,7 +74,7 @@ export function ExportedInputsPanel({ resourceData }) {
     <DashboardPanel title="Exported Inputs" id="exported-inputs-panel">
       {/* Tab Navigation */}
       <div class="border-b border-gray-200 dark:border-gray-700 mb-4">
-        <nav class="flex space-x-4">
+        <nav class="flex space-x-4 overflow-x-auto">
           <TabButton active={activeTab === 'overview'} onClick={() => setActiveTab('overview')}>
             <span class="sm:hidden">Info</span>
             <span class="hidden sm:inline">Overview</span>

web/src/components/dashboards/resource/InputsPanel.jsx

@@ -116,7 +116,7 @@ export function InputsPanel({ resourceData, namespace }) {
     <DashboardPanel title="Inputs" id="inputs-panel">
       {/* Tab Navigation */}
       <div class="border-b border-gray-200 dark:border-gray-700 mb-4">
-        <nav class="flex space-x-4">
+        <nav class="flex space-x-4 overflow-x-auto">
           <TabButton active={activeTab === 'overview'} onClick={() => setActiveTab('overview')}>
             <span class="sm:hidden">Info</span>
             <span class="hidden sm:inline">Overview</span>

web/src/components/dashboards/resource/InventoryPanel.jsx

@@ -126,7 +126,7 @@ export function InventoryPanel({ resourceData, onNavigate }) {
     <DashboardPanel title="Managed Objects" id="inventory-panel">
       {/* Tab Navigation */}
       <div class="border-b border-gray-200 dark:border-gray-700 mb-4">
-        <nav class="flex space-x-4">
+        <nav class="flex space-x-4 overflow-x-auto">
           <TabButton active={activeTab === 'overview'} onClick={() => setActiveTab('overview')}>
             <span class="sm:hidden">Info</span>
             <span class="hidden sm:inline">Overview</span>

web/src/components/dashboards/resource/ReconcilerPanel.jsx

@@ -13,7 +13,7 @@ import { FluxOperatorIcon } from '../../layout/Icons'
 import { useHashTab } from '../../../utils/hash'
 
 // Valid tabs for the ReconcilerPanel
-const RECONCILER_TABS = ['overview', 'history', 'events', 'spec', 'status']
+const RECONCILER_TABS = ['overview', 'history', 'events', 'values', 'spec', 'status']
 
 export function ReconcilerPanel({ kind, name, namespace, resourceData }) {
   // Tab state synced with URL hash (e.g., #reconciler-events)
@@ -111,6 +111,18 @@ export function ReconcilerPanel({ kind, name, namespace, resourceData }) {
     }
   }, [resourceData])
 
+  const valuesYaml = useMemo(() => {
+    if (kind !== 'HelmRelease' || !resourceData) return null
+    if (resourceData.status?.helmValues) return resourceData.status.helmValues
+    if (resourceData.spec?.values) return resourceData.spec.values
+    return null
+  }, [resourceData, kind])
+
+  const valuesError = useMemo(() => {
+    if (kind !== 'HelmRelease' || !resourceData) return null
+    return resourceData.status?.helmValuesError || null
+  }, [resourceData, kind])
+
   const statusYaml = useMemo(() => {
     if (!resourceData?.status) return null
     return {
@@ -183,7 +195,7 @@ export function ReconcilerPanel({ kind, name, namespace, resourceData }) {
     <DashboardPanel title="Reconciler" id="reconciler-panel">
       {/* Tab Navigation */}
       <div class="border-b border-gray-200 dark:border-gray-700 mb-4">
-        <nav class="flex space-x-4">
+        <nav class="flex space-x-4 overflow-x-auto">
           <TabButton active={reconcilerTab === 'overview'} onClick={() => setReconcilerTab('overview')}>
             <span class="sm:hidden">Info</span>
             <span class="hidden sm:inline">Overview</span>
@@ -196,6 +208,11 @@ export function ReconcilerPanel({ kind, name, namespace, resourceData }) {
           <TabButton active={reconcilerTab === 'events'} onClick={() => setReconcilerTab('events')}>
             Events
           </TabButton>
+          {kind === 'HelmRelease' && (valuesError || valuesYaml) && (
+            <TabButton active={reconcilerTab === 'values'} onClick={() => setReconcilerTab('values')}>
+              Values
+            </TabButton>
+          )}
           <TabButton active={reconcilerTab === 'spec'} onClick={() => setReconcilerTab('spec')}>
             <span class="sm:hidden">Spec</span>
             <span class="hidden sm:inline">Specification</span>
@@ -292,6 +309,19 @@ export function ReconcilerPanel({ kind, name, namespace, resourceData }) {
         />
       )}
 
+      {/* Values Tab */}
+      {reconcilerTab === 'values' && kind === 'HelmRelease' && (
+        <div>
+          {valuesError ? (
+            <div class="text-sm text-red-600 dark:text-red-400">
+              <pre class="whitespace-pre-wrap break-all font-sans">{valuesError}</pre>
+            </div>
+          ) : valuesYaml ? (
+            <YamlBlock data={valuesYaml} />
+          ) : null}
+        </div>
+      )}
+
       {reconcilerTab === 'spec' && <YamlBlock data={specYaml} />}
       {reconcilerTab === 'status' && <YamlBlock data={statusYaml} />}