litmuschaos / charthub.litmuschaos.io Goto Github PK

View Code? Open in Web Editor NEW

16.0 9.0 42.0 19.32 MB

front-end and back-end for litmus community charts

Home Page: http://hub.litmuschaos.io/

License: Apache License 2.0

JavaScript 2.90% HTML 3.00% CSS 0.32% Go 24.63% Makefile 0.17% TypeScript 68.97%

typescript redux react reactjs

charthub.litmuschaos.io's Introduction

Litmus Chaos Community Chart Hub

Development Setup

Prerequisite

Golang is installed and configured, If not follow the instructions here.
Install Node.js and npm. Follow the instructions here.
Repo should be cloned to your go path, repo path should be

$GOPATH/src/github.com/litmuschaos/charthub.litmuschaos.io

Tech Stack from Frontend

Tech Stack from Backend

Start Frontend

Install it and run:

cd app/client
npm i
npm start

Build it and serve:

cd app/client
npm run build
npm install -g serve
serve -s build

Enable PWA ServiceWorker [OPTIONAL]

Just comment in the following line in the index.tsx:

// registerServiceWorker();

registerServiceWorker();

Start Backend Server

cd app/server
go run main.go

The backend go server will be up and running on port 8080

Dev setup: Enable Prettier [OPTIONAL]

Step: Install the Prettier plugin (e.g. the one of Esben Petersen)
Add the following snippet to your settings in VSCode:

    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
       "source.organizeImports": true // optional
   },

Usage

Open your browser and go to http://localhost:3000/ to access the frontend

Docker Setup

This project has been configured to run with docker, you can initialize the system by running

 docker-compose up

This will setup the nginx and go server for you. To access the frontend use http://localhost/. You need to have docker and docker-compose installed to use this method.

Resources

Our Standup open community meeting link:

Feel free to drop by and participate in our discussion of new open source projects here

Figma Design document for the Front-end website:

View, review, give feedbacks and add comments, suggests upgrades, just about anything related to design right here

Visit our main Litmus repo:

Were are more than welcoming to a new contributor, pay a visit and star it for updates right here

License

charthub.litmuschaos.io's People

Stargazers

Watchers

charthub.litmuschaos.io's Issues

Support last "n"releases on the hub

Create API Doc

Go through server code and find the required endpoints and request/response structures.
Create API doc for charthub, there are no docs available currently.

ref : https://github.com/litmuschaos/charthub.litmuschaos.io/tree/staging/server

Create Accent button

Create an accent color button with an optional icon at the end.

Button component will receive these props:

text/lable
icon
handleClick event

Eg: Visit Docs button and Install Experiment button. One goes to an external link another one redirects to a different route within the same page.

ref: https://www.figma.com/file/cCkF2KTCd7Yx3Gn4KWp9sC/Listmus-Chathub?node-id=0%3A1

Search/Filter Bug in Homepage

The search/filter result on homepage persists when user moves to another page and returns back to the homepage.
Even though the search results persist the search/filter terms don't persist making it difficult to remove the filters/search.

Change experiment runs representation style.

Add a custom text editor for YAML files.

Implement API calls and Redux Store

Get the required backend API endpoints.
Implement rest API calls to set up the redux store according to new architecture.

No API to get direct list of Contributors

For the new ChartHub design the list of contributors to the litmus-chaos is required. Currently there are no API endpoints to get the contributors list.
Possible solutions :
- Add the contributors to the /charts/{version} or /charts/{version}/{chartId} endpoint responses.
- Use Github API
- Use Maintainers as the contributors

ref: https://github.com/litmuschaos/charthub.litmuschaos.io/tree/staging/server

Fix the test for clicking of footer links.

Fix the test for scraping only the footer links.

Refactor Components

Refactor and extract reusable components from complex components and pages.

Support migrate from card to card view while switching versions

Enhance Yaml Editor for CRDs.

Fixes and feat. Required as per revamp

Close Button

Find out previous charthub deployment setup and make changes in current one

There is no documentation about how the previous charthub was deployed in prod or staging. Current revamp has made some breaking changes to the directory structure and code.
Objectives :

Find out previous deployment setup
Make changes to the Config and Dockerfiles to make the revamped version compatible for deployment.

Fix bug for typescript configuration file.

Bug fix for typescript configuration file hampering production build and deployment.

Raise a PR for changing generic chaos Icon

ChartHub backend docker Image too large

The current docker image for the charthub backend is around 800MB.
It can be reduced to smaller size by using a lighter image for the 2nd stage of the build

Create a 404 page

Create the 404 page:

When none of the paths in ReduxRouter match, we have to route to the 404 page
Only logic has to be implemented, designing comes afterwards as this particular page is not designed yet.

Add contributors in yaml file.

Refer:
https://github.com/litmuschaos/chaos-charts/blob/master/charts/kafka/kafka-broker-pod-failure/kafka-broker-pod-failure.chartserviceversion.yaml

Handle RC tags on chaos-charts repo

Issues with ChartHub @staging

A collection of issues identified :

Version Selector UI glitch during load
Forum Link redirects to github.com
Any reason for the choice of font size ? (felt it is a bit big at first view)
Spelling Error in 'Install this Chaos Experiment' in ExperimentPage
Run ChaosEngine -- can we replace this by referring it as a sample- Like we discussed earlier we would like to embed this (going ahead). And it is a user facing CR where people have to edit it w/ their apps. Need to avoid kubectl apply of this
This line doesn't read like a pre-requisite. Can we ask for this to be installed before running the experiment (and redirect link to docs instead of the operator README) :

Note:
Install Litmus Operator: a tool for injecting Chaos Experiments

The Litmus icon in the sidebar gives an indication that it is clickable. Can we place it elsewhere?
cassandra chaos has both k8s website & cassandra website links on the RHS info bar/section (issue from earlier)
Cases where videos are not available - clicking that leads us to the same page. Better to not have it (ex: cassandra)
The supported platforms is expected to grow as our e2e improves. Probably not a good candidate for vertically stacked -- better as a comma-separated list? (thought)
The RHS info bar/section for parent level or chart level pages is different for different categories. Few are extensive (like k8s, cassandra) and some are smaller in size (OpenEBS) -- do you think we can keep it short (like w/ OpenEBS) for all ? (again, this is from earlier). Just website and community link.
There are a few dead-links - such as this: https://docs.litmuschaos.io/docs/openebs-pool-container-kill/ (guess it is instead - https://docs.litmuschaos.io/docs/openebs-pool-container-failure/) --should we add a link check in the hub's CI/e2e? (we added something in docs recently: litmuschaos/litmus-docs#226. But I guess we need alternate ways as the source is a YAML field). Might be more of a verification needed on the chaos-charts repo side? Worth spending some time.
Any specific reason on persisting the footer across all hub pages (the older hub had it only on the landing page) - not sure what the best practices are, but I felt it is a bit redundant..most of the pages inside are expected to be bit more..focused/less clutter ?
pop-up/dialog-box v/s page -- what are the considerations generally - I see that the "Install All Experiments " is now a separate page
(wishlist/minor) The info section on the RHS has the same icon (pin/link) for all - useful links/maintainers/platforms/maturity. Do you think we should have different representations
There is an older bug related to round-off (total exp runs: 1957 in page, but 2.0k+ on the card ..ex: container-kill) -- can we address this too.
Top contributors is a fixed list by commit count or it is a rolling thing -- I see different sets of 5 names
The search is still page based, i.e., can search only items on that page. We are planning to make it text-based right .. (this might be planned, just jotting down in no particular order)
For generic exp - can we get the L embedded in K8s or something.
The FAQ link leads to MayaData helpcenter -- Should it lead to the FAQs on docs?
Can we change the word Bugs to "Issues" -- the github issues hold both bugs as well as Enhancement/Feature Requests.
(minor) Some branding things: Should be have copyright MayaData? It should be LitmusChaos Authors right - which is what we have in our license files. Also, contact should be -- a maintainers mailing list over mayadata support? For ex. openebs.io, chaosmesh.com don't have mayadata or pingcap references
We have been fetching manifests and storing locally on the container. Are we still doing that, we have the same sync period here as well?

Add Text Editor for Yaml files and in-place viewing.

Improve Styling and Responsiveness

Improve current styling of components and pages and make them responsive.

Sidebar desgining

Design the AppDrawer component as per design:

Design: https://www.figma.com/file/cCkF2KTCd7Yx3Gn4KWp9sC/Listmus-Chathub?node-id=0%3A1

Component: https://github.com/arkajyotiMukherjee/charthub.litmuschaos.io/tree/restructure/app/client/src/components/AppDrawer

Create Title components for HomePage

Follow the design guidelines laid by:
https://www.figma.com/file/cCkF2KTCd7Yx3Gn4KWp9sC/Listmus-Chathub?node-id=4%3A3

Follow the naming convention in both the color swatch in design and theme data in code:
Fork from (this)[https://github.com/arkajyotiMukherjee/charthub.litmuschaos.io/tree/restructure] branch.

Create the heading which says Chaos Charts for Kubenetes and the text below too (Use Tyography component from Mui).

Implement Filter and Sort Functionality

Base Layout setup

Make the base layout of the new UI and breakdown the work into smaller components.

Make sidebar
Create theme data
Design footer
Leave content space for the body

Design the experiments page for new charthub website

This page will list all the experiments from a single group like Kafka or OpenEBS.

Eg from original website: https://hub.litmuschaos.io/charts/openebs

Design for the new one: figma.com/file/cCkF2KTCd7Yx3Gn4KWp9sC/Listmus-Chathub?node-id=0%3A1

Design the useful links sections first, move on to breadcrumbs at the top and the title and description components

New Card component design

Make the new card components according to design.
Create the reduce actions for fetching the card Data

Architecture change

Restructuring the charthub UI for better scalability and maintainability.