chore: refactor WebVitalGaugeScene to use PanelChrome

grafana · Sep 17, 2024 · 1abd686 · 1abd686
1 parent ced6802
commit 1abd686
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 54 deletions.
diff --git a/src/scenes/BROWSER/WebVitals/WebVitalGauge.tsx b/src/scenes/BROWSER/WebVitals/WebVitalGauge.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
-import { Icon, LinkButton, Tooltip, useStyles2 } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 
 import { WebVitalName } from './types';
@@ -13,41 +13,15 @@ interface WebVitalGaugeProps {
   name: WebVitalName;
   longName: string;
   value: number;
-  description?: string;
-  exploreLink?: string;
 }
 
-export function WebVitalGauge({ value, name, longName, description, exploreLink }: WebVitalGaugeProps) {
+export function WebVitalGauge({ value, name, longName }: WebVitalGaugeProps) {
   const styles = useStyles2(getStyles);
-
   const valueConfig = getWebVitalValueConfig(name, value);
 
   return (
     <div className={styles.container}>
-      <div>
-        <div className={styles.fullNameContainer}>
-          <h3 className={styles.shortName}>{name}</h3>
-          {exploreLink ? (
-            <LinkButton
-              key="explore"
-              tooltip={'Explore'}
-              target="_blank"
-              icon="compass"
-              size="sm"
-              variant="secondary"
-              href={`/explore?left=${exploreLink}`}
-            ></LinkButton>
-          ) : null}
-        </div>
-        <div className={styles.nameWrapper}>
-          <span className={styles.fullName}>{longName}</span>
-          {description ? (
-            <Tooltip content={description}>
-              <Icon name="question-circle" size="sm" />
-            </Tooltip>
-          ) : null}
-        </div>
-      </div>
+      <span className={styles.fullName}>{longName}</span>
 
       <div>
         <WebVitalValue value={valueConfig} />
@@ -64,23 +38,9 @@ export function getStyles(theme: GrafanaTheme2) {
       display: 'flex',
       flexDirection: 'column',
       gap: `${theme.spacing(1.5)}`,
+      position: 'relative',
     }),
-    shortName: css({
-      color: `${theme.colors.text.primary}`,
-      fontWeight: '700',
-      marginBottom: '0',
-      textTransform: 'uppercase',
-    }),
-    fullNameContainer: css({
-      color: `${theme.colors.text.secondary}`,
-      display: 'flex',
-      justifyContent: 'space-between',
-    }),
-    nameWrapper: css({
-      display: 'flex',
-      alignItems: 'center',
-      gap: `${theme.spacing(1)}`,
-    }),
+
     fullName: css({
       color: `${theme.colors.text.secondary}`,
       fontSize: `${theme.typography.bodySmall.fontSize}`,

diff --git a/src/scenes/BROWSER/WebVitals/webVitalGaugeScene.tsx b/src/scenes/BROWSER/WebVitals/webVitalGaugeScene.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { DataFrameView, GrafanaTheme2 } from '@grafana/data';
 import { SceneComponentProps, sceneGraph, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
-import { useStyles2 } from '@grafana/ui';
+import { Menu, PanelChrome, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 
 import { WebVitalName } from './types';
@@ -51,13 +51,17 @@ function WebVitalGaugeRenderer({ model }: SceneComponentProps<WebVitalGaugeScene
 
   return (
     <div className={styles}>
-      <WebVitalGauge
-        value={value}
-        name={name as WebVitalName}
+      <PanelChrome
+        title={name.toUpperCase()}
         description={description}
-        longName={longName}
-        exploreLink={exploreLink}
-      />
+        menu={() => (
+          <Menu>
+            {exploreLink && <Menu.Item label="Explore" icon="compass" url={`/explore?left=${exploreLink}`} />}
+          </Menu>
+        )}
+      >
+        <WebVitalGauge value={value} name={name as WebVitalName} longName={longName} />
+      </PanelChrome>
     </div>
   );
 }
@@ -96,7 +100,5 @@ function setExploreLink(model: WebVitalGaugeScene) {
 
 const getStyles = (theme: GrafanaTheme2) =>
   css({
-    border: `1px solid ${theme.colors.border.weak}`,
-    padding: '.5rem',
     width: '100%',
   });