kiegroup / chain-status Goto Github PK

On the README there are no information about one of the most recent params that have been added: projects https://github.com/kiegroup/chain-status/blob/main/.ci/actions/generate-data/action.yml#L10-L12.

Another thing would be to highlight that with this new param, the definition-file is no more required but at least one of these two must be provided.

From the code I see that the Octokit constructor is invoked using personal userAgent.

function createOctokitInstance(token) {
  return token
    ? new Octokit({
        auth: `token ${token}`,
        userAgent: "ginxo/chain-status"
      })
    : new Octokit({
        userAgent: "ginxo/chain-status"
      });
}

I suggest to add this as cli/gha argument since as the Octokit doc recommend we should set it to the application using it.

there's an error about

see this flow https://github.com/kiegroup/droolsjbpm-build-bootstrap/blob/main/.github/workflows/generate_status_page_data.yaml and apply to any repository you consider and you will see the flow failing (I remember something about folder not created 🤔 )

Whatever the change we need should be applied on composite action https://github.com/kiegroup/chain-status/blob/main/.ci/actions/generate-data/action.yml

The idea is be able to authenticate through OAUTH Github service [1]. The different repository ownership rights should be requested in order to provide rights for different functionalities like #42
See examples or guides [2]

[1] https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps#web-application-flow
[2] https://levelup.gitconnected.com/how-to-implement-login-with-github-in-a-react-app-bd3d704c64fc

Right now it is possible to generate data using a build-chain definition file, but we should provide the way to just define a list of projects (either from CLI and action). We will lose the branch mapping functionality from build-chain but it will be worth it

Currently, the user needs to go to the status page periodically to check if some job didn't run due to a failure.

The goal is to try to implement a notifications functionality to warn a user through the mail (or slack in the future) that some of your projects are experiencing issues.

• To add test coverage script as we do here https://github.com/kiegroup/github-action-build-chain/blob/4b8bfe71a72223765a18be95bd8b99ab38596237/package.json#L14
• To add github action to push report to sonarcloud. SONAR_TOKEN already created on this repository. See https://github.com/kiegroup/github-action-build-chain/blob/main/.github/workflows/coverage_report.yml
• To cover the missing parts of the code

see mage

One README.md file at the root to index all the packages (with a link to them) explaining this is a multipackage project. One README.md file per package

• webpage: installation process, link to composite action flow https://github.com/kiegroup/chain-status/blob/main/.ci/actions/generate-app/action.yml
• generate-data: installation, arguments

related ticket: https://issues.redhat.com/browse/BAPL-2340

the idea would be to provide branch selection vs branch selection and provide report on the https://kiegroup.github.io/droolsjbpm-build-bootstrap/status/kiegroup-status page
would be nice to set it up with default branches (like 7.67.x vs 7.67.x-blue)
the report should have its own URI in order to share via email or something

The idea is to be able to emit a message to a any service, this way anyone (with specific rights) will be able to trigger the job for generating the chain-status information

Blocked by #43

Currently, the sidebar entries have a Tooltip that is always showing, seeming redundant in some cases.
The goal is to activate the Tootip only when the entry is overflowed, to allow the user read the complete label.

The Tooltip functionality was implemented on this PR: #49

blocked by https://github.com/kiegroup/github-action-build-chain/projects/1

The webpage fails loading the /latest.json file even if it exists, see an example here

Check the issue:

1. Go to https://lampajr.github.io/drools/status/kogito-status
2. Switch to 'productization-jobs' (https://lampajr.github.io/drools/job/productization-jobs) - here the failure is correct since the project does not exist
3. Switch to the 'kogito status' or 'kiegroup status' (https://lampajr.github.io/drools/status/kogito-status) - here it fails, but it shouldn't since the latest.json file is present (if you refresh the page you'll see the status is page is now correctly loaded)

Replicate locally: TODO

the webpackage is not 100% responsive, we have to fix it

• the title is cut
• the job title is cut
• the menu title is hidden due to the position is fixed and the header increases height

• the build list element is not properly shown
• the right menu is not responsive (maybe we can collapse right menu at certain width since the menu is useful but mandatory)

• the project title is not properly displayed
• the project language header label is not properly displayed

Click on any of this buttons

Drawer Component

• the drawer component is not resized

The idea is to be able to add additional repositories apart from the definition-file ones (even be able to use it without definition-file one)

Caused by #44

• add popover for the swap button, something like "Swap left and right branches, remember the order matters here"
• add popover for the number just to the right of the branch selector on the header, something like "The number of different files comparing branch from the left and the right"
• add popover for the Number of Differences from every repository, something like "The number of different files comparing branch from the left and the right"
• solve UX issue for the GAP while data is loading (use loading from redux data.service), it only happens when there are branches to compare information. I would suggest to show a kind of scaffolding occupying same space as the expected final component (selector and so on). Steps to reproduce it
  • Open the webapp
  • wait until the whole page is loaded
  • open browser's developer tools
  • Go to network tab and select "2G Regular" (or even 3G) throttling
  • click on Reload button
  • the selectors do not appear until data is loaded

The idea is to offer to the user the chance to navigate throw dates, dates are basically status snapshots. See https://github.com/kiegroup/droolsjbpm-build-bootstrap/tree/gh-pages/data/productization-jobs

So the idea is to add a new component here (any of the red boxes)

As you probably notice already we are using ant components library https://ant.design/ so maybe we can reuse this component https://ant.design/components/timeline/ (just vertical format which I guess does not fit to our horizontal requirement), or it is maybe better to look for a new timeline specific library.

• https://www.npmjs.com/package/react-horizontal-timeline
• https://www.npmjs.com/package/react-beautiful-horizontal-timeline
• https://www.npmjs.com/package/react-chrono#getting-started

The idea would be to show date + header information on every timeline spot and comparison with current status

The only problem I see here is how to load the different dates we have, because we are not able to ask filesystem to get all ${date}.json files since there's no server, just browser. So probably we should replace generate-data package to additionally add a new date entry on a new snapshots.json file (this would require for us to probably manually create them either for https://github.com/kiegroup/droolsjbpm-build-bootstrap/tree/gh-pages/data and https://github.com/kiegroup/optaplanner/tree/gh-pages/data)

Whenever you click on any date the information will be shown and all the data will be compared with latest (current) like

see https://ant.design/components/statistic/
it has to be very clear for the user the view belongs to an old version, maybe we can use ribbon component https://emanuelescarabattoli.github.io/react-ribbons/index.html

It seems there is a bug retrieving the list of branches [1]:

const listBranches = async (
  project,
  octokit,
  options = { page: 1, per_page: 100 }
) => {
  ...
    if (status === 200 && data && data.length > 0) {
      result.push(...data);
      if (data.length === options.per_page) {
        result.push(
          ...(await getChecks(project, octokit, {
            ...options,
            page: ++options.page
 ...

As you can see inside listBranches we are recursively invoking getChecks function, which should be wrong since we are trying to collect the list of branches that exceed the per_page param. I think this has never occurred because we quite always have less than 100 branches (I guess).

@Ginxo if you confirm the issue is right, I'll fix it directly in PR-37, the one regarding the coverage improvement.

[1] code reference

It seems like there are some dev dependencies that have been defined under dependencies which might be making the package size bigger than needed
For example:

"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.4.0",
"@types/node": "^16.11.22",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",

caused by: #44

after #44 the data/latest.json file has increased size, I recommend to externalize files object to different file (something like files-latest.json and the one by date).
The get files-latest.json mechanism will be perform once latest data is already loaded, just consider branch comparison as a secondary functionallity

I would recommend to solve this issue before #29