v2.0 with React-based frontend (#233)

* Correct path to static dir * Add UI build to makefile * Fix docker build * describe now works * Installed page - revision view - implement url consistent state logic (#403) * refactor * refactor * Fix/responsive and small stylings (#404) * add user defined (#405) * Fix/modal loading button (#406) * add repo to url (#407) * Fix/resources table badges (#408) * filters is now good * fix * test results fix * fix * fixes - error modal, uninstall modals, typees * fixes * bug fix * Helm dashboard v2 (#402) * missing config (#409) * fixes * fixes * Fix/minor responsiveness (#410) * installed release page * default helm icon * guard * refactor * refactor * refactor * key * refactor * fixes * fixes to install * install, add, upgrade, reconfigure now works * latest ver fix * Revision page ui fixes (#411) * link color * Add-repository-link (#412) * empty badge fix * diff fix in install repo * removed console.log * unique key in helathstatus * Cosmetics * Goreleaser upgraded * Another way to fix it * refactor * refactor * chart install fix (#413) * more maintailable * loading, empty space and default namespace * typed * loading diff state is shared * modal height fix * upgrade and add repo connected * add repo suggestion data connected to modal * removed console.log * Chart install fix (#414) * refactor: fix text align uninstall * install modal values big fix * refactor * no changes in diff msg * refactor * sorted versions * typography changes * refactor * refactor * refactor * migrate to sb 7 (#416) * Chart install fix (#415) * Add troubleshoot in komodor (#417) * status style * fix * fixes * delete now reload the page correclty * navigate after add repo fix * Chart install fix (#419) * refactor * refactor * Fix revision age (#420) * refactor * fixed redirects and nav links selected ui (#421) * test modal ui fixes * arrows fix * loading ui (#422) * test dialog now shows errors * fixed rollback diff, redirect after rollback, and debouncing before refetching chart values after changing user defined values (#423) * everything is working besides install chart * install chart should work now * no need for this anymore * styling and naming * improvements * navigation fix * flow fixes * top bar pixel perfect * onClose is optional * ts optional * pixel perfect - clusters, box shadow, error modal * installed page pixel perfect * fixes * need to fix this naming * rollback logic is now good * buttons now similiar to the old app * pass release instead of release date (#426) * repository page style fixes * rounded input * colors like in the old app * more rounding * colors * colors * Cosmetics * drop-shadow cause the dropdown to swallowed * smaller text * fixes (#428) * fixes * describe fix * Fix/lint (#431) * style fixes * fix * describe panel style fixes * diff when repo is available * diff style fixes * fixes to install dialog * specific version should be latests revision * refactor * fixes * fixes * cause troubles * Fixes (#434) * fix * dont fetch if repo not available * tag should not be visible * custom-shdaow fixes * space and shadow like in the old app * refactor (#435) * describe display logic aligned with the old app * style fix * action button style fix * selected revision default logic fix * font fix * style fixes * shutdown button fix * latest revision is now consistent in dev and prod * namespace should be empty on install * fix for current version on install * sorting fix * checkmark should be displayed in options - install * state jump fix * local charts (#436) * Several more fixes (#438) * api docs (#439) * html remove diff2html dep (#437) * Refactor * refactor * Adding storybook for StatusLabel component (#441) * refactor (#442) * we need the css * add prettier (#440) * add prettier * refactor * refactor * Fix reconfigure issue (#443) * first diff fetch fix * missing dep in hooks (#444) * namespace should be from query * triggering diff rerender by listening to loading * missing uservalues * no need for auto retry * we should work against latest revision * refactor * Fix build merge * refactor * refactor * fix * refactor * refactor * age tooltip * prettier fix * fix bug (#447) * Add eslint now (#449) * repo install chart now works as expected * release modal and eslint working good now * we should fetch when return to the initial value * Tailwind theme reorganized (#446) * install release code is like reading a story ! * namespace is not needed for chart values * install repo chart is now like reading a story :) * Fix/filternamesapce (#451) * not needed dep * prettier fix * namespace fix * add debounce (#452) * namespace filter fix * now namespace filter behaves like in the old app * more linter rules and configurations * intial value should be empty * no need to keep filters on cluster change * we don't want to keep tab state between pages * button should be disabled when loading * prettier fix * initial value we're not presented * navigation fix * namespace should always be empty * supporting pre selected namespaces * lint adjustments * Refactor stories fodler (#450) * refactor * refactor * if no user values, use the release values * Adding layer to base style (#456) * Extract duplicate type to types file (#453) * Refactor callApi into direct usage of apiService (#454) * Remove scanners from backend * Give some room for multiple HealthStatus (#458) * refactor: add dynamic api docs (#460) * remove scanners from openapi * was loading forever * fix * Extract defined values from the Modals (#461) * refactor (#462) * fix chart with no repo diff flow * naming fix * crypto UUID not available through https * revert * Update analytics.js with UUID fallback * Cosmetics * repo fetch fix * not need to depened on versions * forgot to push * revert * was causing infinite loop * COsmetics --------- Co-authored-by: Nir Parisian <[email protected]> Co-authored-by: dav-sap <[email protected]> Co-authored-by: chad11111 <[email protected]> Co-authored-by: IdanSchiller <[email protected]> Co-authored-by: dav-sap <[email protected]> Co-authored-by: rotembm12 <[email protected]> Co-authored-by: naorzr <[email protected]> Co-authored-by: Gary Gensler <[email protected]> Co-authored-by: Tamir Abutbul <[email protected]> Co-authored-by: Nir Parisian <[email protected]>
komodorio · Sep 26, 2023 · e4240ed · e4240ed
1 parent 227966b
commit e4240ed
Show file tree

Hide file tree

Showing 178 changed files with 39,338 additions and 4,052 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -2,4 +2,5 @@ Dockerfile
 *.md
 bin
 .idea
+.git
 dashboard/node_modules
diff --git a/.github/labeler.yml b/.github/labeler.yml
@@ -44,6 +44,9 @@ docker:
 helm-charts:
   - charts/*
 
+helm-dashboard-v2:
+  - dashboard/*
+
 github-actions:
   - .github/ISSUE_TEMPLATE/*
   - .github/labeler.yml

diff --git a/.github/workflows/build.yml b/.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:

diff --git a/.gitignore b/.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/*
diff --git a/.goreleaser.yml b/.goreleaser.yml
@@ -11,6 +11,9 @@ builds:
     goarch:
       - amd64
       - arm64
+    ignore:
+      - goos: windows
+        goarch: arm64
     env:
       - CGO_ENABLED=0
 archives:

diff --git a/Dockerfile b/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"]

diff --git a/FEATURES.md b/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)
+
diff --git a/Makefile b/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
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,5 @@ Dockerfile @@
     *.md
     bin
     .idea
+    .git
     dashboard/node_modules