GDB-11318 implement global notification component #1882

plamen-yordanov · 2025-03-12T11:52:57Z

What

Implement global notification component

Why

To be able to display statuses of different ongoing operations

How

Created onto-operations-notification dropdown button, which displays different operations as icons and respective count. The button is a dropdown toggle, so when clicked, it opens a list of different operations. When an individual operation is clicked, it redirects to a page, related to the operation
Refactored onto-header to display/hide the new notification component and poll the operations on every 2 seconds
Migrated fibonacci-generator, which is currently used to slow down requests, if errors occur
Added models and services

Testing

jest and cypress

Screenshots

Checklist

## What Implement global notification component ## Why To be able to display statuses of different ongoing operations ## How - Created `onto-operations-notification` dropdown button, which displays different operations as icons and respective count. The button is a dropdown toggle, so when clicked, it opens a list of different operations. When an individual operation is clicked, it redirects to a page, related to the operation - Refactored `onto-header` to display/hide the new notification component and poll the operations on every 2 seconds - Migrated `fibonacci-generator`, which is currently used to slow down requests, if errors occur - Added models and services ## Testing jest and cypress GDB-11839 Migrate font awesome stylesheets ## What Migrate font awesome styles to the new workbench ## Why To have them available at a global level throughout the application ## How - Copied the css and font files for font awesome in `root-config` package - Imported them in root-config via `ontotext-vendor.js` - Removed the imports of these files in the legacy workbench - Removed the NPM dependency to font awesome in root-config and shared-components

svilenvelikov · 2025-03-14T07:09:56Z

packages/api/src/models/monitoring/operation-group-summary.ts

+
+  constructor(data: OperationGroupSummary) {
+    super();
+    this.id = window.crypto.randomUUID();


I prefer if we don't depend depend on the window directly. Can you create some service or utility and move this random generator there?

Can the service/util use window.crypto.randomUUID() internally, or should I implement something?

Yes. Just beware that our services are singletons and we don't want to cache the window inside.

moved to generator-utils

packages/api/src/models/monitoring/operation-status-summary.ts

svilenvelikov · 2025-03-14T07:45:53Z

packages/shared-components/cypress/e2e/operations-notification/operations-notification.cy.js

+    })
+  });
+
+  const assertGroupCount = (index, textValue) => {


Move this outside of the describe block for better visibility or in the steps

svilenvelikov · 2025-03-14T07:55:19Z

packages/shared-components/src/components/onto-header/onto-header.tsx

+  private readonly fibonacciGenerator = new FibonacciGenerator();
+
+  private repositoryId?: string;
+  private pollingInterval: NodeJS.Timeout;


I'm not sure if this is the correct type which should be used. In a browser environment setInterval returns a number.

added number type. Also added window.setInterval to ensure typescript knows it's a browser interval and not a nodejs. If you don't like depending directly on window here, the other option is //@ts-ignore, since typescript doesn't know, which interval it is.

svilenvelikov · 2025-03-14T07:59:02Z

packages/shared-components/src/components/onto-header/onto-header.tsx

-  disconnectedCallback(): void {
-    this.subscriptions.unsubscribeAll();
+  private startOperationPolling() {
+    this.pollingInterval = setInterval(() => {


As far as th polling can be restarted in certain conditions, double check if there should be some clearing/reset before starting a new one.

The legacy workbench currently starts polling, when the component is loaded, without clearing the interval beforehand. The interval is cleared upon $destroy.

The current implementation will stop polling, if the repositoryContext sends repositoryId: undefined as well. Otherwise it will start and stop, like the legacy

added clearInterval at the start just in case

...red-components/src/components/onto-operations-notification/onto-operations-notification.scss

svilenvelikov · 2025-03-14T08:43:08Z

...ared-components/src/components/onto-operations-notification/onto-operations-notification.tsx

+
+
+  private toOperationsGroupSummary() {
+    const groupToOperationSummary = new Map<OperationGroup, OperationGroupSummary>();


Is it possible this mapping building to be moved in the activeOperations model maybe. Better avoid exposing the model internals in components to reduce the coupling

moved inside the model

- Moved `toOperationsStatusSummary` inside `OperationsStatusSummary` model - Created `generator-utils` and moved `window.crypto.randomUUID` there - Moved `assertGroupCount` outside describe block - replaced `setInterval` with `window.setInterval` so typescript is aware, that it is a browser interval and not a nodejs one - Refactored main.js for the operations-notification page, to accommodate the changes

plamen-yordanov · 2025-03-14T13:54:11Z

Jenkins retry build

svilenvelikov · 2025-03-14T14:06:55Z

packages/api/src/models/monitoring/operation-status-summary.ts

+    });
+
+    const operationGroupArray = Array.from(groupToOperationSummary.values());
+    return MapperProvider.get(OperationGroupSummaryListMapper).mapToModel(operationGroupArray);


OK, but now you put a service dependency in the model. Although it is a mapper, I don't think it's a good idea. You can return the array from this method and move this mapping in the client component.

Should I limit mapper usage only to constructors? I've used list mappers in other models and I'm not sure, where to draw the line

Models should not have dependencies than other models. If you've used mappers in models, then those should also be refactored.

sonarqubecloud · 2025-03-14T14:57:17Z

Quality Gate passed for 'graphdb-workbench'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

plamen-yordanov force-pushed the GDB-11839-migrate-font-awesome branch from 5da448d to 03ea737 Compare March 13, 2025 13:37

Base automatically changed from GDB-11839-migrate-font-awesome to GDB-10373-workbench-with-single-spa March 13, 2025 14:55

plamen-yordanov force-pushed the GDB-11318-implement-global-notification-component branch from f5f29d7 to ef8e8ec Compare March 14, 2025 07:08

plamen-yordanov force-pushed the GDB-11318-implement-global-notification-component branch from ef8e8ec to ab864a3 Compare March 14, 2025 08:34

svilenvelikov requested changes Mar 14, 2025

View reviewed changes

plamen-yordanov marked this pull request as ready for review March 14, 2025 09:26

plamen-yordanov force-pushed the GDB-11318-implement-global-notification-component branch from 629202f to ecf5530 Compare March 14, 2025 12:46

plamen-yordanov force-pushed the GDB-11318-implement-global-notification-component branch from ecf5530 to 6e21f1c Compare March 14, 2025 12:52

svilenvelikov reviewed Mar 14, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GDB-11318 implement global notification component #1882

GDB-11318 implement global notification component #1882

plamen-yordanov commented Mar 12, 2025 •

edited

Loading

svilenvelikov Mar 14, 2025

plamen-yordanov Mar 14, 2025

svilenvelikov Mar 14, 2025

plamen-yordanov Mar 14, 2025

svilenvelikov Mar 14, 2025

plamen-yordanov Mar 14, 2025

svilenvelikov Mar 14, 2025

plamen-yordanov Mar 14, 2025

svilenvelikov Mar 14, 2025

plamen-yordanov Mar 14, 2025

plamen-yordanov Mar 14, 2025

svilenvelikov Mar 14, 2025

plamen-yordanov Mar 14, 2025

plamen-yordanov commented Mar 14, 2025

svilenvelikov Mar 14, 2025 •

edited

Loading

plamen-yordanov Mar 17, 2025

svilenvelikov Mar 17, 2025

sonarqubecloud bot commented Mar 14, 2025



		private toOperationsGroupSummary() {
		const groupToOperationSummary = new Map<OperationGroup, OperationGroupSummary>();

GDB-11318 implement global notification component #1882

Are you sure you want to change the base?

GDB-11318 implement global notification component #1882

Conversation

plamen-yordanov commented Mar 12, 2025 • edited Loading

What

Why

How

Testing

Screenshots

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

plamen-yordanov commented Mar 14, 2025

svilenvelikov Mar 14, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Mar 14, 2025

Quality Gate passed for 'graphdb-workbench'

plamen-yordanov commented Mar 12, 2025 •

edited

Loading

svilenvelikov Mar 14, 2025 •

edited

Loading