Merge pull request #3563 from relative-ci/panel-metric-absolute-delta

Panel entry - show absolute delta value
relative-ci · Jul 15, 2023 · b5e0b74 · b5e0b74
2 parents 4783267 + 3f37f34
commit b5e0b74
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 22 deletions.
diff --git a/packages/ui/src/components/entry-info/entry-info.module.css b/packages/ui/src/components/entry-info/entry-info.module.css
@@ -30,6 +30,7 @@
   /** space for close icon */
   padding-right: calc(var(--space-medium) + var(--space-xxxsmall) + var(--space-xsmall));
   border-bottom: 1px solid var(--color-outline);
+  background: var(--color-highlight);
 }
 
 .headerClose {
@@ -67,10 +68,6 @@
   font-size: var(--size-small);
 }
 
-.runs .runsCell {
-  padding: var(--space-xxxsmall) var(--space-xxsmall);
-}
-
 .runs .runsColJob {
   white-space: nowrap;
 }
@@ -88,6 +85,7 @@
 }
 
 .metaLabel {
-  margin-right: .6em;
-  color: var(--color-text-light);
+  display: inline-block;
+  margin-right: var(--space-xxxsmall);
+  min-width: 5em;
 }
diff --git a/packages/ui/src/components/entry-info/entry-info.tsx b/packages/ui/src/components/entry-info/entry-info.tsx
@@ -71,29 +71,28 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
         <Stack space="small">
           {tags && <div>{tags}</div>}
 
-          <Stack space="xxxsmall">
-            <h3 className={css.label}>
-              <FileName as="code" name={itemTitle || item.label} className={css.fileName} />
-            </h3>
+          <h3 className={css.label}>
+            <FileName as="code" name={itemTitle || item.label} className={css.fileName} />
+          </h3>
 
-            <RunInfo
-              current={metricRunInfo.displayValue}
-              delta={metricRunInfo.displayDeltaPercentage}
-              deltaType={metricRunInfo.deltaType}
-              baseline={baselineRun?.displayValue || '0B'}
-              size="large"
-            />
-          </Stack>
+          <RunInfo
+            current={metricRunInfo.displayValue}
+            delta={metricRunInfo.displayDeltaPercentage}
+            deltaPercentage={metricRunInfo.displayDelta}
+            deltaType={metricRunInfo.deltaType}
+            baseline={baselineRun?.displayValue || '0B'}
+            size="large"
+          />
         </Stack>
         <button type="button" onClick={onClose} className={css.headerClose}>
-          <Icon glyph={Icon.ICONS.CLOSE} />
+          <Icon glyph={Icon.ICONS.CLOSE} size="large" />
         </button>
       </Box>
       <Box padding="small" as="main" className={css.contentWrapper}>
         <Stack space="small" className={css.content}>
           {children}
 
-          <Table outline className={css.runs}>
+          <Table outline compact className={css.runs}>
             <Table.THead>
               <Table.Tr>
                 <Table.Th className={cx(css.runsCell, css.runsColJob)}>&nbsp;</Table.Th>

diff --git a/packages/ui/src/components/run-info/run-info.stories.tsx b/packages/ui/src/components/run-info/run-info.stories.tsx
@@ -29,6 +29,13 @@ Default.args = {
   deltaType: 'HIGH_NEGATIVE',
 };
 
+export const DeltaPercentage = Template.bind({});
+
+DeltaPercentage.args = {
+  ...Default.args,
+  deltaPercentage: '+20KiB',
+};
+
 export const SizeLarge = Template.bind({});
 
 SizeLarge.args = {

diff --git a/packages/ui/src/components/run-info/run-info.tsx b/packages/ui/src/components/run-info/run-info.tsx
@@ -31,6 +31,7 @@ export interface RunInfoProps {
   current?: React.ReactNode;
   baseline?: string;
   delta?: string;
+  deltaPercentage?: string;
   deltaType?: string;
 
   as?: React.ElementType;
@@ -49,6 +50,7 @@ export const RunInfo = ({
   current = '',
   baseline = '',
   delta = '',
+  deltaPercentage = '',
   deltaType = '',
   as: Component = 'div',
   size = 'medium',
@@ -57,7 +59,7 @@ export const RunInfo = ({
   enhance = false,
   ...restProps
 }: RunInfoProps & React.ComponentProps<'div'>) => {
-  const rootClassName = cx(css.root, className, css[size], delta && css.showDelta);
+  const rootClassName = cx(css.root, className, css[size], (delta || deltaPercentage) && css.showDelta);
 
   const currentValueParams: [React.ReactNode, string?] = useMemo(() => {
     if (!enhance || typeof current !== 'string') {
@@ -96,7 +98,17 @@ export const RunInfo = ({
             unit={currentValueParams[1]}
             inline
           >
-            {delta && <Delta className={css.delta} displayValue={delta} deltaType={deltaType} />}
+            {(delta || deltaPercentage) && (
+              <FlexStack space="xxxsmall" alignItems="center">
+                {deltaPercentage && (
+                  <FlexStack space="xxxsmall" alignItems="center">
+                    <Delta className={css.delta} displayValue={deltaPercentage} deltaType={deltaType} />
+                    {' / '}
+                  </FlexStack>
+                )}
+                {delta && <Delta className={css.delta} displayValue={delta} deltaType={deltaType} />}
+              </FlexStack>
+            )}
           </Metric>
           {showBaseline && <Metric className={css.baselineMetric} value={baseline} />}
         </Stack>