From 7cd19d73c1afaba6940e02417132ac2d5e2b828a Mon Sep 17 00:00:00 2001
From: ArthurKnaus <arthur.knaus@sentry.io>
Date: Wed, 12 Mar 2025 09:29:31 +0100
Subject: [PATCH] feat(laravel-insights): Show count in caches (#86867)

- part of https://github.com/getsentry/projects/issues/791
---
 .../pages/backend/laravel/cachesWidget.tsx    | 52 +++++++++++--------
 .../insights/pages/backend/laravel/styles.tsx | 19 ++++---
 2 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/static/app/views/insights/pages/backend/laravel/cachesWidget.tsx b/static/app/views/insights/pages/backend/laravel/cachesWidget.tsx
index ff1cc0cb3fb2fb..71fbbc7b3f85b4 100644
--- a/static/app/views/insights/pages/backend/laravel/cachesWidget.tsx
+++ b/static/app/views/insights/pages/backend/laravel/cachesWidget.tsx
@@ -6,6 +6,7 @@ import Link from 'sentry/components/links/link';
 import {getChartColorPalette} from 'sentry/constants/chartPalette';
 import {IconExpand} from 'sentry/icons';
 import {t} from 'sentry/locale';
+import {formatAbbreviatedNumber} from 'sentry/utils/formatters';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -31,6 +32,7 @@ export function CachesWidget({query}: {query?: string}) {
   const cachesRequest = useApiQuery<{
     data: Array<{
       'cache_miss_rate()': number;
+      'count()': number;
       'project.id': string;
       transaction: string;
     }>;
@@ -41,7 +43,7 @@ export function CachesWidget({query}: {query?: string}) {
         query: {
           ...pageFilterChartParams,
           dataset: 'spansMetrics',
-          field: ['transaction', 'project.id', 'cache_miss_rate()'],
+          field: ['transaction', 'project.id', 'cache_miss_rate()', 'count()'],
           query: `span.op:[cache.get_item,cache.get] ${query}`,
           sort: '-cache_miss_rate()',
           per_page: 4,
@@ -117,26 +119,34 @@ export function CachesWidget({query}: {query?: string}) {
   );
 
   const footer = hasData && (
-    <WidgetFooterTable>
-      {cachesRequest.data?.data.map((item, index) => (
-        <Fragment key={item.transaction}>
-          <div>
-            <SeriesColorIndicator
-              style={{
-                backgroundColor: colorPalette[index],
-              }}
-            />
-          </div>
-          <div>
-            <Link
-              to={`/insights/backend/caches?project=${item['project.id']}&transaction=${item.transaction}`}
-            >
-              {item.transaction}
-            </Link>
-          </div>
-          <span>{(item['cache_miss_rate()'] * 100).toFixed(2)}%</span>
-        </Fragment>
-      ))}
+    <WidgetFooterTable columns={4}>
+      {cachesRequest.data?.data.map((item, index) => {
+        const count = item['count()'];
+        const cacheMissRate = item['cache_miss_rate()'];
+        const missedCount = Math.floor(count * cacheMissRate);
+        return (
+          <Fragment key={item.transaction}>
+            <div>
+              <SeriesColorIndicator
+                style={{
+                  backgroundColor: colorPalette[index],
+                }}
+              />
+            </div>
+            <div>
+              <Link
+                to={`/insights/backend/caches?project=${item['project.id']}&transaction=${item.transaction}`}
+              >
+                {item.transaction}
+              </Link>
+            </div>
+            <span>
+              {formatAbbreviatedNumber(missedCount)} / {formatAbbreviatedNumber(count)}
+            </span>
+            <span>{(cacheMissRate * 100).toFixed(2)}%</span>
+          </Fragment>
+        );
+      })}
     </WidgetFooterTable>
   );
 
diff --git a/static/app/views/insights/pages/backend/laravel/styles.tsx b/static/app/views/insights/pages/backend/laravel/styles.tsx
index 3b0cef82af0816..47f4c058f3b900 100644
--- a/static/app/views/insights/pages/backend/laravel/styles.tsx
+++ b/static/app/views/insights/pages/backend/laravel/styles.tsx
@@ -11,31 +11,38 @@ export const ModalTableWrapper = styled(Panel)`
   margin-top: ${space(2)};
 `;
 
-export const WidgetFooterTable = styled('div')`
+const getColumns = (props: {columns?: number}) => {
+  return props.columns || 3;
+};
+
+export const WidgetFooterTable = styled('div')<{columns?: number}>`
   display: grid;
-  grid-template-columns: max-content 1fr max-content;
+  grid-template-columns: max-content 1fr repeat(${p => getColumns(p) - 2}, max-content);
   font-size: ${p => p.theme.fontSizeSmall};
 
   & > * {
     padding: ${space(1)} ${space(0.5)};
+    text-align: right;
   }
 
-  & > *:nth-child(3n + 1) {
+  & > *:nth-child(${p => getColumns(p)}n + 1) {
     position: relative;
+    text-align: left;
   }
 
-  & > *:nth-child(3n + 2) {
+  & > *:nth-child(${p => getColumns(p)}n + 2) {
     ${p => p.theme.overflowEllipsis};
     padding-left: ${space(1.5)};
     min-width: 0px;
+    text-align: left;
   }
 
-  & > *:nth-child(3n) {
+  & > *:nth-child(${p => getColumns(p)}n) {
     padding-right: ${space(2)};
     text-align: right;
   }
 
-  & > *:not(:nth-last-child(-n + 3)) {
+  & > *:not(:nth-last-child(-n + ${p => getColumns(p)})) {
     border-bottom: 1px solid ${p => p.theme.border};
   }
 `;