Sequence diagram first part #2302

PhilBastian · 2025-04-03T08:11:53Z

right flow only, and no message selection

This reverts commit db87e15.

…ePulse into si_integration

…be visible

# Conflicts: # src/Frontend/src/components/messages/MessageView.vue # src/Frontend/src/stores/AuditStore.ts

johnsimons

A few comments added but overall LGTM

johnsimons · 2025-04-07T00:02:57Z

src/Frontend/src/components/heartbeats/EndpointInstances.vue

 async function deleteAllInstances() {
  try {
-    await Promise.all(sortedInstances.value.filter((instance) => instance.name === endpointName).map((instance) => store.deleteEndpointInstance(instance)));
+    await Promise.all(sortedInstances.value.filter((instance: EndpointsView) => instance.name === endpointName).map((instance: EndpointsView) => store.deleteEndpointInstance(instance)));


Is this really needed?
Isn't the array typed already?

it started failing my build. Will try removing it again

johnsimons · 2025-04-07T00:03:08Z

src/Frontend/src/components/heartbeats/HeartbeatConfiguration.vue

  try {
    await store.updateEndpointSettings(
-      filteredEndpoints.value.filter((endpoint) => (dialogWarningOperation.value === Operation.Track && !endpoint.track_instances) || (dialogWarningOperation.value === Operation.DoNotTrack && endpoint.track_instances))
+      filteredEndpoints.value.filter((endpoint: LogicalEndpoint) => (dialogWarningOperation.value === Operation.Track && !endpoint.track_instances) || (dialogWarningOperation.value === Operation.DoNotTrack && endpoint.track_instances))


Is this really needed?
Isn't the array typed already?

johnsimons · 2025-04-07T00:06:57Z

src/Frontend/src/components/messages/SequenceDiagram.vue

+
+<template>
+  <div class="outer">
+    <svg class="sequence-diagram" :width="`max(100%, ${isNaN(maxWidth) ? 0 : maxWidth}px)`" :height="maxHeight + 20">


Should we be rendering at all if isNaN(maxWidth) is true?
I have created a spinner for exactly this purpose?

will add this to the latest branch rather than this one

src/Frontend/src/components/messages/SequenceDiagram/EndpointsComponent.vue

johnsimons · 2025-04-07T00:25:01Z

src/Frontend/src/components/messages/SequenceDiagram/RoutesComponent.vue

+        @mouseover="() => store.setHighlightId(arrow.id)"
+        @mouseleave="() => store.setHighlightId()"
+      >
+        <rect v-if="arrow.highlight && arrow.messageTypeOffset" :width="arrow.highlightTextWidth + 19 + 4 + 4" :height="arrow.highlightTextHeight + 4 + 4" fill="var(--highlight-background)" />


What are the magic numbers?
+ 19 + 4 + 4
+ 4 + 4

johnsimons · 2025-04-07T00:31:04Z

src/Frontend/src/resources/SequenceDiagram/Endpoint.ts

Why are we using underscores for private variables?
You can use private visibility - https://www.typescriptlang.org/docs/handbook/2/classes.html#private
Or you can set it at the cstructor - https://www.typescriptlang.org/docs/handbook/2/classes.html#parameter-properties

why not use underscore? I am using private visibility where required

The code base does not use _ to mean "private" anywhere, are we planning to make this a rule now?

no, it's private _variableName, not just _variableName. Since the variable name is the same as what's exposed publicly (as readonly) then I'm using underscore to be able to differentiate

Edit: there was one place where it looks like there was an erroneous _variableName, fixed

johnsimons · 2025-04-07T00:34:40Z

src/Frontend/src/resources/SequenceDiagram/SequenceModel.ts

+  #endpoints: Endpoint[];
+  #handlers: Handler[];
+  #processingRoutes: MessageProcessingRoute[];


Declare them as private instead? Easier to understand for c# devs

not truly private though. I was only reverting to the typescript private where necessary due to use of proxies

johnsimons · 2025-04-07T00:35:18Z

src/Frontend/src/stores/HeartbeatInstancesStore.spec.ts

    );

-    const names = () => filteredInstances.value.map((value) => value.host_display_name);
+    const names = () => filteredInstances.value.map((value: EndpointsView) => value.host_display_name);


is this needed?

johnsimons · 2025-04-07T00:35:39Z

src/Frontend/src/stores/HeartbeatsStore.spec.ts

      );

-      const names = () => filteredHealthyEndpoints.value.map((value) => value.name);
+      const names = () => filteredHealthyEndpoints.value.map((value: LogicalEndpoint) => value.name);


is this needed?

…Component.vue Co-authored-by: John Simons <john.simons@particular.net>

PhilBastian and others added 30 commits March 6, 2025 14:56

include audit section displaying audit messages

b148921

show status icons

105cc68

Merge branch 'master' into si_integration

337fdef

add feature flag

dd2cd69

format message type as per SI

36d7815

change name from audit to all messages and include message view route

b281cf3

display time_sent and processing_time values

f706a7f

fix the body of the popup message in retry dialog

db87e15

Revert "fix the body of the popup message in retry dialog"

ef84c78

This reverts commit db87e15.

enable auto refresh to be paused and to be configured after creation

2616724

manual/auto refresh control

0065abb

Merge branch 'si_integration' of https://github.com/Particular/Servic…

6933c0f

…ePulse into si_integration

stripe results grid

10ae9af

change to use emits

0a510d0

remove commented code

ba62324

add paging

60e4bfa

implement server side sorting

322f801

scroll on list instead of view, allowing the table headers to always …

9cf0ac4

…be visible

Merge branch 'master' into si_integration

338d370

change to use messages routing

3b206eb

increase default page size

9e77b04

add failedmessage redirect and remove unused message components

be36fd2

start converting conversation model from SI

c2f286e

order messages

83592dc

Merge branch 'master' into sequence_diagram

0a07896

# Conflicts: # src/Frontend/src/components/messages/MessageView.vue # src/Frontend/src/stores/AuditStore.ts

add endpoint host versions

6a3fdab

convert handleritem logic from SI

b2e1204

convert routedMessages (arrows) from SI

72df26f

display endpoints

a89730a

timeline

90a0052

PhilBastian added 10 commits April 2, 2025 10:31

handlers

eb5ffa5

arrow (left to right)

7350293

expand SVG to fit larger diagrams

19171da

fix handler map

f24f540

fix messagetype text side

a9b6488

replace props and emits with a store

5108f2a

highlight on handlers

39929c2

implement route highlight

29f435a

hide sequence diagram behind feature flag

2de64d6

Merge branch 'master' into sequence_diagram

c926f54

PhilBastian requested review from johnsimons, cquirosj and soujay April 3, 2025 08:11

johnsimons approved these changes Apr 7, 2025

View reviewed changes

PhilBastian and others added 2 commits April 7, 2025 15:44

address comments from review

0b0f590

Update src/Frontend/src/components/messages/SequenceDiagram/Endpoints…

e94251f

…Component.vue Co-authored-by: John Simons <john.simons@particular.net>

PhilBastian merged commit 27d4787 into master Apr 7, 2025
5 checks passed

PhilBastian deleted the sequence_diagram branch April 7, 2025 07:57

Sequence diagram first part #2302

Sequence diagram first part #2302

Uh oh!

Conversation

PhilBastian commented Apr 3, 2025

Uh oh!

johnsimons left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

PhilBastian Apr 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

johnsimons Apr 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

PhilBastian Apr 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

PhilBastian Apr 7, 2025 •

edited

Loading

johnsimons Apr 7, 2025 •

edited

Loading

PhilBastian Apr 7, 2025 •

edited

Loading