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 - Add custom output display to Processes & History pages #162

Merged
merged 26 commits into from
Jul 20, 2023

Conversation

wcgunter
Copy link
Collaborator

@wcgunter wcgunter commented Jul 18, 2023

This PR adds the following features:

  • Processes: Adds a new column ("Output Variables") which is functionally similar to the "Input Variables" column. Output Variables column only shows variables whose name follows the format: output_{name}. Everything else will appear in the Input Variables column.
    image

  • History: Adds a new table ("Output Variables") which contains the same information as the column of the same name on the Processes page.

image
  • Processes & History Page: File variables which contain images are now supported. Images will be displayed on in the column view and the history page view. Hover over images to make them larger to see more detail. Images are detected by checking the mime type of the file. If the mime type starts with "image/", it is considered an image and is encoded as Base64 to make transferring the file possible through existing API endpoints. Currently, the feature supports JPG, JPEG, PNG, and GIF. Other formats should behave correctly but have not been thoroughly tested. The copy button puts the image into the user's clipboard to make sharing the image easier. If an output variable has the name "thumbnail" and is an image, it will be displayed first with all other output variable information put into Show More. If an output variable has the name "summary", it will also be displayed first (along with thumbnail, if it exists). On hover, the image will scale to 2x size.
image
  • Processes & History Page: String variables will now be checked to see if they are a valid URL. If they are, the link becomes clickable and highlights blue (like a traditional hyperlink). Strings will turn into links when they are a valid URL or start with "s3://" to support S3 bucket links.
    image

This PR updates/fixes the following features:

  • Processes & History Page: Updated how input variables are fetched in order to align them with output variables. This requires less string manipulation on the server and client side and uses Camunda's Java API to fetch data.
  • Processes & History Page: Updated download JSON feature to include the new output variables. Fixes an error where the moment.js file could not be found when trying to download as a JSON.
  • Processes & Deployments: Adds icons to important buttons to make identifying them easier.
image
  • Processes & Deployments: Moved buttons & information directly above and below datatables into new flexbox divs to prevent collisions and allow for future growth & use.
  • Processes: Fixed downloading features that would produce errors before. Updated name of "Download list of selected processes (must select at least one row) (JSON)" to "Download list of selected processes (must select at least one row)".
  • Processes: Fixed Action buttons not updating when selecting processes (filtering was not done correctly on statuses)
  • Processes: Split current Actions button into Actions & Download to reduce "wall of text" user faces when opening Actions button. Added a divider in the Actions dropdown to divide the actions by their type.
  • Processes: The table will now eliminate columns based on their importance rank (set by relevance & frequency of use) as the window gets smaller.

@wcgunter wcgunter marked this pull request as ready for review July 18, 2023 21:39
@wcgunter wcgunter changed the base branch from main to develop July 18, 2023 22:27
@wcgunter wcgunter marked this pull request as draft July 18, 2023 23:30
@wcgunter wcgunter marked this pull request as ready for review July 19, 2023 23:18
Copy link
Collaborator

@jamesfwood jamesfwood left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Amazing work!
Thanks!

@jamesfwood jamesfwood merged commit 1231077 into develop Jul 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants