Fix release scripts

Bumps [markdown-to-jsx](https://github.com/quantizor/markdown-to-jsx) from 7.2.1 to 7.5.0.
- [Release notes](https://github.com/quantizor/markdown-to-jsx/releases)
- [Changelog](https://github.com/quantizor/markdown-to-jsx/blob/main/CHANGELOG.md)
- [Commits](https://github.com/quantizor/markdown-to-jsx/compare/v7.2.1...v7.5.0)

---
updated-dependencies:
- dependency-name: markdown-to-jsx
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.dockerignore

@@ -1,4 +1,6 @@
 Dockerfile
 *.md
 bin
-.idea
+.idea
+.git
+frontend/node_modules

.github/workflows/build.yml

@@ -2,9 +2,15 @@ name: Build
 
 on:
   push:
-    branches: main
+    branches:
+      - main
   pull_request:
-    branches: "*"
+    branches:
+      - "*"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 
 jobs:
   build:
@@ -12,13 +18,30 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-      - name: Set up Go
-        uses: actions/setup-go@v3
+
+      # Node part
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2.5.2
         with:
-          go-version: 1.18
+          cache: 'npm'
+          cache-dependency-path: frontend/package-lock.json
+      - name: NPM install
+        run: npm i
+        working-directory: ./frontend
+      - name: NPM build
+        run: npm run build
+        working-directory: ./frontend
+
+      # Golang part
+      - name: Set up Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: "1.22"
       - name: Unit tests
         run: |
-          go test -v -race ./... -covermode=atomic # Run all the tests with the race detector enabled
+          go test -v -race ./... -covermode=atomic -coverprofile=coverage.out # Run all the tests with the race detector enabled
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v3
       - name: Static analysis
         run: |
           go vet ./... # go vet is the official Go static analyzer
@@ -29,18 +52,15 @@ jobs:
       - name: Dry Run GoReleaser
         uses: goreleaser/goreleaser-action@v2
         with:
-          version: latest
-          args: release --snapshot --rm-dist
-      - name: Test Binary is Runnable
+          version: "1.18.2"
+          args: release --snapshot --clean
+      - name: Test if the Binary is Runnable
         run: "dist/helm-dashboard_linux_amd64_v1/helm-dashboard --help"
-      - name: golangci-lint
-        uses: golangci/golangci-lint-action@v3.3.1
+      - uses: actions/upload-artifact@v3
         with:
-          # version: latest
-          # skip-go-installation: true
-          skip-pkg-cache: true
-          skip-build-cache: true
-          # args: --timeout=15m
+          name: binaries
+          path: dist/
+          retention-days: 1
 
   image:
     runs-on: ubuntu-latest
@@ -49,25 +69,73 @@ jobs:
       - name: Check out the repo
         uses: actions/checkout@v3
 
+      - name: Docker meta
+        uses: docker/metadata-action@v3
+        id: meta
+        with:
+          images: komodorio/helm-dashboard
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        if: github.event_name != 'pull_request'
+        with:
+          username: ${{ secrets.DOCKERHUB_USER }}
+          password: ${{ secrets.DOCKERHUB_PASS }}
+
       - name: Build and push
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v4
         with:
           context: .
-          outputs: local
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: komodorio/helm-dashboard:unstable
+          labels: ${{ steps.meta.outputs.labels }}
           build-args: VER=0.0.0-dev
+          platforms: linux/amd64,linux/arm64
 
-  helm_check:
+  static_and_lint:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v3
         with:
           fetch-depth: 0
+
+      - name: make dir for frontend results # don't delete this step, it will break goreleaser
+        run: mkdir pkg/frontend/dist && touch pkg/frontend/dist/.gitkeep
+      - name: Set up Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: "1.22"
+      - name: golangci-lint
+        uses: golangci/golangci-lint-action@v4
+        with:
+          # version: latest
+          skip-pkg-cache: true
+          skip-build-cache: true
+          args: --timeout=5m
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          cache: 'npm'
+          cache-dependency-path: ./frontend/package-lock.json
+      - name: NPM install
+        run: npm i
+        working-directory: ./frontend
+      - name: NPM lint
+        run: npm run lint
+        working-directory: ./frontend
+
       - name: Helm Template Check For Sanity
         uses: igabaydulin/helm-check-action@0.1.4
         env:
           CHART_LOCATION: ./charts/helm-dashboard
           CHART_VALUES: ./charts/helm-dashboard/values.yaml
-      - name: Test Helm plugin install script is runnable
+      - name: Test if the Helm plugin install script is runnable
         run: |
           scripts/install_plugin.sh

.github/workflows/release.yaml

@@ -1,4 +1,4 @@
-name: release
+name: Release
 
 on:
   push:
@@ -30,19 +30,32 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+
+      # Node part
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2.5.2
         with:
-          fetch-depth: 0
+          cache: 'npm'
+          cache-dependency-path: frontend/package-lock.json
+      - name: NPM install
+        run: npm i
+        working-directory: ./frontend
+      - name: NPM build
+        run: npm run build
+        working-directory: ./frontend
+
+      # Golang part
       - name: Set up Go
-        uses: actions/setup-go@v3
+        uses: actions/setup-go@v5
         with:
-          go-version: 1.18
+          go-version: "1.22"
       - name: git cleanup
         run: git clean -f
       - name: Run GoReleaser
         uses: goreleaser/goreleaser-action@v2
         with:
-          version: latest
-          args: release --rm-dist
+          version: "1.18.2"
+          args: release --clean
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Test Binary Versions
@@ -50,7 +63,7 @@ jobs:
 
   image:
     runs-on: ubuntu-latest
-    needs: [release, pre_release]
+    needs: [ release, pre_release ]
     timeout-minutes: 60
     steps:
       - name: Check out the repo
@@ -62,15 +75,20 @@ jobs:
         with:
           images: komodorio/helm-dashboard
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
       - name: Login to DockerHub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         if: github.event_name != 'pull_request'
         with:
           username: ${{ secrets.DOCKERHUB_USER }}
           password: ${{ secrets.DOCKERHUB_PASS }}
 
       - name: Build and push
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v4
         if: github.event_name != 'pull_request'
         with:
           context: .
@@ -78,10 +96,11 @@ jobs:
           tags: komodorio/helm-dashboard:${{ needs.pre_release.outputs.release_tag }},komodorio/helm-dashboard:latest
           labels: ${{ steps.meta.outputs.labels }}
           build-args: VER=${{ needs.pre_release.outputs.release_tag }}
+          platforms: linux/amd64,linux/arm64
 
   publish_chart:
     runs-on: ubuntu-latest
-    needs: [image, pre_release]
+    needs: [ image, pre_release ]
     if: github.event_name == 'push' || github.event_name == 'workflow_dispatch'
     steps:
       - name: Checkout
@@ -112,4 +131,4 @@ jobs:
           user_email: "komi@komodor.io"
           user_name: "komodor-bot"
           destination_branch: "master"
-          commit_msg: "feat(helm-dashboard): ${{ github.event.head_commit.message }}" #important!! don't change this commit message unless you change the condition in pipeline.yml on helm-charts repo
+          commit_msg: "feat(OSS helm-dashboard): ${{ github.event.head_commit.message }}" #important!! don't change this commit message unless you change the condition in pipeline.yml on helm-charts repo

.gitignore

@@ -26,6 +26,8 @@ go.work
 /bin
 /.idea/
 
+/node_modules
 .DS_Store
 .vscode/
 /pkg/dashboard/objects/testdata/hello-world-0.1.0.tgz
+/pkg/frontend/dist/*

.goreleaser.yml

@@ -11,6 +11,9 @@ builds:
     goarch:
       - amd64
       - arm64
+    ignore:
+      - goos: windows
+        goarch: arm64
     env:
       - CGO_ENABLED=0
 archives:

Dockerfile

@@ -1,11 +1,27 @@
+# Stage - frontend
+FROM node:latest as frontend
+
+WORKDIR /build
+
+COPY frontend ./
+
+RUN npm i && npm run build
+
 # Stage - builder
-FROM golang as builder
+FROM --platform=${BUILDPLATFORM:-linux/amd64} golang as builder
 
+ARG TARGETPLATFORM
+ARG BUILDPLATFORM
+ARG TARGETOS
+ARG TARGETARCH
 
-ENV GOOS=linux
-ENV GOARCH=amd64
+ENV GOOS=${TARGETOS:-linux}
+ENV GOARCH=${TARGETARCH:-amd64}
 ENV CGO_ENABLED=0
 
+ARG VER=0.0.0
+ENV VERSION=${VER}
+
 WORKDIR /build
 
 COPY go.mod ./
@@ -13,29 +29,22 @@ COPY go.sum ./
 COPY main.go ./
 RUN go mod download
 
-ARG VER=0.0.0
-ENV VERSION=${VER}
-
 ADD . src
 
+COPY --from=frontend /pkg/frontend/dist ./src/pkg/frontend/dist/
+
 WORKDIR /build/src
 
-RUN make build
+RUN make build_go
 
 # Stage - runner
-FROM alpine
+FROM --platform=${TARGETPLATFORM:-linux/amd64} alpine
+
+ARG TARGETPLATFORM
+ARG BUILDPLATFORM
+
 EXPOSE 8080
 
-# Python
-RUN apk add --update --no-cache python3 curl && python3 -m ensurepip && pip3 install --upgrade pip setuptools
-
-# Trivy
-RUN curl -sfL https://raw.githubusercontent.com/aquasecurity/trivy/main/contrib/install.sh | sh -s -- -b /usr/local/bin v0.18.3
-RUN trivy --version
-
-# Checkov scanner
-RUN pip3 install checkov packaging==21.3 && checkov --version
-
 COPY --from=builder /build/src/bin/dashboard /bin/helm-dashboard
 
 ENTRYPOINT ["/bin/helm-dashboard", "--no-browser", "--bind=0.0.0.0", "--port=8080"]

FEATURES.md

@@ -0,0 +1,209 @@
+# Helm Dashboard Features Overview
+
+## General Layout and Navigation
+
+### Shutting down the app
+
+If you run the tool locally, you can shutdown the running process. This is useful when you can't find the console where
+you started it, or when it was started without console.
+
+To close Helm-dashboard, click on the button in the rightmost corner of the screen. Once you click on it, your
+Helm-dashboard will be shut down.
+
+![Shutdown_screenshot](images/screenshot_shut_down.png)
+
+## Releases Management Section
+
+### Switching Clusters
+
+When started as local binary, the tool reads the list of available cluster connections from kubectl config file. Those
+connections are displayed on the left side of the screen.
+
+![Multicluster_screenshot](images/screenshot_multicluster.png)
+
+If you want to switch to a different cluster, simply click on the corresponding cluster as shown in the
+figure. You
+can [read here](https://kubernetes.io/docs/tasks/access-application-cluster/configure-access-multiple-clusters/) to
+learn on how to configure access to multiple clusters.
+# Reset Cache
+The "Reset Cache" feature in Helm Dashboard clears the cached data and fetches the latest information from the backend or data source. It ensures that the dashboard displays up-to-date data and reflects any recent changes or updates.
+![Detail1](images/screenshot_reset_cache.png)
+
+# Repository
+Essentially, a repository is a location where charts are gathered and can be shared. If you want to learn more about repositories, [click here](https://helm.sh/docs/topics/chart_repository/). You can find the repository in the home section, as depicted in the figure.
+![Repository3](images/screenshot_repository3.png)
+
+You can add the repository by clicking on 'Add Repository', as shown in the figure.
+![Repository](images/screenshot_repository.png)
+
+## Installed Releases List
+
+A release is an installation of your Helm chart deployed in your Kubernetes Cluster. That means every time that you
+install or upgrade a Helm chart, it creates a new release revision that coexists with other releases. You
+can filter releases based on namespaces or search for release names
+![Releases](images/screenshot_release.png)
+
+The squares represent k8s resources installed by the release. Hover over each square to view a tooltip with details.
+Yellow indicates "pending," green signifies a healthy state, and red indicates an unhealthy state.
+![Releases1](images/screenshot_release1.png)
+
+It indicates the version of chart that corresponds to this release.
+![Releases2](images/screenshot_release2.png)
+
+A revision is linked to a release to track the number of updates/changes that release encounters.
+![Releases3](images/screenshot_release3.png)
+
+Namespaces are a way to organize clusters into virtual sub-clusters — they can be helpful when different teams or
+projects share a Kubernetes cluster. Any number of namespaces are supported within a cluster, each logically separated
+from others but with the ability to communicate with each other.
+![Releases4](images/screenshot_release4.png)
+
+Updated" refers to the amount of time that has passed since the last revision of the release. Whenever you install or
+upgrade the release, a new revision is created. You can think of it as the "age" of the latest revision.
+![Releases5](images/screenshot_release5.png)
+
+Indication of upgrade possible/repo suggested.
+![Release6](images/screenshot_upgrade_available.png)
+
+## Release details
+
+This indicates the status of the deployed release, and 'Age' represents the amount of time that has passed since the
+creation of the revision until now.
+![Detail](images/screenshot_release_detail.png)
+
+You can use the Upgrade/Downgrade button to switch to different release versions, as shown in the figure.
+![Detail1](images/screenshot_upgrade_available2.png)
+
+Confirm the upgrade settings and configuration and click on confirm button to continue
+![Detail2](images/screenshot_upgrade_confirmation.png)
+
+Once the upgrade is done, your release will show the status 
+![Detail3](images/screenshot_upgrade_complete.png)
+
+It executes the test scripts or commands within the deployed application's environment and displays the results
+![Detail4](images/screenshot_run_tests.png)
+
+Running test hooks results 
+![Detail5](images/screenshot_test_results.png)
+
+The Helm Dashboard provides basic information about your Helm releases, including revision number, deployment date, release message, cluster details, and deployment status.
+![Detail6](images/screenshot_basic_info.png)
+
+### Resource Tab
+
+In the Resources tab of the Helm Dashboard, you can view the kind (type), name, status, and any associated messages for your Kubernetes resources.
+![Detail7](images/screenshot_resource.png)
+
+### Manifest Tab
+
+Text: The Manifests tab displays the textual representation of the Kubernetes manifests associated with your Helm release. It provides the YAML or JSON configuration files that define the desired state of the resources deployed in your cluster.
+![Detail8](images/screenshot_manifest_view.png)
+
+Diff with Previous: The "Diff with Previous" feature allows you to compare the current version of the manifests with the previous version. It highlights the differences between the two versions, making it easier to identify the changes made in the deployment.
+![Detail9](images/screenshot_manifest_diff_prev.png)
+
+Diff with Specific: The "Diff with Specific" option enables you to compare the current version of the manifests with a specific past version. It allows you to select a particular revision and view the differences between that revision and the current one.
+![Detail10](images/screenshot_manifest_diff_specific.png)
+
+### Values Tab
+
+Text: The Values tab displays the textual representation of the values file associated with your Helm chart. It shows the YAML or JSON file that contains the configuration values used during the deployment of the chart.
+![Detail11](images/screenshot_values_view.png)
+
+Diff: The "Diff" feature allows you to compare the current values with the previous values used in a previous deployment. It highlights any differences between the two versions, making it easier to identify changes made to the configuration.
+![Detail12](images/screenshot_values_diff_prev.png)
+
+### Text Tab
+
+Text: The Notes tab displays any accompanying notes or documentation related to the Helm chart.
+![Detail14](images/screenshot_notes_view.png)
+
+Diff with previous: The "Diff" feature is not typically available in the Notes tab. This tab is primarily meant for viewing the static text-based notes associated with the chart and doesn't involve comparisons or tracking changes like in the Manifests or Values tabs.
+![Detail15](images/screenshot_notes_diff_prev.png)
+
+Diff with Specific Version: Similar to the previous point, the ability to view a diff with a specific version of the notes is not a standard feature in the Notes section of the Helm Dashboard. The Notes section usually presents the information for the specific version of the Helm chart that is currently deployed.
+![Detail16](images/screenshot_notes_diff_specific_version.png)
+
+
+
+
+
+
+
+
+
+
+### Execute Helm tests
+
+For all the release(s) (installed helm charts), you can execute helm tests for that release. For the tests to execute
+successfully, you need to have existing tests for that helm chart.
+
+You can execute `helm test` for the specific release as below:
+![](images/screenshot_run_test.png)
+
+The result of executed `helm test` for the release will be displayed as below:
+![](images/screenshot_run_test_result.png)
+
+### Scanner Integrations
+
+Upon startup, Helm Dashboard detects the presence of [Trivy](https://github.com/aquasecurity/trivy)
+and [Checkov](https://github.com/bridgecrewio/checkov) scanners. When available, these scanners are offered on k8s
+resources page, as well as install/upgrade preview page.
+
+You can request scanning of the specific k8s resource in your cluster:
+![](images/screenshot_scan_resource.png)
+
+If you want to validate the k8s manifest prior to installing/reconfiguring a Helm chart, look for "Scan for Problems"
+button at the bottom of the dialog:
+![](images/screenshot_scan_manifest.png)
+
+## Repository Section
+
+Essentially, a repository is a location where charts are gathered and can be shared over network. If you want to learn
+more about Helm chart
+repositories, [click here](https://helm.sh/docs/topics/chart_repository/).
+
+You can access the repository management area of Helm Dashboard in the main navigation section, as depicted in the
+figure.
+
+![Repository3](images/screenshot_repository3.png)
+
+You can add the repository by clicking on 'Add Repository' button on the left, as shown in the figure.
+![Repository](images/screenshot_repository.png)
+
+After completing that step, enter the following data: the repository name and its URL. You can also add the username and
+password, although this is optional.
+![Repository2](images/screenshot_repository2.png)
+
+Updating means refreshing your repository. You can update your repository as shown in the figure.
+![Repository4](images/screenshot_repository4.png)
+
+If you want to remove your repository from the Helm dashboard, click on the 'Remove' button as shown in the figure.
+![Repository5](images/screenshot_repository5.png)
+
+Use the filter option to find the desired chart quicker from the list of charts.
+![Repository6](images/screenshot_repository6.png)
+
+If you want to install a particular chart, simply hover the pointer over the chart name and an 'Install' button will
+appear, as shown in the figure.
+![Repository7](images/screenshot_repository7.png)
+
+# Support for Local Charts
+
+Local Helm chart is a directory with specially named files and a `Chart.yaml` file, which you can install via Helm,
+without the need to publish the chart into Helm repository. Chart developers might want to experiment with the chart
+locally, before uploading into public repository. Also, a proprietary application might only use non-published chart as
+an approach to deploy the software.
+
+For all the above use-cases, you may use Helm Dashboard UI, specifying the location of your local chart folders via
+special `--local-chart` command-line parameter. The parameter might be specified multiple times, for example:
+
+```shell
+helm-dashboard --local-chart=/opt/charts/my-private-app --local-chart=/home/dev/sources/app/chart
+```
+
+When _valid_ local chart sources specified, the repository list would contain a surrogate `[local]` entry, with those
+charts listed inside. All the chart operations are normal: installing, reconfiguring and upgrading.
+
+![](images/screenshot_local_charts.png)
+

Makefile

@@ -1,5 +1,5 @@
 DATE    ?= $(shell date +%FT%T%z)
-VERSION ?= $(git describe --tags --always --dirty --match=v* 2> /dev/null || \
+VERSION ?= $(shell git describe --tags --always --dirty --match=v* 2> /dev/null || \
 			cat $(CURDIR)/.version 2> /dev/null || echo "v0")
 
 .PHONY: test
@@ -13,12 +13,19 @@ test: ; $(info $(M) start unit testing...) @
 pull: ; $(info $(M) Pulling source...) @
 	@git pull
 
-.PHONY: build
-build: $(BIN) ; $(info $(M) Building executable...) @ ## Build program binary
+.PHONY: build_go
+build_go: $(BIN) ; $(info $(M) Building GO...) @ ## Build program binary
 	go build \
 		-ldflags '-X main.version=$(VERSION) -X main.buildDate=$(DATE)' \
 		-o bin/dashboard .
 
+.PHONY: build_ui
+build_ui: $(BIN) ; $(info $(M) Building UI...) @ ## Build program binary
+	cd frontend && npm i && npm run build && cd ..
+
+.PHONY: build
+build: build_ui build_go ; $(info $(M) Building executable...) @ ## Build program binary
+
 .PHONY: debug
 debug: ; $(info $(M) Running dashboard in debug mode...) @
 	@DEBUG=1 ./bin/dashboard

README.md

@@ -1,30 +1,28 @@
 <p align="center">
   <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="pkg/dashboard/static/logo-header-inverted.svg">
-    <source media="(prefers-color-scheme: light)" srcset="pkg/dashboard/static/logo-header.svg#gh-light-mode-only">
-    <img alt="Helm Dashboard" src="pkg/dashboard/static/logo-header.svg#gh-light-mode-only">
+    <source media="(prefers-color-scheme: dark)" srcset="images/logo-header-inverted.svg">
+    <source media="(prefers-color-scheme: light)" srcset="images/logo-header.svg#gh-light-mode-only">
+    <img alt="Helm Dashboard" src="images/logo-header.svg#gh-light-mode-only">
   </picture>
 </p>
 
 <p align="center">A simplified way of working with Helm.</p>
 
-
-![GitHub contributors](https://img.shields.io/github/contributors/komodorio/helm-dashboard) [![GitHub issues](https://img.shields.io/github/issues-raw/komodorio/helm-dashboard)](https://github.com/komodorio/helm-dashboard/issues) ![GitHub stars](https://img.shields.io/github/stars/komodorio/helm-dashboard?style=social) ![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/komodorio/helm-dashboard) ![GitHub pull requests](https://img.shields.io/github/issues-pr/komodorio/helm-dashboard) ![GitHub release (latest by date)](https://img.shields.io/github/v/release/komodorio/helm-dashboard) ![GitHub commit activity](https://img.shields.io/github/commit-activity/m/komodorio/helm-dashboard) [![GitHub license](https://img.shields.io/github/license/komodorio/helm-dashboard)](https://github.com/komodorio/helm-dashboard)
+![GitHub contributors](https://img.shields.io/github/contributors/komodorio/helm-dashboard) [![GitHub issues](https://img.shields.io/github/issues-raw/komodorio/helm-dashboard)](https://github.com/komodorio/helm-dashboard/issues) ![GitHub stars](https://img.shields.io/github/stars/komodorio/helm-dashboard?style=social) ![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/komodorio/helm-dashboard) ![GitHub pull requests](https://img.shields.io/github/issues-pr/komodorio/helm-dashboard) [![GitHub release (latest by date)](https://img.shields.io/github/v/release/komodorio/helm-dashboard)](https://github.com/komodorio/helm-dashboard/releases) ![GitHub commit activity](https://img.shields.io/github/commit-activity/m/komodorio/helm-dashboard) [![GitHub license](https://img.shields.io/github/license/komodorio/helm-dashboard)](https://github.com/komodorio/helm-dashboard) [![codecov](https://codecov.io/gh/komodorio/helm-dashboard/branch/main/graph/badge.svg?token=PXPSNVHI2T)](https://codecov.io/gh/komodorio/helm-dashboard)
 
 <kbd>[<img src="images/screenshot.png" style="width: 100%; border: 1px solid silver;" border="1" alt="Screenshot">](images/screenshot.png)</kbd>
 
-
 ## Description
 
 _Helm Dashboard_ is an **open-source project** which offers a UI-driven way to view the installed Helm charts, see their revision history and
-corresponding k8s resources. Also, you can perform simple actions like roll back to a revision or upgrade to newer
-version.
-This project is part of [Komodor's](https://komodor.com/?utm_campaign=Helm-Dash&utm_source=helm-dash-gh) vision of
-helping Kubernetes users to navigate and troubleshoot their clusters, the project is **NOT** an offical project by the [helm team](https://helm.sh/).
+corresponding k8s resources. It also allows users to perform simple actions such as rolling back to a
+revision or upgrading to a newer version.
+This project is part of [Komodor's](https://komodor.com/?utm_campaign=Helm-Dash&utm_source=helm-dash-gh) vision to
+help Kubernetes users to navigate and troubleshoot their clusters. It is important to note that Helm Dashboard is **NOT** an official project by the [helm team](https://helm.sh/).
 
 Key capabilities of the tool:
 
-- See all installed charts and their revision history 
+- See all installed charts and their revision history
 - See manifest diff of the past revisions
 - Browse k8s resources resulting from the chart
 - Easy rollback or upgrade version with a clear and easy manifest diff
@@ -33,13 +31,15 @@ Key capabilities of the tool:
 - Can be used locally, or installed into Kubernetes cluster
 - Does not require Helm or Kubectl installed
 
-## Setup
+All the features of the tool can be discovered via our [features overview page](FEATURES.md).
+
+## Installation
 
 ### Standalone Binary
 
-Since version 1.0, the recommended install method is to just use standalone binary. It does not require Helm or kubectl to be installed. 
+Since version 1.0, the recommended install method is to just use standalone binary. It does not require Helm or kubectl to be installed.
 
-Download the appropriate [release package](https://github.com/komodorio/helm-dashboard/releases) for your platform, unpack it and just run `dashboard` binary from it.
+Download the appropriate [release package](https://github.com/komodorio/helm-dashboard/releases) for your platform, unpack it and just run `dashboard` binary from it. See below section for some more CLI parameters to use.
 
 ### Using Helm plugin manager
 
@@ -69,7 +69,7 @@ After installing, start the UI by running:
 helm dashboard
 ```
 
-The command above will launch the local Web server and will open the UI in new browser tab. The command will hang
+The command above will launch the local Web server and will open the UI in a new browser tab. The command will hang
 waiting for you to terminate it in command-line or web UI.
 
 You can see the list of available command-line flags by running `helm dashboard --help`.
@@ -84,7 +84,7 @@ If your port 8080 is busy, you can specify a different port to use via `--port <
 
 If you need to limit the operations to a specific namespace, please use `--namespace=...` in your command-line. You can specify multiple namespaces, separated by commas.
 
-If you don't want browser tab to automatically open, add `--no-browser` flag in your command line.
+If you don't want the browser tab to automatically open, add `--no-browser` flag in your command line.
 
 If you want to increase the logging verbosity and see all the debug info, use the `--verbose` flag.
 
@@ -94,45 +94,6 @@ If you want to increase the logging verbosity and see all the debug info, use th
 
 The official helm chart is [available here](https://github.com/komodorio/helm-charts/blob/master/charts/helm-dashboard)
 
-## Selected Features
-
-### Support for Local Charts
-
-Local Helm chart is a directory with specially named files and a `Chart.yaml` file, which you can install via Helm, without the need to publish the chart into Helm repository. Chart developers might want to experiment with the chart locally, before uploading into public repository. Also, a proprietary application might only use non-published chart as an approach to deploy the software.
-
-For all the above use-cases, you may use Helm Dashboard UI, spcifying location of your local chart folders via special `--local-chart` command-line parameter. The parameter might be specified multiple times, for example:
-
-```shell
-helm-dashboard --local-chart=/opt/charts/my-private-app --local-chart=/home/dev/sources/app/chart
-```
-
-When _valid_ local chart sources specified, the repository list would contain a surrogate `[local]` entry, with those charts listed inside. All the chart operations are normal: installing, reconfiguring and upgrading. 
-
-![](images/screenshot_local_charts.png)
-
-### Execute Helm tests
-
-For all the release(s) (installed helm charts), you can execute helm tests for that release. For the tests to execute successfully, you need to have existing tests for that helm chart.
-
-You can execute `helm test` for the specific release as below:
-![](images/screenshot_run_test.png)
-
-The result of executed `helm test` for the release will be displayed as below:
-![](images/screenshot_run_test_result.png)
-
-### Scanner Integrations
-
-Upon startup, Helm Dashboard detects the presence of [Trivy](https://github.com/aquasecurity/trivy)
-and [Checkov](https://github.com/bridgecrewio/checkov) scanners. When available, these scanners are offered on k8s
-resources page, as well as install/upgrade preview page.
-
-You can request scanning of the specific k8s resource in your cluster:
-![](images/screenshot_scan_resource.png)
-
-If you want to validate the k8s manifest prior to installing/reconfiguring a Helm chart, look for "Scan for Problems"
-button at the bottom of the dialog:
-![](images/screenshot_scan_manifest.png)
-
 ## Support Channels
 
 We have two main channels for supporting the Helm Dashboard
@@ -153,23 +114,30 @@ Kindly read our [Contributing Guide](CONTRIBUTING.md) to learn and understand ab
 
 Prerequisites, binaries installed and operational:
 
-- [Go](https://go.dev/doc/install)
+- [Golang](https://go.dev/doc/install)
+- Node.js
 
-There is a need to build binary for plugin to function, run:
+There is a need to build frontend and then backend as a series of commands, run:
 
 ### Linux
 
 ```shell
+cd frontend && npm run build && cd ..
 go build -o bin/dashboard .
 ```
 
+Or just `make build` that will do everything inside.
+
+Then, you can run `npm run dev` from `frontend` directory to work on frontend with Vite hot reload.
+
 ### Windows
 
 ```bat
+cd frontend && npm run build && cd ..
 go build -o bin\dashboard.exe .
 ```
 
-You can just run the `dashboard` or `dashboard.exe` binary directly, it will just work.
+You can just run the `dashboard` or `dashboard.exe` binary directly.
 
 To install, checkout the source code and run from source dir:
 
@@ -177,7 +145,7 @@ To install, checkout the source code and run from source dir:
 helm plugin install .
 ```
 
-Local installation of plugin just creates a symlink, so making the changes and rebuilding the binary would not require
+A local installation of the plugin just creates a symlink, so making the changes and rebuilding the binary would not require
 to
 reinstall a plugin.
 
@@ -188,3 +156,15 @@ helm dashboard
 ```
 
 Then, use the web UI.
+
+## Development Snapshots
+
+In our GitHub actions, we attach the built binaries as build artifacts, you can download and test it fully assembled.
+
+Also, we upload `unstable` tag for Docker image upon every build of `main` branch, you can make our Helm chart to use that image by providing values:
+
+```yaml
+image:
+  pullPolicy: Always
+  tag: unstable
+```

charts/helm-dashboard/Chart.yaml

@@ -3,7 +3,7 @@ type: application
 
 name: helm-dashboard
 description: A GUI Dashboard for Helm by Komodor
-icon: "https://raw.githubusercontent.com/komodorio/helm-dashboard/main/pkg/dashboard/static/logo.svg"
+icon: "https://raw.githubusercontent.com/komodorio/helm-dashboard/refs/heads/main/images/logo.svg"
 
-version: 0.1.6
-appVersion: "1.2.0" 
+version: 2.0.1
+appVersion: "1.3.3" 

charts/helm-dashboard/README.md

@@ -12,7 +12,7 @@ helm upgrade --install helm-dashboard komodorio/helm-dashboard
 
 This chart bootstraps a Helm Dashboard deployment on a [Kubernetes](http://kubernetes.io) cluster using the [Helm](https://helm.sh) package manager.
 
-While installed inside cluster, Helm Dashboard will run some additional backgroud actions, for example, will automatically update Helm repositories. To enable that behavior locally, set `HD_CLUSTER_MODE` env variable.
+While installed inside cluster, Helm Dashboard will run some additional background actions, for example, will automatically update Helm repositories. To enable that behavior locally, set `HD_CLUSTER_MODE` env variable.
 
 ## Prerequisites
 
@@ -50,32 +50,38 @@ For instance, you can place authentication proxy in front of Helm Dashboard, lik
 
 The following table lists the configurable parameters of the chart and their default values.
 
-| Parameter                            | Description                                                                                    | Default                              |
-| ------------------------------------ | ---------------------------------------------------------------------------------------------- | ------------------------------------ |
-| `image.repository`                   | Image registry/name                                                                            | `docker.io/komodorio/helm-dashboard` |
-| `image.tag`                          | Image tag                                                                                      |                                      |
-| `image.pullPolicy`                   | Image pull policy                                                                              | `IfNotPresent`                       |
-| `replicaCount`                       | Number of dashboard Pods to run                                                                | `1`                                  |
-| `dashboard.allowWriteActions`        | Enables write actions. Allow modifying, deleting and creating charts and kubernetes resources. | `true`                               |
-| `resources.requests.cpu`             | CPU resource requests                                                                          | `200m`                               |
-| `resources.limits.cpu`               | CPU resource limits                                                                            | `1`                                  |
-| `resources.requests.memory`          | Memory resource requests                                                                       | `256Mi`                              |
-| `resources.limits.memory`            | Memory resource limits                                                                         | `1Gi`                                |
-| `service.type           `            | Kubernetes service type                                                                        | `ClusterIP`                          |
-| `service.port           `            | Kubernetes service port                                                                        | `8080`                               |
-| `serviceAccount.create`              | Creates a service account                                                                      | `true`                               |
-| `serviceAccount.name`                | Optional name for the service account                                                          | `{RELEASE_FULLNAME}`                 |
-| `nodeSelector`                       | Node labels for pod assignment                                                                 |                                      |
-| `affinity`                           | Affinity settings for pod assignment                                                           |                                      |
-| `tolerations`                        | Tolerations for pod assignment                                                                 |                                      |
-| `dashboard.persistence.enabled`      | Enable helm data persistene using PVC                                                          | `true`                               |
-| `dashboard.persistence.accessModes`  | Persistent Volume access modes                                                                 | `["ReadWriteOnce"]`                  |
-| `dashboard.persistence.storageClass` | Persistent Volume storage class                                                                | `""`                                 |
-| `dashboard.persistence.size`         | Persistent Volume size                                                                         | `100M`                               |
-| `dashboard.persistence.hostPath`     | Set path in case you want to use local host path volumes (not recommended in production)       | `""`
-| `updateStrategy.type`                | Set up update strategy for helm-dashboard installation.                                        | `RollingUpdate`                    |             
-| `extraArgs`     | Set the arguments to be supplied to the helm-dashboard binary       | `[--no-browser, --bind=0.0.0.0]`
-
+| Parameter                             | Description                                                                                    | Default                          |
+|---------------------------------------|------------------------------------------------------------------------------------------------|----------------------------------|
+| `global.imageRegistry`                | Registry for all images, useful for private registry                                           | `""`                             |
+| `global.imagePullSecrets`             | Specify Docker-registry secret names as an array                                               | `[]`                             |
+| `image.repository`                    | Image registry/name                                                                            | `komodorio/helm-dashboard`       |
+| `image.tag`                           | Image tag                                                                                      |                                  |
+| `image.imagePullSecrets`              | Specify Docker-registry secret names as an array                                               | `[]`                             |
+| `image.pullPolicy`                    | Image pull policy                                                                              | `IfNotPresent`                   |
+| `replicaCount`                        | Number of dashboard Pods to run                                                                | `1`                              |
+| `dashboard.allowWriteActions`         | Enables write actions. Allow modifying, deleting and creating charts and kubernetes resources. | `true`                           |
+| `resources.requests.cpu`              | CPU resource requests                                                                          | `200m`                           |
+| `resources.limits.cpu`                | CPU resource limits                                                                            | `1`                              |
+| `resources.requests.memory`           | Memory resource requests                                                                       | `256Mi`                          |
+| `resources.limits.memory`             | Memory resource limits                                                                         | `1Gi`                            |
+| `service.type           `             | Kubernetes service type                                                                        | `ClusterIP`                      |
+| `service.port           `             | Kubernetes service port                                                                        | `8080`                           |
+| `serviceAccount.create`               | Creates a service account                                                                      | `true`                           |
+| `serviceAccount.name`                 | Optional name for the service account                                                          | `{RELEASE_FULLNAME}`             |
+| `nodeSelector`                        | Node labels for pod assignment                                                                 |                                  |
+| `affinity`                            | Affinity settings for pod assignment                                                           |                                  |
+| `tolerations`                         | Tolerations for pod assignment                                                                 |                                  |
+| `dashboard.persistence.enabled`       | Enable helm data persistene using PVC                                                          | `true`                           |
+| `dashboard.persistence.accessModes`   | Persistent Volume access modes                                                                 | `["ReadWriteOnce"]`              |
+| `dashboard.persistence.storageClass`  | Persistent Volume storage class                                                                | `""`                             |
+| `dashboard.persistence.size`          | Persistent Volume size                                                                         | `100M`                           |
+| `dashboard.persistence.hostPath`      | Set path in case you want to use local host path volumes (not recommended in production)       | `""`                             |
+| `updateStrategy.type`                 | Set up update strategy for helm-dashboard installation.                                        | `RollingUpdate`                  |             
+| `extraArgs`                           | Set the arguments to be supplied to the helm-dashboard binary                                  | `[--no-browser, --bind=0.0.0.0]` |
+| `testImage.repository`                | Test image registry/name                                                                       | `busybox`                        |
+| `testImage.tag`                       | Test image tag                                                                                 | `lastest`                        |
+| `testImage.imagePullSecrets`          | Specify Docker-registry secret names as an array                                               | `[]`                             |
+| `testImage.pullPolicy`                | Test image pull policy                                                                         | `IfNotPresent`                   |
 Specify each parameter using the `--set key=value[,key=value]` argument to `helm install`.
 
 ```bash

charts/helm-dashboard/templates/_commons.tpl

@@ -0,0 +1,51 @@
+{{/*
+Return the proper image name
+{{ include "common.images.image" ( dict "imageRoot" .Values.path.to.the.image "global" .Values.global ) }}
+*/}}
+{{- define "common.images.image" -}}
+{{- $registryName := .imageRoot.registry -}}
+{{- $repositoryName := .imageRoot.repository -}}
+{{- $separator := ":" -}}
+{{- $termination := .imageRoot.tag | toString -}}
+{{- if .global }}
+    {{- if .global.imageRegistry }}
+     {{- $registryName = .global.imageRegistry -}}
+    {{- end -}}
+{{- end -}}
+{{- if .imageRoot.digest }}
+    {{- $separator = "@" -}}
+    {{- $termination = .imageRoot.digest | toString -}}
+{{- end -}}
+{{- if $registryName }}
+    {{- printf "%s/%s%s%s" $registryName $repositoryName $separator $termination -}}
+{{- else -}}
+    {{- printf "%s%s%s"  $repositoryName $separator $termination -}}
+{{- end -}}
+{{- end -}}
+
+{{/*
+Return the proper Docker Image Registry Secret Names (deprecated: use common.images.renderPullSecrets instead)
+{{ include "common.images.pullSecrets" ( dict "images" (list .Values.path.to.the.image1, .Values.path.to.the.image2) "global" .Values.global) }}
+*/}}
+{{- define "common.images.pullSecrets" -}}
+  {{- $pullSecrets := list }}
+
+  {{- if .global }}
+    {{- range .global.imagePullSecrets -}}
+      {{- $pullSecrets = append $pullSecrets . -}}
+    {{- end -}}
+  {{- end -}}
+
+  {{- range .images -}}
+    {{- range .pullSecrets -}}
+      {{- $pullSecrets = append $pullSecrets . -}}
+    {{- end -}}
+  {{- end -}}
+
+  {{- if (not (empty $pullSecrets)) }}
+imagePullSecrets:
+    {{- range $pullSecrets }}
+  - name: {{ . }}
+    {{- end }}
+  {{- end }}
+{{- end -}}

charts/helm-dashboard/templates/_helpers.tpl

@@ -60,3 +60,31 @@ Create the name of the service account to use
 {{- default "default" .Values.serviceAccount.name }}
 {{- end }}
 {{- end }}
+
+{{/*
+Return the proper image Registry Secret Names
+*/}}
+{{- define "helm-dashboard.imagePullSecrets" -}}
+{{ include "common.images.pullSecrets" (dict "images" (list .Values.image) "global" .Values.global) }}
+{{- end -}}
+
+
+{{/*
+Return the proper image name
+*/}}
+{{- define "helm-dashboard.image" -}}
+{{- $image := .Values.image -}}
+{{- $tag := .Chart.AppVersion -}}
+{{- if $image.tag -}}
+{{- $tag = $image.tag -}}
+{{- end -}}
+{{- $_ := set $image "tag" $tag -}}
+{{ include "common.images.image" (dict "imageRoot" $_ "global" .Values.global) }}
+{{- end -}}
+
+{{/*
+Return the proper image name
+*/}}
+{{- define "test.image" -}}
+{{ include "common.images.image" (dict "imageRoot" .Values.testImage "global" .Values.global) }}
+{{- end -}}

charts/helm-dashboard/templates/deployment.yaml

@@ -21,10 +21,7 @@ spec:
       labels:
         {{- include "helm-dashboard.selectorLabels" . | nindent 8 }}
     spec:
-      {{- with .Values.imagePullSecrets }}
-      imagePullSecrets:
-        {{- toYaml . | nindent 8 }}
-      {{- end }}
+      {{- include "helm-dashboard.imagePullSecrets" . | nindent 6 }}
       serviceAccountName: {{ include "helm-dashboard.serviceAccountName" . }}
       securityContext:
         {{- toYaml .Values.podSecurityContext | nindent 8 }}
@@ -38,7 +35,7 @@ spec:
           {{- end }}
           securityContext:
             {{- toYaml .Values.securityContext | nindent 12 }}
-          image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
+          image: "{{ include "helm-dashboard.image" . }}"
           imagePullPolicy: {{ .Values.image.pullPolicy }}
           env:
             - name: HELM_CACHE_HOME
@@ -48,7 +45,7 @@ spec:
             - name: HELM_DATA_HOME
               value: /opt/dashboard/helm/data
             - name: DEBUG
-              value: {{- ternary " 1" "" .Values.debug }}
+              value: {{- ternary " '1'" "" .Values.debug }}
             {{- if .Values.dashboard.namespace }}
             - name: HELM_NAMESPACE
               value: {{ .Values.dashboard.namespace }}
@@ -60,11 +57,11 @@ spec:
           livenessProbe:
             httpGet:
               path: /status
-              port: http
+              port: 8080
           readinessProbe:
             httpGet:
               path: /status
-              port: http
+              port: 8080
           resources:
             {{- toYaml .Values.resources | nindent 12 }}
           volumeMounts:

charts/helm-dashboard/templates/pvc.yaml

@@ -14,8 +14,10 @@ spec:
   {{- if .Values.dashboard.persistence.hostPath }}
   storageClassName: ""
   {{- else }}
+  {{- if kindIs "string" .Values.dashboard.persistence.storageClass }}
   storageClassName: "{{ .Values.dashboard.persistence.storageClass }}"
   {{- end }}
+  {{- end }}
   accessModes:
   {{- if not (empty .Values.dashboard.persistence.accessModes) }}
   {{- range .Values.dashboard.persistence.accessModes }}

charts/helm-dashboard/templates/serviceaccount.yaml

@@ -9,8 +9,6 @@ metadata:
   annotations:
     {{- toYaml . | nindent 4 }}
   {{- end }}
-{{- end }}
-
 ---
 kind: ClusterRole
 apiVersion: rbac.authorization.k8s.io/v1
@@ -24,6 +22,7 @@ rules:
   {{- else }}
     verbs: ["get", "list", "watch"]
   {{- end }}
+{{- end }}
 ---
 apiVersion: rbac.authorization.k8s.io/v1
 kind: ClusterRoleBinding
@@ -36,4 +35,4 @@ roleRef:
 subjects:
   - kind: ServiceAccount
     namespace: {{ .Release.Namespace }}
-    name: {{ include "helm-dashboard.serviceAccountName" . }}
+    name: {{ include "helm-dashboard.serviceAccountName" . }}

charts/helm-dashboard/templates/tests/test-connection.yaml

@@ -7,9 +7,10 @@ metadata:
   annotations:
     "helm.sh/hook": test
 spec:
+  {{- include "helm-dashboard.imagePullSecrets" . | nindent 2 }}
   containers:
     - name: wget
-      image: busybox
+      image: {{ include "test.image" . }}
       command: ['wget']
       args: ['--timeout=5', '{{ include "helm-dashboard.fullname" . }}:{{ .Values.service.port }}']
   restartPolicy: Never

charts/helm-dashboard/values.yaml

@@ -3,13 +3,22 @@ replicaCount: 1
 # Flag for setting environment to debug mode 
 debug: false
 
+global:
+  ## @param global.imageRegistry Global Docker image registry
+  imageRegistry: ""
+  ## Optionally specify an array of imagePullSecrets.
+  ## Example:
+  ## imagePullSecrets:
+  ##   - myRegistryKeySecretName
+  imagePullSecrets: []
+
 image:
   repository: komodorio/helm-dashboard
   pullPolicy: IfNotPresent
   # Overrides the image tag whose default is the chart appVersion.
   tag: ""
+  imagePullSecrets: []
 
-imagePullSecrets: []
 nameOverride: ""
 fullnameOverride: ""
 
@@ -43,7 +52,7 @@ dashboard:
     ##   set, choosing the default provisioner.  (gp2 on AWS, standard on
     ##   GKE, AWS & OpenStack)
     ##
-    storageClass: ""
+    storageClass: null
 
     ## Helm Dashboard Persistent Volume access modes
     ## Must match those of existing PV or dynamic provisioner
@@ -119,3 +128,15 @@ tolerations: []
 
 affinity: {}
 
+
+testImage:
+  repository: busybox
+  tag: latest
+  pullPolicy: IfNotPresent
+  # Overrides the image tag whose default is the chart appVersion.
+  # tag: ""
+  ## Optionally specify an array of imagePullSecrets.
+  ## Example:
+  ## imagePullSecrets:
+  ##   - myRegistryKeySecretName
+  imagePullSecrets: []

ci/build-ui.sh

@@ -0,0 +1,10 @@
+#!/bin/bash -e
+
+WORKING_DIRECTORY="$PWD"
+
+cd "$WORKING_DIRECTORY/dashboard"
+
+npm i
+npm run build
+
+cp -a "$WORKING_DIRECTORY/dashboard/static/" "$WORKING_DIRECTORY/pkg/dashboard/static/"

frontend/.env

@@ -0,0 +1 @@
+VITE_SERVER_PORT=8080

frontend/.eslintrc.cjs

@@ -0,0 +1,44 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ["enpitech", "plugin:@typescript-eslint/recommended"],
+  globals: {
+    heap: "writable",
+    DD_RUM: "writable",
+  },
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
+      },
+    },
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint", "react"],
+  rules: {
+    // please don't make an error occur here we use console.error
+    "no-console": ["error", { allow: ["error"] }],
+    "no-alert": "error",
+    "no-debugger": "error",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { vars: "all", args: "after-used", ignoreRestSiblings: true },
+    ],
+    "react/react-in-jsx-scope": "off", // Vite does not require you to import React into each component file
+    "linebreak-style": ["error", "unix"],
+    quotes: ["error", "double"],
+    semi: ["error", "always"],
+    "@typescript-eslint/no-explicit-any": "warn",
+  },
+};

frontend/.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+static
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+/storybook-static

frontend/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

frontend/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

frontend/.prettierrc.yaml

@@ -0,0 +1,4 @@
+trailingComma: "es5"
+tabWidth: 2
+semi: true
+singleQuote: false

frontend/.storybook/main.cjs

@@ -0,0 +1,32 @@
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "@storybook/builder-vite",
+  },
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        {
+          loader: "postcss-loader",
+          options: {
+            postcssOptions: {
+              plugins: [require("tailwindcss"), require("autoprefixer")],
+            },
+          },
+        },
+      ],
+      include: path.resolve(__dirname, "../"),
+    });
+    return config;
+  },
+  features: {
+    storyStoreV7: true,
+  },
+};

frontend/.storybook/main.ts

@@ -0,0 +1,25 @@
+// .storybook/main.ts
+
+import type { StorybookConfig } from "@storybook/react-vite";
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-actions",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-styling",
+    {
+      name: "@storybook/addon-styling",
+    },
+    "@storybook/addon-mdx-gfm",
+  ],
+  core: {},
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+export default config;

frontend/.storybook/preview-body.html

@@ -0,0 +1 @@
+<div id="portal"></div>

frontend/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

frontend/.storybook/preview.cjs

@@ -0,0 +1,12 @@
+import "../src/index.css";
+import "tailwindcss/tailwind.css";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

frontend/.storybook/preview.js

@@ -0,0 +1,12 @@
+import "tailwindcss/tailwind.css";
+import "../src/index.css";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

frontend/README.md

@@ -0,0 +1,72 @@
+# Helm dashboard React
+
+Welcome to the frontend of the helm dashboard.
+We care most about keeping the project:
+1. Maintainable
+2. Extendable
+3. Contributor friendly
+
+# The FE Stack
+
+- Vite, as our build tool.
+- React, as our UI library.
+- TypeScript and ESLint will keep the project safe, please keep them clean.
+- Tailwind for styling.
+- React-Query for fetching data from the backend.
+- Storybook is utilized to develop a component library.
+
+Please follow through the file structure to understand how things are structured and should be used.
+
+# Contribution guide
+
+## Setting up your development environment
+
+1. First you should fork this repository.
+2. Clone your new repository using `git clone <https_or_ssh_url>`.
+
+## Running helm dashboard
+
+1. Make sure you cloned the project correctly. This is explained in this [stage](https://github.com/komodorio/helm-dashboard/blob/helm-dashboard-v2/dashboard/README.md#setting-up-your-development-environment).
+2. run the backend server. This is also explained in the above link.
+2. go to `frontend` in your local project.
+3. in order to install dependencies and start the development server
+   - `npm i`
+   - `npm run dev`
+4. with the default integration the dashboard should run on http://localhost:5173/
+
+
+# Component library
+
+We created a components library to have a consistent design system throughout the project. Please rely on these components.
+Additional information and examples on how to use them are available when you run Storybook, which shows them in an interactive way and in different scenarios.
+
+Once you run it, you'll be able to see pre-made scenarios, documentation, and play with the component properties.
+
+To run Storybook, make sure that all the dependencies are installed and run:
+
+```shell
+npm run storybook
+```
+
+Refer to the [official documentation](https://storybook.js.org/docs/react/get-started/install) for more information.
+
+# Helpers
+
+- Icons: https://react-icons.github.io/react-icons/
+- Tailwind: https://tailwindcss.com/docs
+- Typescript: https://www.typescriptlang.org/docs/handbook/intro.html
+- React-query: https://react-query.tanstack.com/overview
+
+# Coding Conventions
+
+- Use only functional components
+- Please prefer async/await over .then
+- wrap every function with try/catch unless you want to display the error to the user
+  in such case we have a general error handler in the app.tsx file which will display the error to the user in a modal
+- Please use the component library we created, it will help us keep a consistent design system
+- Please use the react-query library to fetch data from the backend
+- Prefer use fetch API over axios, if you see axios in the code, replace it with fetch.
+- Use <Outlet> for inner routes
+- User query params in the url for filters or any other state that can be represented
+- Hooks:
+  - useCustomSearchParams - for search params

frontend/cypress.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: "react",
+      bundler: "vite",
+    },
+  },
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

frontend/cypress/e2e/addRepository.cy.ts

@@ -0,0 +1,53 @@
+describe("Adding repository flow", () => {
+  const addChartNameInput = "[data-cy='add-chart-name']";
+  const addChartUrlInput = "[data-cy='add-chart-url']";
+  const addChartRepositoryButton = "[data-cy='add-chart-repository-button']";
+
+  it("Adding new chart repository", () => {
+    cy.intercept("GET", "http://localhost:5173/status", {
+      fixture: "status.json",
+    }).as("status");
+
+    cy.intercept("GET", "http://localhost:5173/api/helm/releases", {
+      fixture: "releases.json",
+    }).as("releases");
+
+    cy.visit(
+      "http://localhost:5173/#/minikube/installed?filteredNamespace=default"
+    );
+
+    cy.get("[data-cy='navigation-link']").contains("Repository").click();
+    cy.get("[data-cy='install-repository-button']").click();
+
+    cy.get(addChartNameInput).type("Komodorio");
+    cy.get(addChartUrlInput).type("https://helm-charts.komodor.io");
+
+    cy.intercept("GET", "http://localhost:5173/api/helm/repositories", {
+      fixture: "repositories.json",
+    }).as("repositories");
+
+    cy.get(addChartRepositoryButton).click();
+
+    cy.contains("https://helm-charts.komodor.io");
+
+    cy.get("[data-cy='chart-viewer-install-button']")
+      .eq(0)
+      .click({ force: true })
+      .contains("Install")
+      .click();
+
+    cy.intercept("POST", "http://localhost:5173/api/helm/releases/default", {
+      fixture: "defaultReleases.json",
+    }).as("defaultReleases");
+
+    cy.intercept(
+      "GET",
+      "http://localhost:5173/api/helm/releases/default/helm-dashboard/history",
+      { fixture: "history.json" }
+    ).as("history");
+
+    cy.contains("Confirm").click();
+
+    cy.wait(["@defaultReleases", "@history"]);
+  });
+});

frontend/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

frontend/cypress/fixtures/history.json

@@ -0,0 +1,13 @@
+[
+  {
+      "revision": 1,
+      "updated": "2024-01-17T22:39:07.2371554+02:00",
+      "status": "deployed",
+      "chart": "helm-dashboard-0.1.10",
+      "app_version": "1.3.3",
+      "description": "Install complete",
+      "chart_name": "helm-dashboard",
+      "chart_ver": "0.1.10",
+      "has_tests": true
+  }
+]

frontend/cypress/fixtures/releases.json

@@ -0,0 +1 @@
+[]

frontend/cypress/fixtures/repositories.json

@@ -0,0 +1,6 @@
+[
+  {
+    "name": "Komodorio",
+    "url": "https://helm-charts.komodor.io"
+  }
+]

frontend/cypress/fixtures/status.json

@@ -0,0 +1,7 @@
+{
+  "CurVer": "0.0.0",
+  "LatestVer": "v1.3.3",
+  "Analytics": false,
+  "CacheHitRatio": 0,
+  "ClusterMode": false
+}

frontend/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

frontend/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

frontend/cypress/support/component.ts

@@ -0,0 +1,12 @@
+import "./commands";
+import { mount } from "cypress/react18";
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}
+
+Cypress.Commands.add("mount", mount);

frontend/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

frontend/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/assets/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Helm Dashboard</title>
+    <script src="/assets/analytics.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/lightfair.min.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <div id="portal"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "dashboard",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {
+    "@tanstack/react-query": "^4.35.3",
+    "@types/luxon": "^3.3.0",
+    "@types/marked": "^5.0.0",
+    "compare-versions": "^6.0.0-rc.2",
+    "diff2html": "^3.4.46",
+    "eslint-config-enpitech": "^1.0.9",
+    "flowbite": "^1.6.6",
+    "flowbite-react": "^0.4.9",
+    "highlight.js": "^11.8.0",
+    "html-react-parser": "^4.0.0",
+    "luxon": "^3.3.0",
+    "marked": "^5.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.10",
+    "react-icons": "^4.8.0",
+    "react-modern-drawer": "^1.2.0",
+    "react-router-dom": "^6.9.0",
+    "react-select": "^5.7.4",
+    "swagger-ui-react": "^5.1.1",
+    "uuid": "^9.0.1",
+    "vite-plugin-static-copy": "^0.17.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.0",
+    "@storybook/addon-actions": "^7.0.24",
+    "@storybook/addon-essentials": "^7.0.24",
+    "@storybook/addon-interactions": "^7.0.24",
+    "@storybook/addon-links": "^7.0.24",
+    "@storybook/addon-mdx-gfm": "7.0.24",
+    "@storybook/addon-styling": "^1.3.2",
+    "@storybook/react": "^7.0.24",
+    "@storybook/react-vite": "7.5.0",
+    "@storybook/testing-library": "^0.2.0",
+    "@tailwindcss/line-clamp": "^0.4.4",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@types/swagger-ui-react": "^4.18.0",
+    "@types/uuid": "^9.0.4",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
+    "@vitejs/plugin-react": "^3.1.0",
+    "autoprefixer": "^10.4.14",
+    "cypress": "^13.3.0",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-storybook": "^0.6.12",
+    "lint-staged": "^13.2.3",
+    "postcss": "^8.4.24",
+    "prettier": "2.8.4",
+    "react-icons": "^4.8.0",
+    "storybook": "7.5.0",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.0",
+    "vite-plugin-html-config": "^1.0.11"
+  },
+  "lint-staged": {
+    "**/*": "prettier --write --ignore-unknown"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "npx eslint src/",
+    "lint:fix": "npm run lint -- --fix",
+    "prettier": "npx prettier src/ --check",
+    "prettier:fix": "npm run prettier -- --write",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "Apache-2.0"
+}

frontend/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/public/analytics.js

@@ -0,0 +1,167 @@
+const xhr = new XMLHttpRequest();
+const TRACK_EVENT_TYPE = "track";
+const IDENTIFY_EVENT_TYPE = "identify";
+const BASE_ANALYTIC_MSG = {
+  method: "POST",
+  mode: "cors",
+  cache: "no-cache",
+  headers: {
+    "Content-Type": "application/json",
+    "api-key": "komodor.analytics@admin.com"
+  },
+  redirect: "follow",
+  referrerPolicy: "no-referrer"
+};
+xhr.onload = function() {
+  if (xhr.readyState === XMLHttpRequest.DONE) {
+    const status = JSON.parse(xhr.responseText);
+    const version = status.CurVer;
+    if (status.Analytics) {
+      enableDD(version);
+      enableHeap(version, status.ClusterMode);
+      enableSegmentBackend(version, status.ClusterMode);
+    } else {
+      console.log("Analytics is disabled in this session");
+    }
+  }
+};
+xhr.open("GET", "/status", true);
+xhr.send(null);
+
+function enableDD(version) {
+  (function(h, o, u, n, d) {
+    h = h[d] = h[d] || {
+      q: [],
+      onReady: function(c) {
+        h.q.push(c);
+      }
+    };
+    d = o.createElement(u);
+    d.async = true;
+    d.src = n;
+    n = o.getElementsByTagName(u)[0];
+    n.parentNode.insertBefore(d, n);
+  })(
+    window,
+    document,
+    "script",
+    "https://www.datadoghq-browser-agent.com/datadog-rum-v4.js",
+    "DD_RUM"
+  );
+  DD_RUM.onReady(function() {
+    DD_RUM.init({
+      clientToken: "pub16d64cd1c00cf073ce85af914333bf72",
+      applicationId: "e75439e5-e1b3-46ba-a9e9-a2e58579a2e2",
+      site: "datadoghq.com",
+      service: "helm-dashboard",
+      version: version,
+      trackInteractions: true,
+      trackResources: true,
+      trackLongTasks: true,
+      defaultPrivacyLevel: "mask",
+      sessionReplaySampleRate: 0
+    });
+  });
+}
+
+function enableHeap(version, inCluster) {
+  (window.heap = window.heap || []),
+    (heap.load = function(e, t) {
+      (window.heap.appid = e), (window.heap.config = t = t || {});
+      let r = document.createElement("script");
+      (r.type = "text/javascript"),
+        (r.async = !0),
+        (r.src = "https://cdn.heapanalytics.com/js/heap-" + e + ".js");
+      let a = document.getElementsByTagName("script")[0];
+      a.parentNode.insertBefore(r, a);
+      for (
+        let n = function(e) {
+            return function() {
+              heap.push([e].concat(Array.prototype.slice.call(arguments, 0)));
+            };
+          },
+          p = [
+            "addEventProperties",
+            "addUserProperties",
+            "clearEventProperties",
+            "identify",
+            "resetIdentity",
+            "removeEventProperty",
+            "setEventProperties",
+            "track",
+            "unsetEventProperty"
+          ],
+          o = 0;
+        o < p.length;
+        o++
+      )
+        heap[p[o]] = n(p[o]);
+    });
+  heap.load("4249623943");
+  window.heap.addEventProperties({
+    version: version,
+    installationMode: inCluster ? "cluster" : "local"
+  });
+}
+
+function sendStats(name, prop) {
+  if (window.heap) {
+    window.heap.track(name, prop);
+  }
+}
+
+function enableSegmentBackend(version, ClusterMode) {
+  sendToSegmentThroughAPI(
+    "helm dashboard loaded",
+    { version, installationMode: ClusterMode ? "cluster" : "local" },
+    TRACK_EVENT_TYPE
+  );
+}
+
+function sendToSegmentThroughAPI(eventName, properties, segmentCallType) {
+  const userId = getUserId();
+  try {
+    sendData(properties, segmentCallType, userId, eventName);
+  } catch (e) {
+    console.log("failed sending data to segment", e);
+  }
+}
+
+function sendData(data, eventType, userId, eventName) {
+  const body = createBody(eventType, userId, data, eventName);
+  return fetch(`https://api.komodor.com/analytics/segment/${eventType}`, {
+    ...BASE_ANALYTIC_MSG,
+    body: JSON.stringify(body)
+  });
+}
+
+function createBody(segmentCallType, userId, params, eventName) {
+  const data = { userId: userId };
+  if (segmentCallType === IDENTIFY_EVENT_TYPE) {
+    data["traits"] = params;
+  } else if (segmentCallType === TRACK_EVENT_TYPE) {
+    if (!eventName) {
+      throw new Error("no eventName parameter on segment track call");
+    }
+    data["properties"] = params;
+    data["eventName"] = eventName;
+  }
+  return data;
+}
+
+const getUserId = (() => {
+  let userId = null;
+  return () => {
+    if (!userId) {
+      userId = crypto.randomUUID ? crypto.randomUUID() : uuid();
+    }
+    return userId;
+  };
+})();
+
+function uuid() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    let r = Math.random() * 16 | 0, v = c === "x" ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}

frontend/public/openapi.json

@@ -0,0 +1,681 @@
+{
+    "openapi": "3.0.3",
+    "info": {
+      "title": "Helm Dashboard API",
+      "version": ""
+    },
+    "tags": [
+      {
+        "name": "Releases"
+      },
+      {
+        "name": "Repositories"
+      },
+      {
+        "name": "K8s"
+      },
+      {
+        "name": "Miscellaneous"
+      }
+    ],
+    "paths": {
+      "/api/helm/releases": {
+        "get": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Get list of installed releases",
+          "responses": {
+            "200": {
+              "description": "Returns list of installed releases"
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace, use '[empty]' if you want to use k8s context default"
+          }
+        ],
+        "post": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Install new release",
+          "requestBody": {
+            "content": {
+              "multipart/form-data": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "name": {
+                      "type": "string",
+                      "required": true
+                    },
+                    "chart": {
+                      "type": "string",
+                      "required": true
+                    },
+                    "version": {
+                      "type": "string"
+                    },
+                    "values": {
+                      "type": "string",
+                      "description": "Text of values.yaml to use"
+                    },
+                    "preview": {
+                      "type": "boolean"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "responses": {
+            "200": {
+              "description": "In case preview=true, the preview diff is generated",
+              "content": {
+                "text/plain": {}
+              }
+            },
+            "202": {
+              "description": "In case preview=false, the actial install is performed and resulting release object is returned",
+              "content": {
+                "application/json": {}
+              }
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          }
+        ],
+        "post": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Upgrade/reconfigure existing release",
+          "requestBody": {
+            "content": {
+              "multipart/form-data": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "name": {
+                      "type": "string",
+                      "required": true
+                    },
+                    "chart": {
+                      "type": "string",
+                      "required": true
+                    },
+                    "version": {
+                      "type": "string"
+                    },
+                    "values": {
+                      "type": "string",
+                      "description": "Text of values.yaml to use"
+                    },
+                    "preview": {
+                      "type": "boolean"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "responses": {
+            "200": {
+              "description": "In case preview=true, the preview diff is generated",
+              "content": {
+                "text/plain": {}
+              }
+            },
+            "202": {
+              "description": "In case preview=false, the actial install is performed and resulting release object is returned",
+              "content": {
+                "application/json": {}
+              }
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}/history": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          }
+        ],
+        "get": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Get revision history for release",
+          "responses": {
+            "200": {
+              "description": "List of release revisions"
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}/manifest": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          },
+          {
+            "name": "revision",
+            "in": "query",
+            "description": "Revision to get data from"
+          },
+          {
+            "name": "revisionDiff",
+            "in": "query",
+            "description": "Revision to diff against"
+          }
+        ],
+        "get": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Get manifest for release",
+          "responses": {
+            "200": {
+              "description": "Manifest text, or diff if revisionDiff is specified"
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}/values": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          },
+          {
+            "name": "revision",
+            "in": "query",
+            "description": "Revision to get data from"
+          },
+          {
+            "name": "revisionDiff",
+            "in": "query",
+            "description": "Revision to diff against"
+          },
+          {
+            "name": "userDefined",
+            "in": "query",
+            "description": "If set, only user-defined values will be listed"
+          }
+        ],
+        "get": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Get values for release",
+          "responses": {
+            "200": {
+              "description": "Values YAML text, or diff if revisionDiff is specified"
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}/notes": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          },
+          {
+            "name": "revision",
+            "in": "query",
+            "description": "Revision to get data from"
+          },
+          {
+            "name": "revisionDiff",
+            "in": "query",
+            "description": "Revision to diff against"
+          }
+        ],
+        "get": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Get textual notes for release",
+          "responses": {
+            "200": {
+              "description": "Notes text, or diff if revisionDiff is specified"
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}/resources": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          },
+          {
+            "name": "health",
+            "in": "query",
+            "description": "Flag to query k8s health status of resources"
+          }
+        ],
+        "get": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "List of installed k8s resources for this release",
+          "responses": {
+            "200": {
+              "description": "Structured list of resources",
+              "content": {
+                "application/json": {}
+              }
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}/rollback": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          }
+        ],
+        "post": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Rollback the release to a previous revision",
+          "requestBody": {
+            "content": {
+              "application/x-www-form-urlencoded": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "revision": {
+                      "type": "integer"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "responses": {
+            "202": {
+              "description": "Rolled back successfully"
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}/test": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          }
+        ],
+        "post": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Run the tests on a release",
+          "responses": {
+            "200": {
+              "description": "Logs of a test run"
+            }
+          }
+        }
+      },
+      "/api/helm/repositories": {
+        "get": {
+          "tags": [
+            "Repositories"
+          ],
+          "description": "Get list of Helm repositories",
+          "responses": {
+            "200": {
+              "description": "Returns list of Helm repositories"
+            }
+          }
+        },
+        "post": {
+          "tags": [
+            "Repositories"
+          ],
+          "description": "Adds new repository",
+          "requestBody": {
+            "content": {
+              "application/x-www-form-urlencoded": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "name": {
+                      "type": "string"
+                    },
+                    "url": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "name",
+                    "url"
+                  ]
+                }
+              }
+            }
+          },
+          "responses": {
+            "204": {
+              "description": "Empty response in case repository were added"
+            }
+          }
+        }
+      },
+      "/api/helm/repositories/{repo}": {
+        "parameters": [
+          {
+            "name": "repo",
+            "in": "path",
+            "description": "Name of Helm repository"
+          }
+        ],
+        "get": {
+          "tags": [
+            "Repositories"
+          ],
+          "description": "Get list of charts in repository",
+          "responses": {
+            "200": {
+              "description": "Returns list of charts"
+            }
+          }
+        },
+        "post": {
+          "tags": [
+            "Repositories"
+          ],
+          "description": "Update repository from remote",
+          "responses": {
+            "204": {
+              "description": "Empty response"
+            }
+          }
+        },
+        "delete": {
+          "tags": [
+            "Repositories"
+          ],
+          "description": "Remove repository",
+          "responses": {
+            "204": {
+              "description": "Empty response"
+            }
+          }
+        }
+      },
+      "/api/helm/repositories/latestver": {
+        "parameters": [
+          {
+            "name": "name",
+            "in": "query",
+            "description": "Name of Helm chart to search for",
+            "required": true
+          }
+        ],
+        "description": "Find the latest available version of specified chart through all the repositories",
+        "get": {
+          "tags": [
+            "Repositories"
+          ],
+          "responses": {
+            "200": {
+              "description": "The object with latest available version is returned"
+            },
+            "204": {
+              "description": "In case no matching repository found, the response is empty with status 204"
+            }
+          }
+        }
+      },
+      "/api/helm/repositories/versions": {
+        "parameters": [
+          {
+            "name": "name",
+            "in": "query",
+            "description": "Name of Helm chart to search for",
+            "required": true
+          }
+        ],
+        "get": {
+          "description": "Get the list of versions for specified chart across the repositories",
+          "tags": [
+            "Repositories"
+          ],
+          "responses": {
+            "200": {
+              "description": "The list if chart versions is returned"
+            }
+          }
+        }
+      },
+      "/api/helm/repositories/values": {
+        "parameters": [
+          {
+            "name": "chart",
+            "in": "query",
+            "description": "Name of Helm chart to search for, in format of <repository>/<chart-name>",
+            "required": true
+          },
+          {
+            "name": "version",
+            "in": "query",
+            "description": "Version of Helm chart to get values from",
+            "required": true
+          }
+        ],
+        "get": {
+          "description": "Get the original values.yaml file for the chart",
+          "tags": [
+            "Repositories"
+          ],
+          "responses": {
+            "200": {
+              "description": "The content of values.yaml"
+            }
+          }
+        }
+      },
+      "/api/k8s/contexts": {
+        "get": {
+          "tags": [
+            "K8s"
+          ],
+          "description": "Get list of kubectl contexts configured locally",
+          "responses": {
+            "200": {
+              "description": "Returns list of contexts"
+            }
+          }
+        }
+      },
+      "/api/k8s/{kind}/get": {
+        "parameters": [
+          {
+            "name": "kind",
+            "in": "path",
+            "description": "Kind of kubernetes resource"
+          },
+          {
+            "name": "name",
+            "in": "query",
+            "description": "Name of kubernetes resource",
+            "required": true
+          },
+          {
+            "name": "namespace",
+            "in": "query",
+            "description": "Namespace of kubernetes resource",
+            "required": true
+          }
+        ],
+        "get": {
+          "tags": [
+            "K8s"
+          ],
+          "responses": {
+            "200": {
+              "description": "Returns resources information"
+            }
+          }
+        }
+      },
+      "/api/k8s/{kind}/list": {
+        "parameters": [
+          {
+            "name": "kind",
+            "in": "path",
+            "description": "Kind of kubernetes resource",
+            "schema": {
+              "enum": [
+                "namespaces"
+              ]
+            }
+          }
+        ],
+        "get": {
+          "tags": [
+            "K8s"
+          ],
+          "responses": {
+            "200": {
+              "description": "Returns list of resources"
+            }
+          }
+        }
+      },
+      "/api/k8s/{kind}/describe": {
+        "parameters": [
+          {
+            "name": "kind",
+            "in": "path",
+            "description": "Kind of kubernetes resource"
+          },
+          {
+            "name": "name",
+            "in": "query",
+            "description": "Name of kubernetes resource",
+            "required": true
+          },
+          {
+            "name": "namespace",
+            "in": "query",
+            "description": "Namespace of kubernetes resource",
+            "required": true
+          }
+        ],
+        "get": {
+          "tags": [
+            "K8s"
+          ],
+          "responses": {
+            "200": {
+              "content": {
+                "text/plain": {}
+              },
+              "description": "Returns describe text"
+            }
+          }
+        }
+      },
+      "/": {
+        "delete": {
+          "tags": [
+            "Miscellaneous"
+          ],
+          "description": "Shuts down the Helm Dashboard application",
+          "responses": {
+            "202": {
+              "description": "Shutdown command has been accepted"
+            }
+          }
+        }
+      },
+      "/status": {
+        "get": {
+          "tags": [
+            "Miscellaneous"
+          ],
+          "description": "Gets application status",
+          "responses": {
+            "200": {
+              "description": "Returns JSON with some options",
+              "headers": {
+                "X-Application-Name": {
+                  "description": "A string to self-identify the application"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }

frontend/src/API/apiService.ts

@@ -0,0 +1,164 @@
+import {
+  Chart,
+  ChartVersion,
+  Release,
+  ReleaseHealthStatus,
+  ReleaseRevision,
+  Repository,
+} from "../data/types";
+import { type QueryFunctionContext } from "@tanstack/react-query";
+interface ClustersResponse {
+  AuthInfo: string;
+  Cluster: string;
+  IsCurrent: boolean;
+  Name: string;
+  Namespace: string;
+}
+class ApiService {
+  currentCluster = "";
+  constructor(protected readonly isMockMode: boolean = false) {}
+
+  setCluster = (cluster: string) => {
+    this.currentCluster = cluster;
+  };
+
+  public async fetchWithDefaults<T>(
+    url: string,
+    options?: RequestInit
+  ): Promise<T> {
+    let response;
+
+    if (this.currentCluster) {
+      const headers = new Headers(options?.headers);
+      if (!headers.has("X-Kubecontext")) {
+        headers.set("X-Kubecontext", this.currentCluster);
+      }
+      response = await fetch(url, { ...options, headers });
+    } else {
+      response = await fetch(url, options);
+    }
+
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(error);
+    }
+
+    let data;
+    if (!response.headers.get("Content-Type")) {
+      return {} as T;
+    } else if (response.headers.get("Content-Type")?.includes("text/plain")) {
+      data = await response.text();
+    } else {
+      data = await response.json();
+    }
+    return data;
+  }
+
+  getToolVersion = async () => {
+    const response = await fetch("/status");
+    const data = await response.json();
+    return data;
+  };
+
+  getRepositoryLatestVersion = async (repositoryName: string) => {
+    const data = await this.fetchWithDefaults(
+      `/api/helm/repositories/latestver?name=${repositoryName}`
+    );
+    return data;
+  };
+
+  getInstalledReleases = async () => {
+    const data = await this.fetchWithDefaults("/api/helm/releases");
+    return data;
+  };
+
+  getClusters = async () => {
+    const response = await fetch("/api/k8s/contexts");
+    const data = (await response.json()) as ClustersResponse[];
+    return data;
+  };
+
+  getNamespaces = async () => {
+    const data = await this.fetchWithDefaults("/api/k8s/namespaces/list");
+    return data;
+  };
+
+  getRepositories = async () => {
+    const data = await this.fetchWithDefaults("/api/helm/repositories");
+    return data;
+  };
+
+  getRepositoryCharts = async ({
+    queryKey,
+  }: QueryFunctionContext<Chart[], Repository>) => {
+    const [, repository] = queryKey;
+    const data = await this.fetchWithDefaults(
+      `/api/helm/repositories/${repository}`
+    );
+    return data;
+  };
+
+  getChartVersions = async ({
+    queryKey,
+  }: QueryFunctionContext<ChartVersion[], Chart>) => {
+    const [, chart] = queryKey;
+
+    const data = await this.fetchWithDefaults(
+      `/api/helm/repositories/versions?name=${chart.name}`
+    );
+    return data;
+  };
+
+  getResourceStatus = async ({
+    release,
+  }: {
+    release: Release;
+  }): Promise<ReleaseHealthStatus[] | null> => {
+    if (!release) return null;
+
+    const data = await this.fetchWithDefaults<
+      Promise<ReleaseHealthStatus[] | null>
+    >(
+      `/api/helm/releases/${release.namespace}/${release.name}/resources?health=true`
+    );
+    return data;
+  };
+
+  getReleasesHistory = async ({
+    queryKey,
+  }: QueryFunctionContext<Release[], Release>): Promise<ReleaseRevision[]> => {
+    const [, params] = queryKey;
+
+    if (!params.namespace || !params.chart) return [];
+
+    const data = await this.fetchWithDefaults<ReleaseRevision[]>(
+      `/api/helm/releases/${params.namespace}/${params.chart}/history`
+    );
+
+    return data;
+  };
+
+  getValues = async ({
+    queryKey,
+  }: {
+    queryKey: [
+      string,
+      { namespace: string; chart: { name: string }; version: number }
+    ];
+  }) => {
+    const [, params] = queryKey;
+    const { namespace, chart, version } = params;
+
+    if (!namespace || !chart || !chart.name || version === undefined)
+      return Promise.reject(new Error("missing parameters"));
+
+    const url = `/api/helm/repositories/values?chart=${namespace}/${chart.name}&version=${version}`;
+    const data = await this.fetchWithDefaults(url);
+
+    return data;
+  };
+}
+
+const apiService = new ApiService();
+
+export default apiService;

frontend/src/API/interfaces.ts

@@ -0,0 +1,97 @@
+export interface HelmRepository {
+  name: string;
+  url: string;
+}
+
+export interface ChartVersion {
+  name: string;
+  version: string;
+}
+
+export interface K8sContext {
+  name: string;
+}
+
+export interface K8sResource {
+  kind: string;
+  name: string;
+  namespace: string;
+}
+
+export interface Scanner {
+  id: string;
+  name: string;
+  type: string;
+}
+
+export interface ScanResult {
+  scannerType: string;
+  result: string;
+}
+
+export interface ScannersList {
+  scanners: Scanner[];
+}
+
+export interface ScanResults {
+  [scannerType: string]: ScanResult;
+}
+
+export interface ApplicationStatus {
+  Analytics: boolean;
+  CacheHitRatio: number;
+  ClusterMode: boolean;
+  CurVer: string;
+  LatestVer: string;
+}
+
+export interface KubectlContexts {
+  contexts: string[];
+}
+
+export interface K8sResourceList {
+  items: K8sResource[];
+}
+
+export type HelmRepositories = Repository[];
+
+export interface ChartList {
+  charts: Chart[];
+}
+
+export interface LatestChartVersion {
+  name: string;
+  version: string;
+  app_version: string;
+  description: string;
+  installed_namespace: string;
+  installed_name: string;
+  repository: string;
+  urls: string[];
+  isSuggestedRepo: boolean;
+}
+
+export interface ChartVersions {
+  versions: string[];
+}
+
+export interface ValuesYamlText {
+  content: string;
+}
+
+export interface Repository {
+  name: string;
+  url: string;
+}
+
+export interface Chart {
+  name: string;
+  repo: string;
+  version: string;
+  appVersion: string;
+  description: string;
+  created: string;
+  digest: string;
+  urls: string[];
+  icon: string;
+}

frontend/src/API/k8s.ts

@@ -0,0 +1,65 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { K8sResource, K8sResourceList, KubectlContexts } from "./interfaces";
+import apiService from "./apiService";
+
+// Get list of kubectl contexts configured locally
+function useGetKubectlContexts(options?: UseQueryOptions<KubectlContexts>) {
+  return useQuery<KubectlContexts>(
+    ["k8s", "contexts"],
+    () => apiService.fetchWithDefaults<KubectlContexts>("/api/k8s/contexts"),
+    options
+  );
+}
+
+// Get resources information
+function useGetK8sResource(
+  kind: string,
+  name: string,
+  namespace: string,
+  options?: UseQueryOptions<K8sResource>
+) {
+  return useQuery<K8sResource>(
+    ["k8s", kind, "get", name, namespace],
+    () =>
+      apiService.fetchWithDefaults<K8sResource>(
+        `/api/k8s/${kind}/get?name=${name}&namespace=${namespace}`
+      ),
+    options
+  );
+}
+
+// Get list of resources
+function useGetK8sResourceList(
+  kind: string,
+  options?: UseQueryOptions<K8sResourceList>
+) {
+  return useQuery<K8sResourceList>(
+    ["k8s", kind, "list"],
+    () =>
+      apiService.fetchWithDefaults<K8sResourceList>(`/api/k8s/${kind}/list`),
+    options
+  );
+}
+
+// Get describe text for kubernetes resource
+function useGetK8sResourceDescribe(
+  kind: string,
+  name: string,
+  namespace: string,
+  options?: UseQueryOptions<string>
+) {
+  return useQuery<string>(
+    ["k8s", kind, "describe", name, namespace],
+    () =>
+      apiService.fetchWithDefaults<string>(
+        `/api/k8s/${kind}/describe?name=${name}&namespace=${namespace}`,
+        {
+          headers: {
+            Accept: "text/plain",
+          },
+        }
+      ),
+    options
+  );
+}

frontend/src/API/other.ts

@@ -0,0 +1,34 @@
+import {
+  type UseMutationOptions,
+  type UseQueryOptions,
+  useMutation,
+  useQuery,
+} from "@tanstack/react-query";
+import { ApplicationStatus } from "./interfaces";
+import apiService from "./apiService";
+
+// Shuts down the Helm Dashboard application
+export function useShutdownHelmDashboard(
+  options?: UseMutationOptions<void, Error>
+) {
+  return useMutation<void, Error>(
+    () =>
+      apiService.fetchWithDefaults("/", {
+        method: "DELETE",
+      }),
+    options
+  );
+}
+
+// Gets application status
+export function useGetApplicationStatus(
+  options?: UseQueryOptions<ApplicationStatus>
+) {
+  return useQuery<ApplicationStatus>(
+    ["status"],
+    () => apiService.fetchWithDefaults<ApplicationStatus>("/status"),
+    {
+      ...options,
+    }
+  );
+}

frontend/src/API/releases.ts

@@ -0,0 +1,360 @@
+import {
+  useQuery,
+  type UseQueryOptions,
+  useMutation,
+  type UseMutationOptions,
+} from "@tanstack/react-query";
+import { ChartVersion, Release } from "../data/types";
+import { LatestChartVersion } from "./interfaces";
+import apiService from "./apiService";
+import { getVersionManifestFormData } from "./shared";
+export const HD_RESOURCE_CONDITION_TYPE = "hdHealth"; // it's our custom condition type, only one exists
+
+export function useGetInstalledReleases(
+  context: string,
+  options?: UseQueryOptions<Release[]>
+) {
+  return useQuery<Release[]>(
+    ["installedReleases", context],
+    () => apiService.fetchWithDefaults<Release[]>("/api/helm/releases"),
+    options
+  );
+}
+
+export interface ReleaseManifest {
+  apiVersion: string;
+  kind: string;
+  metadata: {
+    name: string;
+    namespace: string;
+    labels: Record<string, string>;
+  };
+  spec: {
+    replicas: number;
+    selector: Record<string, string>;
+    template: {
+      metadata: {
+        labels: Record<string, string>;
+      };
+      spec: {
+        containers: {
+          name: string;
+          image: string;
+          ports: {
+            containerPort: number;
+          }[];
+          env: {
+            name: string;
+            value: string;
+          }[];
+        }[];
+      };
+    };
+  };
+}
+
+export function useGetReleaseManifest({
+  namespace,
+  chartName,
+  options,
+}: {
+  namespace: string;
+  chartName: string;
+  options?: UseQueryOptions<ReleaseManifest[]>;
+}) {
+  return useQuery<ReleaseManifest[]>(
+    ["manifest", namespace, chartName],
+    () =>
+      apiService.fetchWithDefaults<ReleaseManifest[]>(
+        `/api/helm/releases/${namespace}/${chartName}/manifests`
+      ),
+    options
+  );
+}
+
+// List of installed k8s resources for this release
+export function useGetResources(
+  ns: string,
+  name: string,
+  options?: UseQueryOptions<StructuredResources[]>
+) {
+  const { data, ...rest } = useQuery<StructuredResources[]>(
+    ["resources", ns, name],
+    () =>
+      apiService.fetchWithDefaults<StructuredResources[]>(
+        `/api/helm/releases/${ns}/${name}/resources?health=true`
+      ),
+    options
+  );
+
+  return {
+    data: data
+      ?.map((resource) => ({
+        ...resource,
+        status: {
+          ...resource.status,
+          conditions: resource.status.conditions.filter(
+            (c) => c.type === HD_RESOURCE_CONDITION_TYPE
+          ),
+        },
+      }))
+      .sort((a, b) => {
+        const interestingResources = ["STATEFULSET", "DEAMONSET", "DEPLOYMENT"];
+        return (
+          interestingResources.indexOf(b.kind.toUpperCase()) -
+          interestingResources.indexOf(a.kind.toUpperCase())
+        );
+      }),
+    ...rest,
+  };
+}
+
+export function useGetResourceDescription(
+  type: string,
+  ns: string,
+  name: string,
+  options?: UseQueryOptions<string>
+) {
+  return useQuery<string>(
+    ["describe", type, ns, name],
+    () =>
+      apiService.fetchWithDefaults<string>(
+        `/api/k8s/${type}/describe?name=${name}&namespace=${ns}`,
+        {
+          headers: { "Content-Type": "text/plain; charset=utf-8" },
+        }
+      ),
+    options
+  );
+}
+export function useGetLatestVersion(
+  chartName: string,
+  options?: UseQueryOptions<ChartVersion[]>
+) {
+  return useQuery<ChartVersion[]>(
+    ["latestver", chartName],
+    () =>
+      apiService.fetchWithDefaults<ChartVersion[]>(
+        `/api/helm/repositories/latestver?name=${chartName}`
+      ),
+    options
+  );
+}
+export function useGetVersions(
+  chartName: string,
+  options?: UseQueryOptions<LatestChartVersion[]>
+) {
+  return useQuery<LatestChartVersion[]>(
+    ["versions", chartName],
+    () =>
+      apiService.fetchWithDefaults<LatestChartVersion[]>(
+        `/api/helm/repositories/versions?name=${chartName}`
+      ),
+    options
+  );
+}
+
+export function useGetReleaseInfoByType(
+  params: ReleaseInfoParams,
+  additionalParams = "",
+  options?: UseQueryOptions<string>
+) {
+  const { chart, namespace, tab, revision } = params;
+  return useQuery<string>(
+    [tab, namespace, chart, revision, additionalParams],
+    () =>
+      apiService.fetchWithDefaults<string>(
+        `/api/helm/releases/${namespace}/${chart}/${tab}?revision=${revision}${additionalParams}`,
+        {
+          headers: { "Content-Type": "text/plain; charset=utf-8" },
+        }
+      ),
+    options
+  );
+}
+
+export function useGetDiff(
+  formData: FormData,
+  options?: UseQueryOptions<string>
+) {
+  return useQuery<string>(
+    ["diff", formData],
+    () => {
+      return apiService.fetchWithDefaults<string>("/diff", {
+        body: formData,
+
+        method: "POST",
+      });
+    },
+    options
+  );
+}
+
+// Rollback the release to a previous revision
+export function useRollbackRelease(
+  options?: UseMutationOptions<
+    void,
+    unknown,
+    { ns: string; name: string; revision: number }
+  >
+) {
+  return useMutation<
+    void,
+    unknown,
+    { ns: string; name: string; revision: number }
+  >(({ ns, name, revision }) => {
+    const formData = new FormData();
+    formData.append("revision", revision.toString());
+
+    return apiService.fetchWithDefaults<void>(
+      `/api/helm/releases/${ns}/${name}/rollback`,
+      {
+        method: "POST",
+        body: formData,
+      }
+    );
+  }, options);
+}
+
+// Run the tests on a release
+export function useTestRelease(
+  options?: UseMutationOptions<void, unknown, { ns: string; name: string }>
+) {
+  return useMutation<void, unknown, { ns: string; name: string }>(
+    ({ ns, name }) => {
+      return apiService.fetchWithDefaults<void>(
+        `/api/helm/releases/${ns}/${name}/test`,
+        {
+          method: "POST",
+        }
+      );
+    },
+    options
+  );
+}
+
+export function useChartReleaseValues({
+  namespace = "default",
+  release,
+  userDefinedValue,
+  revision,
+  options,
+  version,
+}: {
+  namespace?: string;
+  release: string;
+  userDefinedValue?: string;
+  revision?: number;
+  version?: string;
+  options?: UseQueryOptions<unknown>;
+}) {
+  return useQuery<unknown>(
+    ["values", namespace, release, userDefinedValue, version],
+    () =>
+      apiService.fetchWithDefaults<unknown>(
+        `/api/helm/releases/${namespace}/${release}/values?${"userDefined=true"}${
+          revision ? `&revision=${revision}` : ""
+        }`,
+        {
+          headers: { "Content-Type": "text/plain; charset=utf-8" },
+        }
+      ),
+    options
+  );
+}
+
+export const useVersionData = ({
+  version,
+  userValues,
+  chartAddress,
+  releaseValues,
+  namespace,
+  releaseName,
+  isInstallRepoChart = false,
+  options,
+}: {
+  version: string;
+  userValues: string;
+  chartAddress: string;
+  releaseValues: string;
+  namespace: string;
+  releaseName: string;
+  isInstallRepoChart?: boolean;
+  options?: UseQueryOptions;
+}) => {
+  return useQuery(
+    [
+      version,
+      userValues,
+      chartAddress,
+      releaseValues,
+      namespace,
+      releaseName,
+      isInstallRepoChart,
+    ],
+    async () => {
+      const formData = getVersionManifestFormData({
+        version,
+        userValues,
+        chart: chartAddress,
+        releaseValues,
+        releaseName,
+      });
+
+      const fetchUrl = isInstallRepoChart
+        ? `/api/helm/releases/${namespace || "default"}`
+        : `/api/helm/releases/${
+            namespace ? namespace : "[empty]"
+          }${`/${releaseName}`}`;
+
+      const data = await apiService.fetchWithDefaults(fetchUrl, {
+        method: "post",
+        body: formData,
+      });
+
+      return data;
+    },
+    // @ts-ignore
+    options
+  );
+};
+
+// Request objects
+interface ReleaseInfoParams {
+  chart?: string;
+  tab: string;
+  namespace?: string;
+  revision?: string;
+}
+
+export interface StructuredResources {
+  kind: string;
+  apiVersion: string;
+  metadata: Metadata;
+  spec: Spec;
+  status: Status;
+}
+
+export interface Metadata {
+  name: string;
+  namespace: string;
+  creationTimestamp: Date;
+  labels: string[];
+}
+
+export interface Spec {
+  [key: string]: string;
+}
+
+export interface Status {
+  conditions: Condition[];
+}
+
+export interface Condition {
+  type: string;
+  status: string;
+  lastProbeTime: Date;
+  lastTransitionTime: Date;
+  reason: string;
+  message: string;
+}

frontend/src/API/repositories.ts

@@ -0,0 +1,72 @@
+import {
+  type UseMutationOptions,
+  type UseQueryOptions,
+  useMutation,
+  useQuery,
+} from "@tanstack/react-query";
+import { HelmRepositories } from "./interfaces";
+import apiService from "./apiService";
+
+// Get list of Helm repositories
+export function useGetRepositories(
+  options?: UseQueryOptions<HelmRepositories>
+) {
+  return useQuery<HelmRepositories>(
+    ["helm", "repositories"],
+    () =>
+      apiService.fetchWithDefaults<HelmRepositories>("/api/helm/repositories"),
+    options
+  );
+}
+
+// Update repository from remote
+export function useUpdateRepo(
+  repo: string,
+  options?: UseMutationOptions<void, unknown, void>
+) {
+  return useMutation<void, unknown, void>(() => {
+    return apiService.fetchWithDefaults<void>(
+      `/api/helm/repositories/${repo}`,
+      {
+        method: "POST",
+      }
+    );
+  }, options);
+}
+
+// Remove repository
+export function useDeleteRepo(
+  repo: string,
+  options?: UseMutationOptions<void, unknown, void>
+) {
+  return useMutation<void, unknown, void>(() => {
+    return apiService.fetchWithDefaults<void>(
+      `/api/helm/repositories/${repo}`,
+      {
+        method: "DELETE",
+      }
+    );
+  }, options);
+}
+
+export function useChartRepoValues({
+  version,
+  chart,
+}: {
+  version: string;
+  chart: string;
+}) {
+  return useQuery<string>(
+    ["helm", "repositories", "values", chart, version],
+    () =>
+      apiService.fetchWithDefaults<string>(
+        `/api/helm/repositories/values?chart=${chart}&version=${version}`,
+        {
+          headers: { "Content-Type": "text/plain; charset=utf-8" },
+        }
+      ),
+    {
+      enabled: Boolean(version) && Boolean(chart),
+    }
+  );
+}

frontend/src/API/scanners.ts

@@ -0,0 +1,54 @@
+/** DO NOT DELETE THESE FUNCTIONS - we left this until we support scan ops again */
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  type UseMutationOptions,
+  type UseQueryOptions,
+  useMutation,
+  useQuery,
+} from "@tanstack/react-query";
+import { ScanResult, ScanResults, ScannersList } from "./interfaces";
+import apiService from "./apiService";
+
+// Get list of discovered scanners
+function useGetDiscoveredScanners(options?: UseQueryOptions<ScannersList>) {
+  return useQuery<ScannersList>(
+    ["scanners"],
+    () => apiService.fetchWithDefaults<ScannersList>("/api/scanners"),
+    options
+  );
+}
+
+// Scan manifests using all applicable scanners
+function useScanManifests(
+  manifest: string,
+  options?: UseMutationOptions<ScanResults, Error, string>
+) {
+  const formData = new FormData();
+  formData.append("manifest", manifest);
+  return useMutation<ScanResults, Error, string>(
+    () =>
+      apiService.fetchWithDefaults<ScanResults>("/api/scanners/manifests", {
+        method: "POST",
+        body: formData,
+      }),
+    options
+  );
+}
+
+// Scan specified k8s resource in cluster
+function useScanK8sResource(
+  kind: string,
+  namespace: string,
+  name: string,
+  options?: UseQueryOptions<ScanResults>
+) {
+  return useQuery<ScanResults>(
+    ["scanners", "resource", kind, namespace, name],
+    () =>
+      apiService.fetchWithDefaults<ScanResults>(
+        `/api/scanners/resource/${kind}?namespace=${namespace}&name=${name}`
+      ),
+    options
+  );
+}

frontend/src/API/shared.ts

@@ -0,0 +1,64 @@
+import { useQuery } from "@tanstack/react-query";
+import apiService from "./apiService";
+
+export const getVersionManifestFormData = ({
+  version,
+  userValues,
+  chart,
+  releaseValues,
+  releaseName,
+}: {
+  version: string;
+  userValues?: string;
+  chart: string;
+  releaseValues?: string;
+  releaseName?: string;
+}) => {
+  const formData = new FormData();
+  // preview needs to come first, for some reason it has a meaning at the backend
+  formData.append("preview", "true");
+  formData.append("chart", chart);
+  formData.append("version", version);
+  formData.append(
+    "values",
+    userValues ? userValues : releaseValues ? releaseValues : ""
+  );
+  if (releaseName) {
+    formData.append("name", releaseName);
+  }
+
+  return formData;
+};
+
+export const useDiffData = ({
+  selectedRepo,
+  versionsError,
+  currentVerManifest,
+  selectedVerData,
+  chart,
+}: {
+  selectedRepo: string;
+  versionsError: string;
+  currentVerManifest: string;
+  selectedVerData: { [key: string]: string };
+  chart: string;
+}) => {
+  return useQuery(
+    [selectedRepo, versionsError, chart, currentVerManifest, selectedVerData],
+    async () => {
+      const formData = new FormData();
+      formData.append("a", currentVerManifest);
+      formData.append("b", selectedVerData.manifest);
+
+      const diff = await apiService.fetchWithDefaults("/diff", {
+        method: "post",
+        body: formData,
+      });
+
+      return diff;
+    },
+    {
+      enabled: Boolean(selectedVerData),
+    }
+  );
+};

frontend/src/App.css

@@ -0,0 +1,96 @@
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  margin: 5px;
+  padding: 10px;
+}
+.header-left {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  flex: 0.6;
+}
+.header-items {
+  display: flex;
+  flex: 0.8;
+  justify-content: space-evenly;
+}
+.header-right {
+  display: flex;
+  align-items: center;
+  flex: 0.2;
+  justify-content: space-around;
+}
+.redirect {
+  display: flex;
+  flex: 0.8;
+}
+.redirect > img {
+  margin-right: 5px;
+}
+.signout-btn {
+  display: flex;
+  align-items: center;
+}
+.signout-btn:hover {
+  cursor: pointer;
+}
+.signout-btn > span {
+  font-weight: bolder;
+  font-size: x-large;
+  color: gray;
+}
+.card {
+  display: flex;
+  height: 100vh;
+}
+.card-left {
+  flex: 0.2;
+  margin-top: 5px;
+  margin-left: 4px;
+  margin-right: 4px;
+}
+.card-left > h2,
+form {
+  margin-bottom: 10px;
+}
+.btn {
+  margin-bottom: 10px;
+}
+.card-right {
+  flex: 0.8;
+  margin-top: 5px;
+  margin-left: 4px;
+  margin-right: 1px;
+}
+.card-right-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.card-right-header-right-btn {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.content-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.title {
+  flex: 0.2;
+}
+.description {
+  flex: 0.6;
+}
+.version {
+  flex: 0.2;
+}
+.charts {
+  display: flex;
+  justify-content: space-between;
+}
+.charts > h3 {
+  flex: 0.2;
+}

frontend/src/App.tsx

@@ -0,0 +1,85 @@
+import Header from "./layout/Header";
+import { HashRouter, Outlet, Route, Routes, useParams } from "react-router-dom";
+import "./index.css";
+import Installed from "./pages/Installed";
+import RepositoryPage from "./pages/Repository";
+import Revision from "./pages/Revision";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
+import { ErrorAlert, ErrorModalContext } from "./context/ErrorModalContext";
+import GlobalErrorModal from "./components/modal/GlobalErrorModal";
+import { AppContextProvider } from "./context/AppContext";
+import apiService from "./API/apiService";
+import DocsPage from "./pages/DocsPage";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+});
+
+const PageLayout = () => {
+  return (
+    <div className="flex flex-col h-screen">
+      <Header />
+      <div className="bg-body-background bg-no-repeat bg-[url('./assets/body-background.svg')] flex-1">
+        <Outlet />
+      </div>
+    </div>
+  );
+};
+
+const SyncContext: React.FC = () => {
+  const { context } = useParams();
+  if (context) {
+    apiService.setCluster(context);
+  }
+
+  return <Outlet />;
+};
+
+export default function App() {
+  const [shouldShowErrorModal, setShowErrorModal] = useState<
+    ErrorAlert | undefined
+  >(undefined);
+  const value = { shouldShowErrorModal, setShowErrorModal };
+
+  return (
+    <AppContextProvider>
+      <ErrorModalContext.Provider value={value}>
+        <QueryClientProvider client={queryClient}>
+          <HashRouter>
+            <Routes>
+              <Route path="docs/" element={<DocsPage />} />
+              <Route path="*" element={<PageLayout />}>
+                <Route path=":context?/*" element={<SyncContext />}>
+                  <Route path="installed/?" element={<Installed />} />
+                  <Route
+                    path=":namespace/:chart/installed/revision/:revision"
+                    element={<Revision />}
+                  />
+                  <Route path="repository/" element={<RepositoryPage />} />
+                  <Route
+                    path="repository/:selectedRepo?"
+                    element={<RepositoryPage />}
+                  />
+                  <Route path="*" element={<Installed />} />
+                </Route>
+                <Route path="*" element={<Installed />} />
+              </Route>
+            </Routes>
+            <GlobalErrorModal
+              isOpen={!!shouldShowErrorModal}
+              onClose={() => setShowErrorModal(undefined)}
+              titleText={shouldShowErrorModal?.title || ""}
+              contentText={shouldShowErrorModal?.msg || ""}
+            />
+          </HashRouter>
+        </QueryClientProvider>
+      </ErrorModalContext.Provider>
+    </AppContextProvider>
+  );
+}

frontend/src/assets/arrow-down-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512.02 319.26"><path d="M5.9 48.96 48.97 5.89c7.86-7.86 20.73-7.84 28.56 0l178.48 178.48L434.5 5.89c7.86-7.86 20.74-7.82 28.56 0l43.07 43.07c7.83 7.84 7.83 20.72 0 28.56l-192.41 192.4-.36.37-43.07 43.07c-7.83 7.82-20.7 7.86-28.56 0l-43.07-43.07-.36-.37L5.9 77.52c-7.87-7.86-7.87-20.7 0-28.56z"/></svg>

frontend/src/assets/code-brackets.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>

frontend/src/assets/comments.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/comments</title><g id="illustration/comments" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#96D07C" d="M2.52730803,17.9196415 C2.44329744,17.9745167 2.36370847,18.000488 2.29303375,18.000488 C2.1197031,18.000488 2,17.8443588 2,17.5752855 L2,4 C2,1.790861 3.790861,3.23296945e-13 6,3.23296945e-13 L33.9995117,3.23296945e-13 C36.2086507,3.23296945e-13 37.9995117,1.790861 37.9995117,4 L37.9995117,9.999512 C37.9995117,12.208651 36.2086507,13.999512 33.9995117,13.999512 L8,13.999512 C7.83499225,13.999512 7.6723181,13.9895206 7.51254954,13.9701099 L2.52730803,17.9196415 Z"/><path id="Path" fill="#73E1E0" d="M7.51066,44.9703679 L2.52730803,47.9186655 C2.44329744,47.9735407 2.36370847,47.999512 2.29303375,47.999512 C2.1197031,47.999512 2,47.8433828 2,47.5743095 L2,35 C2,32.790861 3.790861,31 6,31 L26,31 C28.209139,31 30,32.790861 30,35 L30,41 C30,43.209139 28.209139,45 26,45 L8,45 C7.8343417,45 7.67103544,44.9899297 7.51066,44.9703679 Z"/><path id="Path" fill="#FFD476" d="M46,19.5 L46,33.0747975 C46,33.3438708 45.8802969,33.5 45.7069663,33.5 C45.6362915,33.5 45.5567026,33.4740287 45.472692,33.4191535 L40.4887103,29.4704446 C40.3285371,29.489956 40.1654415,29.5 40,29.5 L18,29.5 C15.790861,29.5 14,27.709139 14,25.5 L14,19.5 C14,17.290861 15.790861,15.5 18,15.5 L42,15.5 C44.209139,15.5 46,17.290861 46,19.5 Z"/></g></svg>

frontend/src/assets/direction.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/direction</title><g id="illustration/direction" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFD476" d="M23.4917015,33.6030641 L2.93840258,31.4321033 C2.38917316,31.3740904 1.99096346,30.8818233 2.04897631,30.3325939 C2.0747515,30.0885705 2.18934861,29.8625419 2.37095722,29.6975265 L34.2609105,0.721285325 C34.6696614,0.349881049 35.3021022,0.38015648 35.6735064,0.788907393 C35.9232621,1.06377731 36.0001133,1.45442096 35.8730901,1.80341447 L24.5364357,32.9506164 C24.3793473,33.3822133 23.9484565,33.6513092 23.4917015,33.6030641 L23.4917015,33.6030641 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" d="M24.3163597,33.2881029 C24.0306575,33.0138462 23.9337246,32.5968232 24.069176,32.2246735 L35.091923,1.9399251 C35.2266075,1.56988243 35.5659249,1.31333613 35.9586669,1.28460955 C36.5094802,1.24432106 36.9886628,1.65818318 37.0289513,2.20899647 L40.2437557,46.1609256 C40.2644355,46.4436546 40.1641446,46.7218752 39.9678293,46.9263833 C39.5853672,47.3248067 38.9523344,47.3377458 38.5539111,46.9552837 L24.3163597,33.2881029 L24.3163597,33.2881029 Z"/></g></svg>

frontend/src/assets/flow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/flow</title><g id="illustration/flow" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" fill-rule="nonzero" d="M30,29 C32.7614237,29 35,26.7614237 35,24 C35,14.6111593 27.3888407,7 18,7 C8.61115925,7 1,14.6111593 1,24 C1,33.3888407 8.61115925,41 18,41 C19.3333404,41 20.6447683,40.8466238 21.9154603,40.5471706 C19.5096374,39.3319645 17.5510566,37.8612875 16.0456579,36.1314815 C14.1063138,33.9030427 12.769443,31.0725999 12.0293806,27.6556449 C11.360469,26.565281 11,25.3082308 11,24 C11,20.1340068 14.1340068,17 18,17 C21.8659932,17 25,20.1340068 25,24 C25,26.125 27.7040312,29 30,29 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" fill-rule="nonzero" d="M42,29 C44.7614237,29 47,26.7614237 47,24 C47,14.6111593 39.3888407,7 30,7 C20.6111593,7 13,14.6111593 13,24 C13,33.3888407 20.6111593,41 30,41 C31.3333404,41 32.6447683,40.8466238 33.9154603,40.5471706 C31.5096374,39.3319645 29.4051056,37.9781963 28.0456579,36.1314815 C26.0625,33.4375 23,27.1875 23,24 C23,20.1340068 26.1340068,17 30,17 C33.8659932,17 37,20.1340068 37,24 C37.02301,26.3435241 39.7040312,29 42,29 Z" transform="translate(30.000000, 24.000000) scale(-1, -1) translate(-30.000000, -24.000000)"/></g></svg>

frontend/src/assets/k8s-watcher.svg

@@ -0,0 +1,5 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M47.1106 45.775C49.9376 45.775 52.2294 42.4134 52.2294 38.2667C52.2294 34.1199 49.9376 30.7583 47.1106 30.7583C44.2835 30.7583 41.9918 34.1199 41.9918 38.2667C41.9918 42.4134 44.2835 45.775 47.1106 45.775Z" fill="#1347FF"/>
+<path d="M37.0077 38.2667C37.0077 42.4134 34.7159 45.775 31.8888 45.775C29.0618 45.775 26.77 42.4134 26.77 38.2667C26.77 34.12 29.0618 30.7584 31.8888 30.7584C34.7159 30.7584 37.0077 34.12 37.0077 38.2667Z" fill="#1347FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 23.7087L14.4407 18H64.5597L70 23.6838V56.3162L64.5597 62H14.4403L9 56.3162V23.7087ZM17.9923 24.2134L15.8664 26.3861V53.6519L17.9923 55.8246H61.0736L63.1212 53.6483V26.3897L61.0736 24.2134H17.9923Z" fill="#1347FF"/>
+</svg>

frontend/src/assets/plugin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/plugin</title><g id="illustration/plugin" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" d="M26,15.3994248 C26,15.4091303 26,15.4188459 26,15.4285714 L26,21.4694881 C25.8463595,21.4969567 25.6941676,21.51275 25.5873784,21.51275 C25.4974117,21.51275 25.4230979,21.4768034 25.377756,21.4206259 L25.2660784,21.2822603 L25.1317423,21.1657666 C24.2436317,20.3956144 23.100098,19.9633214 21.895551,19.9633214 C19.2039137,19.9633214 17,22.1075558 17,24.7804643 C17,27.4533728 19.2039137,29.5976071 21.895551,29.5976071 C23.1972122,29.5976071 24.3149423,29.2878193 25.1231445,28.3613697 C25.4542273,27.9818463 25.568273,27.9073214 25.5873784,27.9073214 C25.681532,27.9073214 25.8352452,27.9239643 26,27.9524591 L26,32.5714286 C26,32.5811541 26,32.5908697 26,32.6005752 L26,33 C26,35.209139 24.209139,37 22,37 L4,37 C1.790861,37 0,35.209139 0,33 L0,15 C0,12.790861 1.790861,11 4,11 L22,11 C24.209139,11 26,12.790861 26,15 L26,15.3994248 Z"/><path id="Path" fill="#87E6E5" d="M27.9998779,32.5714286 C27.9998779,33.3604068 28.6572726,34 29.4682101,34 L46.5315458,34 C47.3424832,34 47.9998779,33.3604068 47.9998779,32.5714286 L47.9998779,15.4285714 C47.9998779,14.6395932 47.3424832,14 46.5315458,14 L29.4682101,14 C28.6572726,14 27.9998779,14.6395932 27.9998779,15.4285714 L27.9998779,21.8355216 C27.9334367,22.2650514 27.8567585,22.6454496 27.746391,22.8084643 C27.4245309,23.2838571 26.2402709,23.51275 25.5873784,23.51275 C24.8705773,23.51275 24.2322714,23.1857725 23.8214379,22.6767605 C23.3096996,22.2329909 22.6349941,21.9633214 21.895551,21.9633214 C20.2963823,21.9633214 19,23.2245992 19,24.7804643 C19,26.3363293 20.2963823,27.5976071 21.895551,27.5976071 C22.5398535,27.5976071 23.2399343,27.477727 23.6160247,27.0466112 C24.1396029,26.4464286 24.7367044,25.9073214 25.5873784,25.9073214 C26.2402709,25.9073214 27.5912951,26.1766031 27.8226692,26.6116071 C27.8819199,26.7230038 27.9403239,26.921677 27.9998779,27.1556219 L27.9998779,32.5714286 Z"/></g></svg>

frontend/src/assets/react.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
+    class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228">
+    <path fill="#00D8FF"
+        d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z">
+    </path>
+</svg>

frontend/src/assets/repo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/repo</title><g id="illustration/repo" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Rectangle-62-Copy" fill="#B7F0EF" d="M27.2217723,9.04506931 L41.2217723,6.2682098 C43.3886973,5.83840648 45.4937616,7.2466219 45.9235649,9.41354696 C45.9743993,9.66983721 46,9.93049166 46,10.1917747 L46,32.581381 C46,34.4904961 44.650862,36.1335143 42.7782277,36.5049459 L28.7782277,39.2818054 C26.6113027,39.7116087 24.5062384,38.3033933 24.0764351,36.1364682 C24.0256007,35.880178 24,35.6195235 24,35.3582405 L24,12.9686342 C24,11.0595191 25.349138,9.4165009 27.2217723,9.04506931 Z" opacity=".7"/><path id="Combined-Shape" fill="#87E6E5" d="M6.77822775,6.2682098 L20.7782277,9.04506931 C22.650862,9.4165009 24,11.0595191 24,12.9686342 L24,35.3582405 C24,37.5673795 22.209139,39.3582405 20,39.3582405 C19.738717,39.3582405 19.4780625,39.3326398 19.2217723,39.2818054 L5.22177225,36.5049459 C3.34913798,36.1335143 2,34.4904961 2,32.581381 L2,10.1917747 C2,7.98263571 3.790861,6.19177471 6,6.19177471 C6.26128305,6.19177471 6.5219375,6.21737537 6.77822775,6.2682098 Z"/><path id="Rectangle-63-Copy-2" fill="#61C1FD" d="M22,10 C23.1666667,10.2291667 24.0179036,10.625 24.5537109,11.1875 C25.0895182,11.75 25.5716146,12.875 26,14.5625 C26,29.3020833 26,37.5208333 26,39.21875 C26,40.9166667 26.4241536,42.9583333 27.2724609,45.34375 L24.5537109,41.875 L22.9824219,45.34375 C22.327474,43.1979167 22,41.2291667 22,39.4375 C22,37.6458333 22,27.8333333 22,10 Z"/></g></svg>

frontend/src/assets/stackalt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/stackalt</title><g id="illustration/stackalt" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFAE00" d="M23.8628277,0 L23.8628277,48 L3.32291648,36.2491883 L3.32155653,11.9499781 L23.8628277,0 Z M23.8670509,0 L44.408322,11.9499781 L44.4069621,36.2491883 L23.8670509,48 L23.8670509,0 Z" opacity=".196"/><path id="Rectangle-46-Copy-3" fill="#66BF3C" d="M15.8232279,19.1155258 L24.7368455,21.4714881 C29.6053842,22.7582937 33.4077423,26.5606518 34.694548,31.4291905 L37.0505103,40.3428082 C37.6150232,42.4786032 36.3412474,44.6676353 34.2054524,45.2321482 C33.5569474,45.4035549 32.87575,45.4091235 32.2245294,45.2483418 L23.3459013,43.0562718 C18.2976962,41.809906 14.3561301,37.8683399 13.1097642,32.8201348 L10.9176943,23.9415066 C10.3881737,21.7967682 11.6975664,19.6288529 13.8423049,19.0993322 C14.4935255,18.9385505 15.1747229,18.9441191 15.8232279,19.1155258 Z" opacity=".5" transform="translate(23.999997, 32.166058) rotate(-45.000000) translate(-23.999997, -32.166058)"/><path id="Rectangle-46-Copy-2" fill="#FFAE00" d="M15.8232279,11.2216893 L24.7368455,13.5776516 C29.6053842,14.8644572 33.4077423,18.6668153 34.694548,23.5353541 L37.0505103,32.4489717 C37.6150232,34.5847667 36.3412474,36.7737988 34.2054524,37.3383117 C33.5569474,37.5097184 32.87575,37.515287 32.2245294,37.3545053 L23.3459013,35.1624353 C18.2976962,33.9160695 14.3561301,29.9745034 13.1097642,24.9262983 L10.9176943,16.0476701 C10.3881737,13.9029317 11.6975664,11.7350164 13.8423049,11.2054957 C14.4935255,11.044714 15.1747229,11.0502826 15.8232279,11.2216893 Z" opacity=".5" transform="translate(23.999997, 24.272222) rotate(-45.000000) translate(-23.999997, -24.272222)"/><path id="Rectangle-46-Copy" fill="#FC521F" d="M15.8232279,3.32785281 L24.7368455,5.68381509 C29.6053842,6.97062075 33.4077423,10.7729788 34.694548,15.6415176 L37.0505103,24.5551352 C37.6150232,26.6909302 36.3412474,28.8799623 34.2054524,29.4444752 C33.5569474,29.6158819 32.87575,29.6214505 32.2245294,29.4606688 L23.3459013,27.2685988 C18.2976962,26.022233 14.3561301,22.0806669 13.1097642,17.0324618 L10.9176943,8.15383364 C10.3881737,6.00909519 11.6975664,3.84117987 13.8423049,3.31165925 C14.4935255,3.15087753 15.1747229,3.15644615 15.8232279,3.32785281 Z" opacity=".5" transform="translate(23.999997, 16.378385) rotate(-45.000000) translate(-23.999997, -16.378385)"/></g></svg>

frontend/src/components/Badge.stories.tsx

@@ -0,0 +1,39 @@
+/*
+ * @file Badge.stories.tsx
+ * @description Badge stories, using Storybook.
+ * We create a story for the component badge,
+ * and we can use it to test the component in Storybook.
+ * There, we can see the component in different states, and
+ * play with the props to see how it behaves.
+ * We'll use a generic story for the component, and we'll
+ * use the args to pass the props.
+ * We'll use a template to create the story.
+ * Refer to Badge.tsx and the BadgeProps interface to see what props
+ * the component accepts. The story works with the same props.
+ *
+ * @see https://storybook.js.org/docs/react/writing-stories/introduction
+ */
+
+import { Meta } from "@storybook/react";
+import Badge from "./Badge";
+
+// We set the metadata for the story.
+// Refer to https://storybook.js.org/docs/react/writing-stories/introduction
+// for more information.
+const meta = {
+  title: "Badge",
+  component: Badge,
+  args: {
+    type: "success",
+    children: "Success",
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    type: "success",
+    children: "Success",
+  },
+};

frontend/src/components/Badge.tsx

@@ -0,0 +1,72 @@
+/**
+ * This is a generic badge component.
+ * By passing props you can customize the badge.
+ * The basic custom types are:
+ * warning, success, error, info, default.
+ * You can use this badge like any other html element.
+ *
+ * behind the scenes, it uses tailwindcss classes to imlement the badge,
+ * with the correct styles.
+ *
+ * @example
+ * <Badge type="warning">Warning</Badge>
+ *
+ * @param {string} type - The type of the badge.
+ * @param {string} children - The content of the badge.
+ * @returns {JSX.Element} - The badge component.
+ *
+ *
+ */
+
+export type BadgeCode = "success" | "warning" | "error" | "unknown";
+
+export const BadgeCodes = Object.freeze({
+  ERROR: "error",
+  WARNING: "warning",
+  SUCCESS: "success",
+  UNKNOWN: "unknown",
+});
+
+export interface BadgeProps {
+  type: BadgeCode;
+  children: React.ReactNode;
+  additionalClassNames?: string;
+}
+export default function Badge(props: BadgeProps): JSX.Element {
+  const colorVariants = {
+    [BadgeCodes.SUCCESS]: "bg-text-success text-black-800",
+    [BadgeCodes.WARNING]: "bg-text-warning text-white",
+    [BadgeCodes.ERROR]: "bg-text-danger text-white",
+    [BadgeCodes.UNKNOWN]: "bg-secondary text-danger",
+  };
+
+  const badgeBase =
+    "inline-flex items-center px-1 py-1 rounded text-xs font-light";
+
+  const badgeElem = (
+    <span
+      className={`${badgeBase} ${colorVariants[props.type]} ${
+        props.additionalClassNames ?? ""
+      }`}
+    >
+      {props.children}
+    </span>
+  );
+  return badgeElem;
+}
+
+export const getBadgeType = (status: string): BadgeCode => {
+  if (status === "Unknown") {
+    return BadgeCodes.UNKNOWN;
+  } else if (
+    status === "Healthy" ||
+    status.toLowerCase().includes("exists") ||
+    status === "available"
+  ) {
+    return BadgeCodes.SUCCESS;
+  } else if (status === "Progressing") {
+    return BadgeCodes.WARNING;
+  } else {
+    return BadgeCodes.ERROR;
+  }
+};

frontend/src/components/Button.cy.tsx

@@ -0,0 +1,31 @@
+import { mount } from "cypress/react18";
+import { Button } from "./common/Button/Button";
+
+describe("Button component tests", () => {
+  const buttonText = "buttonText";
+
+  it("renders", () => {
+    mount(<Button onClick={() => {}}></Button>);
+    cy.get("button").should("exist");
+  });
+
+  it("Should have correct text", () => {
+    mount(<Button label={buttonText} onClick={() => {}}></Button>);
+    cy.get("button").contains(buttonText);
+  });
+
+  it("calls onClick when clicked", () => {
+    const onClickStub = cy.stub().as("onClick");
+
+    mount(<Button onClick={onClickStub}></Button>);
+
+    cy.get("button").click();
+    cy.get("@onClick").should("have.been.calledOnce");
+  });
+
+  it("should be disabled", () => {
+    mount(<Button onClick={() => {}} disabled></Button>);
+
+    cy.get("button").should("be.disabled");
+  });
+});

frontend/src/components/Button.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Button from "./Button";
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "Button",
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+export const Default: StoryObj<typeof Button> = {
+  args: {
+    children: (
+      <>
+        <span>&uarr;</span>
+        <span>Update</span>
+      </>
+    ),
+  },
+  argTypes: {
+    onClick: { action: "clicked" },
+  },
+};

frontend/src/components/Button.tsx

@@ -0,0 +1,36 @@
+/**
+ * @file Button.tsx
+ * This component is a generic button component using tailwind.
+ * You can include an optional icon.
+ * You can pass the action to be done when the button is clicked using
+ *    the onClick prop.
+ *
+ * Props:
+ *
+ * @param children: children
+ * @param onClick: () => void
+ *
+ *
+ */
+
+// this is a type declaration for the action prop.
+// it is a function that takes a string as an argument and returns void.
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  disabled?: boolean;
+  onClick: () => void;
+  className?: string;
+}
+export default function Button(props: ButtonProps): JSX.Element {
+  return (
+    <>
+      <button
+        onClick={props.onClick}
+        className={`${props.className} bg-white border border-gray-300  hover:bg-gray-50 text-black  py-1 px-4 rounded `}
+        disabled={props.disabled}
+      >
+        {props.children}
+      </button>
+    </>
+  );
+}

frontend/src/components/ClustersList.cy.tsx

@@ -0,0 +1,69 @@
+import { AppContextProvider } from "../context/AppContext";
+import ClustersList from "./ClustersList";
+import { BrowserRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Release } from "../data/types";
+
+type ClustersListProps = {
+  onClusterChange: (clusterName: string) => void;
+  selectedCluster: string;
+  filteredNamespaces: string[];
+  installedReleases?: Release[];
+};
+
+const generateTestReleaseData = (): Release => ({
+  id: "id",
+  name: "helm-dashboard",
+  namespace: "default",
+  revision: 1,
+  updated: "2024-01-23T15:37:35.0992836+02:00",
+  status: "deployed",
+  chart: "helm-dashboard-0.1.10",
+  chart_name: "helm-dashboard",
+  chart_ver: "0.1.10",
+  app_version: "1.3.3",
+  icon: "https://raw.githubusercontent.com/komodorio/helm-dashboard/main/pkg/dashboard/static/logo.svg",
+  description: "A GUI Dashboard for Helm by Komodor",
+  has_tests: true,
+  chartName: "helm-dashboard",
+  chartVersion: "0.1.10",
+});
+
+const renderClustersList = (props: ClustersListProps) => {
+  const queryClient = new QueryClient();
+  cy.mount(
+    <AppContextProvider>
+      <BrowserRouter>
+        <QueryClientProvider client={queryClient}>
+          <ClustersList {...props} />
+        </QueryClientProvider>
+      </BrowserRouter>
+    </AppContextProvider>
+  );
+};
+
+describe("ClustersList", () => {
+  it("Got one cluster information", () => {
+    renderClustersList({
+      selectedCluster: "minikube",
+      filteredNamespaces: ["default"],
+      onClusterChange: () => {},
+      installedReleases: [generateTestReleaseData()],
+    });
+
+    cy.get(".data-cy-clusterName").contains("minikube");
+    cy.get(".data-cy-clusterList-namespace").contains("default");
+    cy.get(".data-cy-clustersInput").should("be.checked");
+  });
+
+  it("Dont have a cluster chekced", () => {
+    renderClustersList({
+      selectedCluster: "",
+      filteredNamespaces: [""],
+      onClusterChange: () => {},
+      installedReleases: [generateTestReleaseData()],
+    });
+
+    cy.get(".data-cy-clustersInput").should("not.be.checked");
+  });
+});

frontend/src/components/ClustersList.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ClustersList from "./ClustersList";
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "ClustersList",
+  component: ClustersList,
+} satisfies Meta<typeof ClustersList>;
+
+export default meta;
+
+//👇 We create a “template” of how args map to rendering
+export const Default: StoryObj<typeof ClustersList> = {
+  args: {
+    filteredNamespaces: [""],
+    installedReleases: [],
+    selectedCluster: "",
+  },
+
+  argTypes: {
+    onClusterChange: { actions: "onClusterChange called" },
+  },
+};

frontend/src/components/ClustersList.tsx

@@ -0,0 +1,165 @@
+import { useMemo } from "react";
+import { Cluster, Release } from "../data/types";
+import apiService from "../API/apiService";
+import { useQuery } from "@tanstack/react-query";
+import useCustomSearchParams from "../hooks/useCustomSearchParams";
+import { useAppContext } from "../context/AppContext";
+import { v4 as uuidv4 } from "uuid";
+
+type ClustersListProps = {
+  onClusterChange: (clusterName: string) => void;
+  selectedCluster: string;
+  filteredNamespaces: string[];
+  installedReleases?: Release[];
+};
+
+function getCleanClusterName(rawClusterName: string) {
+  if (rawClusterName.indexOf("arn") === 0) {
+    // AWS cluster
+    const clusterSplit = rawClusterName.split(":");
+    const clusterName = clusterSplit.slice(-1)[0].replace("cluster/", "");
+    const region = clusterSplit.at(-3);
+    return region + "/" + clusterName + " [AWS]";
+  }
+
+  if (rawClusterName.indexOf("gke") === 0) {
+    // GKE cluster
+    return (
+      rawClusterName.split("_").at(-2) +
+      "/" +
+      rawClusterName.split("_").at(-1) +
+      " [GKE]"
+    );
+  }
+
+  return rawClusterName;
+}
+
+function ClustersList({
+  installedReleases,
+  selectedCluster,
+  filteredNamespaces,
+  onClusterChange,
+}: ClustersListProps) {
+  const { upsertSearchParams, removeSearchParam } = useCustomSearchParams();
+  const { clusterMode } = useAppContext();
+
+  const { data: clusters } = useQuery<Cluster[]>({
+    queryKey: ["clusters", selectedCluster],
+    queryFn: apiService.getClusters,
+    onSuccess(data) {
+      const sortedData = data?.sort((a, b) =>
+        getCleanClusterName(a.Name).localeCompare(getCleanClusterName(b.Name))
+      );
+
+      if (sortedData && sortedData.length > 0 && !selectedCluster) {
+        onClusterChange(sortedData[0].Name);
+      }
+
+      if (selectedCluster) {
+        const cluster = data.find(
+          (cluster) => getCleanClusterName(cluster.Name) === selectedCluster
+        );
+        if (!filteredNamespaces && cluster?.Namespace) {
+          upsertSearchParams("filteredNamespace", cluster.Namespace);
+        }
+      }
+    },
+  });
+
+  const namespaces = useMemo(() => {
+    const mapNamespaces = new Map<string, number>();
+
+    installedReleases?.forEach((release) => {
+      const amount = mapNamespaces.get(release.namespace)
+        ? Number(mapNamespaces.get(release.namespace)) + 1
+        : 1;
+      mapNamespaces.set(release.namespace, amount);
+    });
+
+    return Array.from(mapNamespaces, ([key, value]) => ({
+      id: uuidv4(),
+      name: key,
+      amount: value,
+    }));
+  }, [installedReleases]);
+
+  const onNamespaceChange = (namespace: string) => {
+    const newSelectedNamespaces = filteredNamespaces?.includes(namespace)
+      ? filteredNamespaces?.filter((ns) => ns !== namespace)
+      : [...(filteredNamespaces ?? []), namespace];
+    removeSearchParam("filteredNamespace");
+    if (newSelectedNamespaces.length > 0) {
+      upsertSearchParams(
+        "filteredNamespace",
+        newSelectedNamespaces.map((ns) => ns).join("+")
+      );
+    }
+  };
+
+  return (
+    <div className="bg-white flex flex-col p-2 rounded custom-shadow text-cluster-list w-48 m-5 h-fit pb-4 custom-">
+      {!clusterMode ? (
+        <>
+          <label className="font-bold">Clusters</label>
+          {clusters
+            ?.sort((a, b) =>
+              getCleanClusterName(a.Name).localeCompare(
+                getCleanClusterName(b.Name)
+              )
+            )
+            ?.map((cluster) => {
+              return (
+                <span
+                  key={cluster.Name}
+                  className="data-cy-clusterName flex items-center mt-2 text-xs"
+                >
+                  <input
+                    className="cursor-pointer data-cy-clustersInput"
+                    onChange={(e) => {
+                      onClusterChange(e.target.value);
+                    }}
+                    type="radio"
+                    id={cluster.Name}
+                    value={cluster.Name}
+                    checked={cluster.Name === selectedCluster}
+                    name="clusters"
+                  />
+                  <label htmlFor={cluster.Name} className="ml-1 ">
+                    {getCleanClusterName(cluster.Name)}
+                  </label>
+                </span>
+              );
+            })}
+        </>
+      ) : null}
+
+      <label className="font-bold mt-4">Namespaces</label>
+      {namespaces
+        ?.sort((a, b) => a.name.localeCompare(b.name))
+        ?.map((namespace) => (
+          <span key={namespace.name} className="flex items-center mt-2 text-xs">
+            <input
+              type="checkbox"
+              id={namespace.name}
+              onChange={(event) => {
+                onNamespaceChange(event.target.value);
+              }}
+              value={namespace.name}
+              checked={
+                filteredNamespaces
+                  ? filteredNamespaces.includes(namespace.name)
+                  : false
+              }
+            />
+            <label
+              htmlFor={namespace.name}
+              className="data-cy-clusterList-namespace ml-1"
+            >{`${namespace.name} [${namespace.amount}]`}</label>
+          </span>
+        ))}
+    </div>
+  );
+}
+
+export default ClustersList;

frontend/src/components/InstalledPackages/HealthStatus.tsx

@@ -0,0 +1,41 @@
+import { HD_RESOURCE_CONDITION_TYPE } from "../../API/releases";
+import { Tooltip } from "flowbite-react";
+import { ReleaseHealthStatus } from "../../data/types";
+import { v4 as uuidv4 } from "uuid";
+
+interface Props {
+  statusData: ReleaseHealthStatus[];
+}
+
+const HealthStatus = ({ statusData }: Props) => {
+  const statuses = statusData.map((item) => {
+    for (let i = 0; i < item.status.conditions.length; i++) {
+      const cond = item.status.conditions[i];
+
+      if (cond.type !== HD_RESOURCE_CONDITION_TYPE) {
+        continue;
+      }
+
+      return (
+        <Tooltip
+          key={uuidv4()} // this is not a good practice, we need to fetch some unique id from the backend
+          content={`${cond.status} ${item.kind} ${item.metadata.name}`}
+        >
+          <span
+            className={`inline-block ${
+              cond.status === "Healthy"
+                ? "bg-success"
+                : cond.status === "Progressing"
+                ? "bg-warning"
+                : "bg-danger"
+            } w-2.5 h-2.5 rounded-sm`}
+          ></span>
+        </Tooltip>
+      );
+    }
+  });
+
+  return <div className="flex flex-wrap gap-1">{statuses}</div>;
+};
+
+export default HealthStatus;

frontend/src/components/InstalledPackages/InstalledPackageCard.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta } from "@storybook/react";
+import InstalledPackageCard from "./InstalledPackageCard";
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "InstalledPackageCard",
+  component: InstalledPackageCard,
+} satisfies Meta<typeof InstalledPackageCard>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    release: {
+      id: "",
+      name: "",
+      namespace: "",
+      revision: 1,
+      updated: "",
+      status: "",
+      chart: "",
+      chart_name: "",
+      chart_ver: "",
+      app_version: "",
+      icon: "",
+      description: "",
+      has_tests: false,
+      chartName: "", // duplicated in some cases in the backend, we need to resolve this
+      chartVersion: "", // duplicated in some cases in the backend, we need to resolve this
+    },
+  },
+};

frontend/src/components/InstalledPackages/InstalledPackageCard.tsx

@@ -0,0 +1,150 @@
+import { useState } from "react";
+import { Release } from "../../data/types";
+import { BsArrowUpCircleFill, BsPlusCircleFill } from "react-icons/bs";
+import { getAge } from "../../timeUtils";
+import StatusLabel, {
+  DeploymentStatus,
+  getStatusColor,
+} from "../common/StatusLabel";
+import { useQuery } from "@tanstack/react-query";
+import apiService from "../../API/apiService";
+import HealthStatus from "./HealthStatus";
+import HelmGrayIcon from "../../assets/helm-gray-50.svg";
+import Spinner from "../Spinner";
+import { useGetLatestVersion } from "../../API/releases";
+import { isNewerVersion } from "../../utils";
+import { LatestChartVersion } from "../../API/interfaces";
+import useNavigateWithSearchParams from "../../hooks/useNavigateWithSearchParams";
+
+type InstalledPackageCardProps = {
+  release: Release;
+};
+
+export default function InstalledPackageCard({
+  release,
+}: InstalledPackageCardProps) {
+  const navigate = useNavigateWithSearchParams();
+
+  const [isMouseOver, setIsMouseOver] = useState(false);
+
+  const { data: latestVersionResult } = useGetLatestVersion(release.chartName, {
+    queryKey: ["chartName", release.chartName],
+    cacheTime: 0,
+  });
+
+  const { data: statusData } = useQuery<unknown>({
+    queryKey: ["resourceStatus", release],
+    queryFn: () => apiService.getResourceStatus({ release }),
+  });
+
+  const latestVersionData: LatestChartVersion | undefined =
+    latestVersionResult?.[0];
+
+  const canUpgrade =
+    !latestVersionData?.version || !release.chartVersion
+      ? false
+      : isNewerVersion(release.chartVersion, latestVersionData?.version);
+
+  const installRepoSuggestion = latestVersionData?.isSuggestedRepo
+    ? latestVersionData.repository
+    : null;
+
+  const handleMouseOver = () => {
+    setIsMouseOver(true);
+  };
+
+  const handleMouseOut = () => {
+    setIsMouseOver(false);
+  };
+
+  const handleOnClick = () => {
+    const { name, namespace } = release;
+    navigate(`/${namespace}/${name}/installed/revision/${release.revision}`, {
+      state: release,
+    });
+  };
+
+  const statusColor = getStatusColor(release.status as DeploymentStatus);
+  const borderLeftColor: { [key: string]: string } = {
+    [DeploymentStatus.DEPLOYED]: "border-l-border-deployed",
+    [DeploymentStatus.FAILED]: "border-l-text-danger",
+    [DeploymentStatus.PENDING]: "border-l-border",
+  };
+
+  return (
+    <div
+      className={`${
+        borderLeftColor[release.status]
+      } text-xs grid grid-cols-12 items-center bg-white rounded-md p-2 py-6 my-2 custom-shadow border-l-4 border-l-[${statusColor}] cursor-pointer ${
+        isMouseOver && "custom-shadow-lg"
+      }`}
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+      onClick={handleOnClick}
+    >
+      <img
+        src={release.icon || HelmGrayIcon}
+        alt="helm release icon"
+        className="w-[45px] mx-4 col-span-1 min-w-[45px]"
+      />
+
+      <div className="col-span-11 -mb-5">
+        <div className="grid grid-cols-11">
+          <div className="col-span-3 font-bold text-xl mr-0.5 font-roboto-slab">
+            {release.name}
+          </div>
+          <div className="col-span-3">
+            <StatusLabel status={release.status} />
+          </div>
+          <div className="col-span-2 font-bold">{release.chart}</div>
+          <div className="col-span-1 font-bold text-xs">
+            #{release.revision}
+          </div>
+          <div className="col-span-1 font-bold text-xs">
+            {release.namespace}
+          </div>
+          <div className="col-span-1 font-bold text-xs">{getAge(release)}</div>
+        </div>
+        <div
+          className="grid grid-cols-11 text-xs mt-3"
+          style={{ marginBottom: "12px" }}
+        >
+          <div className="col-span-3 h-12 line-clamp-3 mr-1">
+            {release.description}
+          </div>
+          <div className="col-span-3 mr-2">
+            {statusData ? (
+              <HealthStatus statusData={statusData} />
+            ) : (
+              <Spinner size={4} />
+            )}
+          </div>
+          <div className="col-span-2 text-muted flex flex-col items">
+            <span>CHART VERSION</span>
+            {(canUpgrade || installRepoSuggestion) && (
+              <div
+                className="text-upgradable flex flex-row items-center gap-1 font-bold"
+                title={`upgrade available: ${latestVersionData?.version} from ${latestVersionData?.repository}`}
+              >
+                {canUpgrade && !installRepoSuggestion ? (
+                  <>
+                    <BsArrowUpCircleFill />
+                    UPGRADE
+                  </>
+                ) : (
+                  <>
+                    <BsPlusCircleFill />
+                    ADD REPO
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+          <div className="col-span-1 text-muted">REVISION</div>
+          <div className="col-span-1 text-muted">NAMESPACE</div>
+          <div className="col-span-1 text-muted">UPDATED</div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/InstalledPackages/InstalledPackagesHeader.stories.tsx

@@ -0,0 +1,54 @@
+import { Meta } from "@storybook/react";
+import InstalledPackagesHeader from "./InstalledPackagesHeader";
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "InstalledPackagesHeader",
+  component: InstalledPackagesHeader,
+} satisfies Meta<typeof InstalledPackagesHeader>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    filteredReleases: [
+      {
+        id: "",
+        name: "",
+        namespace: "",
+        revision: 1,
+        updated: "",
+        status: "",
+        chart: "",
+        chart_name: "",
+        chart_ver: "",
+        app_version: "",
+        icon: "",
+        description: "",
+        has_tests: false,
+        chartName: "", // duplicated in some cases in the backend, we need to resolve this
+        chartVersion: "", // duplicated in some cases in the
+      },
+      {
+        id: "",
+        name: "",
+        namespace: "",
+        revision: 1,
+        updated: "",
+        status: "",
+        chart: "",
+        chart_name: "",
+        chart_ver: "",
+        app_version: "",
+        icon: "",
+        description: "",
+        has_tests: false,
+        chartName: "", // duplicated in some cases in the backend, we need to resolve this
+        chartVersion: "", // duplicated in some cases in the
+      },
+    ],
+  },
+};

frontend/src/components/InstalledPackages/InstalledPackagesHeader.tsx

@@ -0,0 +1,51 @@
+import HeaderLogo from "../../assets/packges-header.svg";
+import { Release } from "../../data/types";
+
+type InstalledPackagesHeaderProps = {
+  filteredReleases?: Release[];
+  setFilterKey: React.Dispatch<React.SetStateAction<string>>;
+  isLoading: boolean;
+};
+
+export default function InstalledPackagesHeader({
+  filteredReleases,
+  setFilterKey,
+  isLoading,
+}: InstalledPackagesHeaderProps) {
+  const numOfPackages = filteredReleases?.length;
+  const showNoPackageAlert = Boolean(
+    !isLoading && (numOfPackages === undefined || numOfPackages === 0)
+  );
+  return (
+    <div className="custom-shadow rounded-t-md  ">
+      <div className="flex items-center justify-between bg-white px-2 py-0.5 font-inter rounded-t-md ">
+        <div className="flex items-center">
+          <img
+            src={HeaderLogo}
+            alt="Helm-DashBoard"
+            className="display-inline h-12 ml-3 mr-3 w-[28px] "
+          />
+          <h2 className="display-inline font-bold text-base ">{`Installed Charts (${
+            numOfPackages || "0"
+          })`}</h2>
+        </div>
+
+        <div className="w-1/3">
+          <input
+            className="border-installed-charts-filter  rounded p-1 text-sm w-11/12"
+            placeholder="Filter..."
+            type="text"
+            onChange={(ev) => setFilterKey(ev.target.value)}
+          />
+        </div>
+      </div>
+
+      {showNoPackageAlert && (
+        <div className="bg-white rounded shadow display-none no-charts mt-3 text-sm p-4">
+          Looks like you don&apos;t have any charts installed.
+          &quot;Repository&quot; section may be a good place to start.
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/InstalledPackages/InstalledPackagesList.stories.tsx

@@ -0,0 +1,54 @@
+import { Meta } from "@storybook/react";
+import InstalledPackagesList from "./InstalledPackagesList";
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "InstalledPackagesList",
+  component: InstalledPackagesList,
+} satisfies Meta<typeof InstalledPackagesList>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    installedReleases: [
+      {
+        id: "",
+        name: "",
+        namespace: "",
+        revision: 1,
+        updated: "",
+        status: "",
+        chart: "",
+        chart_name: "",
+        chart_ver: "",
+        app_version: "",
+        icon: "",
+        description: "",
+        has_tests: false,
+        chartName: "", // duplicated in some cases in the backend, we need to resolve this
+        chartVersion: "", // duplicated in some cases in the
+      },
+      {
+        id: "",
+        name: "",
+        namespace: "",
+        revision: 1,
+        updated: "",
+        status: "",
+        chart: "",
+        chart_name: "",
+        chart_ver: "",
+        app_version: "",
+        icon: "",
+        description: "",
+        has_tests: false,
+        chartName: "", // duplicated in some cases in the backend, we need to resolve this
+        chartVersion: "", // duplicated in some cases in the
+      },
+    ],
+  },
+};

frontend/src/components/InstalledPackages/InstalledPackagesList.tsx

@@ -0,0 +1,23 @@
+import InstalledPackageCard from "./InstalledPackageCard";
+import { Release } from "../../data/types";
+
+type InstalledPackagesListProps = {
+  filteredReleases: Release[];
+};
+
+export default function InstalledPackagesList({
+  filteredReleases,
+}: InstalledPackagesListProps) {
+  return (
+    <div>
+      {filteredReleases.map((installedPackage: Release) => {
+        return (
+          <InstalledPackageCard
+            key={installedPackage.name}
+            release={installedPackage}
+          />
+        );
+      })}
+    </div>
+  );
+}

frontend/src/components/LinkWithSearchParams.tsx

@@ -0,0 +1,39 @@
+import { NavLink, useLocation, useParams } from "react-router-dom";
+import { useAppContext } from "../context/AppContext";
+
+const LinkWithSearchParams = ({
+  to,
+  ...props
+}: {
+  to: string;
+  end?: boolean;
+  exclude?: string[];
+  className?: string;
+  children: React.ReactNode;
+}) => {
+  const { search } = useLocation();
+  const { context } = useParams();
+  const { clusterMode } = useAppContext();
+
+  const params = new URLSearchParams(search);
+  // For state we don't want to keep while navigating
+  props.exclude?.forEach((key) => {
+    params.delete(key);
+  });
+
+  let prefixedUrl = to;
+
+  if (!clusterMode) {
+    prefixedUrl = `/${context}${to}`;
+  }
+
+  return (
+    <NavLink
+      data-cy="navigation-link"
+      to={`${prefixedUrl}/?${params.toString()}`}
+      {...props}
+    />
+  );
+};
+
+export default LinkWithSearchParams;

frontend/src/components/SelectMenu.stories.tsx

@@ -0,0 +1,35 @@
+/**
+ * @file SelectMenu.stories.tsx
+ * @description This file contains the SelectMenu
+ *    component stories.
+ * currently there is only the default story.
+ * The default story renders the component with the default props.
+ */
+
+import { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import SelectMenu, { SelectMenuItem } from "./SelectMenu";
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "SelectMenu",
+  component: SelectMenu,
+} satisfies Meta<typeof SelectMenu>;
+
+export default meta;
+
+export const Default: StoryObj<typeof SelectMenu> = {
+  args: {
+    header: "Header",
+    children: [
+      <SelectMenuItem label="Item 1" id={1} key="item1" />,
+      <SelectMenuItem label="Item 2" id={2} key="item2" />,
+      <SelectMenuItem label="Item 3" id={3} key="item3" />,
+    ],
+    selected: 1,
+    onSelect: (id: number) => action("onSelect")(id),
+  },
+};

frontend/src/components/SelectMenu.tsx

@@ -0,0 +1,82 @@
+/**
+ *
+ * @file SelectMenu.tsx
+ * @description SelectMenu component
+ * This component is used to render a select menu. This is a component
+ * with two parts: The menu header and the menu items. The menu header
+ * is just text, and the menu items are radio toggles.
+ * The menu items are passed as children of type SelectMenuItem,
+ * which is an object with a label and id.
+ * SelectMenuItem is defined in this file.
+ * The menu header is a string.
+ *
+ * We use an interface to define the props that are passed to the component.
+ * The interface name is SelectMenuProps. The interface is defined in the
+ * same file as the component.
+ *
+ * @interface SelectMenuProps:
+ * @property {string} header - The menu header
+ * @property {SelectMenuItem[]} children - The menu items
+ * @property {number} selected - The id of the selected menu item
+ * @property {Function} onSelect - The function to call when a menu item is selected
+ *
+ * @return {JSX.Element} - The component
+ *
+ *
+ */
+
+// define the SelectMenuItem type:
+// This is an object with a label and id.
+// The label is a string, and the id is a number.
+// The id is used to identify the selected menu item.
+export interface SelectMenuItemProps {
+  label: string;
+  id: number;
+}
+
+// define the SelectMenuProps interface:
+
+export interface SelectMenuProps {
+  header: string;
+  children: React.ReactNode;
+  selected: number;
+  onSelect: (id: number) => void;
+}
+
+// define the SelectMenu component:
+// remember to use tailwind classes for styling
+// recall that the menu items are radio buttons
+// the selected menu item is the one that is checked
+// the onSelect function is called when a menu item is selected
+// the onSelect function is passed the id of the selected menu item
+
+export function SelectMenuItem({
+  label,
+  id,
+}: SelectMenuItemProps): JSX.Element {
+  return (
+    <div className="flex flex-row">
+      <input
+        type="radio"
+        name="menu"
+        id={id.toString()} // id must be a string
+        value={id}
+        checked={false}
+        onChange={() => {
+          return;
+        }}
+      />
+      <label htmlFor={id.toString()}>{label}</label>
+    </div>
+  );
+}
+
+export default function SelectMenu(props: SelectMenuProps): JSX.Element {
+  const { header, children } = props;
+  return (
+    <div className="card flex flex-col">
+      <h2 className="text-xl font-bold">{header}</h2>
+      <div className="flex flex-col">{children}</div>
+    </div>
+  );
+}

frontend/src/components/ShutDownButton.stories.tsx

@@ -0,0 +1,20 @@
+import { StoryFn, Meta } from "@storybook/react";
+import ShutDownButton from "./ShutDownButton";
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "ShutDownButton",
+  component: ShutDownButton,
+} satisfies Meta<typeof ShutDownButton>;
+
+export default meta;
+
+//👇 We create a “template” of how args map to rendering
+const Template: StoryFn<typeof ShutDownButton> = () => <ShutDownButton />;
+
+export const Default = {
+  render: Template,
+};

frontend/src/components/ShutDownButton.tsx

@@ -0,0 +1,33 @@
+import { BsPower } from "react-icons/bs";
+
+import Modal from "./modal/Modal";
+import { useShutdownHelmDashboard } from "../API/other";
+
+function ShutDownButton() {
+  const { mutate: signOut, status } = useShutdownHelmDashboard();
+
+  const handleClick = async () => {
+    signOut();
+  };
+
+  return (
+    <div className="w-full">
+      <Modal title="Session Ended" isOpen={status === "success"}>
+        <p>
+          The Helm Dashboard application has been shut down. You can now close
+          the browser tab.
+        </p>
+      </Modal>
+
+      <button
+        onClick={handleClick}
+        title="Shut down the Helm Dashboard application"
+        className="flex justify-center w-full mr-5 py-3 border border-transparent hover:border hover:border-gray-500 rounded hover:rounded-lg"
+      >
+        <BsPower className="w-6" />
+      </button>
+    </div>
+  );
+}
+
+export default ShutDownButton;

frontend/src/components/Spinner/index.tsx

@@ -0,0 +1,22 @@
+export default function Spinner({ size = 8 }: { size?: number }) {
+  return (
+    <div role="status">
+      <svg
+        aria-hidden="true"
+        className={`w-${size} h-${size} mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600`}
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
+        />
+      </svg>
+    </div>
+  );
+}

frontend/src/components/Tabs.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta } from "@storybook/react";
+import Tabs from "./Tabs";
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "Tabs",
+  component: Tabs,
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+
+const defaultArgs = {
+  tabs: [
+    {
+      label: "tab1",
+      content: <div>tab1</div>,
+    },
+    {
+      label: "tab2",
+      content: <div>tab2</div>,
+    },
+    {
+      label: "tab3",
+      content: <div>tab3</div>,
+    },
+  ],
+};
+
+export const Default = {
+  args: defaultArgs,
+};

frontend/src/components/Tabs.tsx

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+import useCustomSearchParams from "../hooks/useCustomSearchParams";
+
+export interface Tab {
+  value: string;
+  label: string;
+  content: ReactNode;
+}
+
+interface TabsProps {
+  tabs: Tab[];
+  selectedTab: Tab;
+}
+
+export default function Tabs({ tabs, selectedTab }: TabsProps) {
+  const { upsertSearchParams } = useCustomSearchParams();
+
+  const moveTab = (tab: Tab) => {
+    upsertSearchParams("tab", tab.value);
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex pb-2">
+        {tabs.map((tab) => (
+          <button
+            key={tab.label}
+            className={`cursor-pointer px-4 py-2 text-sm font-normal text-tab-color focus:outline-none"
+              ${
+                selectedTab.value === tab.value &&
+                "border-b-[3px] border-tab-color"
+              }
+            `}
+            onClick={() => moveTab(tab)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div>{selectedTab.content}</div>
+    </div>
+  );
+}