mirror of
https://github.com/komodorio/helm-dashboard.git
synced 2026-03-24 11:48:04 +00:00
e4240ed107
* 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 <nir.parisian@gmail.com> Co-authored-by: dav-sap <davidsaper@gmail.com> Co-authored-by: chad11111 <chad1111@tutanota.com> Co-authored-by: IdanSchiller <58664272+IdanSchiller@users.noreply.github.com> Co-authored-by: dav-sap <16819417+dav-sap@users.noreply.github.com> Co-authored-by: rotembm12 <46103618+rotembm12@users.noreply.github.com> Co-authored-by: naorzr <naorzruk@gmail.com> Co-authored-by: Gary Gensler <127234894+chad11111@users.noreply.github.com> Co-authored-by: Tamir Abutbul <1tamir198@gmail.com> Co-authored-by: Nir Parisian <nir2002@users.noreply.github.com>
Helm dashboard V2
Welcome to our new project, upgrading helm dashbord, we call it, Helm Dashboard version... 2! 🤩
Helm dashboard V2 is an open source effort to modernize the helm-dashboard. Our goals are to create a version which is more:
- Maintable
- Extendable
- Contributor friendly
What is helm?
First thing first, if you are new here please check out these resources to see what helm is all about Video Article
Legacy dashboard vs dashboard V2
The legacy dashboard found here is a static webapp and was written vanilla css, jquery, javascript and html. If you inspect the code abit you may notice that its relitvly hard to extend and maintain such a project.
Our goal with dashboard V2 is to improve the ability to maintain and extend our dashboard app. To achive this we are using a more modern frontend stack.
- Vite, as our build tool.
- React will be used to make this project more inviting for developers to contribute too.
- TypeScript and ESLint will keep the project safe, please keep them clean.
- Tailwind will be used for styling.
- React-Query will be used to fetch 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
Running legacy dashboard
The legacy dashboard is great for refrence and checking that you have implemented the UI correctly.
- Install helm and kubectl.
git clone https://github.com/komodorio/helm-dashboard.git.go build -o bin/dashboard .bin/dashboard
The UI should now be running on http://localhost:8080/ If you're having issues with that please follow the main README in the main folder. If you still having troubles please contact us on our Slack community channel
Setting up your development environment
- First you should fork this repositroy.
- Clone your new repository using
git clone <https_or_ssh_url>. - Make sure to checkout branch
helm-dashboard-v2.git fetchgit checkout helm-dashboard-v2
Running dashboard V2
- Make sure you cloned the project correctly. This is explained in this stage.
- go to
helm-dashboard-v2/dashboardin your local project. - inorder to install dependncies and start the development server
npm inpm run dev
- with the default integration the dashboard should run on http://localhost:5173/
Setting up a local cluster with ease
You should now be able to follow the Helm tutorial and interact with Helm normally.
Choosing a task
If you are completely new to the project its recommended to look for tasks labled: good first issue.
These tasks should be simple enough for a begginer or for someone looking to learn the code base.
You are also free to reachout to us on Slack, we can help you find a task that suits your perfectly.
Opening a pull request
Inorder to open a pull request with your changes. \
- make sure you are synced with
helm-dashboard-v2and that all conflicts are resolved. \ - commit your changes and push to your fork. \
- then navigate to https://github.com/komodorio/helm-dashboard and open a pull request. Make sure you are merging from your branch to
helm-dashboard-v2. \ - you should now tag a main developer (@chad11111 for example) and get your pull request reviewed.
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:
npm run storybook
Refer to the official documentation 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 for inner routes
- User query params in the url for filters or any other state that can be represented
- Hooks:
- useCustomSearchParams - for search params