Skip to main content
Version: 0.2 · v0.2.0

Web UI

The Web UI is the interactive surface for Mirops — a Headlamp plugin (React + TypeScript) that visualizes the logical mirror next to the live cluster Headlamp already talks to. It shows the part a terminal can't: the dependency graph, the verdict, and the findings.

What it shows​

  • Upgrade decision — the go/no-go verdict (SAFE | WARNING | CRITICAL | ERROR) with a unified Findings panel of blockers and warnings.
  • Readiness score — a 0–100 gauge on its own health axis, separate from the verdict, so a healthy number never contradicts a blocked upgrade.
  • Risk & Compatibility — a tabbed section: Add-on Compatibility, Namespace Risk (heatmap), and the Dependency Graph, opening on whatever is wrong.
  • Dependency graph — nodes colored by risk, shaped by type, labeled with the risk value, and draggable to untangle.
  • Workloads — deployments, statefulsets, daemonsets, jobs, PVCs, standalone pods, and deprecated APIs behind an only show problems toggle. Long tables paginate.
  • AI insights — the AI reasoning and score when enabled, with a clear banner if the AI call failed.
  • Remediation plans — review, approve, and selectively execute operator-proposed actions.
  • Create & configure — author an UpgradeAnalysis from the UI: target version, scope, report destination, and AI settings.

How reports reach the UI​

The plugin reads reports through Headlamp's backend service proxy to the operator's in-cluster report endpoint — so remote destinations (S3/Blob/PVC) are read back with the operator's own credentials, never the browser's.

Install​

The plugin ships as a public container image; an initContainer copies it into Headlamp's plugin directory on startup — no pull secret required. You install Headlamp itself with a values file that loads the plugin, then point it at the operator's namespace.

# 1. Add the Headlamp Helm repo
helm repo add headlamp https://kubernetes-sigs.github.io/headlamp/
helm repo update

# 2. Install Headlamp with the Mirops plugin
helm install headlamp headlamp/headlamp -n headlamp --create-namespace \
  -f headlamp-values.yaml

# 3. Access it
kubectl -n headlamp port-forward svc/headlamp 8080:80
open http://localhost:8080

The headlamp-values.yaml loads the plugin image and tells it where the operator lives:

config:
  pluginsDir: /headlamp/plugins

initContainers:
  - name: mirops-plugin
    image: ghcr.io/miropshq/mirops-headlamp-plugin:latest
    imagePullPolicy: Always
    env:
      # Namespace where the operator (and its mirops-reports Service) is installed.
      # Defaults to "mirops"; change it if you installed the operator elsewhere.
      - name: MIROPS_NAMESPACE
        value: mirops
    command:
      - sh
      - -c
      - |
        mkdir -p /headlamp/plugins/mirops
        cp -r /plugins/mirops/* /headlamp/plugins/mirops/
        printf '{"reportsNamespace":"%s"}' "$MIROPS_NAMESPACE" > /headlamp/plugins/mirops/config.json
    volumeMounts:
      - name: plugins
        mountPath: /headlamp/plugins

volumeMounts:
  - name: plugins
    mountPath: /headlamp/plugins

volumes:
  - name: plugins
    emptyDir: {}

UpgradeAnalysis is cluster-scoped, so it doesn't tell the plugin where the operator's report Service lives — MIROPS_NAMESPACE does. If you install the operator in a namespace other than mirops, set it here. When CI publishes a new image, pick it up with kubectl -n headlamp rollout restart deploy/headlamp.