Skip to content

Commit

Permalink
New design's updates
Browse files Browse the repository at this point in the history
There are some main updates of Events, Dashboard, Realm settings and Initial access token.
  • Loading branch information
xianli123 authored and stianst committed Jan 5, 2021
1 parent 5577d59 commit da2a3a2
Show file tree
Hide file tree
Showing 51 changed files with 188 additions and 0 deletions.
Binary file added design/.DS_Store
Binary file not shown.
Binary file modified design/admin-console/.DS_Store
Binary file not shown.
Binary file added design/admin-console/Dashboard/.DS_Store
Binary file not shown.
21 changes: 21 additions & 0 deletions design/admin-console/Dashboard/Dashboard.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# Dashboard

This version was designed for Keycloak version 7.5. In this design, the dashboard covers server information rather than real metrics or statistics. Therefore, this design is suitable for version 7.5. If all the data is ready, we will redesign the new dashboard for further release.

The whole prototype can be accessed here: https://marvelapp.com/prototype/baei9db/screen/73638263

### Master realm
* Standalone mode
![DashboardStandalone](./images/DashboardStandalone.png)
* (A)
Refresh data: Click the “Refresh” button to update the data.
* (B)
Profile: In the new design, enabled features and disabled features have been displayed directly. The labels indicate the types of the feature.

* Cluster mode
![DashboardCluster](./images/DashboardCluster.png)
As for Cluster mode, the Dashboard includes Server info and Profile. In addition, there is a welcome message as the first tile.

### Non-master realm
If users change the realm from the Master realm to non-master realm, users will be navigated to this page. This is just a welcome message, no actual data. This page is displayed only once. Therefore the navigation bar on the left has no Dashboard menu.
![NonmasterRealm](./images/NonmasterRealm.png)
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions design/admin-console/Dashboard/sidebar.md
Binary file added design/admin-console/Events/.DS_Store
Binary file not shown.
40 changes: 40 additions & 0 deletions design/admin-console/Events/Events.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# Events

In the current console, there are three tabs in the Events menu named Login events, Admin events and Config. In the new design, Config will be moved to Realm settings and Login events will be changed to User events. This part will mainly introduce the updates of Users events and Admin events.

The whole prototype can be accessed here: https://marvelapp.com/prototype/506813g/screen/72103070

### User events
![UserEvents](./images/UserEvents.png)

* (A)
Event configs: Clicking on the Event configs will direct users to the Event configs tab in Realm settings page.
* (B)
Search bar: Users can set up some criteria to search for the prefered events, as shown in the picture below.
![UserEvents_Search](./images/UserEvents_Search.png)
* (C)
Refresh: Due to the events data is dynamic, users need to be allowed to refresh the events to view the latest info.
* (D)
UserID: Clicking the user’s ID will enter the detail page of the user.
* (E)
Collapsible list: Click the arrow to expand the details of the event.
![UserEvents_Expand](./images/UserEvents_Expand.png)
* (F)
Event type: After clicking the error event types, the details will pop-up to show the reasons.
![UserEvents_popup](./images/UserEvents_popup.png)

### Admin events
![AdminEvents](./images/AdminEvents.png)

* (A)
Search bar and refresh: It is the same as what has been shown in Users events.
* (B)
Resource path: Click the resource path can direct users to the detail page of the resource.
* (C)
Auth: Click the Auth option, the auth info will pop up.
![AdminEvents_Auth](./images/AdminEvents_Auth.png)
* (D)
Representation: This JSON file captures only the fields that have been changed.
![AdminEvents_Representation](./images/AdminEvents_Representation.png)
* (E)
Details of resource path: If the text length of the resource path exceeds the limit, the user can hover over the resource path to see all the information.
Binary file added design/admin-console/Events/images/.DS_Store
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions design/admin-console/Events/sidebar.md
Binary file added design/admin-console/RealmSettings/.DS_Store
Binary file not shown.
45 changes: 45 additions & 0 deletions design/admin-console/RealmSettings/EventConfigs.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
# Event configs

In the new design, Event configs will be moved to Realm settings. Event configs tab has three sub-tabs namly Event listener, User event settings and Admin events settings. In this way, the configuration is separated from the view of events. Users can focus on different requirements when using Events.

The whole prototype can be accessed here: https://marvelapp.com/prototype/256i2h2g/screen/72446165

### Event listeners
![EventListeners_1](./images/EventListeners_1.png)
* (A)
Event listeners will not just be added, but also have configuration options when added. There can also be multiple instances of the same event listener (with different configuration). It is similar to Identity provider or User federation.
* (B)
“Listener type” is equal to “Listener” of the current console, including jboss-logging, email and so on. Based on the same listener type, users can create different listeners.

![EventListeners_2](./images/EventListeners_2.png)
Some details of the creation page and edition page are not determined. This is just a rough layout.

### User events settings
* Enable Save events
![UserEventsConfigs_1](./images/UserEventsConfigs_1.png)
After enabling the "Save events", users can set up the "Expiration" and manage the saved types. In addition, Keycloak will record all the subsequent user events.

* Add saved types
![UserEventsConfigs_2](./images/UserEventsConfigs_2.png)

After clicking the "Add saved types" button, users can select and add some types from the modal below.

![UserEventsConfigs_4](./images/UserEventsConfigs_4.png)

### Admin events settings
* Enable Save events
![AdminEvents_1](./images/AdminEvents_1.png)

After enabling the “Save events”, Keycloak will record all the subsequent admin events.

* Disable Save events
![AdminEvents_2](./images/AdminEvents_2.png)
After disabling the “Save events”, Keycloak no longer records all the subsequent admin events. After clicking the "Save" button, there will be a reminder pop up, as shown below. The same thing goes with “User events settings”.

![AdminEvents_3](./images/AdminEvents_3.png)

* Clear events
![AdminEvents_4](./images/AdminEvents_4.png)
Click the “Clear all admin events” button, the reminder will pop up. After clearing all admin events of this realm, all records will be permanently deleted. It is the same as the truth with “User events settings”.

![AdminEvents_5](./images/AdminEvents_5.png)
41 changes: 41 additions & 0 deletions design/admin-console/RealmSettings/UserRegistration.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# User registration

In the new design, the default roles from "Roles" menu and default groups from "Groups" menu will be merged together in Realm settings called “User registration”. This part will introduce some designs and updates of "User registration".

The whole prototype can be accessed here: https://marvelapp.com/prototype/7gaf163/screen/74810895

### Default roles
Default roles allow users to automatically assign user role mappings when any user is newly created or imported through Identity Brokering.

* Help info
![DefaultRoles_5](./images/DefaultRoles_5.png)

Clicking on the link text brings up an explanation to help novice users better understand the feature. The similar thing happens to "Default groups".

* Add default roles
![DefaultRoles_1](./images/DefaultRoles_1.png)
After clicking “Add roles” button, the roles table will popup as shown in the screenshot below. Users can add some roles from this table.

![DefaultRoles_3](./images/DefaultRoles_3.png)

### Default Groups
Default groups allow users to automatically assign group membership whenever any new user is created or imported through Identity Brokering.

* Add default groups

![DefaultGroups_1](./images/DefaultGroups_1.png)

After clicking “Add groups” button, the group table will popup, as shown in the screenshot below. Users can select one or more groups to add to the default group.

![DefaultGroups_3](./images/DefaultGroups_3.png)

* (A) There is a breadcrumb to indicate the group’s path.
* (B) Click the arrow to see the subgroups of the parent group.


* Remove groups

![DefaultGroups_7](./images/DefaultGroups_7.png)
Users can select one or more groups to remove. If users select the parent group, all of its child groups will be selected automatically. After clicking the "Remove", there will be a reminder for users, as shown in the modal below. Clicking the "Remove" button, all selected groups will be removed.

![DefaultGroups_8](./images/DefaultGroups_8.png)
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions design/admin-console/RealmSettings/overview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# Realm settings

In the new console, Realm settings has some updates. This website only records the main changes. It doesn't have all the updates yet. We will update this section over time. The whole prototype can be accessed through the following links.

* [User registration](https://marvelapp.com/prototype/7gaf163/screen/74810895)
* [Event configs](https://marvelapp.com/prototype/256i2h2g/screen/72446165)
1 change: 1 addition & 0 deletions design/admin-console/RealmSettings/sidebar.md
Binary file added design/admin-console/clients/.DS_Store
Binary file not shown.
22 changes: 22 additions & 0 deletions design/admin-console/clients/InitialAccessToken.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# Initial access token

Keycloak admin console can create clients and it also allows clients to create themselves. There are two methods to register clients.
* Click the “Create” button on the Client page to create a new client. That means this client has been registered.
* Clients/applications can register themselves and Keycloak needs to provide the initial access token.

An initial access token can only be used to create clients and has a configurable expiration as well as a configurable limit on how many clients can be created. To some extent, initial access token is a part of client registration. Therefore, the "initial access token" will be moved to "Clients" section from "Realm settings" in the new design.


In the new design, Initial access token as a tab will be moved to Clients page from Realm settings. Client list is the same as what we designed before. Here is the client list design for your reference. https://marvelapp.com/prototype/f00e9jb/screen/71968754. The whole prototype of "Initial access token" can be accessed here: https://marvelapp.com/prototype/be22jj6/screen/74620513

### Initial access token tab

![InitialAccessToken_1](./images/InitialAccessToken_1.png)

Click the "Create" button, users will enter the creation page, as shown in the picture below.

![InitialAccessToken_2](./images/InitialAccessToken_2.png)

Users can set up the "Expiration" and "Count". After clicking the "Save" button, there will be a modal pop up. It reminds users to copy and paste the initial access token. Like the screenshot shows below.

![InitialAccessToken_3](./images/InitialAccessToken_3.png)
1 change: 1 addition & 0 deletions design/admin-console/clients/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ In the new console, the client protocols (OIDC/SAML2.0) will been extended to cl
This website only records the main changes. The whole prototype can be accessed through the following links.

* [Clients list](https://marvelapp.com/7gb4j6h/screen/66566055)
* [Initial access token](https://marvelapp.com/prototype/be22jj6/screen/74620513)
* [Create/Import client](https://marvelapp.com/7gb4j6h/screen/66568447)
* [Settings](https://marvelapp.com/7gb4j6h/screen/66065815)
* [Credentials](https://marvelapp.com/7gb4j6h/screen/66577335)
Expand Down
9 changes: 9 additions & 0 deletions design/admin-console/sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* [**Clients**](/clients/overview.md)

* [List](/clients/list.md)
* [Initial access token](/clients/InitialAccessToken.md)
* [Create/Import](/clients/create-import.md)
* [Settings](/clients/settings.md)
* [Credentials](/clients/credentials.md)
Expand All @@ -22,3 +23,11 @@
* [Composite role](/RealmRoles/composite-role.md)

* [**Sessions**](/Sessions/sessions.md)

* [**Events**](/Events/Events.md)

* [**Dashboard**](/Dashboard/Dashboard.md)

* [**Realm settings**](/RealmSettings/overview.md)
* [User registration](/RealmSettings/UserRegistration.md)
* [Event configs](/RealmSettings/EventConfigs.md)

0 comments on commit da2a3a2

Please sign in to comment.