fix(tracing): hide basic info when no description is available (#1877)

Kong · Jan 3, 2025 · 5ba3a84 · 5ba3a84
1 parent 91338ba
commit 5ba3a84
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 42 deletions.
diff --git a/packages/core/tracing/src/components/trace-viewer/SpanBasicInfo.vue b/packages/core/tracing/src/components/trace-viewer/SpanBasicInfo.vue
@@ -1,25 +1,10 @@
 <template>
   <KCard class="span-basic-info">
-    <div class="rows">
-      <div class="label">
-        {{ t('trace_viewer.span_basic_info.labels.name') }}
-      </div>
-      <div class="value">
-        {{ span.name }}
-      </div>
-
-      <template v-if="description">
-        <div class="label">
-          {{ t('trace_viewer.span_basic_info.labels.description') }}
-        </div>
-        <div class="value">
-          {{ description }}
-        </div>
-      </template>
+    <div>
+      <span class="label">{{ name }}:</span> <span>{{ description }}</span>
     </div>
 
     <KExternalLink
-      v-if="description"
       class="docs-link"
       hide-icon
       href="https://docs.konghq.com/"
@@ -30,36 +15,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import composables from '../../composables'
-import type { SpanNode } from '../../types'
-import { getPhaseAndPlugin } from '../../utils'
-
-const { i18n: { t, te } } = composables.useI18n()
 
-const props = defineProps<{ span: SpanNode['span'] }>()
+const { i18n: { t } } = composables.useI18n()
 
-const description = computed(() => {
-  const pluginSpan = getPhaseAndPlugin(props.span.name)
-  // We will use general description for plugin spans that exactly match `kong.(phase).plugin.(plugin)`.
-  const subI18nKey = pluginSpan && !pluginSpan.suffix ? `kong.${pluginSpan.phase}.plugin` : props.span.name
-  const i18nKey = `trace_viewer.span_basic_info.descriptions.${subI18nKey}.$`
-  return te(i18nKey as any) ? t(i18nKey as any) : undefined
-})
+defineProps<{
+  name: string
+  description: string
+}>()
 </script>
 
 <style lang="scss" scoped>
 .span-basic-info {
   padding: $kui-space-60;
 
-  .rows {
-    display: grid;
-    gap: $kui-space-20 $kui-space-40;
-    grid-template-columns: min-content auto;
-
-    .label {
-      font-weight: $kui-font-weight-semibold;
-    }
+  .label {
+    font-weight: $kui-font-weight-semibold;
   }
 }
 

diff --git a/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue b/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
@@ -64,7 +64,11 @@
         v-else-if="selectedSpan"
         class="span-details"
       >
-        <SpanBasicInfo :span="selectedSpan.span" />
+        <SpanBasicInfo
+          v-if="selectedSpan && spanDescription"
+          :description="spanDescription"
+          :name="selectedSpan.span.name"
+        />
 
         <KAlert
           v-if="spanMaybeIncomplete(selectedSpan)"
@@ -111,11 +115,11 @@
 <script setup lang="ts">
 import { DangerIcon } from '@kong/icons'
 import { Pane, Splitpanes } from '@kong/splitpanes'
-import { provide, reactive, shallowRef } from 'vue'
+import { computed, provide, reactive, shallowRef } from 'vue'
 import composables from '../../composables'
 import { TRACE_VIEWER_CONFIG, WATERFALL_ROW_COLUMN_GAP, WATERFALL_ROW_LABEL_WIDTH, WATERFALL_ROW_PADDING_X, WATERFALL_SPAN_BAR_FADING_WIDTH } from '../../constants'
 import type { SpanNode, TraceViewerConfig } from '../../types'
-import { spanMaybeIncomplete } from '../../utils'
+import { getPhaseAndPlugin, spanMaybeIncomplete } from '../../utils'
 import WaterfallView from '../waterfall/WaterfallView.vue'
 import SpanAttributeTable from './SpanAttributeTable.vue'
 import SpanBasicInfo from './SpanBasicInfo.vue'
@@ -125,7 +129,7 @@ import TraceLatency from './TraceLatency.vue'
 
 import '@kong/splitpanes/dist/splitpanes.css'
 
-const { i18n: { t } } = composables.useI18n()
+const { i18n: { t, te } } = composables.useI18n()
 
 const props = defineProps<{
   config: TraceViewerConfig
@@ -139,6 +143,19 @@ provide<TraceViewerConfig>(TRACE_VIEWER_CONFIG, reactive(props.config))
 
 const selectedSpan = shallowRef<SpanNode | undefined>(undefined)
 
+const spanDescription = computed(() => {
+  const span = selectedSpan.value?.span
+  if (!span) {
+    return false
+  }
+
+  const pluginSpan = getPhaseAndPlugin(span.name)
+  // We will use general description for plugin spans that exactly match `kong.(phase).plugin.(plugin)`.
+  const subI18nKey = pluginSpan && !pluginSpan.suffix ? `kong.${pluginSpan.phase}.plugin` : span.name
+  const i18nKey = `trace_viewer.span_basic_info.descriptions.${subI18nKey}.$`
+  return te(i18nKey as any) ? t(i18nKey as any) : undefined
+})
+
 const handleUpdateSelectedSpan = (span?: SpanNode) => {
   selectedSpan.value = span
 }