Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🔌 UI Plugin: Application Topology #58

Closed
18 tasks done
serenamarie125 opened this issue Dec 20, 2022 · 7 comments
Closed
18 tasks done

🔌 UI Plugin: Application Topology #58

serenamarie125 opened this issue Dec 20, 2022 · 7 comments

Comments

@serenamarie125
Copy link
Contributor

serenamarie125 commented Dec 20, 2022

Goal

The goal of this epic is to develop a new Backstage UI plugin in the Janus repo. This UI plugin should provide similar functionality from the Application Topology view in the OpenShift Developer Perspective of the console. The current Application Topology supports a large set of features.

This plugin will provide an initial set of features, which will continue to be enhanced, based on the success metrics of the initial version of this plugin, including customer feedback.

  • The plugin will initially be view only
  • The plugin will initially only provide the graph view
  • The plugin will visualize information/status in real time
  • The visual representations of objects from a shape and hierarchy standpoint will be consistent with what is shown in OpenShift today.
  • Nodes will display a pod ring so that users are easily able to see the status of the pods associated with the workloads
  • Provide a route decorator
  • Side panel showing details of the kubernetes objects
  • Resource tab in the side panel showing the associated resources
  • Implement the GH and DevSpaces decorator (stretch)

What problem does this solve? Please describe.

  • Users want to be able to see the status of the workloads associated with a service in your catalog which is deployed to any kubernetes cluster.
  • Users want one click access to pod logs
  • Users want one click access to run their application which is running on kubernetes

Features
Need to look into this further

  • Provide a Topology tab on the entity page which provides the graph view of the application topology ( list view will. come later)
    OR
  • Provide a Topology Card on that visualizes the directly related workloads of the current entity.
  • Provide a Topology Page which can be access from the Topology Card, and is able to view the workloads associated with the current entity as well as workloads associated with their relations.

Use cases
Coming after spike review

Acceptance criteria
Coming after spike review

Issues in Epic

Stakeholder sign-off

  • QE
  • Doc

Reference screenshots from OpenShift Application Topology

Topology graph view

Screenshot 2023-02-03 at 6 35 39 PM

Topology graph view with side panel showing kubernetes details

Topology-sidepanel-details

Topology graph view with side panel showing associated resources

Topology-sidepanel-resources

@taras
Copy link

taras commented Feb 3, 2023

It might be worth looking at the Catalog Graph plugin

@serenamarie125
Copy link
Contributor Author

@taras thanks for the reference. I've started to more clearly articulate the goals of this plugin, hope this helps.

@taras
Copy link

taras commented Feb 5, 2023

Thank you. They're similar but your mockups are much prettier. The Graph plugin hasn't gotten a lot of love since it was created. What you folks are planning is exciting!

@serenamarie125 serenamarie125 added this to the 01 - Summit 2023 milestone Feb 12, 2023
invincibleJai added a commit that referenced this issue Mar 17, 2023
)

**Tracks:** #58

**Fixes:**  #123

**Screenshots/GIF's:**
- Light Theme

![image](https://user-images.githubusercontent.com/5129024/222737536-9a99e65b-1863-4c92-a028-aa209bd5f722.png)



- Dark Theme

![image](https://user-images.githubusercontent.com/5129024/222737316-ded9036c-1292-47c0-8a0d-bab8eb125d6f.png)




**Test Setup:**
Follow
https://github.com/janus-idp/backstage-plugins/tree/main/plugins/topology#readme

**Unit Tests:**
<img width="1260" alt="image"
src="https://user-images.githubusercontent.com/5129024/223665084-9b179808-3d23-4d32-963f-01efef16db5b.png">


**Todo:**
- [x] adds support for decorator in topology for ingress
- [x] adds accessibility styles from pf (for control bars)
- [x] add unit tests

---------

Co-authored-by: Jeffrey Phillips <jephilli@redhat.com>
mareklibra pushed a commit to mareklibra/janus-idp-backstage-plugins that referenced this issue Apr 5, 2023
@serenamarie125
Copy link
Contributor Author

FYI @invincibleJai note that I added #250 as a stretch

@invincibleJai
Copy link
Member

@serenamarie125 / @rtaniwa we need to update this epic to move #250 to Topology V2 , as we discussed

@rtaniwa
Copy link

rtaniwa commented May 3, 2023

@serenamarie125 / @rtaniwa we need to update this epic to move #250 to Topology V2 , as we discussed

Done!

@rtaniwa
Copy link

rtaniwa commented Jun 15, 2023

@josephca @rnapoles-rh can one of you sign off for QE.
@hmanwani-rh @rkratky can one of you sign off for doc?

batzionb pushed a commit to batzionb/backstage-plugins that referenced this issue Dec 18, 2023
jkilzi pushed a commit to jkilzi/janus-idp-backstage-plugins that referenced this issue Jan 12, 2024
jkilzi pushed a commit to jkilzi/janus-idp-backstage-plugins that referenced this issue Jan 16, 2024
openshift-merge-bot bot pushed a commit that referenced this issue Jan 17, 2024
* feat(orchestrator): add orchestrator plugins

Squashed and rebased. Credits to
- Guilherme Caponetto
- Tiago Dolphine
- Michael Anstis

who did the work before squash and rebase.

* feat(orchestrator): enable dynamic plugin

* fix(orchestrator): load HostDirectory from backend-app-api (#28)

Signed-off-by: Moti Asayag <masayag@redhat.com>
(cherry picked from commit 3ba02c6)

* fix(orchestrator): make the port config optional (#38)

* feat(orchestrator): handle assessment workflow and make optional the workflowsSource config (#35)

* feat: issue FLPATH-591 - Add assessment workflow type and display outputs (#21)

* Configure for assessment swf

* filter assessment on workflow definition page

* workflow columns

* workflow columns

* workflow columns

* workflow filter

* feat: Render assessment results supporting dynamic categories

* issue FLPATH-657: workflow label

* Revert "Configure for assessment swf"

This reverts commit b4048e1.

* Revert sonata service port

* Add key for workflow options category

* Fix workflow execution from choose btn

* Fix review comments

* address comments

* Fix review comment to switch to useRouteRef

* fix review comments

* fix review comments

---------

Co-authored-by: richardwang98 <richwong98@gmail.com>

* feat: make optional the workflowsSource config (#25)

---------

Co-authored-by: anludke <annelketcha@gmail.com>

* feat(orchestrator): add backend endpoint for getting workflows from data index service (#39)

* feat: add backend for getting work flows from data index service

* feat: cherrypick - add backend for getting work flows from data index service

* feat: cherrypick - add backend for getting work flows from data index service

* feat: cherrypick - add backend for getting work flows from data index service

* chore(orchestrator): update dependencies

* feat(orchestrator): orchestrator plugin entry page & workflows table (#31)

https://issues.redhat.com/browse/FLPATH-686
https://issues.redhat.com/browse/FLPATH-682

* feat: introduced the workflows/overview endpoint (#36)

* FLPATH-702 : New endpoint to fetch workflow overview

* FLPATH-702 : iterate through all elements instead of picking the first element

* modified the map method

* calculate avg execution time change

* Add log message when http calls failing

* Fix lint issues

* rename variable

* paginated graphql object fetch

* Include workflowId in the result object

* Renamed to description

* to epoc timestamp

* suppress eslint warning

* epoc number to string

* make all string fields optional

* use a simple for loop

* extracted to a new method

* rename to lastTriggeredMs

* include uri in the WorkflowOverview type

* mark avgDurationMs as optional

* feat(orchestrator): introduced `workflows/:workflowId/overview` endpoint (#40)

* FLPATH-702 : New endpoint to fetch workflow overview

* FLPATH-702 : iterate through all elements instead of picking the first element

* modified the map method

* calculate avg execution time change

* Add log message when http calls failing

* Fix lint issues

* rename variable

* paginated graphql object fetch

* Include workflowId in the result object

* Renamed to description

* to epoc timestamp

* suppress eslint warning

* epoc number to string

* make all string fields optional

* use a simple for loop

* extracted to a new method

* rename to lastTriggeredMs

* include uri in the WorkflowOverview type

* mark avgDurationMs as optional

* fetch only one overview obj

* fix(orchestrator): make the port config optional (#37)

* feat(orchestrator): orchestrator plugin entry page & workflows table (#31)

https://issues.redhat.com/browse/FLPATH-686
https://issues.redhat.com/browse/FLPATH-682

* removed unnecessary method

---------

Co-authored-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com>
Co-authored-by: Jonathan Kilzi <jkilzi@redhat.com>

* feat(orchestrator): add Workflow Run List  (#30)

* feat(orchestrator): add Workflow Run List

FLPATH-693

A component listing running workflows is added.

* chore: move loading logic out of the OrchestratorPage

* chore(orchestrator): implement the WorkflowViewerFormatter (#41)

* chore: implement the WorkflowViewerFormatter: utility for converting WorkflowOverview backend data to data UI can display

* removed redundant export and removed redundant 'Interface' suffix from DataFormatter interface name

* Update plugins/orchestrator/src/dataFormatters/DataFormatter.ts

Co-authored-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com>

---------

Co-authored-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com>

* feat(orchestrator): fetch data input schema from `/management/processes` (#45)

* Fetch data input schema from /management/processes

* Fix some code smells

* Rename WorkflowProcess -> WorkflowInfo

* feat(orchestrator): implement the workflow viewer new UX (#32)

* feat(orechestrator): implement the workflow viewer new UX

* code review fixes

* visual fixes including skeleton for loading state

* chore(orchestrator): Renames the components displaying the tabs content

* chore(orchestrator): updates the OrchestratorClient

Lazy loads the baseUrl
Adds a method for calling GET /workflows/overview

* feat(orchestrator): orchestrator workflow execution page (#46)

Co-authored-by: Jonathan Kilzi <jkilzi@redhat.com>

* chore(orchestrator): updates the stories grouping (#50)

* chore(orchestrator): aligns the workflows table with the design (#51)

* chore(orchestrator): add Category to the procesInstance result (#52)

* fix(orchestrator): add links to workflows in the workflow list (#53)

* feat: added color icon to workflow details page last run status field (#55)

* feat(orchestrator): enable usage of local envelope for the workflow editor (#56)

* feat(orchestrator): add business key to assessment and pass on to workflow options (#42)

* feat(orchestrator): add page listing details of a workflow run (#49)

* feat(orchestrator): add feature flag for developer mode and config to enable/disable the integration with catalog (#58)

* feat(orchestrator): workflow editor modal (#59)

* feat(orchestrator): fix missing workflow type in overview (#60)

Signed-off-by: Gloria Ciavarrini <gciavarrini@redhat.com>

* fix(orchestrator): fix some code smells (#63)

* fix(orchestrator): addresses sonarcloud issues (#65)

* fix(orchestrator): addressed a couple of issues (#64)

* fix(orchestrator): minor fixes (#67)

* feat(orchestrator): refactoring to use data-index to fetch workflow definitions (#57)

Co-authored-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com>

* fix(orchestrator): fix sonar issue (#69)

* feat(orchestrator): use assessment process id as bk for next workflows (#70)

* feat(orchestrator): execute workflow page new UX (#68)

* fix(orchestrator): theme for `monaco-editor` in `JsonTextAreaForm` component and mandatory `dataIndexService.url` (#71)

* fix(orchestrator): remove dependency on devmode in the entity provider (#72)

* fix(orchestrator): skip it if hardcoded specs do not exist (#74)

* feat(orchestrator): execute workflow page polishing (#75)

* feat(orchestrator): workflow instance result page (#73)

* chore(orchestrator): add codeowners to orchestrator

* fix(FLPATH-852): show WF description on the execution result page (#77)

* chore(orchestrator): add OWNERS file to each orchestrator package

* feat(orchestrator): migrates to the new UI (#78)

---------

Signed-off-by: Gloria Ciavarrini <gciavarrini@redhat.com>
Co-authored-by: Moti Asayag <masayag@redhat.com>
Co-authored-by: richard wang <58698556+RichardW98@users.noreply.github.com>
Co-authored-by: anludke <annelketcha@gmail.com>
Co-authored-by: rhkp <87712456+rhkp@users.noreply.github.com>
Co-authored-by: Jonathan Kilzi <jkilzi@redhat.com>
Co-authored-by: Jude Niroshan <jude.niroshan11@gmail.com>
Co-authored-by: Marek Libra <marek.libra@gmail.com>
Co-authored-by: Bat-Zion Rotman <brotman@redhat.com>
Co-authored-by: yu zhao <yzha@redhat.com>
Co-authored-by: Gloria Ciavarrini <gloria.ciavarrini@gmail.com>
Co-authored-by: Tiago Dolphine <tiagodolphine@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants