iver-wharf / wharf-web Goto Github PK
View Code? Open in Web Editor NEWFrontend to Wharf, written in Angular
License: MIT License
Frontend to Wharf, written in Angular
License: MIT License
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
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.
Depends on iver-wharf/wharf-api#11
Show test results summary in build list
In the dropdown from "Run all" the stages are not clickable.
No error in the console. Just nothing happens.
From discussion over at #91 (comment)
getTokenList
getProviderList
getProjectList
getBuildList
getArtifactList
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
Depends on:
Run the generate projects script and then update the endpoints it talks to
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.
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.
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.
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:
Allow disabling the auth module.
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.
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 resolverThe 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.
Use the new GET /version
endpoints to show the version of the components
GET /version
endpoint implemented)Depends on:
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
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
/
, and only navigate to /?tab=...
when clicking on one of the tabs/?tab=favorites
/?tab=all
/projects/123
or /projects/123?tab=builds
/projects/123?tab=builds&page=2
/projects/123?tab=configuration
/projects/123?tab=schedule
/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:
/projects/123
/projects/123?page=2
/projects/123/configuration
/projects/123/schedule
/projects/123/schedule?page=2
Maybe write an RFC on it?
Make sure all Observable
subscriptions are unsubscribed at the end of their life-cycle.
Some references
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
Would be nice with a breadcrumbs bar in build details so you can click back to the project
#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 .
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:
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.
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
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
We should add a GH action that targets branches targetted at master such that the tests suite is run before PR merge is allowed.
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:
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)
Should say something like "no test results found" & "no artifacts found"
Whenever the Wharf API or any provider responds with a problem.Response type then the frontend should show it in a good way.
about:blank
where maybe a "no docs for this problem" should be shownThe toast should remain until the user clicks close. No timer on problem toasts.
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
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
When new logs arrive, and you are already scrolled to the bottom, the page scrolls automatically to show the new logs
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.
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.
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.
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.
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 |
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
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.
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.
We need a link somewhere on the frontend to the documentation site:
Link to https://iver-wharf.github.io/, opened in a new tab
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.
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.
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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.