@bundle-stats/ui 3.2.1 → 3.3.0-alpha.1

package/src/app/app.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-dom';
 import { COMPONENT } from '@bundle-stats/utils';
@@ -13,6 +13,7 @@ import {
 import { Box } from '../layout/box';
 import { Container } from '../ui/container';
 import { DuplicatePackagesWarning } from '../components/duplicate-packages-warning';
+import { BudgetInsights } from '../components/budget-insights';
 import { Summary } from '../components/summary';
 import { BundleAssets } from '../components/bundle-assets';
 import { BundleAssetsTotalsChartBars } from '../components/bundle-assets-totals-chart-bars';
@@ -58,8 +59,12 @@ Layout.defaultProps = {
 
 const AppComponent = ({ version, jobs }) => {
   const [bundleStatsState, bundleStatsSetState] = useComponentQueryState(COMPONENT.BUNDLE_ASSETS);
-  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(COMPONENT.BUNDLE_PACKAGES);
-  const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(COMPONENT.BUNDLE_MODULES);
+  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(
+    COMPONENT.BUNDLE_PACKAGES,
+  );
+  const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(
+    COMPONENT.BUNDLE_MODULES,
+  );
 
   if (jobs.length === 0) {
     return (
@@ -71,7 +76,9 @@ const AppComponent = ({ version, jobs }) => {
     );
   }
 
-  const { duplicatePackagesCount } = jobs[0].summary.webpack;
+  const { summary, insights } = useMemo(() => jobs[0], jobs);
+
+  const { duplicatePackagesCount } = summary.webpack;
   const duplicatePackagesInsights = Boolean(
     duplicatePackagesCount.current || duplicatePackagesCount.baseline,
   );
@@ -82,7 +89,8 @@ const AppComponent = ({ version, jobs }) => {
         <Summary
           size="large"
           keys={METRICS_WEBPACK_GENERAL}
-          data={jobs[0].summary}
+          data={summary}
+          budgets={insights?.webpack?.budgets}
           showSummaryItemDelta={jobs.length !== 1}
         />
       </Container>
@@ -114,7 +122,8 @@ const AppComponent = ({ version, jobs }) => {
                 <Stack space="medium">
                   <Summary
                     keys={METRICS_WEBPACK_ASSETS}
-                    data={jobs[0].summary}
+                    data={summary}
+                    budgets={insights?.webpack?.budgets}
                     showSummaryItemDelta={jobs.length !== 1}
                   />
                   <Box outline>
@@ -137,7 +146,8 @@ const AppComponent = ({ version, jobs }) => {
                 <Stack space="medium">
                   <Summary
                     keys={METRICS_WEBPACK_MODULES}
-                    data={jobs[0].summary}
+                    data={summary}
+                    budgets={insights?.webpack?.budgets}
                     showSummaryItemDelta={jobs.length !== 1}
                   />
                   <Box outline>
@@ -159,7 +169,8 @@ const AppComponent = ({ version, jobs }) => {
                 <Stack space="medium">
                   <Summary
                     keys={METRICS_WEBPACK_PACKAGES}
-                    data={jobs[0].summary}
+                    data={summary}
+                    budgets={insights?.webpack?.budgets}
                     showSummaryItemDelta={jobs.length !== 1}
                   />
                   <Box outline>
@@ -187,6 +198,11 @@ const AppComponent = ({ version, jobs }) => {
                     />
                   </Container>
                 )}
+                {insights?.webpack?.budgets && (
+                  <Container>
+                    <BudgetInsights source="webpack" budgets={insights.webpack.budgets} />
+                  </Container>
+                )}
                 <Container>
                   <Stack space="small">
                     <TotalSizeTypeTitle />

package/src/assets/icons/alert-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

package/src/assets/icons/arrow-right-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>

package/src/assets/icons/check-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>

package/src/assets/icons/close.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

package/src/assets/icons.svg

@@ -1 +1,50 @@
-<svg width="16" height="16"><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="afeather afeather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14M19 12l-7 7-7-7"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bfeather bfeather-x-circle" id="cancel" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cfeather cfeather-clock" id="clock" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dfeather dfeather-x" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="efeather efeather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="4"/><path d="M1.05 12H7M17.01 12h5.95"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ffeather ffeather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg"><path d="M12 20V10M18 20V4M6 20v-4"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gfeather gfeather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hfeather hfeather-menu" id="menu" xmlns="http://www.w3.org/2000/svg"><path d="M3 12h18M3 6h18M3 18h18"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jfeather jfeather-alert-triangle" id="warning" xmlns="http://www.w3.org/2000/svg"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"/></symbol></svg>
+<svg width="16" height="16">
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle" viewBox="0 0 24 24" id="alert-circle" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M12 8v4M12 16h.01"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 5v14M19 12l-7 7-7-7"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle" viewBox="0 0 24 24" id="arrow-right-circle" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M12 16l4-4-4-4M8 12h8"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle" id="cancel" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M15 9l-6 6M9 9l6 6"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle" viewBox="0 0 24 24" id="check-circle" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
+<path d="M22 4L12 14.01l-3-3"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock" id="clock" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M12 6v6l4 2"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle" viewBox="0 0 24 24" id="close" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M15 9l-6 6M9 9l6 6"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="4"/>
+<path d="M1.05 12H7M17.01 12h5.95"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 20V10M18 20V4M6 20v-4"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu" id="menu" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 12h18M3 6h18M3 18h18"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
+<path d="M0 0h24v24H0z" fill="none"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle" id="warning" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"/>
+</symbol>
+</svg>

package/src/components/budget-info/budget-info.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { InsightType } from '@bundle-stats/utils';
+import * as budgetsInsightsTransformer from '@bundle-stats/utils/lib-esm/transformers/budgets-insights';
+
+import { Icon } from '../../ui/icon';
+import { Tooltip } from '../../ui/tooltip';
+
+import css from './budget-info.module.css';
+
+const INSIGHT_TYPE_MAP = {
+  [InsightType.SUCCESS]: {
+    className: css.success,
+    glyph: Icon.ICONS.CHECK_CIRCLE,
+  },
+  [InsightType.ERROR]: {
+    className: css.error,
+    glyph: Icon.ICONS.ALERT_CIRCLE,
+  },
+  [InsightType.WARNING]: {
+    className: css.warning,
+    glyph: Icon.ICONS.WARNING,
+  },
+};
+
+export const BudgetInfo = ({ className = '', metricId, budgetInsight }) => {
+  const budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
+  const { className: insightTypeClassName, glyph } = INSIGHT_TYPE_MAP[budgetInsightInfo.type];
+
+  const rootClassName = cx(css.root, insightTypeClassName, className);
+  const { data: messageData } = budgetInsightInfo.message;
+
+  return (
+    <Tooltip
+      className={rootClassName}
+      title={
+        <>
+          <strong>{messageData.metricLabel}</strong>
+          {` value (`}
+          <strong>{messageData.currentValue}</strong>
+          {`) is ${messageData.diffLabel} `}
+          <strong>{messageData.budgetValue}</strong>
+          {` budget `}
+        </>
+      }
+    >
+      <Icon className={css.icon} glyph={glyph} size="medium" />
+    </Tooltip>
+  );
+};
+
+BudgetInfo.propTypes = {
+  metricId: PropTypes.string.isRequired,
+  budgetInsight: PropTypes.shape({
+    currentValue: PropTypes.number,
+    budgetValue: PropTypes.number,
+    failed: PropTypes.bool,
+  }).isRequired,
+  className: PropTypes.string,
+};
+
+BudgetInfo.defaultProps = {
+  className: '',
+};

package/src/components/budget-info/budget-info.module.css

@@ -0,0 +1,40 @@
+.root {
+  display: inline-block;
+  line-height: 1em;
+}
+
+/* Budget error */
+.error .icon {
+  color: var(--color-danger);
+}
+
+.error .icon:hover,
+.error .icon:focus,
+.error .icon:active
+{
+  color: var(--color-danger-light);
+}
+
+/* Budget success */
+.success .icon {
+  color: var(--color-success);
+}
+
+.success .icon:hover,
+.success .icon:focus,
+.success .icon:active
+{
+  color: var(--color-success-light);
+}
+
+/* Budget warning */
+.warning .icon {
+  color: var(--color-warning-dark);
+}
+
+.warning .icon:hover,
+.warning .icon:focus,
+.warning .icon:active
+{
+  color: var(--color-warning);
+}

package/src/components/budget-info/index.js

@@ -0,0 +1 @@
+export * from './budget-info';

package/src/components/budget-insights/budget-insights.jsx

@@ -0,0 +1,157 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
+import * as budgetsInsightsTransformer from '@bundle-stats/utils/lib-esm/transformers/budgets-insights';
+
+import { Box } from '../../layout/box';
+import { Stack } from '../../layout/stack';
+import { FlexStack } from '../../layout/flex-stack';
+import { Alert } from '../../ui/alert';
+import { Icon } from '../../ui/icon';
+import { ComponentLink } from '../component-link';
+import css from './budget-insights.module.css';
+
+const Budget = (props) => {
+  const { className, metricId, budgetInsight, CustomLink } = props;
+  const componentLinkOptions = METRIC_COMPONENT_LINKS.get(metricId);
+  const budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
+  const { data: messageData } = budgetInsightInfo.message;
+
+  return (
+    <CustomLink className={cx(css.budget, className)} {...componentLinkOptions?.link}>
+      <strong>{messageData.metricLabel}</strong>
+      {` value (`}
+      <strong>{messageData.currentValue}</strong>
+      {`) is ${messageData.diffLabel} `}
+      <strong>{messageData.budgetValue}</strong>
+      {` budget `}
+    </CustomLink>
+  );
+};
+
+Budget.propTypes = {
+  className: PropTypes.string,
+  metricId: PropTypes.string.isRequired,
+  budgetInsight: PropTypes.shape({
+    currentValue: PropTypes.number.isRequired,
+    budgetValue: PropTypes.number.isRequired,
+    failed: PropTypes.bool.isRequired,
+  }).isRequired,
+  CustomLink: PropTypes.elementType.isRequired,
+};
+
+Budget.defaultProps = {
+  className: '',
+};
+
+const BudgetsGroup = (props) => {
+  const { className, kind, source, budgets, CustomLink } = props;
+  const [showBudgets, setShowBudgets] = useState(false);
+
+  const isFailed = kind === 'danger';
+
+  return (
+    <Alert kind={kind} padding="none" className={cx(css.group, css[kind], className)}>
+      <Box
+        padding={['xsmall', 'small']}
+        className={css.groupHeader}
+        as="button"
+        type="button"
+        onClick={() => setShowBudgets(!showBudgets)}
+      >
+        <FlexStack space="xxsmall" className={css.groupTitle}>
+          <Icon
+            className={css.groupIcon}
+            glyph={isFailed ? Icon.ICONS.ALERT_CIRCLE : Icon.ICONS.CHECK_CIRCLE}
+          />
+          <span>
+            <strong>{budgets.length}</strong>
+            {` budget ${budgets.length > 1 ? 'checks' : 'check'} ${isFailed ? 'failed' : 'passed'}`}
+          </span>
+          <span className={css.groupTitleToggle}>{showBudgets ? 'hide' : 'show'} all</span>
+        </FlexStack>
+      </Box>
+
+      {showBudgets && (
+        <Box padding={['xsmall', 'small']} className={css.groupContent}>
+          <Stack space="none">
+            {budgets.map(([key, budget]) => (
+              <Budget
+                key={key}
+                metricId={`${source}.${key}`}
+                budgetInsight={budget}
+                CustomLink={CustomLink}
+              />
+            ))}
+          </Stack>
+        </Box>
+      )}
+    </Alert>
+  );
+};
+
+BudgetsGroup.propTypes = {
+  className: PropTypes.string,
+  kind: PropTypes.oneOf(['success', 'danger']).isRequired,
+  source: PropTypes.string.isRequired,
+  budgets: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  CustomLink: PropTypes.elementType.isRequired,
+};
+
+BudgetsGroup.defaultProps = {
+  className: '',
+};
+
+export const BudgetInsights = (props) => {
+  const { className, source, budgets, CustomLink } = props;
+
+  const [failedBudgets, passedBudgets] = useMemo(() => {
+    const passed = [];
+    const failed = [];
+
+    Object.entries(budgets).forEach(([key, budget]) => {
+      if (budget.failed) {
+        failed.push([key, budget]);
+      } else {
+        passed.push([key, budget]);
+      }
+    });
+
+    return [failed, passed];
+  }, [budgets]);
+
+  return (
+    <Stack className={className} space="xsmall">
+      {failedBudgets.length > 0 && (
+        <BudgetsGroup
+          kind="danger"
+          source={source}
+          budgets={failedBudgets}
+          CustomLink={CustomLink}
+        />
+      )}
+
+      {passedBudgets.length > 0 && (
+        <BudgetsGroup
+          kind="success"
+          source={source}
+          budgets={passedBudgets}
+          CustomLink={CustomLink}
+        />
+      )}
+    </Stack>
+  );
+};
+
+BudgetInsights.propTypes = {
+  className: PropTypes.string,
+  source: PropTypes.string.isRequired,
+  budgets: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  CustomLink: PropTypes.elementType,
+};
+
+BudgetInsights.defaultProps = {
+  className: '',
+  CustomLink: ComponentLink,
+};

package/src/components/budget-insights/budget-insights.module.css

@@ -0,0 +1,53 @@
+.groupHeader {
+  width: 100%;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: inherit;
+}
+
+.groupTitle {
+  width: 100%;
+  align-items: center;
+}
+
+.groupTitle:hover {
+  color: var(--color-text-dark);
+  text-decoration: underline;
+}
+
+.groupTitleToggle {
+  margin: 0 0 0 auto !important;
+}
+
+.danger .groupIcon {
+  color: var(--color-danger);
+}
+
+.success .groupIcon {
+  color: var(--color-success);
+}
+
+.groupContent {
+  padding-top: 0px;
+  background: transparent;
+}
+
+.budget {
+  display: block;
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.budgetLabel,
+.budgetValue {
+  color: var(--color-text-dark);
+  font-weight: 500;
+}
+
+.budget:hover,
+.budget:focus,
+.budget:active {
+  color: var(--color-text);
+  text-decoration: underline;
+}

package/src/components/budget-insights/index.js

@@ -0,0 +1 @@
+export * from './budget-insights';

package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx

@@ -1,29 +1,43 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { get } from 'lodash';
 import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
+import { FlexStack } from '../../layout/flex-stack';
 import { MetricsTable } from '../metrics-table';
 import { ComponentLink } from '../component-link';
+import { BudgetInfo } from '../budget-info';
+import css from './bundle-assets-totals-table.module.css';
 
 export const BundleAssetsTotalsTable = ({
   className,
   jobs,
   customComponentLink: CustomComponentLink,
 }) => {
-  const items = webpack.compareBySection.sizes(jobs);
-
-  const renderRowHeader = (item) => {
-    const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
-    const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
-
-    return (
-      <CustomComponentLink section={section} title={title} params={params}>
-        {item.label}
-      </CustomComponentLink>
-    );
-  };
+  const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
+  const budgets = jobs[0].insights?.webpack?.budgets;
+
+  const renderRowHeader = useCallback(
+    (item) => {
+      const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
+      const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
+      const [_, ...metricSlugs] = item.key.split('.');
+      const metricKey = metricSlugs.join('.');
+      const budget = get(budgets, metricKey);
+
+      return (
+        <CustomComponentLink section={section} title={title} params={params}>
+          <FlexStack space="xxsmall" className={css.itemTitleText}>
+            <span>{item.label}</span>
+            {budget && <BudgetInfo metricId={item.key} budgetInsight={budget} />}
+          </FlexStack>
+        </CustomComponentLink>
+      );
+    },
+    [CustomComponentLink],
+  );
 
   return (
     <MetricsTable

package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css

@@ -1,3 +1,3 @@
-.title {
-  color: var(--color-text-light);
+.itemTitleText {
+  align-items: center;
 }

package/src/components/index.js

@@ -4,6 +4,7 @@ export { BundleAssetsTotalsTable } from './bundle-assets-totals-table';
 export { BundleAssetsTotalsChartBars } from './bundle-assets-totals-chart-bars';
 export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
+export { BudgetInsights } from './budget-insights';
 export { ComponentLink } from './component-link';
 export { DuplicatePackagesWarning } from './duplicate-packages-warning';
 export { Delta } from './delta';