Inspect: Inspect header design update (#22120)

* first things

* rename

* add stats, remove table related changes

* header size and expand icon

* add case for nan request time

* fixing null checks

* reverting changes to table

* fix background on header

* Some small fixes after review

* do not use formInputBg

packages/grafana-ui/src/components/Drawer/Drawer.tsx

@@ -8,7 +8,7 @@ import { stylesFactory, useTheme, selectThemeVariant } from '../../themes';
 export interface Props {
   children: ReactNode;
   /** Title shown at the top of the drawer */
-  title?: string;
+  title?: (() => JSX.Element) | string;
   /** Should the Drawer be closable by clicking on the mask */
   closeOnMaskClick?: boolean;
   /** Render the drawer inside a container on the page */
@@ -43,7 +43,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, scollableContent: boolean)
     titleWrapper: css`
       font-size: ${theme.typography.size.lg};
       display: flex;
-      align-items: center;
+      align-items: baseline;
       justify-content: space-between;
       border-bottom: 1px solid ${borderColor};
       padding: ${theme.spacing.sm} 0 ${theme.spacing.sm} ${theme.spacing.md};
@@ -94,12 +94,15 @@ export const Drawer: FC<Props> = ({
       style={{ position: `${inline && 'absolute'}` } as CSSProperties}
       className={drawerStyles.drawer}
     >
-      <div className={drawerStyles.titleWrapper}>
-        <div>{title}</div>
-        <div className={drawerStyles.close} onClick={onClose}>
-          <i className="fa fa-close" />
+      {typeof title === 'string' && (
+        <div className={drawerStyles.titleWrapper}>
+          <div>{title}</div>
+          <div className={drawerStyles.close} onClick={onClose}>
+            <i className="fa fa-close" />
+          </div>
         </div>
-      </div>
+      )}
+      {typeof title === 'function' && title()}
       <div className={drawerStyles.content}>
         {!scrollableContent ? children : <CustomScrollbar>{children}</CustomScrollbar>}
       </div>

packages/grafana-ui/src/components/Table/styles.ts

@@ -35,6 +35,7 @@ export const getTableStyles = stylesFactory(
         border-spacing: 0;
       `,
       thead: css`
+        label: thead;
         overflow-y: auto;
         overflow-x: hidden;
         background: ${headerBg};
@@ -46,6 +47,7 @@ export const getTableStyles = stylesFactory(
         color: ${colors.blue};
       `,
       row: css`
+        label: row;
         border-bottom: 2px solid ${colors.bodyBg};
       `,
       tableCell: css`