feat(insights): Add prebuilt dashboard rendering for queues landing page

static/app/views/dashboards/utils/prebuiltConfigs/queues/queueSummary.ts

@@ -1,10 +1,191 @@
+import {t} from 'sentry/locale';
+import {DisplayType, WidgetType, type Widget} from 'sentry/views/dashboards/types';
 import type {PrebuiltDashboard} from 'sentry/views/dashboards/utils/prebuiltConfigs';
+import {QUEUE_CHARTS} from 'sentry/views/dashboards/utils/prebuiltConfigs/queues/queues';
 import {SUMMARY_DASHBOARD_TITLE} from 'sentry/views/dashboards/utils/prebuiltConfigs/queues/settings';
+import {spaceWidgetsEquallyOnRow} from 'sentry/views/dashboards/utils/prebuiltConfigs/utils/spaceWidgetsEquallyOnRow';
+import {SpanFields} from 'sentry/views/insights/types';
+
+const SPAN_OP_FILTER = `${SpanFields.SPAN_OP}:[queue.publish, queue.process]`;
+
+const FIRST_ROW_WIDGTS = spaceWidgetsEquallyOnRow(
+  [
+    {
+      id: 'avg-time-in-queue-widget',
+      title: t('Avg Time in Queue'),
+      displayType: DisplayType.BIG_NUMBER,
+      widgetType: WidgetType.SPANS,
+      interval: '5m',
+      queries: [
+        {
+          name: '',
+          fields: [`avg(${SpanFields.MESSAGING_MESSAGE_RECEIVE_LATENCY})`],
+          aggregates: [`avg(${SpanFields.MESSAGING_MESSAGE_RECEIVE_LATENCY})`],
+          columns: [],
+          conditions: SPAN_OP_FILTER,
+          orderby: `avg(${SpanFields.MESSAGING_MESSAGE_RECEIVE_LATENCY})`,
+        },
+      ],
+    },
+    {
+      id: 'avg-processing-time-widget',
+      title: t('Avg Processing Time'),
+      displayType: DisplayType.BIG_NUMBER,
+      widgetType: WidgetType.SPANS,
+      interval: '5m',
+      queries: [
+        {
+          name: '',
+          fields: [`avg(${SpanFields.SPAN_DURATION})`],
+          aggregates: [`avg(${SpanFields.SPAN_DURATION})`],
+          columns: [],
+          conditions: SPAN_OP_FILTER,
+          orderby: `avg(${SpanFields.SPAN_DURATION})`,
+        },
+      ],
+    },
+    {
+      id: 'error-rate-widget',
+      title: t('Error Rate'),
+      displayType: DisplayType.BIG_NUMBER,
+      widgetType: WidgetType.SPANS,
+      interval: '5m',
+      queries: [
+        {
+          name: '',
+          fields: [
+            `equation|1 - (count_if(${SpanFields.TRACE_STATUS},equals,ok) / count(${SpanFields.SPAN_DURATION}))`,
+          ],
+          aggregates: [
+            `equation|1 - (count_if(${SpanFields.TRACE_STATUS},equals,ok) / count(${SpanFields.SPAN_DURATION}))`,
+          ],
+          columns: [],
+          conditions: SPAN_OP_FILTER,
+          orderby: `equation|1 - (count_if(${SpanFields.TRACE_STATUS},equals,ok) / count(${SpanFields.SPAN_DURATION}))`,
+        },
+      ],
+    },
+    {
+      id: 'published-widget',
+      title: t('Published'),
+      displayType: DisplayType.BIG_NUMBER,
+      widgetType: WidgetType.SPANS,
+      interval: '5m',
+      queries: [
+        {
+          name: '',
+          fields: [`count_if(${SpanFields.SPAN_OP},equals,queue.publish)`],
+          aggregates: [`count_if(${SpanFields.SPAN_OP},equals,queue.publish)`],
+          columns: [],
+          conditions: SPAN_OP_FILTER,
+          orderby: `count_if(${SpanFields.SPAN_OP},equals,queue.publish)`,
+        },
+      ],
+    },
+    {
+      id: 'processed-widget',
+      title: t('Processed'),
+      displayType: DisplayType.BIG_NUMBER,
+      widgetType: WidgetType.SPANS,
+      interval: '5m',
+      queries: [
+        {
+          name: '',
+          fields: [`count_if(${SpanFields.SPAN_OP},equals,queue.process)`],
+          aggregates: [`count_if(${SpanFields.SPAN_OP},equals,queue.process)`],
+          columns: [],
+          conditions: SPAN_OP_FILTER,
+          orderby: `count_if(${SpanFields.SPAN_OP},equals,queue.process)`,
+        },
+      ],
+    },
+    {
+      id: 'time-spent-widget',
+      title: t('Time Spent'),
+      displayType: DisplayType.BIG_NUMBER,
+      widgetType: WidgetType.SPANS,
+      interval: '5m',
+      queries: [
+        {
+          name: '',
+          fields: [`sum(${SpanFields.SPAN_DURATION})`],
+          aggregates: [`sum(${SpanFields.SPAN_DURATION})`],
+          columns: [],
+          conditions: SPAN_OP_FILTER,
+          orderby: `sum(${SpanFields.SPAN_DURATION})`,
+        },
+      ],
+    },
+  ],
+  0,
+  {h: 1, minH: 1}
+);
+
+const TRANSACTIONS_TABLE: Widget = {
+  id: 'transactions-table',
+  title: t('Transactions Interacting with Destination'),
+  displayType: DisplayType.TABLE,
+  widgetType: WidgetType.SPANS,
+  interval: '5m',
+  queries: [
+    {
+      name: '',
+      fields: [
+        SpanFields.TRANSACTION,
+        `avg(${SpanFields.MESSAGING_MESSAGE_RECEIVE_LATENCY})`,
+        `avg_if(${SpanFields.SPAN_DURATION},${SpanFields.SPAN_OP},equals,queue.process)`,
+        `avg_if(${SpanFields.SPAN_DURATION},${SpanFields.SPAN_OP},equals,queue.publish)`,
+        `equation|1 - (count_if(${SpanFields.TRACE_STATUS},equals,ok) / count(${SpanFields.SPAN_DURATION}))`,
+        `count_if(${SpanFields.SPAN_OP},equals,queue.publish)`,
+        `count_if(${SpanFields.SPAN_OP},equals,queue.process)`,
+        `sum(${SpanFields.SPAN_DURATION})`,
+      ],
+      aggregates: [
+        `avg(${SpanFields.MESSAGING_MESSAGE_RECEIVE_LATENCY})`,
+        `avg_if(${SpanFields.SPAN_DURATION},${SpanFields.SPAN_OP},equals,queue.process)`,
+        `avg_if(${SpanFields.SPAN_DURATION},${SpanFields.SPAN_OP},equals,queue.publish)`,
+        `equation|1 - (count_if(${SpanFields.TRACE_STATUS},equals,ok) / count(${SpanFields.SPAN_DURATION}))`,
+        `count_if(${SpanFields.SPAN_OP},equals,queue.publish)`,
+        `count_if(${SpanFields.SPAN_OP},equals,queue.process)`,
+        `sum(${SpanFields.SPAN_DURATION})`,
+      ],
+      columns: [SpanFields.MESSAGING_MESSAGE_DESTINATION_NAME, SpanFields.TRANSACTION],
+      fieldAliases: [
+        t('Transaction'),
+        t('Avg time in queue'),
+        t('Avg processing time'),
+        t('Error rate'),
+        t('Published'),
+        t('Processed'),
+        t('Time spent'),
+      ],
+      fieldMeta: [
+        null,
+        null,
+        null,
+        null,
+        {valueType: 'percentage', valueUnit: null},
+        null,
+        null,
+        null,
+      ],
+      conditions: SPAN_OP_FILTER,
+      orderby: `-sum(${SpanFields.SPAN_DURATION})`,
+    },
+  ],
+  layout: {
+    x: 0,
+    y: 4,
+    w: 6,
+    h: 6,
+    minH: 6,
+  },
+};
 
 export const QUEUE_SUMMARY_PREBUILT_CONFIG: PrebuiltDashboard = {
   dateCreated: '',
   projects: [],
   title: SUMMARY_DASHBOARD_TITLE,
   filters: {},
-  widgets: [],
+  widgets: [...FIRST_ROW_WIDGTS, ...QUEUE_CHARTS, TRANSACTIONS_TABLE],
 };

static/app/views/dashboards/utils/prebuiltConfigs/queues/queues.ts

@@ -1,10 +1,134 @@
+import {t} from 'sentry/locale';
+import {FieldKind} from 'sentry/utils/fields';
+import {DisplayType, WidgetType, type Widget} from 'sentry/views/dashboards/types';
 import type {PrebuiltDashboard} from 'sentry/views/dashboards/utils/prebuiltConfigs';
 import {DASHBOARD_TITLE} from 'sentry/views/dashboards/utils/prebuiltConfigs/queues/settings';
+import {spaceWidgetsEquallyOnRow} from 'sentry/views/dashboards/utils/prebuiltConfigs/utils/spaceWidgetsEquallyOnRow';
+import {SpanFields} from 'sentry/views/insights/types';
+
+export const QUEUE_CHARTS = spaceWidgetsEquallyOnRow(
+  [
+    {
+      id: 'average-duration-widget',
+      title: t('Average Duration'),
+      displayType: DisplayType.AREA,
+      widgetType: WidgetType.SPANS,
+      interval: '5m',
+      queries: [
+        {
+          name: '',
+          aggregates: [
+            `avg(${SpanFields.MESSAGING_MESSAGE_RECEIVE_LATENCY})`,
+            `avg(${SpanFields.SPAN_DURATION})`,
+          ],
+          columns: [],
+          conditions: `${SpanFields.SPAN_OP}:queue.process`,
+          orderby: `avg(${SpanFields.SPAN_DURATION})`,
+        },
+      ],
+    },
+    {
+      id: 'throughput-widget',
+      title: t('Published vs Processed'),
+      displayType: DisplayType.LINE,
+      widgetType: WidgetType.SPANS,
+      interval: '5m',
+      queries: [
+        {
+          name: '',
+          aggregates: ['epm()'],
+          columns: [SpanFields.SPAN_OP],
+          conditions: `${SpanFields.SPAN_OP}:[queue.publish, queue.process]`,
+          orderby: 'epm()',
+        },
+      ],
+    },
+  ],
+  0
+);
+
+const DETINATION_TABLE: Widget = {
+  id: 'destination-table',
+  title: t('Destinations'),
+  displayType: DisplayType.TABLE,
+  widgetType: WidgetType.SPANS,
+  interval: '5m',
+  queries: [
+    {
+      name: '',
+      fields: [
+        SpanFields.MESSAGING_MESSAGE_DESTINATION_NAME,
+        `avg(${SpanFields.MESSAGING_MESSAGE_RECEIVE_LATENCY})`,
+        `avg(${SpanFields.SPAN_DURATION})`,
+        `equation|1 - (count_if(${SpanFields.TRACE_STATUS},equals,ok) / count(${SpanFields.SPAN_DURATION}))`,
+        `count_if(${SpanFields.SPAN_OP},equals,queue.publish)`,
+        `count_if(${SpanFields.SPAN_OP},equals,queue.process)`,
+        `sum(${SpanFields.SPAN_DURATION})`,
+      ],
+      columns: [SpanFields.MESSAGING_MESSAGE_DESTINATION_NAME],
+      aggregates: [
+        'epm()',
+        `avg(${SpanFields.MESSAGING_MESSAGE_RECEIVE_LATENCY})`,
+        `avg(${SpanFields.SPAN_DURATION})`,
+        `equation|1 - (count_if(${SpanFields.TRACE_STATUS},equals,ok) / count(${SpanFields.SPAN_DURATION}))`,
+        `count_if(${SpanFields.SPAN_OP},equals,queue.publish)`,
+        `count_if(${SpanFields.SPAN_OP},equals,queue.process)`,
+        `sum(${SpanFields.SPAN_DURATION})`,
+      ],
+      fieldAliases: [
+        t('Destination'),
+        t('Avg time in queue'),
+        t('Avg processing time'),
+        t('Error rate'),
+        t('Published'),
+        t('Processed'),
+        t('Time spent'),
+      ],
+      fieldMeta: [
+        null,
+        null,
+        null,
+        {valueType: 'percentage', valueUnit: null},
+        null,
+        null,
+        null,
+      ],
+      linkedDashboards: [
+        {
+          dashboardId: '-1',
+          field: SpanFields.MESSAGING_MESSAGE_DESTINATION_NAME,
+          staticDashboardId: 27,
+        },
+      ],
+      conditions: `${SpanFields.SPAN_OP}:[queue.publish, queue.process]`,
+      orderby: `-sum(${SpanFields.SPAN_DURATION})`,
+    },
+  ],
+  layout: {
+    x: 0,
+    y: 3,
+    w: 6,
+    h: 6,
+    minH: 6,
+  },
+};
 
 export const QUEUES_PREBUILT_CONFIG: PrebuiltDashboard = {
   dateCreated: '',
   projects: [],
   title: DASHBOARD_TITLE,
-  filters: {},
-  widgets: [],
+  filters: {
+    globalFilter: [
+      {
+        dataset: WidgetType.SPANS,
+        tag: {
+          key: SpanFields.MESSAGING_MESSAGE_DESTINATION_NAME,
+          name: SpanFields.MESSAGING_MESSAGE_DESTINATION_NAME,
+          kind: FieldKind.TAG,
+        },
+        value: '',
+      },
+    ],
+  },
+  widgets: [...QUEUE_CHARTS, DETINATION_TABLE],
 };

static/app/views/insights/queues/utils/useHasPlatformizedQueues.tsx

@@ -0,0 +1,7 @@
+import useOrganization from 'sentry/utils/useOrganization';
+
+export function useHasPlatformizedQueues() {
+  const organization = useOrganization();
+
+  return organization.features.includes('insights-queue-dashboard-migration');
+}

static/app/views/insights/queues/views/platformizedOverview.tsx

@@ -0,0 +1,20 @@
+import {DataCategory} from 'sentry/types/core';
+import {useMaxPickableDays} from 'sentry/utils/useMaxPickableDays';
+import {PrebuiltDashboardRenderer} from 'sentry/views/dashboards/prebuiltDashboardRenderer';
+import {PrebuiltDashboardId} from 'sentry/views/dashboards/utils/prebuiltConfigs';
+import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
+
+export function PlatformizedQueuesOverview() {
+  const maxPickableDays = useMaxPickableDays({
+    dataCategories: [DataCategory.SPANS],
+  });
+
+  return (
+    <ModulePageProviders
+      moduleName="queue"
+      maxPickableDays={maxPickableDays.maxPickableDays}
+    >
+      <PrebuiltDashboardRenderer prebuiltId={PrebuiltDashboardId.BACKEND_QUEUES} />
+    </ModulePageProviders>
+  );
+}

static/app/views/insights/queues/views/queuesLandingPage.tsx

@@ -26,6 +26,8 @@ import {
   isAValidSort,
   QueuesTable,
 } from 'sentry/views/insights/queues/components/tables/queuesTable';
+import {useHasPlatformizedQueues} from 'sentry/views/insights/queues/utils/useHasPlatformizedQueues';
+import {PlatformizedQueuesOverview} from 'sentry/views/insights/queues/views/platformizedOverview';
 import {ModuleName} from 'sentry/views/insights/types';
 
 const DEFAULT_SORT = {
@@ -107,10 +109,15 @@ function QueuesLandingPage() {
 }
 
 function PageWithProviders() {
+  const hasPlatformizedQueues = useHasPlatformizedQueues();
   const maxPickableDays = useMaxPickableDays({
     dataCategories: [DataCategory.SPANS],
   });
 
+  if (hasPlatformizedQueues) {
+    return <PlatformizedQueuesOverview />;
+  }
+
   return (
     <ModulePageProviders
       moduleName="queue"