feat(dashboards): Show badge on refresh button when auto refresh on (#…

…22944) * feat(dashboards): Show badge on refresh button when auto refresh on * Make badge muted * Update UI snapshots for `chromium` (2) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Jun 13, 2024 · dcc3d78 · dcc3d78
1 parent 6290dae
commit dcc3d78
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--dark.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--dark.png
diff --git a/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx b/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx
@@ -237,11 +237,11 @@ function DebugCHQueries(): JSX.Element {
                                                 <td>Page cache hit rate</td>
                                                 <td>
                                                     {event['OSReadBytes'] != null && event['OSReadChars'] != null ? (
-                                                        `${
+                                                        `${Math.round(
                                                             ((event['OSReadChars'] - event['OSReadBytes']) /
                                                                 event['OSReadChars']) *
-                                                            100
-                                                        }%`
+                                                                100
+                                                        )}%`
                                                     ) : (
                                                         <i>unknown</i>
                                                     )}

diff --git a/frontend/src/scenes/dashboard/DashboardReloadAction.tsx b/frontend/src/scenes/dashboard/DashboardReloadAction.tsx
@@ -1,4 +1,4 @@
-import { LemonButton, LemonSwitch } from '@posthog/lemon-ui'
+import { LemonBadge, LemonButton, LemonSwitch } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { dayjs } from 'lib/dayjs'
@@ -43,7 +43,7 @@ export function DashboardReloadAction(): JSX.Element {
     })
 
     return (
-        <>
+        <div className="relative">
             <LemonButton
                 onClick={() => refreshAllDashboardItemsManual()}
                 type="secondary"
@@ -115,6 +115,17 @@ export function DashboardReloadAction(): JSX.Element {
                     )}
                 </span>
             </LemonButton>
-        </>
+            <LemonBadge
+                size="small"
+                content={
+                    <>
+                        <IconRefresh className="mr-0" /> {humanFriendlyDuration(autoRefresh.interval)}
+                    </>
+                }
+                visible={autoRefresh.enabled}
+                position="top-right"
+                status="muted"
+            />
+        </div>
     )
 }