motiv-labs/janus-dashboard

Admin panel for Janus, an API Gateway

Janus-Dashboard

Janus Dashboard is a web-based UI for Janus. It allows users to easily configure the API Gateway without having to send HTTP calls manually.

Getting Started

A quick way to start the dashboard is to run the docker image. Execute the following command to start the dashboard using the latest Docker image:

docker run -d \
-p 8082:80 \
--name janus-dashboard \
hellofreshtech/janus-dashboard

You can then visit http://localhost:8082 and start using the dashboard.

Advanced Configuration

Janus Dashboard supports authentication with GitHub OAuth. A guide on how to configure GitHub OAuth can be read here. An example command can be seen below:

docker run -d \
-p 8082:80 \
-e REACT_APP_JANUS_URI=http://localhost:8081 \
-e REACT_APP_DISABLE_BASIC_AUTH=true \
-e REACT_APP_GITHUB_AUTHORIZE_URL=http://localhost:8080/auth/github/authorize \
-e REACT_APP_GITHUB_CLIENT_ID=exampleClientId \
-e REACT_APP_GITHUB_SCOPE=read:org \
-e REACT_APP_GITHUB_TOKEN_URL=http://localhost:8080/auth/github/token \
--name janus-dashboard \
hellofreshtech/janus-dashboard

Supported environment variables:

• REACT_APP_DISABLE_BASIC_AUTH removes the user interface for basic authentication if set to true
• REACT_APP_DISABLE_GITHUB_AUTH removes the user interface of GitHub authentication if set to true
• The following environment variables are required for GitHub authentication
  • REACT_APP_GITHUB_AUTHORIZE_URL
  • REACT_APP_GITHUB_CLIENT_ID
  • REACT_APP_GITHUB_TOKEN_URL
  • REACT_APP_GITHUB_SCOPE

Development

With Docker

The following command will start Janus Dashboard server and the latest version of Janus with the default username admin and password admin:

$ docker-compose -f tests/docker-compose.test.yml up -d

Without Docker

The following command will start only Janus Dashboard:

$ npm install
$ npm run start

This method will load public/config.js as the configuration. A sample of this file can be found in /src/config.js.tmpl.

janus-dashboard's Issues

to fix/change/add

On the list of API Definitions

• Missing tooltips on the icons: #80
• Add more space between active icon and other columns: #79
• Better styled page selectors... Maybe something like the google or Github ones

Create/Edit page

• Remove top SAVE button on create/edit pages: #77
• The request header field on the CORS plugin is not the ideal for a number of tags that we have: #78

Add user name and logout button to the header

• display the name of the current user: #57
• add logout functionality: #59

API Endpoint name should be a slug

Currently non-URL friendly characters can be used as API endpoint name. This is a problem as they wouldn't be accessible from /apis/API_NAME endpoint.

API endpoint name should be validated and matched against the following pattern:
/^[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$/

Reference

https://github.com/hellofresh/janus/issues/245

Create Sticky Top Navigation (action buttons)

[Create Sticky Top navigation (Action buttons - Save, Copy, Delete button at least). Since APIs and Oauth Servers will be long pages with a lot of plugins and request users will have to scroll down an app to Save/Delete/Clone. We should add sticky top navigation for action buttons, so users can perform changes without scrolling up or down for confirmation or any other changes.]

As a inspiration believe it or not we have decided to look at our BOB :-)

Screenshots attached:

Change files extensions from .jsx to .js

Make Api Names clickable on Health Check page

[Make Api Names clickable on Health Check page]

Reproduction Steps:

1. [Log in to Janus]
2. [Navigate to Healthcheck page]
3. [Click on API name which appears on the list ]

Expected behavior:

[User should be redirected to Edit page of that specific API ]

Observed behavior:

[Nothing happens the name of the API is not clickable]

Show notification if there is no search results

Right now if there is no mathes:

Add confirmation before delete/save an endpoint

Change logic for confirmation window

• remove the storing of the function from the reducer;
• refactor the logic of openConfirmationModal;

Health checks are not working

• Health checks are not working. It shows that everything is fine but the api response is not fine.

Delete API from specific API page should redirect to Api definitons

[If user deletes API from specific API page he should redirected to Api definitons page, because the previously deleted API page no longer exist.]

Reproduction Steps:

1. [Log in to Janus]
2. [Click on Edit icon on existing API]
3. [Click on Delete button]
4. [Click on Yes button to confirm]

Expected behavior:

[Once user deletes an existing api from that specific API page he should be redirected to API definitions because previously deleted API no longer exist.]

Observed behavior:

[User is left on the API page which no longer exist.]

Correct plugin names (not snake case)

When adding a plugin, on the drop down that shows the available plugins we should use the correct names not snake case

Issue with z-index

Move to React 16+

Blank page after login

I tried to setup Janus with the dashboard.
I used a custom Docker compose

version: '3.3'
services:
  janus:
    image: quay.io/hellofresh/janus
    ports:
      - "8080:8080"
      - "8081:8081"
    depends_on:
      - janus-database
    volumes:
      - ./janus.toml:/etc/janus/janus.toml
  janus-dashboard:
    image: quay.io/hellofresh/janus-dashboard
    ports:
      - "8082:80"
    depends_on:
      - janus-database
  janus-database:
      container_name: janus-database
      image: mongo
      ports:
        - "27017:27017"

After docker-compose up I'm able to navigate to the login page. But after the login the page stays blank. Any ideas?

Add validation for OAuth Server Name

[Add validation for OAuth Server Name. if you add a name of a server which already exist you are able to save that changes. Although the server is not created you are receiving a popup with a success message ]

Reproduction Steps:

1. [Log in > Navigate to OAuth Servers]
2. [Create a new OAuth Servers]
3. [Fill OAuth Server Name input field which already exist ]

User should not be able to save changes. Error message should appear in a popup that this Server Name already exist:

[Describe expected behavior here]

When clicking on Create a OAuth Server popup appears with the successful message. Although the actual server is not created we should not show popup with successful message.

Incorrect table header width on Healthcheck page

"TypeError: e.filter is not a function" after login

Hi!
I'm trying to evaluate janus-dashboard but I'm getting just an blank page after an successful login.

TypeError: e.filter is not a function
    at a (apiList.selector.js:33)
    at _pipe.js:3
    at _arity.js:7
    at h (apiList.selector.js:40)
    at index.js:76
    at index.js:36
    at index.js:90
    at index.js:36
    at Function.s [as mapToProps] (apiListContainer.js:16)
    at r (wrapMapToProps.js:43)

Tried using the Docker image (latest) and tests/docker-compose.test.yml.

Plugins don't get copied

When you try to copy an API, it does not carry over the set-up plugins from the original one.

Add toasters for notifying about action results

Logged in users are able to hit /login page and log in again in a new tab

[Logged in users are able to hit /login page and log in again in a new tab]

Reproduction Steps:

1. [Log in to Janus]
2. [Open a new tab in you browser and add: http://gw-dashboard000.staging.hellofresh.io/login]
3. [Click on Login with Github (Observe that you are already logged in in top right corner with your user)]
4. [If you close Network error popup you should be able to navigate again through main navigation and use an app. (Note that Error appears on this ur: http://gw-dashboard000.staging.hellofresh.io/auth/github/callback?code=b3b54e976d0e4617b6e2&state=2620]

Expected behavior:

[If user is logged in, you should be able to open url:http://gw.platform-comm.hellofresh.io/ and access any page in App. User should not be able to hit /login page until user is successfully logged out of the app.]

Observed behavior:

[Logged in users are able to hit /login page and log in again in a new tab]

Screenshots attached:

Add preloaders

• to login page: ede913a
• to API endpoints list: 6c81bc4
• to Edit endpoint page: a1ae6ad

Use without Github?

Hello,
I've just found this dashboard for janus and i'm curious if i can use it without the Github app configuration?
Is this possible? And if yes, how?

Thx

Change page selectors in pagionation

Better styled page selectors... Maybe something like the google or Github ones

Implement function composition

Implement function composition using R.compose for saving Endpoint and OAuthServer

Users are not able to edit Oauth Server and Save changes

[Users are not able to edit Oauth Server and Save changes. Also if you enter in existing Oauth Server and you not make any changes and click on Save button you got 409 Conflict]

Reproduction Steps:

1. [Log in to Janus]
2. [Navigate to Oauth Servers]
3. [Click on Edit icon next to first existing Oauth Server on the list]
4. [Scroll down at the bottom and click on Save button without making any changes]
5. [Or you can change any of radio buttons and click on Save button]

Expected behavior:

[Users should be able to edit existing Oauth Servers and Save changes. ]

Observed behavior:

[Editing existing Oauth Server and clicking on Save button returns modal with message: oauth server name is already registered]

Session timeout too short

Given that it can require substantial time to change configurations, I would recommend to increase the session timeout. I just had it that I wanted to update/create an API and I got logged out in the middle of the process/when trying to save.

Load Balancing Algorithms should be mandatory field in APi's

[Load Balancing Algorithms should be mandatory field in APi's. User should not be able to create a new API without filling this field. This also stands for editing part if you add existing API and remove Load Balancing Algorithms inputs.]

Reproduction Steps:

1. [Log in to Janus]
2. [Click on Create new API's button]
3. [Add API name and Listen path]
4. [Click on Save button]

Expected behavior:

[There should be validation on Load Balancing Algorithms input field and user should be prevented of Saving or creating a new API's without filling this field. This also stands for editing part if you add existing API and remove Load Balancing Algorithms inputs.]

Observed behavior:

[Users are able to Create new Api's without adding load balancing algorithms.]

Do not display inactive Api's on Healthcheck page

[Inactive API's appears on Health check page. We should only show Active APi's on Health Check page.]

Reproduction Steps:

1. [Log in to Janus]
2. [Search for an inactive API davor-qa-dj]
3. [Verify that the APi is not Active]
4. [Navigate to Healthcheck page (API appears on the list)]

Expected behavior:

[We should only show Active APi's on Health Check page. ]

Observed behavior:

[[Inactive API's appears on Health check page]

Add link to the logo image

Can we add a link to the logo image so it redirects to APi's definition list or maybe Janus project page. What do you think, @italolelis ?

Fix Search Row margin

…on Healthcheck page.

Editing an api definition

• Proxy session
  • Methods are not being loaded: #60
• Rate limit plugin
  • Limit Unit should contain Seconds, Minutes and Hours: #62
  • Policy should have a tooltip explaining what are the local and distributed policies: #64
  • There should be a space between the Limit Value and Limit Unit fields: #63
• Oauth plugin
  • The Server Name should be a drop down of all existing oauth servers register on the gateway: #83
• Request Transformer
  • When adding a new header or query string we should have placeholders on the fields so the user knows in which field to put the header name and value: #65

Unable to log in dashboard？

use user:admin，password: admin，Program appears Request failed with status code 405

Wrong title displays when trying to clone existing API

[When trying to clone existing API, we are redirected to New url but the title of the page is Edit API .]

Reproduction Steps:

1. [Log in > Navigate to Api Definitions]
2. [Click on Clone icon next to existing API]

[Describe expected behavior here]

Title of the page should be Create New API:

Add favicon

Having favicon might help to find where's janus dashboard on a busy browser

Move all consumed functions to separate files

so there will no mess inside actions and it will be easier to test them.

Add support for leeway in auth token strategy

Leeway for JWT date fields was added to Janus in https://github.com/hellofresh/janus/pull/281. This is single int64 field in token_strategy section in auth spec. You can find the reference at https://github.com/hellofresh/janus/blob/master/docs/auth/oauth.md#reference

Fix broken searching

While user tries to type in search field - empty page comes out.

JIRA ticket

When clone endpoint - Load balancing alg is not selected

How to reproduce:

1. Go to any api definition;
2. Click Copy button;
3. New api definition will be open but without selected Load balancing alg.

Implement Github authorization

Fix searching

What's wrong:
Step 1: APIs list page => input search query => list filtered.

Step 2: Any another page already with the search query.

What is expected:
After page changed search field should be discarded, so there will be no influence of the searching process of one page on another.

Add sorting the list

Move repeated code to reusable component

Move repeated code, related to rendering addetable/deletable rows, from:

• src/modules/forms/plugins/RequestTransformer/HeadersSection/HeadersSection.js
• src/modules/forms/plugins/RequestTransformer/QueryStringSection/QueryStringSection.js
• src/modules/pages/NewApiPage/partials/RoundrobinTargets/RoundrobinTargets.js

Clicking on Save button on New/Edit page of API's/Oauth Servers should redirect to List page

[Clicking on Save button on New/Edit page of API's/Oauth Servers should redirect to List page]

Reproduction Steps:

1. [Log in to Janus]
2. [Click on Button Create New Api/Ouath server]
3. [Fill all the required fields ]
4. [Click on Save button]
5. [Navigate to list of Apis/Ouath Servers]
6. [Change something in configuration]
7. [Click on Save button]

Expected behavior:

[On some pages user is redirected to List of Api's or Oauth Servers and sometimes it stays on that specific APi or Oath Server. We should make this consistent, once user saves the changes or creates a new API/Oath Server he should be redirected to list of Apis/Oauth Servers.]

Observed behavior:

[User is not redirected on previous page and it stays on page of specific API/Oauth Server]

View page

I would suggest to have a view page, to see detail instead of using edit page

Logo and navigation stick to each other on narrow screen

Fix notification in toaster after creating new endpoind

After new endpoint created it's name should be displayed in toaster, but undefined instead:

Error building project

I tried to clone and build to project on my machine but fails to build using my local node installation:

❯ make
==> Installing dependencies using dockerized node
/bin/sh: docker: command not found
make: *** [deps-docker] Error 127

I think as per the doc it should not use docker option.

Add unit tests

• reducers
• components
• actions