Add all messages list to ServicePulse by PhilBastian · Pull Request #2275 · Particular/ServicePulse

PhilBastian · 2025-03-14T07:22:57Z

Part of Expose message grid from ServiceInsight in ServicePulse #2130

In this PR

The "All Messages" menu displays a list of all messages - both successfully processed audit messages as well as error messages
Display messages details in a grid (i.e. HTML table, as per existing ServicePulse functionality). Columns shown:
- Status (Icon, not text, see below)
- Message Id
- Message Type
- Time Sent
- Processing Time
Toggle switch for 'Auto refresh' with an input box to take in the refresh time period in seconds.
Pagination of messages
Clicking on a message takes the user to a details view page ( draft )

This reverts commit db87e15.

…ePulse into si_integration

…be visible

johnsimons

Nothing major, just a few comments that can be looked at in subsequent PRs

johnsimons · 2025-03-17T03:51:11Z

src/Frontend/src/components/RefreshConfig.vue

+    <div>
+      <OnOffSwitch :id="id" @toggle="toggleRefresh" :value="autoRefresh" />
+    </div>
+    <input type="number" v-model="refreshTimeout" min="1" max="600" v-on:change="updateTimeout" />
+    <span class="unit">s</span>


Could a dropdown with pre-set refresh ratings including zero be better option?

this works, and looks fine...

johnsimons · 2025-03-17T03:55:29Z

src/Frontend/src/components/RefreshConfig.vue

+      <i class="fa fa-lg fa-refresh" />
+    </button>
+    <span>|</span>
+    <label>Auto-Refresh:</label>


It would be nice to have some kind of visual indication that we are fetching new data - https://fontawesome.com/icons/spinner?f=classic&s=solid

added as idea

johnsimons · 2025-03-17T03:59:22Z

src/Frontend/src/router/config.ts

  alias?: string;
  redirect?: string;
  title: string;
-  component: RouteComponent | (() => Promise<RouteComponent>);


it may be better to introduce a new type, e.g:

export interface RedirectRouteItem { path: string; title: string; }

this type reflects what VueRouter expects

johnsimons · 2025-03-17T04:04:09Z

src/Frontend/src/stores/AuditStore.ts

+
+  const dataRetriever = useAutoRefresh(async () => {
+    try {
+      const [response, data] = await useTypedFetchFromServiceControl<Message[]>(


It may be good to introduce a typed client.

i don't understand what you mean

look at throughputclient

src/Frontend/src/stores/AuditStore.ts

johnsimons · 2025-03-17T05:01:12Z

src/Frontend/src/components/audit/AuditList.vue

+function friendlyTypeName(messageType: string) {
+  if (messageType == null) return null;
+
+  const typeClass = messageType.split(",")[0];
+  const typeName = typeClass.split(".").reverse()[0];
+  return typeName.replace(/\+/g, ".");
+}


This can be problematic, it may be worth adding a card to the board.

In other places, we show the whole type name

src/Frontend/src/components/audit/AuditList.vue

johnsimons · 2025-03-17T06:34:05Z

src/Frontend/src/components/RefreshConfig.vue

I was thinking that it may also make sense to save in local storage the current setting, so it won't reset

added as idea

johnsimons · 2025-03-17T06:35:50Z

src/Frontend/src/components/RefreshConfig.vue

+
+<template>
+  <div class="refresh-config">
+    <button class="fa" title="refresh" @click="() => emit('manualRefresh')">


Suggested change

<button class="fa" title="refresh" @click="() => emit('manualRefresh')">

<button class="btn btn-secondary btn-sm" title="refresh" @click="() => emit('manualRefresh')">

why? I don't want this to look like other buttons in the system

Why should this button be different?

because of the layout

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

# Conflicts: # src/Frontend/src/components/failedmessages/MessageRedirectForBackwardsCompatibility.vue

PhilBastian and others added 18 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

PhilBastian requested review from cquirosj, johnsimons and soujay March 14, 2025 07:22

PhilBastian self-assigned this Mar 14, 2025

PhilBastian added 4 commits March 17, 2025 07:28

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

johnsimons approved these changes Mar 17, 2025

View reviewed changes

johnsimons changed the title ~~migrate SI message list~~ Add all messages list to ServicePulse Mar 17, 2025

johnsimons reviewed Mar 17, 2025

View reviewed changes

Update src/Frontend/src/stores/AuditStore.ts

2fd84ca

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

PhilBastian enabled auto-merge (squash) March 18, 2025 06:54

Merge branch 'master' into si_integration

7d3e2a7

# Conflicts: # src/Frontend/src/components/failedmessages/MessageRedirectForBackwardsCompatibility.vue

PhilBastian merged commit e14777f into master Mar 18, 2025
5 checks passed

PhilBastian deleted the si_integration branch March 18, 2025 08:27

johnsimons added the Behind feature flag label Mar 18, 2025

	<button class="fa" title="refresh" @click="() => emit('manualRefresh')">
	<button class="btn btn-secondary btn-sm" title="refresh" @click="() => emit('manualRefresh')">

Conversation

PhilBastian commented Mar 14, 2025 • edited by soujay Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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!

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!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

johnsimons Mar 17, 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!

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!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

PhilBastian commented Mar 14, 2025 •

edited by soujay

Loading

johnsimons Mar 17, 2025 •

edited

Loading