feat(utils): Duplicate code metrics

relative-ci · Mar 12, 2022 · eb448ff · eb448ff
1 parent 10ff684
commit eb448ff
Show file tree

Hide file tree

Showing 20 changed files with 9,397 additions and 49 deletions.
diff --git a/fixtures/job.current.json b/fixtures/job.current.json
@@ -6995,14 +6995,18 @@
           "name": "./node_modules/material-design-lite/src/mdlComponentHandler.js",
           "size": 17306,
           "chunks": [
-            0
+            0,
+            1,
+            4
           ]
         },
         {
           "name": "./node_modules/material-design-lite/src/button/button.js",
           "size": 3614,
           "chunks": [
-            0
+            0,
+            1,
+            4
           ]
         },
         {
@@ -7016,7 +7020,9 @@
           "name": "./node_modules/material-design-lite/src/spinner/spinner.js",
           "size": 4592,
           "chunks": [
-            0
+            0,
+            1,
+            4
           ]
         },
         {

diff --git a/packages/html-templates/src/app/__snapshots__/app.stories.storyshot b/packages/html-templates/src/app/__snapshots__/app.stories.storyshot
diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.jsx b/packages/ui/src/components/bundle-modules/bundle-modules.jsx
@@ -20,6 +20,7 @@ import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
 import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
+import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableSearch } from '../metrics-table-search';
@@ -33,7 +34,17 @@ const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
 
   const [showHoverCard, setHoverCard] = useState(false);
   const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
-  const content = useMemo(() => <FileName name={row.label} />, [row.label]);
+  const content = useMemo(
+    () => (
+      <span className={css.name}>
+        {row.duplicated && (
+          <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
+        )}
+        <FileName className={css.nameText} name={row.label} />
+      </span>
+    ),
+    [row],
+  );
 
   if (!showHoverCard) {
     return <div onMouseEnter={handleOnMouseEnter}>{content}</div>;
@@ -56,6 +67,7 @@ const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
 RowHeader.propTypes = {
   row: PropTypes.shape({
     label: PropTypes.string,
+    duplicated: PropTypes.bool,
   }).isRequired,
   chunks: PropTypes.arrayOf(
     PropTypes.shape({
@@ -118,6 +130,11 @@ export const BundleModules = ({
       defaultValue: filters.changed,
       disabled: jobs.length <= 1,
     },
+    [MODULE_FILTERS.DUPLICATED]: {
+      label: 'Duplicated',
+      defaultValue: filters[MODULE_FILTERS.DUPLICATED],
+      disabled: jobs.length <= 1,
+    },
     [MODULE_SOURCE_TYPE]: {
       label: 'Source',
       [MODULE_FILTERS.FIRST_PARTY]: {

diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.module.css b/packages/ui/src/components/bundle-modules/bundle-modules.module.css
@@ -12,6 +12,15 @@
   margin-right: -1px; /** collapse border */
 }
 
-.namePopover {
-  min-width: 280px;
+.nameTagDuplicated {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: baseline;
+}
+
+.nameTagDuplicated::before {
+  content: 'D';
+}
+
+.nameText {
+  vertical-align: middle;
 }
diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.utils.js b/packages/ui/src/components/bundle-modules/bundle-modules.utils.js
@@ -12,9 +12,10 @@ import {
 import { SORT_BY_NAME, SORT_BY_SIZE, SORT_BY_DELTA } from './bundle-modules.constants';
 
 export const addRowSourceFlag = (row) => {
-  const { key } = row;
+  const { key, runs } = row;
   const thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
-  return { ...row, thirdParty };
+  const duplicated = Boolean(runs.find((run) => run?.duplicated === true));
+  return { ...row, thirdParty, duplicated };
 };
 
 export const getCustomSort = (sortBy) => (item) => {
@@ -39,10 +40,16 @@ export const getRowFilter = (filters) => (row) => {
     return false;
   }
 
+  // Skip not duplicated rows
+  if (filters[MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
+    return false;
+  }
+
   // Skip not matching source type
   if (
     !(
-      (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`] && row.thirdParty === false) ||
+      (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`] &&
+        row.thirdParty === false) ||
       (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`] && row.thirdParty === true)
     )
   ) {

diff --git a/packages/ui/src/components/bundle-modules/index.jsx b/packages/ui/src/components/bundle-modules/index.jsx
@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { uniqBy, map } from 'lodash';
 import {
+  MODULE_FILTERS,
   getModuleChunkFilters,
   getModuleSourceTypeFilters,
   getModuleFileTypeFilters,
@@ -33,12 +34,14 @@ export const BundleModules = (props) => {
         ...getModuleSourceTypeFilters(true),
         ...getModuleChunkFilters(chunkIds, true),
         ...getModuleFileTypeFilters(true),
+        [MODULE_FILTERS.DUPLICATED]: false,
       },
       allEntriesFilters: {
         changed: false,
         ...getModuleSourceTypeFilters(true),
         ...getModuleChunkFilters(chunkIds, true),
         ...getModuleFileTypeFilters(true),
+        [MODULE_FILTERS.DUPLICATED]: false,
       },
     }),
     [jobs],

diff --git a/packages/ui/src/constants.js b/packages/ui/src/constants.js
@@ -53,5 +53,9 @@ export const METRICS_WEBPACK_GENERAL = [
   'webpack.cacheInvalidation',
 ];
 export const METRICS_WEBPACK_ASSETS = ['webpack.assetCount', 'webpack.chunkCount'];
-export const METRICS_WEBPACK_MODULES = ['webpack.moduleCount'];
+export const METRICS_WEBPACK_MODULES = [
+  'webpack.moduleCount',
+  'webpack.duplicateModulesCount',
+  'webpack.duplicateCode',
+];
 export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
diff --git a/packages/utils/src/config/component-links.js b/packages/utils/src/config/component-links.js
@@ -14,6 +14,7 @@ export const ASSET_FILTERS = {
 
 export const MODULE_FILTERS = {
   CHANGED: 'changed',
+  DUPLICATED: 'md',
   FIRST_PARTY: 'fp',
   THIRD_PARTY: 'tp',
 };

diff --git a/packages/utils/src/constants.ts b/packages/utils/src/constants.ts
@@ -47,6 +47,7 @@ export interface Metric {
 export interface ModuleMetric extends Metric {
   name: string;
   chunkIds: Array<String>;
+  duplicated: boolean;
 }
 
 export interface PackageMetric extends Metric {
@@ -55,6 +56,8 @@ export interface PackageMetric extends Metric {
 
 export interface WebpackMetricsModules {
   metrics: {
+    duplicateCode: MetricRun;
+    duplicateModulesCount: MetricRun;
     modules: Record<string, ModuleMetric>;
   };
 }

diff --git a/packages/utils/src/i18n.js b/packages/utils/src/i18n.js
@@ -6,9 +6,10 @@ export default {
   COMPONENT_LINK_BUNDLE_ASSETS_COUNT: 'View all assets',
   COMPONENT_LINK_BUNDLE_ASSETS_CHUNK_COUNT: 'View all chunks',
   COMPONENT_LINK_MODULES: 'View modules',
+  COMPONENT_LINK_MODULES_DUPLICATE: 'View duplicate modules',
   COMPONENT_LINK_CHUNK_MODULES: 'View chunk modules',
   COMPONENT_LINK_PACKAGES_COUNT: 'View all packages',
   COMPONENT_LINK_PACKAGES_DUPLICATE: 'View all duplicate packages',
   COMPONENT_LINK_VIEW_PACKAGE: 'View package',
-  COMPONENT_LINK_BUNDLE_ASSETS_BY_FILE_TYPE: 'View all <%= label %> assets'
+  COMPONENT_LINK_BUNDLE_ASSETS_BY_FILE_TYPE: 'View all <%= label %> assets',
 };
diff --git a/packages/utils/src/jobs/__tests__/__snapshots__/create-job.js.snap b/packages/utils/src/jobs/__tests__/__snapshots__/create-job.js.snap
@@ -86,6 +86,12 @@ Object {
       "chunkCount": Object {
         "value": 2,
       },
+      "duplicateCode": Object {
+        "value": 0,
+      },
+      "duplicateModulesCount": Object {
+        "value": 0,
+      },
       "duplicatePackagesCount": Object {
         "value": 1,
       },
@@ -97,41 +103,47 @@ Object {
           "chunkIds": Array [
             "1",
           ],
+          "duplicated": false,
           "name": "module-a",
           "value": 1000,
         },
         "module-b": Object {
           "chunkIds": Array [
             "1",
           ],
+          "duplicated": false,
           "name": "module-b",
           "value": 2000,
         },
         "node_modules/package-a/index.js": Object {
           "chunkIds": Array [
             "1",
           ],
+          "duplicated": false,
           "name": "node_modules/package-a/index.js",
           "value": 1000,
         },
         "node_modules/package-a/node_modules/package-c/index.js": Object {
           "chunkIds": Array [
             "1",
           ],
+          "duplicated": false,
           "name": "node_modules/package-a/node_modules/package-c/index.js",
           "value": 1000,
         },
         "node_modules/package-b/index.js": Object {
           "chunkIds": Array [
             "1",
           ],
+          "duplicated": false,
           "name": "node_modules/package-b/index.js",
           "value": 1000,
         },
         "node_modules/package-c/index.js": Object {
           "chunkIds": Array [
             "1",
           ],
+          "duplicated": false,
           "name": "node_modules/package-c/index.js",
           "value": 1000,
         },
@@ -306,6 +318,14 @@ Object {
         "baseline": 0,
         "current": 2,
       },
+      "duplicateCode": Object {
+        "baseline": 0,
+        "current": 0,
+      },
+      "duplicateModulesCount": Object {
+        "baseline": 0,
+        "current": 0,
+      },
       "duplicatePackagesCount": Object {
         "baseline": 0,
         "current": 1,
@@ -421,6 +441,12 @@ Object {
       "chunkCount": Object {
         "value": 2,
       },
+      "duplicateCode": Object {
+        "value": 0,
+      },
+      "duplicateModulesCount": Object {
+        "value": 0,
+      },
       "duplicatePackagesCount": Object {
         "value": 1,
       },
@@ -432,41 +458,47 @@ Object {
           "chunkIds": Array [
             "1",
           ],
+          "duplicated": false,
           "name": "module-a",
           "value": 1000,
         },
         "module-b": Object {
           "chunkIds": Array [
             "1",
           ],
+          "duplicated": false,
           "name": "module-b",
           "value": 2000,
         },
         "node_modules/package-a/index.js": Object {
           "chunkIds": Array [
             "1",
           ],
+          "duplicated": false,
           "name": "node_modules/package-a/index.js",
           "value": 1000,
         },
         "node_modules/package-a/node_modules/package-c/index.js": Object {
           "chunkIds": Array [
             "1",
           ],
+          "duplicated": false,
           "name": "node_modules/package-a/node_modules/package-c/index.js",
           "value": 1000,
         },
         "node_modules/package-b/index.js": Object {
           "chunkIds": Array [
             "1",
           ],
+          "duplicated": false,
           "name": "node_modules/package-b/index.js",
           "value": 1000,
         },
         "node_modules/package-c/index.js": Object {
           "chunkIds": Array [
             "1",
           ],
+          "duplicated": false,
           "name": "node_modules/package-c/index.js",
           "value": 1000,
         },
@@ -641,6 +673,14 @@ Object {
         "baseline": 2,
         "current": 2,
       },
+      "duplicateCode": Object {
+        "baseline": 0,
+        "current": 0,
+      },
+      "duplicateModulesCount": Object {
+        "baseline": 0,
+        "current": 0,
+      },
       "duplicatePackagesCount": Object {
         "baseline": 0,
         "current": 1,