iver-wharf / wharf-web

Frontend to Wharf, written in Angular

Wharf Angular frontend

Prerequisites

• NPM v6.x.x, which comes with Node.js LTS.

  This is because Angular does not support Node.js Current, and recently they got an incompatability with Node.js v16 / NPM v7.

  Read more about it here: angular/angular-cli#19957 (comment)

Building project

The project requires api-client library and import-* provider libraries to be built first.

1. Get dependencies

   $ npm install

2. Build API client libraries

   $ npm run build-clients

3. Build and start server

   $ npm start

Generate models and services

In case you need to regenerate the api clients, run the ./generate-rest-client.ps1 script in powershell:

• Windows:

  PowerShell.exe -ExecutionPolicy Bypass -File ./generate-rest-client.ps1

• Linux:

  1. Install PowerShell Core, for example by following a guide from https://docs.microsoft.com/en-us/powershell/scripting/install/installing-powershell-core-on-linux or by installing .NET SDK and installing it via the dotnet CLI (installed via https://dotnet.microsoft.com/download?initial-os=linux) by running:

     $ dotnet tool install --global powershell

  2. Now you can run the script:

     $ ./generate-rest-client.ps1

Run locally via Docker

Use GNU Make or GNUWin32.

1. Build the docker image:

   $ make docker

2. Run the built docker image:

   $ make docker-run

Visit http://localhost:8080/

Releasing

Replace the "v2.0.0" in make docker version=v2.0.0 with the new version. Full documentation can be found at Releasing a new version.

Below are just how to create the Docker images using GNU Make or GNUWin32:

$ make docker version=v2.0.0
[1/2] STEP 1/13: FROM node:14.17.1-alpine3.11 AS build
Trying to pull docker.io/library/node:14.17.1-alpine3.11...
Getting image source signatures
Copying blob ed2a3f372ee3 skipped: already exists
Copying blob 5ec9f1d3bd97 skipped: already exists
Copying blob d222216fa792 skipped: already exists
Copying blob ddad3d7c1e96 [--------------------------------------] 0.0b / 0.0b
Copying config 58466d7cb9 done
Writing manifest to image destination
Storing signatures
[1/2] STEP 2/13: WORKDIR /usr/src/app
...

Push the image by running:
docker push quay.io/iver-wharf/wharf-web:latest
docker push quay.io/iver-wharf/wharf-web:v2.0.0

Linting from command-line

make deps

make lint

make lint-ng # Only run Angular/TypeScript linting
make lint-scss # Only run SCSS linting
make lint-md # Only run Markdown linting

Some linting errors have quickfixes, such as "missing semicolon" or "invalid indentation" which can be fixed without messing up the semantics of the code. These can be fixed by running the following:

make lint-fix

make lint-fix-ng # Only fix Angular/TypeScript lint errors
make lint-fix-scss # Only fix SCSS lint errors
make lint-fix-md # Only fix Markdown lint errors

A lot of other errors, such as "member should be camelCased", is not fixable by this make lint-fix command. For those, you'll have to fix them manually.

Linting from IDE

First make sure the project builds by following the #Building project guide above.

Linting from Visual Studio Code

1. Install extensions

   • ESLint (dbaeumer.vscode-eslint): https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
   • vscode-remark-lint (vscode-remark-lint): https://marketplace.visualstudio.com/items?itemName=drewbourne.vscode-remark-lint
   • stylelint (stylelint.vscode-stylelint): https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

   ⚠️ The vscode-remark-lint extension has not proven itself to work previously. If it does not work correctly for you, then skip it and rely on the command-line linting instead.

2. Install NPM dependencies (required by stylelint):

   npm install

3. Open a *.ts file

4. Click the "🚫 ESLINT" tab in the bottom right toolbar and then select either "Enable" or "Enable everywhere"

   

5. Done!

   

Linting from vim/neovim

1. Install plugins:

   • coc.nvim
   • ALE

   ⚠️ Warning: coc.nvim is not that well compatible with other autocompletion plugins, such as YouCompleteMe, deoplete, etc. Use at your own risk.

2. Configure coc.nvim & ALE to play well together

   1. Add the following to your vim config (~/.config/{vim,nvim}/init.vim)

      let g:ale_disable_lsp = 1

   2. Add this to your coc.nvim config (open it with :CocConfig):

      "diagnostic.displayByAle": true

3. Install coc.nvim extensions

   • coc-eslint
   • coc-stylelint-plus

   :CocInstall coc-eslint
   :CocInstall coc-stylelintplus

4. Install NPM dependencies (required by stylelint):

   npm install

5. Open a *.ts file

6. Open the coc-eslint output to see the options to enable it

   :CocCommand eslint.showOutputChannel

7. Done!

   

Project style guides

• Do not set public members explicitly
• If you can define as many members as possible as private
• If possible use interface instead of class for data contract

---

Maintained by Iver. Licensed under the MIT license.

wharf-web's Issues

Sidepanel should be static with position:fixed

Visiting a longer page, such as when viewing the logs of a build, then the Wharf logo and menu items from the sidebar gets hidden by the scrolling page, and the user menu is hidden down at the bottom of the page.

Think it would be more appropriate with position: fixed on it.

Ignore how this looks on mobile right now. We do not support mobile phone screens atm

Mark as favorite in project details

Expected

Clicking the start ⭐ in the project details page marks/unmarks the project as favorite

Actual

The star is only a visual indicator, and not an actual button.

Add query routing for different subpages

Currently when you navigate to the builds or configuration tabs in the project details, and then refresh the page then you get thrown back to the builds list. Just because the URL does not store any routing info.

Would be grand to have it something like

• Project list (using favorites if any, or all if none): /, and only navigate to /?tab=... when clicking on one of the tabs
• Project list (favorites): /?tab=favorites
• Project list (all projects): /?tab=all
• Builds: /projects/123 or /projects/123?tab=builds
• Builds, page 2: /projects/123?tab=builds&page=2
• Config: /projects/123?tab=configuration
• Schedule: /projects/123?tab=schedule
• Schedule, page 2: /projects/123?tab=schedule&page=2

Up for discussion if it should use path instead of query param in the project details page, like instead having:

• Builds: /projects/123
• Builds, page 2: /projects/123?page=2
• Config: /projects/123/configuration
• Schedule: /projects/123/schedule
• Schedule, page 2: /projects/123/schedule?page=2

Maybe write an RFC on it?

Change RxJS subscribe usage for RxJS v8

Deprecation of method signature for subscribe(), need to use object with keys next, error, and complete instead of 3 separate args: https://rxjs.dev/deprecations/subscribe-arguments

Before	After
of([1,2,3]).subscribe( (v) => console.log(v), (e) => console.error(e), () => console.info('complete'), )	of([1,2,3]).subscribe({ next: (v) => console.log(v), error: (e) => console.error(e), complete: () => console.info('complete'), })

This work was started in #54 (comment) but needs to be applied throughout the entire repo

Build page scroll doesn't follow new logs

Expected

When new logs arrive, and you are already scrolled to the bottom, the page scrolls automatically to show the new logs

Actual

When a single log line arrives at a time, it works as expected.

Sometimes when larger number of logs arrive at the same time, like 5-10 lines, it stops scrolling with the page.

Non-auth based event stream doesn't work

Event streaming when using auth works, but not when having OIDC disabled.

Can still refresh the page and get the logs, but the streaming doesn't work.

Nothing is logged in the web console.

The network tab in Chrome shows that the /stream request is created, but it doesn't show any data coming in.

Doing curl on the stream endpoint does print the logs correctly to STDOUT.

Add view of third-party licenses

Need a view you can open to show all third-party licenses from.

This is a requirement for us to be able to ship the code that we're using.

This also includes doing a small bit of investigation of what licenses our dependencies actually use. As much as I like copy-left, the rest of the company disagrees and so if there are any copy-left licenses then we must remove those dependencies.

Only the regular prod dependencies are needed. The devDependencies may be ignored, as we are not shipping that code with the product.

As this list easily gets outdated, suggest to make it generated. Suggest using something like davglass/license-checker outputted as JSON to the assets directory and then when rendering it we link to the SPDX pages for each license (ex: https://spdx.org/licenses/MIT). It's not foolproof, but it's better than nothing

The licenses page could be linked to in the version panel found below the "WHARF" header in the sidebar, so for example:

Cannot click "Run" on a specific stage

In the dropdown from "Run all" the stages are not clickable.

No error in the console. Just nothing happens.

Create util functions with object as parameter for getXList endpoints

From discussion over at #91 (comment)

• Create functions that take objects instead of separate arguments for each of:
  • getTokenList
  • getProviderList
  • getProjectList
  • getBuildList
  • getArtifactList
• Update existing code to use new functions.

Test results in build list is too verbose

Suggest showing something like just a dash instead to signify that there's no test results.

A tooltip explaining why it's just a dash would be nice as well.

Expected

I just changed the HTML via the browser. Would preferrably be a little better styled, like a more muted color, and perhaps one of those long dash symbols instead.

Actual

Change project & build tables to use anchor tags `<a>` instead of onClick

We're currently abusing JavaScript on-click callback to have a clickable table row in project and build lists.

Should instead use anchor tags <a> so we can get better native support from the browser, where you can Ctrl+click to open in a new tab or right click and select "Open in a new window".

We landed on this current implementation because wrapping table rows in anchor tags is a hassle. We're also already using the <wh-project-list-item> element with display: table-row; instead of a <tr> element, so we have to get around that as well somehow. HTML does not like intermediate elements inside tables.

Branches targetting master should have to pass tests before being merged.

We should add a GH action that targets branches targetted at master such that the tests suite is run before PR merge is allowed.

Test Results Summary view

Depends on iver-wharf/wharf-api#11

Show test results summary in build list

Raise warning to users on http error 401

Write an error to users when loading a resource fails.
Following demos a complete lack of output when the server returns a 401. The drawing also includes a crude drawing of the type of error i would expect if i were using the app.

Add skeleton and loading animations

The web has a lot of blank screens when it loads data from the database.

For most pages using skeletons should be appropriate: https://www.primefaces.org/primeng/showcase/#/skeleton

Affected pages:

• project list
• project details
  • build list
  • artifact list

The tricky part will be to figure out how not to duplicate all elements just for the sake of skeletons, but instead use skeletons in-place.

(it was hard getting the GIF seamless, ignore the jittering)

Highlight errors in logs

Recommended to look into ANSI color parsing, and then having us rely on the logs outputting proper coloring themselves.
Parsing and trying to find by string/regex match will be an enless fight.

Troublesome in jenkins, but in wharf 2.0 with cmd we could just setup a proper TTY or something and collect the ANSI coloring that way

What we dont want to do is try match on keywords such as "ERROR" and "WARNING", as that's highly unreliable

Remove "Upload URL" from import modals

Continuation from iver-wharf/wharf-api#56

The upload URL is unused. We can safely remove it, and add it back later if it turns out we actually need it.

This regards all the import modals.

Version of remote components in footer/sidebar

Use the new GET /version endpoints to show the version of the components

• Defensive programming here! While fetching from the endpoint, show "Loading"
• If it timed out, show "Timed out"
• If it errored (non-2xx status code)
  • if error is 404 then show "Ready, unknown version" (that API might not have the GET /version endpoint implemented)
  • else, show "Error"

Depends on:

• iver-wharf/wharf-api#10
• iver-wharf/wharf-provider-gitlab#5
• iver-wharf/wharf-provider-github#6
• iver-wharf/wharf-provider-azuredevops#4

Nginx conf returns 404 on non-root paths

The built nginx image is misconfigured so it returns status code 404, even though it still returns the index.html body, on any non-root endpoints (ex: /project/1).

Seems to be that it's looking for the file /usr/share/nginx/html/project/1, so we need to add some routing in the nginx config to always return the index.html and let Angular deal with the 404 routing

Favorites button is glitchy

Expected

• Filled in star when marked as favorite
• Star border when not marked as favorite

Actual

• Star border when marked as favorite
• Star is missing when not marked as favorite

^ TestRepo is marked as favorite, and hello-world is not.

Need scheduled Trivy scans

Based on iver-wharf/iver-wharf.github.io#72

Tip is to look at https://github.com/iver-wharf/wharf-web/security/code-scanning/setup and see if there's any templates

Could probably just do make docker and inspect the result

Add favicon

The app doesn't have a custom Wharf favicon. It's using the default Angular favicon.

Need to shrink the Wharf favicon down to 32x32 pixles, and potentionally make some adjustments to its legible.

Project build history disappears after config refresh

Pressing the "REFRESH" button in the "CONFIGURATION" tab of the project details page and then clicking back to the "BUILDS" tab, then no builds are shown.

The builds that were there before should still be visible. No need to fetch them again.

Test results & artifacts page on build is empty if no tests/artifacts

Should say something like "no test results found" & "no artifacts found"

Doesn't auto pick first environment anymore

Seems like it picks the "*Only stages without environment filter*" option by default, instead of the first environment in the list.

Not the biggest issue, but it's a behaviour change. Should work like before where it picks the first environment.

Create frontend link to documentation

We need a link somewhere on the frontend to the documentation site:
Link to https://iver-wharf.github.io/, opened in a new tab

Show problem.Response as formatted toast

Whenever the Wharf API or any provider responds with a problem.Response type then the frontend should show it in a good way.

• Title
• Detail
• Type (suddle)
• Link to documentation (using the type) unless type=about:blank where maybe a "no docs for this problem" should be shown
• List the errors as pre-formatted text (suddle)
• Button to copy the error to clipboard in a nicely formatted way
• Button to create an issue on wharf-api repo with the problem and versions of Wharf's components pre-populated

The toast should remain until the user clicks close. No timer on problem toasts.

Add "new issue" button to problem toasts

#54 added implementation for displaying the problem responses correctly. What's missing is to have a button that when pressed it will open the "create new issue" here on GitHub, alternatively just copy the error content as markdown-formatted text.

This task has been extracted by the now closed issue #51 .

Change providers paths

Depends on:

• iver-wharf/wharf-provider-gitlab#8
• iver-wharf/wharf-provider-azuredevops#7
• iver-wharf/wharf-provider-github#8

Run the generate projects script and then update the endpoints it talks to

CI builds failing

The daily CI builds are failing, and I'm getting notified because I'm the author of the latest commit 😅

https://github.com/iver-wharf/wharf-web/actions

Seems to be some NPM issue:

npmERR!code EUSAGE
npm ERR! 
npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
npm ERR! 
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! 
npm ERR! Clean install a project
npm ERR! 
npm ERR! Usage:
npm ERR! npm ci
npm ERR! 
npm ERR! Options:
npm ERR! [--no-audit] [--foreground-scripts] [--ignore-scripts]
npm ERR! [--script-shell <script-shell>]
npm ERR!
npm ERR! aliases: clean-install, ic, install-clean, isntall-clean
npm ERR! 
npm ERR! Run "npm help ci" for more info
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/.npm/_logs/2022-06-13T06_30_02_775Z-debug-0.log
The command '/bin/sh -c NG_CLI_ANALYTICS=ci npm ci' returned a non-zero code: 1
Makefile:20: recipe for target 'docker' failed
make: *** [docker] Error 1
Error: Process completed with exit code 2.

https://github.com/iver-wharf/wharf-web/runs/6856192287?check_suite_focus=true

Favorites gets reset when fails to load projects list

Background

We support marking projects as favorite and storing them in localStorage

To speed things up, once the page has loaded it will automatically select the favorites tab if you have any projects marked as favorite

If a project would be removed then it also needs to be removed from the favorites list in localStorage, so after all projects has been fetched then it removes those that are not in the list.

Issue

For some reason it removes all projects if it fails to fetch the list of projects, such as when the wharf-api is down due to upgrade or other downtime.

I've read through the code and this shouldn't be happening according to me, but I'm obviously missing something. This needs investigation and a bugfix.

Unsubscribe all Observable subscriptions at end of life-cycle

Make sure all Observable subscriptions are unsubscribed at the end of their life-cycle.

Some references

• https://www.thisdot.co/blog/best-practices-for-managing-rxjs-subscriptions
• https://dev.to/nikpoltoratsky/don-t-follow-rxjs-best-practices-4893
• https://blog.bitsrc.io/6-ways-to-unsubscribe-from-observables-in-angular-ab912819a78f

Missing breadcrumbs in build details page

Would be nice with a breadcrumbs bar in build details so you can click back to the project

Add step info

This needs support added in wharf-api first.

Suggest using PrimeNG's timeline to show to the side

https://www.primefaces.org/primeng/#/timeline

Or use the a PrimeNG tree to allow navigating to the logs of a particular step

https://www.primefaces.org/primeng/#/tree

Fix RxJS complete->finalize bugs

In a review comment (#54 (comment)) we discovered a case where we use the RxJS subscribe's complete callback to act as the finally as if it was a try-catch statement.

The complete argument only runs on successful end of the observable subscription, meaning for our use cases where we only wait for 1 item anyway, the complete callback is semantically the same as the first next callback.

The finalize pipe is meant to provide this try-catch-finally functionality, and should be used throught wharf-web instead.

This needs to be double-checked in all Observable.subscribe() uses inside wharf-web, to make sure the code works as expected.

Could be resolved at the same time as #62, as that issue is also related to the Observable.subscribe() method.

Dynamic forms to deal with ex. duplication the provider forms.

In PR #6 a codacy error about +6 duplication was ignored.

One possible solution is to start using some variety of dynamic forms that could create the template and the component from the models we currently have defined. OBS: might need slight more descriptive models.

https://app.codacy.com/gh/iver-wharf/wharf-web/pullRequest?prid=7476842&bid=23686990

Version overlay popup is clipping

Version 1.5.0 contains a new visual glitch:

Add route resolvers to fetch data

Instead of fetching the data ourselves in each component, we could use something like Angular's resolvers to pre-fetch the data:

https://angular.io/api/router/Resolve
https://www.pluralsight.com/guides/prefetching-data-for-an-angular-route

We would hook them up something like

• / <- no resolvers
• /:projectId <- project resolver
• /:projectId/builds/:buildId <- build resolver

The latter will then have both the project and the build loaded, so pages such as the build details page will have access to the project group and name and other metadata.

Update title depending on page

The <title> is forever just "wharf" (in lowercase, even) for all pages. This makes it hard to work with when you have multiple tabs open with Wharf at the same time

URI	Title
/	Projects - Wharf
/project/123	Name-of-project - Wharf
/build/123/456	Build #456 - Name-of-project - Wharf

Need automated testing via headless Chromium

Based on iver-wharf/iver-wharf.github.io#75

Need tests for TypeScript and end-to-end (E2E) tests, such as https://github.com/iver-wharf/wharf-web/blob/57d9d74007807e4f3839185742d11a616967280b/src/app/shared/config/config.service.spec.ts

Could be of interest: https://github.com/marketplace/actions/angular-github-actions

As Wharf cannot do this yet, we should aim at using GitHub Actions.

Update function names to match generated names

Generating rest clients after the release of iver-wharf/wharf-api/pull/76 will make building fail because of the change in auto-generated function names for the endpoints.

The names will be changing again in iver-wharf/wharf-api/pull/79, so if somebody wants to start working on this I believe it's better to update the function names to match those that are there.

Either way, this needs to be done to be compatible with the next release of wharf-api.

At the time of writing, the latest release of wharf-api was v4.2.0.

Cache via service worker to show when offline

Via web service workers you can add caching to pages that are run before the page loads. Having a "Wharf is inaccessible" page would be a nice to have that could explain custom info such as "please make sure you're connected to the VPN" as that is a really common cause for inaccessibility.

This is really low prio and only adds a fraction of UX, but it's a nice feature in case we need a break from larger tasks.

Potential docs for investigation: https://angular.io/guide/service-worker-intro

Test details view

Depends on iver-wharf/wharf-api#17

We've implemented tests results summary in project builds view.
Now it's time to more detailed view:

• show exactly which tests failed and which are passing
• show messages why tests are failling (tbd)

Abstract auth module to allow non-OIDC, offline, local, anonymous access

This is actually a larger discussion:

• Should Wharf support instances with only anonymous access? Or should we mock it instead? Is it more effort to support with and without a user account depending on if auth is enabled, or is it more effort to abstract away the auth to allow generic implementations?

• How do we allow offline access, such as when developing locally? Don't want any network dependencies for dev instances, and preferrably as an option for production instances as well.

• What if we later want to add more auth solutions? Such as LDAP based auth?

We have two main paths we could take:

1. Allow disabling the auth module.

2. Abstract the auth module so we can have multiple implementations: one for OIDC, one for BasicAuth, one for mocked auth for local dev.

After a fruitfull discussion, the latter, path 2, is the path I want us to take. Abstracting the auth is very benefitial just because it adds higher consistency for dev and prod instances of wharf-web, as well future proofs us if we want to add a JS-powered basic auth login later.