From 4aaeda72f75639f4bded06cd797fa8ef8d8552b8 Mon Sep 17 00:00:00 2001
From: butschster <butschster@gmail.com>
Date: Sat, 9 Dec 2023 20:24:31 +0400
Subject: [PATCH] Improves tags for sentry page

---
 .../sentry/lib/normalize-sentry-event.ts      |  3 +-
 src/entities/sentry/mocks/sentry-spiral.json  |  1 +
 .../ui/sentry-page-tags/sentry-page-tags.vue  | 81 +++++++++++--------
 .../sentry/ui/sentry-page/sentry-page.vue     |  1 -
 4 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/src/entities/sentry/lib/normalize-sentry-event.ts b/src/entities/sentry/lib/normalize-sentry-event.ts
index a8c5dd4c..88c3f38e 100644
--- a/src/entities/sentry/lib/normalize-sentry-event.ts
+++ b/src/entities/sentry/lib/normalize-sentry-event.ts
@@ -8,7 +8,8 @@ export const normalizeSentryEvent = (event: ServerEvent<Sentry>): NormalizedEven
   labels: [EVENT_TYPES.SENTRY, 'exception'],
   origin: {
     logger: event.payload.logger,
-    environment: event.payload.environment
+    environment: event.payload.environment,
+    release: event.payload?.release || '-',
   },
   serverName: event.payload?.server_name || '',
   date: event.timestamp ? new Date(event.timestamp * 1000) : null,
diff --git a/src/entities/sentry/mocks/sentry-spiral.json b/src/entities/sentry/mocks/sentry-spiral.json
index c7fcf58c..ae8f8887 100644
--- a/src/entities/sentry/mocks/sentry-spiral.json
+++ b/src/entities/sentry/mocks/sentry-spiral.json
@@ -12,6 +12,7 @@
     "logger": "php",
     "server_name": "ButschsterLpp",
     "environment": "production",
+    "release": "0.4.0",
     "modules": {
       "brick/math": "0.10.2",
       "clue/stream-filter": "v1.6.0",
diff --git a/src/screens/sentry/ui/sentry-page-tags/sentry-page-tags.vue b/src/screens/sentry/ui/sentry-page-tags/sentry-page-tags.vue
index a433c03b..8563eeab 100644
--- a/src/screens/sentry/ui/sentry-page-tags/sentry-page-tags.vue
+++ b/src/screens/sentry/ui/sentry-page-tags/sentry-page-tags.vue
@@ -30,8 +30,6 @@ const contextsOS = computed(() => {
 
 <template>
   <section class="sentry-page-tags">
-    <h3 class="sentry-page-tags__title">tags</h3>
-
     <div class="sentry-page-tags__boxes">
       <div v-if="contextsRuntime.name" class="sentry-page-tags__box">
         <span class="sentry-page-tags__box-title">runtime</span>
@@ -58,45 +56,56 @@ const contextsOS = computed(() => {
       </div>
     </div>
 
-    <div class="sentry-page-tags__labels">
-      <div class="sentry-page-tags__label">
-        <div class="sentry-page-tags__label-name">env</div>
-        <div class="sentry-page-tags__label-value">
-          {{ payload.environment }}
+    <div class="sentry-page-tags__labels-wrapper">
+      <h3 class="sentry-page-tags__title">tags</h3>
+      <div class="sentry-page-tags__labels">
+
+        <div class="sentry-page-tags__label">
+          <div class="sentry-page-tags__label-name">env</div>
+          <div class="sentry-page-tags__label-value">
+            {{ payload.environment }}
+          </div>
         </div>
-      </div>
-      <div v-if="payload.logger" class="sentry-page-tags__label">
-        <div class="sentry-page-tags__label-name">logger</div>
-        <div class="sentry-page-tags__label-value">
-          {{ payload.logger }}
+
+        <div v-if="payload.release" class="sentry-page-tags__label">
+          <div class="sentry-page-tags__label-name">release</div>
+          <div class="sentry-page-tags__label-value">
+            {{ payload.release }}
+          </div>
         </div>
-      </div>
-      <div v-if="contextsOS.name" class="sentry-page-tags__label">
-        <div class="sentry-page-tags__label-name">os</div>
-        <div class="sentry-page-tags__label-value">
-          {{ contextsOS.name }} {{ contextsOS.version }}
+        <div v-if="payload.logger" class="sentry-page-tags__label">
+          <div class="sentry-page-tags__label-name">logger</div>
+          <div class="sentry-page-tags__label-value">
+            {{ payload.logger }}
+          </div>
         </div>
-      </div>
-      <div v-if="contextsRuntime.name" class="sentry-page-tags__label">
-        <div class="sentry-page-tags__label-name">runtime</div>
-        <div class="sentry-page-tags__label-value">
-          {{ contextsRuntime.name }} {{ contextsRuntime.version }}
+        <div v-if="contextsOS.name" class="sentry-page-tags__label">
+          <div class="sentry-page-tags__label-name">os</div>
+          <div class="sentry-page-tags__label-value">
+            {{ contextsOS.name }} {{ contextsOS.version }}
+          </div>
         </div>
-      </div>
-      <div v-if="payload.server_name" class="sentry-page-tags__label">
-        <div class="sentry-page-tags__label-name">server name</div>
-        <div class="sentry-page-tags__label-value">
-          {{ payload.server_name }}
+        <div v-if="contextsRuntime.name" class="sentry-page-tags__label">
+          <div class="sentry-page-tags__label-name">runtime</div>
+          <div class="sentry-page-tags__label-value">
+            {{ contextsRuntime.name }} {{ contextsRuntime.version }}
+          </div>
+        </div>
+        <div v-if="payload.server_name" class="sentry-page-tags__label">
+          <div class="sentry-page-tags__label-name">server name</div>
+          <div class="sentry-page-tags__label-value">
+            {{ payload.server_name }}
+          </div>
+        </div>
+
+        <div v-if="payload.tags" v-for="(name,value) in payload.tags" class="sentry-page-tags__label">
+          <div class="sentry-page-tags__label-name">{{ value }}</div>
+          <div class="sentry-page-tags__label-value">
+            {{ name || ' - ' }}
+          </div>
         </div>
       </div>
     </div>
-
-    <CodeSnippet
-      v-if="payload.tags"
-      class="mt-3"
-      language="json"
-      :code="payload.tags"
-    />
   </section>
 </template>
 
@@ -136,6 +145,10 @@ const contextsOS = computed(() => {
   @apply flex flex-row flex-wrap items-center text-purple-600 dark:text-purple-100 gap-3;
 }
 
+.sentry-page-tags__labels-wrapper {
+  @apply bg-gray-50 dark:bg-gray-900 p-4 rounded-lg;
+}
+
 .sentry-page-tags__label {
   @apply flex border border-purple-300 rounded text-xs items-center;
 }
diff --git a/src/screens/sentry/ui/sentry-page/sentry-page.vue b/src/screens/sentry/ui/sentry-page/sentry-page.vue
index 76a189b4..c9e8efb7 100644
--- a/src/screens/sentry/ui/sentry-page/sentry-page.vue
+++ b/src/screens/sentry/ui/sentry-page/sentry-page.vue
@@ -35,7 +35,6 @@ const mainException = computed(
           class="sentry-page__main-exception-message"
           v-html="mainException.value"
         />
-        <p class="sentry-page__main-date">{{ formattedTimestamp }}</p>
       </header>
 
       <header