enhance(ui): Summary - updates

- move Bundle size metric from JobHeader to Summary - remove grid spacing - use SummaryItem inline
relative-ci · May 24, 2020 · bb76185 · bb76185
1 parent 29b9cd8
commit bb76185
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 210 deletions.
diff --git a/packages/ui/src/components/job-header/__snapshots__/job-header.stories.storyshot b/packages/ui/src/components/job-header/__snapshots__/job-header.stories.storyshot
@@ -31,7 +31,6 @@ exports[`Storyshots Components/JobHeader default 1`] = `
         },
       }
     }
-    showSummaryDelta={true}
     tag=""
   />
 </div>
@@ -68,7 +67,6 @@ exports[`Storyshots Components/JobHeader with custom content 1`] = `
         },
       }
     }
-    showSummaryDelta={true}
     tag=""
   >
     <p>
@@ -78,43 +76,6 @@ exports[`Storyshots Components/JobHeader with custom content 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components/JobHeader with showSummaryDelta = false 1`] = `
-<div
-  style={
-    Object {
-      "height": "100%",
-      "padding": "24px",
-      "width": "100%",
-    }
-  }
->
-  <JobHeader
-    className=""
-    job={
-      Object {
-        "internalBuildNumber": 1,
-        "meta": Object {
-          "webpack": Object {
-            "builtAt": "2019-01-01T00:00:00.000Z",
-            "hash": "abcd1234",
-          },
-        },
-        "summary": Object {
-          "webpack": Object {
-            "totalSizeByTypeALL": Object {
-              "baseline": 900000,
-              "current": 1000000,
-            },
-          },
-        },
-      }
-    }
-    showSummaryDelta={false}
-    tag="baseline"
-  />
-</div>
-`;
-
 exports[`Storyshots Components/JobHeader with tag 1`] = `
 <div
   style={
@@ -146,7 +107,6 @@ exports[`Storyshots Components/JobHeader with tag 1`] = `
         },
       }
     }
-    showSummaryDelta={true}
     tag="current"
   />
 </div>

diff --git a/packages/ui/src/components/job-header/job-header.jsx b/packages/ui/src/components/job-header/job-header.jsx
@@ -6,15 +6,10 @@ import { formatDistanceToNow } from 'date-fns';
 import { SOURCE_PATH_WEBPACK_STATS, formatDate, formatTime } from '@bundle-stats/utils';
 
 import { Icon } from '../../ui/icon';
-import { SummaryItem } from '../summary-item';
 import css from './job-header.module.css';
 
-const TOTAL_BUNDLE_SIZE = 'webpack.totalSizeByTypeALL';
-
 export const JobHeader = (props) => {
-  const {
-    className, tag, job, showSummaryDelta, children,
-  } = props;
+  const { className, tag, job, children } = props;
 
   const { builtAt, hash } = get(job, `meta.${SOURCE_PATH_WEBPACK_STATS}`, {});
   const rootClassName = cx(css.root, className);
@@ -23,25 +18,14 @@ export const JobHeader = (props) => {
     <div className={rootClassName}>
       <div className={css.description}>
         <h1 className={css.title}>
-          <span>
-            {`#${job.internalBuildNumber}`}
-          </span>
-          {tag && (
-            <span className={css.tag}>
-              {tag}
-            </span>
-          )}
+          <span>{`#${job.internalBuildNumber}`}</span>
+          {tag && <span className={css.tag}>{tag}</span>}
         </h1>
         <div className={css.meta}>
           {builtAt && (
-            <span
-              className={css.metaItem}
-              title={`${formatDate(builtAt)} ${formatTime(builtAt)}`}
-            >
+            <span className={css.metaItem} title={`${formatDate(builtAt)} ${formatTime(builtAt)}`}>
               <Icon glyph="clock" className={css.metaIcon} />
-              <span>
-                {formatDistanceToNow(new Date(builtAt), { addSuffix: true })}
-              </span>
+              <span>{formatDistanceToNow(new Date(builtAt), { addSuffix: true })}</span>
             </span>
           )}
 
@@ -55,15 +39,6 @@ export const JobHeader = (props) => {
           {children}
         </div>
       </div>
-
-      <SummaryItem
-        className={css.summaryItem}
-        size="large"
-        loading={false}
-        id={TOTAL_BUNDLE_SIZE}
-        data={get(job.summary, TOTAL_BUNDLE_SIZE)}
-        showDelta={showSummaryDelta}
-      />
     </div>
   );
 };
@@ -78,14 +53,12 @@ JobHeader.propTypes = {
     }),
     summary: PropTypes.object,
   }),
-  showSummaryDelta: PropTypes.bool,
   children: PropTypes.element,
 };
 
 JobHeader.defaultProps = {
   className: '',
   tag: '',
   job: null,
-  showSummaryDelta: true,
   children: null,
 };
diff --git a/packages/ui/src/components/job-header/job-header.stories.jsx b/packages/ui/src/components/job-header/job-header.stories.jsx
@@ -25,17 +25,9 @@ const JOB = {
   },
 };
 
-stories.add('default', () => (
-  <JobHeader job={JOB} />
-));
-
-stories.add('with tag', () => (
-  <JobHeader job={JOB} tag="current" />
-));
+stories.add('default', () => <JobHeader job={JOB} />);
 
-stories.add('with showSummaryDelta = false', () => (
-  <JobHeader job={JOB} tag="baseline" showSummaryDelta={false} />
-));
+stories.add('with tag', () => <JobHeader job={JOB} tag="current" />);
 
 stories.add('with custom content', () => (
   <JobHeader job={JOB}>

diff --git a/packages/ui/src/components/jobs-header/jobs-header.jsx b/packages/ui/src/components/jobs-header/jobs-header.jsx
@@ -12,15 +12,15 @@ export const JobsHeader = (props) => {
 
   return (
     <Box className={rootClassName}>
-      {jobs && jobs.map((job, index) => (
-        <JobHeader
-          key={job.internalBuildNumber || index}
-          className={css.item}
-          job={job}
-          showSummaryDelta={index + 1 < jobs.length}
-          tag={index === 0 ? 'current' : 'baseline'}
-        />
-      ))}
+      {jobs &&
+        jobs.map((job, index) => (
+          <JobHeader
+            key={job.internalBuildNumber || index}
+            className={css.item}
+            job={job}
+            tag={index === 0 ? 'current' : 'baseline'}
+          />
+        ))}
     </Box>
   );
 };
@@ -30,9 +30,11 @@ JobsHeader.propTypes = {
   className: PropTypes.string,
 
   /** Jobs data */
-  jobs: PropTypes.arrayOf(PropTypes.shape({
-    internalBuildNumber: PropTypes.number,
-  })),
+  jobs: PropTypes.arrayOf(
+    PropTypes.shape({
+      internalBuildNumber: PropTypes.number,
+    }),
+  ),
 };
 
 JobsHeader.defaultProps = {

diff --git a/packages/ui/src/components/summary-item/summary-item.module.css b/packages/ui/src/components/summary-item/summary-item.module.css
@@ -1,7 +1,5 @@
 .title {
   margin: 0;
-  /* space for help icon */
-  padding-right: var(--space-small);
   color: var(--color-text-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
@@ -86,4 +84,5 @@
 /* Size large */
 .large .currentMetric {
   font-size: var(--size-xxxlarge);
+  font-weight: bold;
 }
diff --git a/packages/ui/src/components/summary/__snapshots__/summary.stories.storyshot b/packages/ui/src/components/summary/__snapshots__/summary.stories.storyshot
@@ -54,18 +54,6 @@ exports[`Storyshots Components/Summary default 1`] = `
         },
       }
     }
-    keys={
-      Array [
-        "webpack.totalInitialSizeJS",
-        "webpack.totalInitialSizeCSS",
-        "webpack.cacheInvalidation",
-        "webpack.moduleCount",
-        "webpack.chunkCount",
-        "webpack.assetCount",
-        "webpack.packageCount",
-        "webpack.duplicatePackagesCount",
-      ]
-    }
     loading={false}
     showSummaryItemBaselineValue={true}
     showSummaryItemDelta={true}
@@ -86,18 +74,6 @@ exports[`Storyshots Components/Summary loading 1`] = `
   <Summary
     className=""
     data={null}
-    keys={
-      Array [
-        "webpack.totalInitialSizeJS",
-        "webpack.totalInitialSizeCSS",
-        "webpack.cacheInvalidation",
-        "webpack.moduleCount",
-        "webpack.chunkCount",
-        "webpack.assetCount",
-        "webpack.packageCount",
-        "webpack.duplicatePackagesCount",
-      ]
-    }
     loading={true}
     showSummaryItemBaselineValue={false}
     showSummaryItemDelta={true}
@@ -159,18 +135,6 @@ exports[`Storyshots Components/Summary single run 1`] = `
         },
       }
     }
-    keys={
-      Array [
-        "webpack.totalInitialSizeJS",
-        "webpack.totalInitialSizeCSS",
-        "webpack.cacheInvalidation",
-        "webpack.moduleCount",
-        "webpack.chunkCount",
-        "webpack.assetCount",
-        "webpack.packageCount",
-        "webpack.duplicatePackagesCount",
-      ]
-    }
     loading={false}
     showSummaryItemBaselineValue={false}
     showSummaryItemDelta={false}

diff --git a/packages/ui/src/components/summary/summary.jsx b/packages/ui/src/components/summary/summary.jsx
@@ -6,48 +6,49 @@ import { get } from 'lodash';
 import { SummaryItem } from '../summary-item';
 import css from './summary.module.css';
 
-export const Summary = ({
-  className,
-  data,
-  keys,
-  loading,
-  showSummaryItemDelta,
-  showSummaryItemBaselineValue,
-}) => {
-  const getRenderSummaryItem = (itemProps) => (key) => (
+const PRIMARY_METRICS = new Map([
+  ['webpack.totalSizeByTypeALL'],
+  ['webpack.totalInitialSizeJS'],
+  ['webpack.totalInitialSizeCSS'],
+  ['webpack.cacheInvalidation', { showDelta: false }],
+]);
+
+const SECONDARY_METRICS = new Map([
+  ['webpack.assetCount'],
+  ['webpack.chunkCount'],
+  ['webpack.moduleCount'],
+  ['webpack.packageCount'],
+  ['webpack.duplicatePackagesCount'],
+]);
+
+export const Summary = ({ className, data, loading, showSummaryItemDelta }) => {
+  const getRenderSummaryItem = (sectionProps) => ([key, keyProps]) => (
     <SummaryItem
       key={key}
-      className={css.item}
       id={key}
       data={get(data, key)}
       loading={loading}
       showMetricDescription
-      showBaselineValue={showSummaryItemBaselineValue}
       showDelta={showSummaryItemDelta}
-      {...itemProps}
+      className={css.item}
+      {...keyProps}
+      {...sectionProps}
     />
   );
 
   return (
     <div className={cx(css.root, className)}>
-      <div className={css.items}>{keys.map(getRenderSummaryItem())}</div>
+      <div className={css.primary}>{[...PRIMARY_METRICS].map(getRenderSummaryItem())}</div>
+      <div className={css.secondary}>
+        {[...SECONDARY_METRICS].map(getRenderSummaryItem({ inline: true }))}
+      </div>
     </div>
   );
 };
 
 Summary.defaultProps = {
   className: '',
   data: null,
-  keys: [
-    'webpack.totalInitialSizeJS',
-    'webpack.totalInitialSizeCSS',
-    'webpack.cacheInvalidation',
-    'webpack.moduleCount',
-    'webpack.chunkCount',
-    'webpack.assetCount',
-    'webpack.packageCount',
-    'webpack.duplicatePackagesCount',
-  ],
   loading: false,
   showSummaryItemDelta: true,
   showSummaryItemBaselineValue: false,
@@ -61,7 +62,6 @@ Summary.propTypes = {
       current: PropTypes.number,
     }),
   }),
-  keys: PropTypes.arrayOf(PropTypes.string),
   loading: PropTypes.bool,
   showSummaryItemDelta: PropTypes.bool,
   showSummaryItemBaselineValue: PropTypes.bool,