fix(tracing): lifecycle view and tab partials

packages/core/tracing/package.json

@@ -42,6 +42,9 @@
     "@kong/design-tokens": "1.17.2",
     "@kong/kongponents": "9.17.2",
     "@kong/splitpanes": "3.1.6-patch.6",
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/controls": "^1.1.2",
+    "@vue-flow/core": "^1.41.5",
     "lodash-es": "^4.17.21",
     "vue": "^3.5.4"
   },
@@ -60,7 +63,7 @@
     "extends": "../../../package.json"
   },
   "distSizeChecker": {
-    "errorLimit": "400KB"
+    "errorLimit": "900KB"
   },
   "peerDependencies": {
     "@kong/kongponents": "9.14.16",

packages/core/tracing/sandbox/index.ts

@@ -1,9 +1,10 @@
 import Kongponents from '@kong/kongponents'
-import '@kong/kongponents/dist/style.css'
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
 
+import '@kong/kongponents/dist/style.css'
+
 const app = createApp(App)
 
 const router = createRouter({
@@ -15,14 +16,19 @@ const router = createRouter({
       component: () => import('./pages/HomePage.vue'),
     },
     {
-      path: '/trace-viewer',
-      name: 'trace-viewer',
-      component: () => import('./pages/TraceViewerPage.vue'),
+      path: '/lifecycle',
+      name: 'lifecycle',
+      component: () => import('./pages/LifecycleViewPage.vue'),
+    },
+    {
+      path: '/trace',
+      name: 'trace',
+      component: () => import('./pages/TraceViewPage.vue'),
     },
     {
       path: '/waterfall',
       name: 'waterfall',
-      component: () => import('./pages/WaterfallPage.vue'),
+      component: () => import('./pages/WaterfallViewPage.vue'),
     },
   ],
 })

packages/core/tracing/sandbox/pages/HomePage.vue

@@ -1,13 +1,18 @@
 <template>
   <ul>
     <li>
-      <router-link :to="{ name: 'trace-viewer' }">
-        TraceViewer
+      <router-link :to="{ name: 'trace' }">
+        Trace View (Complete)
+      </router-link>
+    </li>
+    <li>
+      <router-link :to="{ name: 'lifecycle' }">
+        Lifecycle View
       </router-link>
     </li>
     <li>
       <router-link :to="{ name: 'waterfall' }">
-        Waterfall
+        Waterfall View
       </router-link>
     </li>
   </ul>

packages/core/tracing/sandbox/pages/LifecycleViewPage.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="lifecycle-view-wrapper">
+    <LifecycleView :root-span="spanTrees.roots[0]" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { buildSpanTrees, LifecycleView, mergeSpansInTraceBatches } from '../../src'
+import traceBatches from '../fixtures/trace-batches.json'
+
+const spanTrees = computed(() => buildSpanTrees(mergeSpansInTraceBatches(traceBatches)))
+</script>
+
+<style lang="scss" scoped>
+.lifecycle-view-wrapper {
+  width: 100vw;
+  height: 100vh;
+}
+</style>

packages/core/tracing/sandbox/pages/TraceViewPage.vue

@@ -0,0 +1,252 @@
+<template>
+  <div
+    class="slideout-trigger"
+    @click="slideoutVisible = true"
+  >
+    <div>
+      Click anywhere to show the slideout<br>
+      Slideout overlay is OFF (not a bug)<br>
+      Click the close button to dismiss the slideout (not a bug)<br>
+    </div>
+  </div>
+
+  <KSlideout
+    class="trace-viewer-slideout"
+    :close-on-blur="false"
+    :has-overlay="false"
+    max-width="min(100%, 1200px)"
+    :visible="slideoutVisible"
+    @close="slideoutVisible = false"
+  >
+    <template #title>
+      <template v-if="showSkeleton">
+        <KSkeletonBox
+          height="2"
+          width="50"
+        />
+      </template>
+      <template v-else>
+        <KBadge appearance="success">
+          200
+        </KBadge>
+
+        <div class="trace-viewer-title-request-line">
+          GET /kong
+        </div>
+      </template>
+    </template>
+
+    <KTabs
+      v-model="tab"
+      class="tabs"
+      :data-active-panel="tabs.findIndex(({ hash }) => hash === tab)"
+      :tabs="tabs"
+    >
+      <template #summary>
+        <SummaryViewTab
+          :payloads="enablePayloads ? payloads : undefined"
+          :root-span="spanTrees.roots[0]"
+          :show-skeleton="showSkeleton"
+        />
+      </template>
+      <template #trace>
+        <TraceViewTab
+          :config="config"
+          :root-span="spanTrees.roots[0]"
+          :show-skeleton="showSkeleton"
+          :url="url"
+        />
+      </template>
+    </KTabs>
+  </KSlideout>
+
+  <KCard
+    class="controls"
+    title="Controls"
+  >
+    <KInputSwitch
+      v-model="showSkeleton"
+      label="Skeleton"
+    />
+    <br>
+    <KInputSwitch
+      v-model="enablePayloads"
+      label="Payloads"
+    />
+  </KCard>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { Body, Headers } from '../../src'
+import { buildSpanTrees, mergeSpansInTraceBatches, SummaryViewTab, TraceViewTab, type TraceViewerConfig } from '../../src'
+// import rawSpans from '../fixtures/spans.json'
+import traceBatches from '../fixtures/trace-batches.json'
+
+const controlPlaneId = import.meta.env.VITE_KONNECT_CONTROL_PLANE_ID || ''
+
+// const spanRoots = computed(() => buildSpanTrees(rawSpans))
+const spanTrees = computed(() => buildSpanTrees(mergeSpansInTraceBatches(traceBatches)))
+const showSkeleton = ref(false)
+const enablePayloads = ref(true)
+const slideoutVisible = ref(false)
+const tabs = [
+  { hash: '#summary', title: 'Summary' },
+  { hash: '#trace', title: 'Trace' },
+]
+const tab = ref(tabs[0].hash)
+
+const config: TraceViewerConfig = {
+  buildEntityLink: (request) => {
+    const entityQuery = request.plugin ? `${request.plugin}/${request.entityId}` : request.entityId
+    return `https://cloud.konghq.tech/us/gateway-manager/${controlPlaneId}/${request.entity}/${entityQuery}`
+  },
+  getEntityLinkData: async (request) => {
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    return {
+      id: request.entityId,
+      label: `${request.entity} ${request.entityId}`,
+    }
+  },
+}
+
+const path = `/${Array(10).fill(null).map(() => Math.random().toString(36).slice(2)).join('/')}`
+const url = `https://example.com${path}`
+
+const payloads = {
+  headers: {
+    request: {
+      accept: 'application/json, */*;q=0.5',
+      'accept-encoding': 'gzip, deflate',
+      connection: 'keep-alive',
+      'content-length': '52',
+      'content-type': 'application/json',
+      host: 'localhost:9000',
+      'user-agent':
+      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
+    } as Headers,
+    response: {
+      'access-control-allow-credentials': 'true',
+      'access-control-allow-origin': '*',
+      connection: 'keep-alive',
+      'content-length': '711',
+      'content-type': 'application/json',
+      date: 'Wed, 22 Jan 2025 04:13:42 GMT',
+      server: 'gunicorn/19.9.0',
+      via: '1.1 kong/3.10.0.0-enterprise-edition',
+      'x-kong-proxy-latency': '1',
+      'x-kong-request-id': 'a73f461362afd95e80fd5027a1259861',
+      'x-kong-upstream-latency': '410',
+    } as Headers,
+  },
+  body:{
+    request: JSON.stringify({
+      order_id: '5d396641-480b-46c9-9687-7d5e73c18732',
+    }) as Body,
+    response: JSON.stringify({
+      args: {},
+      data: { 'order_id ': '5d396641-480b-46c9-9687-7d5e73c18732' },
+      files: {},
+      form: {},
+      headers: {
+        Accept: 'application/json, */*;q=0.5',
+        'Accept-Encoding': 'gzip, deflate',
+        'Content-Length': '52',
+        'Content-Type': 'application/json',
+        Host: 'httpbin.org',
+        'User-Agent': 'HTTPie/3.2.4',
+        'X-Amzn-Trace-Id': 'Root=1-67907076-5c425a3a715c7b1e7cb239eb',
+        'X-Forwarded-Host': 'localhost',
+        'X-Forwarded-Path': '/post',
+        'X-Kong-Request-Id': 'a73f461362afd95e80fd5027a1259861',
+      },
+      json: {
+        order_id: '5d396641-480b-46c9-9687-7d5e73c18732',
+      },
+      origin: '10.0.0.1, 10.0.0.2',
+      url: 'http://localhost/post',
+    }) as Body,
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.slideout-trigger {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100dvw;
+  height: 100dvh;
+  padding: 16px;
+}
+
+.trace-viewer-slideout {
+  .trace-viewer-title-request-line {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :deep(.slideout-container) {
+    box-sizing: border-box;
+
+    .slideout-title {
+      flex-shrink: 1;
+      min-width: 0;
+      height: 28px; // $kui-line-height-50
+      line-height: $kui-line-height-50;
+    }
+
+    .slideout-content {
+      flex-grow: 1;
+
+      > :last-child {
+        padding-bottom: 0;
+      }
+
+      [role="tablist"] {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  :deep(.tab-container) {
+    height: 100%;
+  }
+
+  :deep(.tabs.k-tabs) {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-bottom: 0;
+
+    > [role="tablist"] {
+      flex-shrink: 0;
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    > [role="tabpanel"] {
+      min-height: 0;
+    }
+
+    &[data-active-panel="0"] :not([id="panel-0"])[role="tabpanel"] {
+      display: none;
+    }
+
+    &[data-active-panel="1"] :not([id="panel-1"])[role="tabpanel"] {
+      display: none;
+    }
+  }
+}
+
+.controls {
+  z-index: 10000;
+  bottom: 16px;
+  left: 16px;
+  margin-bottom: 16px;
+  position: fixed;
+  width: auto;
+}
+</style>