redhat-cip / dci-ui

dci-ui

Source code for dci user interface. https://distributed-ci.io dci-ui is a static web app pluggable through CORS on a DCI server.

Getting started

To run the app in development mode follow those steps:

• clone this repository
• ensure DCI api is listening on localhost:5000. See dci-dev-env.
• install node dependencies: npm install
• run the development server : REACT_APP_BACKEND_HOST='http://127.0.0.1:5000' npm start

If you want to test the SSO autentification :

• ensure Keycloak is listening on localhost:8180. See dci-dev-env.
• run the development server with SSO env variables : REACT_APP_SSO_URL='http://localhost:8180' REACT_APP_BACKEND_HOST='http://127.0.0.1:5000' npm start

Build tools

To manage the workflow the project use npm scripts

List of commands:

• npm start: start web server with live reload
• npm run build: build application in build/ folder
• npm run test: start unit test

dci-ui's Issues

Download link from Topics > Components is broken

In the Topics > Components > (unfold component) page a 'Download' link is present. But when clicking on it nothing happens. Hence there is no way to download the link from the UI.

global status page has been removed ?

To view all environments pass/fail snapshot

The detail of a job loads the contents of all files

The detail of a job loads the contents of all files, it slows the application.

Improve job tab navigation

Add url support of tabs in the job view, this will help sharing views and developing on a specific tab.

Something like:

http://localhost:8000/#/jobs/968fcfab-fe51-4dce-a206-1b4a961e16b3
http://localhost:8000/#/jobs/968fcfab-fe51-4dce-a206-1b4a961e16b3/details
http://localhost:8000/#/jobs/968fcfab-fe51-4dce-a206-1b4a961e16b3/edit
http://localhost:8000/#/jobs/968fcfab-fe51-4dce-a206-1b4a961e16b3/context

Error are not correctly displayed

In the administrate panel the error message is always "team already exists" even if the error is not related. Provides a default error message explaining that something bad happened

the jobdefinition should by sorted by date

at this point, they are sorted from the newer to the older. This may things are to read.

As a user I want to be able to add remoteci through the UI

As a DCI user I want to be able to add a remoteci through the DCI UI via the Administration tab.

The only way at the moment to create a new remoteci is to use the command line.

the "See detail" links from the job list don't work

The "See detail" link is broken with Firefox and Chrome. I don't get anything meaningful in the Console.

Update Adminitrator User Panel

The following ticket is a bucket of few ideas to improve the User Experience in the UI:

• (as a super_admin): In the Administrator/Users page, instead of Team ID display Team Name
• (as a super_admin): In the Administrator/Users page, allow to filter by Team. Currently every user of every team are displayed, it is starting to become cumbersome
• (as an admin): In the Administator/Users page, do not have a column Team ID, as I can only list the members of my team

I get silently disconnect if I try to add subscribe to a remoteci

I'm in the OpenStack team, switch is one level below the goneri team. I want to subscribe to my remoteci. So I go on https://www.distributed-ci.io/notification and click on the ⊞ signe.

The following URL is called:
https://api.distributed-ci.io/api/v1/remotecis/af991b96-bfe0-4e00-bd87-5c98893c3238/users
The payload sent by the browser:

{"user_id":"51bd34bf-5767-48c2-aeae-b49212480533"}

answer:

{
  "message": "Operation not authorized.",
  "payload": {},
  "status_code": 401
}

If I retry to do the same, I get a different result:

{
  "message": "Authorization header malformed",
  "payload": {},
  "status_code": 401
}

I actually disconnected. I reload the browser and get redirected to auth page.

GlobalStatus incorrect Tuile

The big block on the top of the GlobalStatus page does not reflect all the topics covered by the global status.

Taking the OpenStack example:

• Blocks shows: OSP 8 - OSP 9 - OSP10 - OSP11
• Available topics reported: OSP {8,9,10,11,12} and RDO {Pike, Ocata}

Take the Ansible example:

• Block shows: Ansible-devel-coverage, Ansible-2.4
• Available topics reported: Ansible-{2.3, 2.4, devel, devel-coverage}

Improve code separation in job page

Currently, codebase of the job page is a mess in addition to be really consequent. Must break this in multiple controllers and templates

it's too easy to permanently delete a job

A job can be deleted just by clicking on the little checkbox. There is no confirmation box and it's ready to lose some information.

Could we use a 'deleted' status instead to hide those jobs instead of just pruning them out of the DB? This way we will be able to recover them later.

Handle responsive

All the layout breaks on small resolution, mobile support is not needed :p but a better display will bring more comfort

Ability to see puddle vs cdn jobs

Ability to see locked vs unlocked jobs (puddle vs cdn) in jobs summary really needed for our use case (Dell)

jobs: issues tab doesn't load the content

Under /jobs/uuid/issues we should have the issue list linked to associated job.
But even if the API returns the correct value, the UI is blocked the 'Loading' progress bar forever.

bogus job duration

I still have a TZ issue. I attached a screenshot. The first one is ok, the job has been
started 2 minutes ago.

As a user (admin) within a team, I'd like to be able to subscribe to a topic via the web interface

As a user (admin) within a team, I'd like to be able to subscribe to a topic via the web interface.

The idea here is to be able to manage fully topic subscription via the user interface.

Add a messages service

In order to visualize errors and notifications a messages services must be implemented.
Currently, errors are handled directly in the controller and displayed in the template, which can cause some UI issues. The idea here is to provide a central service for displaying messages in the UI.

the UI does not show up the remoteci list just after a SSO auth

1. log out
2. log in using SSO

There is no remoteci list

3. refresh

The remoteci list appears.

Lacks titles on publishing pages in the administration

On edit user, edit team, edit remoteci and edit topic, submenu and titles are missing:

rpm install erase %config(noreplace) file

During the installation of the RPM file, it seems that the config.js file is replaced even if the file is marked as %config(noreplace)

see https://github.com/redhat-cip/dci-ui/blob/master/dci-ui.spec#L40

@dsavineau think about a problem between the symbolic link, the cp and the noreplace:

%install
install -d -m0755 %{buildroot}/srv/www/dci-ui
install -d -m0755 %{buildroot}/etc/dci-ui
cp -r static/* %{buildroot}/srv/www/dci-ui
ln -sf /srv/www/dci-ui/config.js %{buildroot}/etc/dci-ui/config.js

%files
/srv/www/dci-ui/*
%config(noreplace) /etc/dci-ui/config.js

The problem is during the deployment of dci-ui, config.js file is not valid between yum update and the ansible config.js configuration

- name: Configure dci-ui config.js
  template:
    src: config.js.j2
    dest: /etc/dci-ui/config.js
  notify:
    - reload httpd
  tags:
- dci-core

remotecis from teams on a 2nd level of deph are hidden

I'm PO in the OpenStack team, I can see the remotecis in the new "Remotecis" menu on the right. They are all here with the exception of the Pure one. What makes this remoteci special is that Pure is itself a sub-team of RAX.

Topic's component_types cannot be specified on create or update

As a Product Owner I'd like to create a new topic. One mandatory field for it to work is to specify component_types to know which component type would be associated with this topic, else any schedule will fail.

Currently there is no way to specify this value neither at creation time or update time.

the curosor makes the user name change whereas we cannot click on it

This happends to be already too time, I try to reach the home page and I click on the "user - team" because I've the feeling it's a clickable link. It's a bit confusing.

Can't set Topic next_topic from the UI

As a super_admin, I'd like to be able to set Topic's next_topic from the UI

As a user I would like to have all my related informations displayed in a tab

To run an agent, I need informations such as remoteci_id, topic_id, etc....

The only way to get those information right now is via the command line, an extra tab with user/team information related would allow one to see those information through the UI.

Handle 404 not found

The UI does not handle 404 errors when the user ask for a non existing resource in the API.
The idea here is to implement a redirection and display an error.

Impossible to update a remoteci

I just tried to update the JSON field of a remoteci and I got this error:

allow_upgrade_job "expected bool". The UI set allow_upgrade_job to null, it should be false instead.

'{"name":"FutureVille2","state":"active","allow_upgrade_job":null,"data":{"tempest_extra_keys":[{"section":"volume","option":"vendor_name","value":"Dell"},{"section":"volume-feature-enabled","option":"volume_services","value":true},{"section":"auth","option":"use_dynamic_credentials","value":true},{"section":"volume-feature-enabled","option":"api_v1","value":true}]}}'

As an alternative, we can also patch the control-server so it will accept null as false.

Long text in errors moves the notification box close button off-screen.

Example, create a team with a very very long name (which currently fails)

The login show nothing on failed attempt

When trying to log in with wrong credentials, the login page shows no error message, leaving the user to guess what happened.

Ability to change/update job status

we've lost the ability to change/update job status

Can't create a team via the UI

In https://www.distributed-ci.io/#!/admin/teams fill a team name, then click "Create", a popup appears with the message "cannot create team (Request malformed)"

Jobs>Files should be a patternfly list

Most list in the UI has been migrated to the patternfly list.

The one in Jobs>Files is still the old way. In order to keep same UX across all the interface, this list should also be moved to the patternfly list.

As an admin user I'd like to be able to filter by team

Currently the admin user can filter by status and remoteci. It would be a usefull adition to add a filter per team (only when connected as admin)

Cancel button doesn't return to main page

When going on Administration > Users > Update User, when I click on Cancel I am not brought back to the Users page.

Simply nothing happens

UI forces the user to reconnect every 20 minutes

Hi,

During my daily activity, I've 3 or 4 tabs running www.distributed-ci.io. I tend to open a new one, do some stuff and forget about it. When I jump back to a older one, most of the time, I've reauth myself through the SSO. The 1h session has expired.

Older jobs not available

older results are not available anymore ? not great when working with multiple environments we're very limited , for eg. with x4 environments(agents) i can't see past 3 days old results.

As an admin user of a team I can't see the administration Tab

If a user is created with admin right within a team, (ie. not admin of the platform), the 'Administration' tab doesn't show up in the left panel.

As an admin user

• s/he should be able to add User within her/his team.

Display components name in main tuile

As a user, I'd like to be able to see the name of the components used for a specific job in the main tuile.

So If my job has been run with 2 specific components:

• OpenStack X.Y and Ceph A.B
• Ansible X.Y and Openvswitch A.B

Be able to see this information in the main tuile.

Can't set RemoteCI allow_upgrade_job from the UI

As a User I would like to be able to enable/disable the field 'allow_upgrade_job' for a RemoteCI from the UI.

As a user (admin within my team) I would like to be able to subscribe to Topics

As a user (admin within my team) I would like to be able to subscribe to topics, using something like the following pattern

Job/Edit/job Submit is broken

The Submit is ignored.

Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 57 more… ] app.js:54510:5
Job "f11b69c1-09c2-448b-b55b-9f139c7a14cd" deleted ! app.js:20673:18
Job "0a2905e5-b17c-4c37-9d6a-9cf7613497cc" deleted ! app.js:20673:18
Something went bad: Job app.js:20673:18

Error: status[s] is undefined
require<[14]</</<.link/job.processStatus@http://46.231.133.47/js/app.js:54559:9
require<[14]</</<.link@http://46.231.133.47/js/app.js:54563:7
invokeLinkFn@http://46.231.133.47/js/app.js:17248:9
nodeLinkFn@http://46.231.133.47/js/app.js:16758:11
delayedNodeLinkFn@http://46.231.133.47/js/app.js:17006:11
compositeLinkFn@http://46.231.133.47/js/app.js:16107:13
publicLinkFn@http://46.231.133.47/js/app.js:15986:30
createBoundTranscludeFn/boundTranscludeFn@http://46.231.133.47/js/app.js:16125:16
controllersBoundTransclude@http://46.231.133.47/js/app.js:16785:18
ngRepeatAction@http://46.231.133.47/js/app.js:33789:15
$watchCollectionAction@http://46.231.133.47/js/app.js:23246:13
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://46.231.133.47/js/app.js:23379:23
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://46.231.133.47/js/app.js:23642:13
done@http://46.231.133.47/js/app.js:18692:36
completeRequest@http://46.231.133.47/js/app.js:18882:7
requestLoaded@http://46.231.133.47/js/app.js:18823:9
 <div class="ng-scope" ng-repeat="job in jobs" dci-job=""> app.js:20673:18

Error: assignment to undeclared variable conf
require<[9]</</api.updateJob@http://46.231.133.47/js/app.js:53805:25
require<[13]</</$scope.submit@http://46.231.133.47/js/app.js:54485:9
$parseFunctionCall@http://46.231.133.47/js/app.js:21441:15
ngEventHandler/</callback@http://46.231.133.47/js/app.js:30667:17
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://46.231.133.47/js/app.js:23537:16
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://46.231.133.47/js/app.js:23636:18
ngEventHandler/<@http://46.231.133.47/js/app.js:30672:17
createEventHandler/eventHandler@http://46.231.133.47/js/app.js:12014:9

Jobs bar loads indefinitely when no RemoteCI created

If you load the main Home tab which allows filtering of jobs, the "loading..." bar will show indefinitely when no RemoteCI have been created.

You can easily reproduce this with a new deployment of DCI CS.

Ability to delete jobs

We've lost the ability to delete jobs ,would be nice to have this back to clean up results.

Issue page isn't working anymore

The issue tab within a job page doesn't work any more.

• Constant load when no issues is present
• Can not add new issues

search is slow

If I search the 'ironic' pattern, the result takes about 1 minute. Once the page is finally displayed, I've again to wait =~ 1 minute, to get the it fully operational (A lot of background requests are still ongoing)

No way of knowing if the ui has access to the server

The user is not warned if the network is disconnected in the middle of a session. There should be a warning if the connection is interrupted.

jobs menu link doesn't work on job detail page

click on jobs link doesn't return to the jobs list

Order test by name

It is easier to compare test results if they are still in the same order. The tests should be classified in each box by name.

Example: Rally and Tempest test should be in the same order

jobs page:

job results page: