Helm dashboard v2

.dockerignore

@@ -2,4 +2,5 @@ Dockerfile
 *.md
 bin
 .idea
+.git
 dashboard/node_modules

.github/labeler.yml

@@ -44,6 +44,9 @@ docker:
 helm-charts:
   - charts/*
 
+helm-dashboard-v2:
+  - dashboard/*
+
 github-actions:
   - .github/ISSUE_TEMPLATE/*
   - .github/labeler.yml

.github/workflows/build.yml

@@ -3,10 +3,11 @@ name: Build
 on:
   push:
     branches:
-    - main
+      - main
+      - helm-dashboard-v2
   pull_request:
     branches:
-    - "*"
+      - "*"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
@@ -18,6 +19,24 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+
+      # Node part
+      - name: Setup Node.js environment
+        uses: actions/[email protected]
+        with:
+          cache: 'npm'
+          cache-dependency-path: dashboard/package-lock.json
+      - name: NPM install
+        run: npm i
+        working-directory: ./dashboard
+      - name: lint project
+        run: npm run lint  
+        working-directory: ./dashboard
+      - name: NPM build
+        run: npm run build
+        working-directory: ./dashboard
+
+      # Golang part
       - name: Set up Go
         uses: actions/setup-go@v3
         with:
@@ -46,14 +65,6 @@ jobs:
           name: binaries
           path: dist/
           retention-days: 1
-      - name: golangci-lint
-        uses: golangci/[email protected]
-        with:
-          # version: latest
-          # skip-go-installation: true
-          skip-pkg-cache: true
-          skip-build-cache: true
-          # args: --timeout=15m
 
   image:
     runs-on: ubuntu-latest
@@ -90,13 +101,37 @@ jobs:
           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: golangci-lint
+        uses: golangci/[email protected]
+        with:
+          # version: latest
+          # skip-go-installation: true
+          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: ./dashboard/package-lock.json
+      - name: NPM install
+        run: npm i
+        working-directory: ./dashboard
+      - name: NPM lint
+        run: npm run lint
+        working-directory: ./dashboard
+
       - name: Helm Template Check For Sanity
         uses: igabaydulin/[email protected]
         env:

.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,3 +1,12 @@
+# Stage - frontend
+FROM node:latest as frontend
+
+WORKDIR /build
+
+COPY dashboard ./
+
+RUN npm i && npm run build
+
 # Stage - builder
 FROM --platform=${BUILDPLATFORM:-linux/amd64} golang as builder
 
@@ -10,21 +19,23 @@ 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 ./
 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 --platform=${TARGETPLATFORM:-linux/amd64} alpine
@@ -34,16 +45,6 @@ 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) || echo Failed to install optional Checkov
-
 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

@@ -1,12 +1,30 @@
-# Shutting down the app
-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.
+# 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)
 
-# Multicluster
-If you want to switch to a different cluster, simply click on the corresponding cluster as shown in the figure. [Click here](https://kubernetes.io/docs/tasks/access-application-cluster/configure-access-multiple-clusters/) to learn how to access multiple clusters.
+## 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)
@@ -18,45 +36,39 @@ Essentially, a repository is a location where charts are gathered and can be sha
 You can add the repository by clicking on 'Add Repository', 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)
+## Installed Releases List
 
-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)
-
-# Installed Releases list
-A release is an instance of your selected chart running on your Kubernetes Cluster. That means every time that you install a Helm chart there, it creates a new release or instance that coexists with other releases without conflict. You can filter releases based on namespaces or search for release names 
+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.
+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.
+
+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.
+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.
+## 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.
@@ -121,3 +133,77 @@ Diff with Specific Version: Similar to the previous point, the ability to view a
 
 
 
+### 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 dashboard && 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