kintoproj/kinto-dashboard

Dashboard for managing resources with kinto-core

Kinto Dashboard

Kintohub Dashboard is a general purpose, web-based UI for managing your kinto-core. It allows you to manage your applications deployed by kinto-core with ease. This project is written in typescript with react/redux.

Getting Started

You can find the documentation on the website

Prerequisite

Make sure you have a kubernetes cluster and a kinto-core is running on it.

Running locally

If you have direct access to the kubernetes cluster and kinto-core, you can run the dashboard locally with connecting to the port-forwarded kinto-core

# port-forward your kinto-core
kubectl port-forward -n kintohub kinto-core 8080:8080 

# create the environment variable REACT_APP_SERVER_URL and point it to kinto-core
echo "REACT_APP_SERVER_URL=http://localhost:8080" > .env

# install dependencies
yarn 

# start with default 3000 port
yarn start

Install via kubernetes yaml

You can also install the dashboard into kubernetes directly. But we strongly advise not to expose the dashboard to public as it could expose some admin actions that may harmful to your cluster.

Development

Project structure

|
|- .story
|- build   # build folder for the website 
|- config  # config files for building, including the webpack config
|- refs    # git submodules for kinto-core
|- public  # static files
|- scripts # start up scripts. including the envVar replacement script
|- src     # src folder
    |- __tests__  # jest tests
    |- assets     # assets for react app  
    |- components # React components
    |- libraries  # logic and helper classes
    |- routes     # routers
    |- state      # redux states/actions/reducers
    |- stories    # storybook files
    |- theme      # MUI theme and colors
    |- types      # typescript types
       

Generating types from proto files

The .proto files of this project is referencing from kinto-core. In normal case the main branch already contains the latest codes generated from .proto files. However, if you want to use the proto files other than main from kinto-core (for example some alpha features) you should checkout the corresponding branch for the git submodule (the refs folder) and generate the codes from them.

cd refs/kinto-core

git checkout dev

cd ../..

# generate the type files from protos
./protogen.sh

Storybook

Storybook provides a way to test the component easily. We use storybook to test some atoms/molecules especially those are on SidePanel or Popups.

yarn storybook

# visit localhost:9009

Environment variables

# first add the environment variables here 
./src/libraries/envVars.ts

# second update the script to make sure the env vars get replaced at run time
./scripts/replaceEnvVars.sh

Contribution

License

kinto-dashboard's Issues

.proto files checked into repo

Is your feature request related to a problem? Please describe.
Depending on proto files from a required 3rd party repo works great for internal-dev, but would prefer ease of use for open source.

Describe the solution you'd like
Create a new folder called proto and have a github submodule checkout and updated on new feature/bug releases when the proto file(s) have changed.

Describe alternatives you've considered
N/A

Additional context
N/A

Proxy connections to kinto-core

Is your feature request related to a problem? Please describe.
Right now if the dashboard is not publicly exposed, we need to do kubectl port-forward both dashboard and core for users accessing the dashboard

Describe the solution you'd like
We should modify the Dockerfile to make it as a nginx container, serving both the static content and a proxy to the core API

Additional context
Make sure the grpc-web stream works for the proxy. (Be aware of the nginx idle timeout)

Clean repo

• Clean repo from anything related to legacy KintoHub (non opensource)
• Make sure all dependencies are up to date with the new kintoproj organization
• Add documentation in README.md (what it is, requirements, how to run it, environment variables)
• Add automation with github actions (test/build/push/etc.)

Make static website configurable

Is your feature request related to a problem? Please describe.
Static website use to be running on our free tier. So it's automatically running with 2 replicas and there is no resources consumptions. On OSS, we should add it back.

Describe the solution you'd like
Enable the configuration panel for autoscaling and resources config for static website.
There might be a change to do on kinto-builder/deploy image.

CronJob - Can't modify Cron Pattern on Promoted Services

Describe the bug
On promoted services, modifying the cron pattern is not possible

To Reproduce
Steps to reproduce the behavior:

1. Create a 'job' service on a random environment and enable 'schedule cron job'
2. Tag the service after deployment is successful
3. Promote the service to another environment

Cron Pattern is disabled and you can't modify it

Expected behavior
I should be able to modify the cron pattern