From 2768182072d3f92bcfc1abf585b9f19bfcf64d32 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Thu, 1 May 2025 17:58:48 +1000
Subject: [PATCH] Align look and feel for all tabs

---
 src/Frontend/src/components/CodeEditor.vue    |  8 +-
 .../src/components/messages2/BodyView.vue     | 18 +++--
 .../messages2/FlowDiagram/FlowDiagram.vue     | 79 +++++++++++--------
 .../src/components/messages2/HeadersView.vue  | 51 +++++++-----
 .../src/components/messages2/SagaDiagram.vue  | 54 ++++---------
 .../components/messages2/SequenceDiagram.vue  | 40 ++++++++--
 6 files changed, 140 insertions(+), 110 deletions(-)

diff --git a/src/Frontend/src/components/CodeEditor.vue b/src/Frontend/src/components/CodeEditor.vue
index 5581ba3e0..2d1c0020d 100644
--- a/src/Frontend/src/components/CodeEditor.vue
+++ b/src/Frontend/src/components/CodeEditor.vue
@@ -59,15 +59,19 @@ const extensions = computed(() => {
 
 <style scoped>
 .wrapper {
+  margin-top: 5px;
   border-radius: 0.5rem;
   padding: 0.5rem;
   border: 1px solid #ccc;
+  background: white;
   display: flex;
   flex-direction: column;
 }
 .toolbar {
-  border-bottom: 1px solid #ccc;
-  padding-bottom: 0.5rem;
+  background-color: #f3f3f3;
+  border: #8c8c8c 1px solid;
+  border-radius: 3px;
+  padding: 5px;
   margin-bottom: 0.5rem;
   display: flex;
   flex-direction: row;
diff --git a/src/Frontend/src/components/messages2/BodyView.vue b/src/Frontend/src/components/messages2/BodyView.vue
index 4616b8766..edb8367e3 100644
--- a/src/Frontend/src/components/messages2/BodyView.vue
+++ b/src/Frontend/src/components/messages2/BodyView.vue
@@ -21,11 +21,17 @@ const body = computed(() => bodyState.value.data.value);
 </script>
 
 <template>
-  <div v-if="bodyState.not_found" class="alert alert-info">Could not find the message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
-  <div v-else-if="bodyState.failed_to_load" class="alert alert-info">Message body unavailable.</div>
-  <LoadingSpinner v-else-if="bodyState.loading" />
-  <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
-  <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.</div>
+  <div class="gap">
+    <div v-if="bodyState.not_found" class="alert alert-info">Could not find the message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+    <div v-else-if="bodyState.failed_to_load" class="alert alert-info">Message body unavailable.</div>
+    <LoadingSpinner v-else-if="bodyState.loading" />
+    <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
+    <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.</div>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.gap {
+  margin-top: 5px;
+}
+</style>
diff --git a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
index 9c37a64e1..cbdfd2be9 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
@@ -218,44 +218,46 @@ const selectedErrorColor = hexToCSSFilter("#e8e6e8").filter;
 </script>
 
 <template>
-  <div v-if="store.conversationData.failed_to_load" class="alert alert-info">FlowDiagram data is unavailable.</div>
-  <LoadingSpinner v-else-if="store.conversationData.loading" />
-  <div v-else id="tree-container">
-    <VueFlow :nodes="nodes" :edges="edges" :min-zoom="0.1" :max-zoom="1.2" :only-render-visible-elements="true" @nodes-initialized="layoutGraph">
-      <Controls :show-interactive="false" position="top-left" class="controls" />
-      <template #node-message="{ id, data }: { id: string; data: NodeData }">
-        <TextEllipses class="address" :text="`${data.sendingEndpoint.name}@${data.sendingEndpoint.host}`" />
-        <div class="node" :class="{ error: data.isError, 'current-message': id === store.state.data.id }">
-          <div class="node-text">
-            <i
-              class="fa"
-              :style="data.isError && id === store.state.data.id ? { filter: selectedErrorColor } : {}"
-              :class="{ 'pa-flow-timeout': data.isTimeout, 'pa-flow-command': data.isCommand, 'pa-flow-event': data.isEvent }"
-              v-tippy="data.type"
-            />
-            <div class="typeName">
-              <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(id), query: { back: backLink } }"><TextEllipses style="width: 204px" :text="data.label" ellipses-style="LeftSide" /></RouterLink>
-              <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, id), query: { back: backLink } }"><TextEllipses style="width: 204px" :text="data.label" ellipses-style="LeftSide" /></RouterLink>
-            </div>
-            <i v-if="data.isError" class="fa pa-flow-failed" :style="id !== store.state.data.id ? { filter: errorColor } : { filter: selectedErrorColor }" />
-            <div class="time-sent">
-              <time-since class="time-since" :date-utc="data.timeSent" />
-            </div>
-            <div class="sagas" v-if="data.sagaInvocations.length > 0">
-              <div class="saga" v-for="saga in data.sagaInvocations" :key="saga.id">
-                <i
-                  class="fa"
-                  v-tippy="saga.isSagaInitiated ? 'Message originated from Saga' : !saga.isSagaInitiated && saga.isSagaCompleted ? 'Saga Completed' : 'Saga Initiated / Updated'"
-                  :class="{ 'pa-flow-saga-initiated': saga.isSagaInitiated, 'pa-flow-saga-completed': !saga.isSagaInitiated && saga.isSagaCompleted, 'pa-flow-saga-trigger': !saga.isSagaInitiated && !saga.isSagaCompleted }"
-                />
-                <div class="sagaName"><TextEllipses style="width: 182px" :text="saga.sagaType" ellipses-style="LeftSide" /></div>
+  <div class="gap">
+    <div v-if="store.conversationData.failed_to_load" class="alert alert-info">FlowDiagram data is unavailable.</div>
+    <LoadingSpinner v-else-if="store.conversationData.loading" />
+    <div v-else id="tree-container">
+      <VueFlow :nodes="nodes" :edges="edges" :min-zoom="0.1" :max-zoom="1.2" :only-render-visible-elements="true" @nodes-initialized="layoutGraph">
+        <Controls :show-interactive="false" position="top-left" class="controls" />
+        <template #node-message="{ id, data }: { id: string; data: NodeData }">
+          <TextEllipses class="address" :text="`${data.sendingEndpoint.name}@${data.sendingEndpoint.host}`" />
+          <div class="node" :class="{ error: data.isError, 'current-message': id === store.state.data.id }">
+            <div class="node-text">
+              <i
+                class="fa"
+                :style="data.isError && id === store.state.data.id ? { filter: selectedErrorColor } : {}"
+                :class="{ 'pa-flow-timeout': data.isTimeout, 'pa-flow-command': data.isCommand, 'pa-flow-event': data.isEvent }"
+                v-tippy="data.type"
+              />
+              <div class="typeName">
+                <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(id), query: { back: backLink } }"><TextEllipses style="width: 204px" :text="data.label" ellipses-style="LeftSide" /></RouterLink>
+                <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, id), query: { back: backLink } }"><TextEllipses style="width: 204px" :text="data.label" ellipses-style="LeftSide" /></RouterLink>
+              </div>
+              <i v-if="data.isError" class="fa pa-flow-failed" :style="id !== store.state.data.id ? { filter: errorColor } : { filter: selectedErrorColor }" />
+              <div class="time-sent">
+                <time-since class="time-since" :date-utc="data.timeSent" />
+              </div>
+              <div class="sagas" v-if="data.sagaInvocations.length > 0">
+                <div class="saga" v-for="saga in data.sagaInvocations" :key="saga.id">
+                  <i
+                    class="fa"
+                    v-tippy="saga.isSagaInitiated ? 'Message originated from Saga' : !saga.isSagaInitiated && saga.isSagaCompleted ? 'Saga Completed' : 'Saga Initiated / Updated'"
+                    :class="{ 'pa-flow-saga-initiated': saga.isSagaInitiated, 'pa-flow-saga-completed': !saga.isSagaInitiated && saga.isSagaCompleted, 'pa-flow-saga-trigger': !saga.isSagaInitiated && !saga.isSagaCompleted }"
+                  />
+                  <div class="sagaName"><TextEllipses style="width: 182px" :text="saga.sagaType" ellipses-style="LeftSide" /></div>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <TextEllipses class="address" :text="`${data.receivingEndpoint.name}@${data.receivingEndpoint.host}`" />
-      </template>
-    </VueFlow>
+          <TextEllipses class="address" :text="`${data.receivingEndpoint.name}@${data.receivingEndpoint.host}`" />
+        </template>
+      </VueFlow>
+    </div>
   </div>
 </template>
 
@@ -268,6 +270,13 @@ const selectedErrorColor = hexToCSSFilter("#e8e6e8").filter;
 <style scoped>
 @import "../../list.css";
 
+.gap {
+  margin-top: 5px;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  background: white;
+}
 .controls {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/Frontend/src/components/messages2/HeadersView.vue b/src/Frontend/src/components/messages2/HeadersView.vue
index 40afacce0..d2abbcd1a 100644
--- a/src/Frontend/src/components/messages2/HeadersView.vue
+++ b/src/Frontend/src/components/messages2/HeadersView.vue
@@ -22,35 +22,44 @@ const filteredHeaders = computed(() => {
 </script>
 
 <template>
-  <div>
-    <div class="row filters">
-      <div class="col">
-        <div class="text-search-container">
-          <div class="text-search">
-            <div>
-              <FilterInput v-model="searchTerm" :aria-label="`Search for a header key or value`" :placeholder="'Search for a header key or value...'" />
+  <div class="gap">
+    <div>
+      <div class="row filters">
+        <div class="col">
+          <div class="text-search-container">
+            <div class="text-search">
+              <div>
+                <FilterInput v-model="searchTerm" :aria-label="`Search for a header key or value`" :placeholder="'Search for a header key or value...'" />
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div class="header-list" v-if="filteredHeaders.length > 0 && !headers.not_found">
-    <template v-for="(header, index) in filteredHeaders" :key="index">
-      <div class="header-key">{{ header.key }}</div>
-      <div class="header-value" @mouseover="toggleHover(index, true)" @mouseleave="toggleHover(index, false)">
-        <pre class="removeBootStrap">{{ header.value }}</pre>
-        <div class="clippy-button"><CopyToClipboard v-if="header.value && hoverStates[index]" :value="header.value" :isIconOnly="true" /></div>
-      </div>
-    </template>
-  </div>
+    <div class="header-list" v-if="filteredHeaders.length > 0 && !headers.not_found">
+      <template v-for="(header, index) in filteredHeaders" :key="index">
+        <div class="header-key">{{ header.key }}</div>
+        <div class="header-value" @mouseover="toggleHover(index, true)" @mouseleave="toggleHover(index, false)">
+          <pre class="removeBootStrap">{{ header.value }}</pre>
+          <div class="clippy-button"><CopyToClipboard v-if="header.value && hoverStates[index]" :value="header.value" :isIconOnly="true" /></div>
+        </div>
+      </template>
+    </div>
 
-  <!-- Message if filtered list is empty -->
-  <div v-if="filteredHeaders.length <= 0 && !headers.not_found" class="alert alert-warning">No headers found matching the search term.</div>
-  <div v-if="headers.not_found" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+    <!-- Message if filtered list is empty -->
+    <div v-if="filteredHeaders.length <= 0 && !headers.not_found" class="alert alert-warning">No headers found matching the search term.</div>
+    <div v-if="headers.not_found" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+  </div>
 </template>
 
 <style scoped>
+.gap {
+  margin-top: 5px;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  background: white;
+}
 .removeBootStrap {
   background: initial;
   border: none;
@@ -78,7 +87,6 @@ const filteredHeaders = computed(() => {
 }
 .filters {
   background-color: #f3f3f3;
-  margin-top: 5px;
   border: #8c8c8c 1px solid;
   border-radius: 3px;
   padding: 5px;
@@ -92,6 +100,7 @@ const filteredHeaders = computed(() => {
   align-items: flex-start;
   justify-content: center;
   row-gap: 2px;
+  background-color: #f3f3f3;
 }
 
 .header-value,
diff --git a/src/Frontend/src/components/messages2/SagaDiagram.vue b/src/Frontend/src/components/messages2/SagaDiagram.vue
index d186a64ff..bc2144a0d 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram.vue
@@ -4,7 +4,6 @@ import routeLinks from "@/router/routeLinks";
 import { useSagaDiagramStore } from "@/stores/SagaDiagramStore";
 import { useMessageStore } from "@/stores/MessageStore";
 import { storeToRefs } from "pinia";
-import ToolbarEndpointIcon from "@/assets/Shell_ToolbarEndpoint.svg";
 import { SagaViewModel, parseSagaUpdates } from "./SagaDiagram/SagaDiagramParser";
 import { typeToName } from "@/composables/typeHumanizer";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
@@ -71,11 +70,8 @@ const vm = computed<SagaViewModel>(() => {
 <template>
   <div class="saga-container">
     <!-- Toolbar header -->
-    <div v-if="vm.HasSagaData" class="header">
-      <button :class="['saga-button', { 'saga-button--active': vm.ShowMessageData }]" aria-label="show-message-data-button" @click="sagaDiagramStore.toggleMessageData">
-        <img class="saga-button-icon" :src="ToolbarEndpointIcon" alt="" />
-        {{ vm.ShowMessageData ? "Hide Message Data" : "Show Message Data" }}
-      </button>
+    <div v-if="vm.HasSagaData" class="toolbar">
+      <button type="button" class="btn btn-secondary btn-sm" aria-label="show-message-data-button" @click="sagaDiagramStore.toggleMessageData"><i class="fa fa-list-ul"></i> {{ vm.ShowMessageData ? "Hide Message Data" : "Show Message Data" }}</button>
     </div>
 
     <!-- Loading Spinner -->
@@ -111,16 +107,24 @@ const vm = computed<SagaViewModel>(() => {
 .saga-container {
   display: flex;
   flex-direction: column;
-  /* Must validate parent height in order to set this element min-height value */
-  min-height: 500px;
-  background-color: #ffffff;
+  margin-top: 5px;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  background: white;
 }
 
 /* Main containers */
 
-.header {
-  padding: 0.5rem;
-  border-bottom: solid 2px #ddd;
+.toolbar {
+  background-color: #f3f3f3;
+  border: #8c8c8c 1px solid;
+  border-radius: 3px;
+  padding: 5px;
+  margin-bottom: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  min-height: 40px;
 }
 .body {
   display: flex;
@@ -140,30 +144,4 @@ const vm = computed<SagaViewModel>(() => {
   align-items: center;
   min-height: 200px;
 }
-
-/* Button styles */
-
-.saga-button {
-  display: block;
-  padding: 0.2rem 0.7rem 0.1rem;
-  color: #555555;
-  font-size: 0.75rem;
-  border: solid 2px #00a3c4;
-  background-color: #e3e4e5;
-}
-.saga-button:focus,
-.saga-button:hover {
-  background-color: #daebfc;
-}
-
-.saga-button:active,
-.saga-button--active {
-  background-color: #c3dffc;
-}
-.saga-button-icon {
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-top: -0.2rem;
-  margin-right: 0.25rem;
-}
 </style>
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram.vue b/src/Frontend/src/components/messages2/SequenceDiagram.vue
index e21e65eff..812fa38d7 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram.vue
@@ -18,18 +18,42 @@ onMounted(() => store.refreshConversation());
 </script>
 
 <template>
-  <a class="help-link" target="_blank" href="https://docs.particular.net/servicepulse/sequence-diagram"><i class="fa fa-info-circle" /> Sequence Diagram Help</a>
-  <div class="outer" @scroll="(ev) => (endpointYOffset = (ev.target as Element).scrollTop)">
-    <svg class="sequence-diagram" :style="{ width: `max(100%, ${isNaN(maxWidth) ? 0 : maxWidth}px)` }" :height="maxHeight + 20">
-      <Timeline />
-      <Handlers />
-      <Routes />
-      <Endpoints :yOffset="endpointYOffset" />
-    </svg>
+  <div class="wrapper">
+    <div class="toolbar">
+      <a class="help-link" target="_blank" href="https://docs.particular.net/servicepulse/sequence-diagram"><i class="fa fa-info-circle" /> Sequence Diagram Help</a>
+    </div>
+    <div class="outer" @scroll="(ev) => (endpointYOffset = (ev.target as Element).scrollTop)">
+      <svg class="sequence-diagram" :style="{ width: `max(100%, ${isNaN(maxWidth) ? 0 : maxWidth}px)` }" :height="maxHeight + 20">
+        <Timeline />
+        <Handlers />
+        <Routes />
+        <Endpoints :yOffset="endpointYOffset" />
+      </svg>
+    </div>
   </div>
 </template>
 
 <style scoped>
+.wrapper {
+  margin-top: 5px;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  background: white;
+  display: flex;
+  flex-direction: column;
+}
+.toolbar {
+  background-color: #f3f3f3;
+  border: #8c8c8c 1px solid;
+  border-radius: 3px;
+  padding: 5px;
+  margin-bottom: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  min-height: 40px;
+}
 .outer {
   max-width: 100%;
   max-height: calc(100vh - 27em);