Merge pull request #181 from lonelyghost/ms-show-addon-sizes

Show addon dependency sizes

app/components/dependency-size.js

@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action, get } from '@ember/object';
+
+export default class DependencySizeComponent extends Component {
+  @tracked isViewingDetails;
+  @tracked isViewingOtherAssets;
+  @tracked addonSize;
+
+  get shouldShow() {
+    let addonSize = this.args.addonSize;
+    return addonSize && get(addonSize, 'totalSize') > 0;
+  }
+
+  @action
+  toggleDetail(e) {
+    e.preventDefault();
+    this.isViewingDetails = !this.isViewingDetails;
+    if (!this.isViewingDetails) {
+      this.isViewingOtherAssets = false;
+    }
+  }
+
+  @action
+  toggleOtherAssets(e) {
+    e.preventDefault();
+    this.isViewingOtherAssets = !this.isViewingOtherAssets;
+  }
+}

app/components/dependency-table.hbs

@@ -18,8 +18,8 @@
           {{#each this.devDependencies as |dependency index|}}
             {{#if (or this.showingAllDependencies (lt index this.limit))}}
               <tr>
-                <td class="test-dependency-name">
-                  <LinkTo @route="addons.show" @model={{dependency}}>{{dependency}}</LinkTo>
+                <td class="test-dev-dependency-{{dependency.packageName}}">
+                  <LinkTo @route="addons.show" @model={{dependency.packageName}} class="test-dependency-name">{{dependency.packageName}}</LinkTo>
                 </td>
               </tr>
             {{/if}}
@@ -44,8 +44,11 @@
           {{#each this.dependencies as |dependency index|}}
             {{#if (or this.showingAllDependencies (lt index this.limit))}}
               <tr>
-                <td class="test-dependency-name">
-                  <LinkTo @route="addons.show" @model={{dependency}}>{{dependency}}</LinkTo>
+                <td class="test-dependency-{{dependency.packageName}}">
+                  <LinkTo @route="addons.show" @model={{dependency.packageName}} class="test-dependency-name">{{dependency.packageName}}</LinkTo>
+                  {{#if dependency.size}}
+                    <DependencySize @addonSize={{dependency.size}} />
+                  {{/if}}
                 </td>
               </tr>
             {{/if}}

app/components/dependency-tables.js

@@ -19,11 +19,12 @@ export default class DependencyTables extends Component {
   fetchDependencies(addonVersionId) {
     return this.store.query('addon-dependency', {
       filter: { addonVersionId },
+      include: 'package-addon.latest-addon-version.addon-size',
       sort: 'package',
     }).then((results) => {
       return {
-        dependencies: results.filter(dependencies).map(dep => dep.package),
-        devDependencies: results.filter(devDependencies).map(dep => dep.package)
+        dependencies: results.filter(dependencies).map(dep => dependencyObject(dep)),
+        devDependencies: results.filter(devDependencies).map(dep => dependencyObject(dep))
       };
     });
   }
@@ -35,9 +36,17 @@ export default class DependencyTables extends Component {
       include: 'dependent-version',
     }).then((results) => {
       return {
-        dependencies: results.filter(dependencies).map(dep => dep.dependentVersion.get('addonName')).sort(),
-        devDependencies: results.filter(devDependencies).map(dep => dep.dependentVersion.get('addonName')).sort()
+        dependencies: results.filter(dependencies).map(dep => dependentObject(dep)).sortBy('packageName'),
+        devDependencies: results.filter(devDependencies).map(dep => dependentObject(dep)).sortBy('packageName')
       };
     });
   }
 }
+
+function dependencyObject(dependency) {
+  return { packageName: dependency.get('package'), size: dependency.get('addonSize') };
+}
+
+function dependentObject(dependency) {
+  return { packageName: dependency.get('dependentVersion.addonName'), size: null };
+}

app/helpers/format-bytes.js

@@ -0,0 +1,24 @@
+import { helper } from '@ember/component/helper';
+import { isEmpty } from '@ember/utils';
+
+export function formatBytes([number]/*, hash*/) {
+  if (isEmpty(number)) {
+    return '';
+  }
+  if (number >= Math.pow(1024, 3)) {
+    return format(number, Math.pow(1024, 3), 'GB');
+  }
+  if (number >= Math.pow(1024, 2)) {
+    return format(number, Math.pow(1024, 2), 'MB');
+  }
+  if (number >= 1024) {
+    return format(number, 1024, 'KB');
+  }
+  return `${number} B`;
+}
+
+function format(number, denominator, unit) {
+  return `${parseFloat((number / denominator).toFixed(2))} ${unit}`
+}
+
+export default helper(formatBytes);

app/models/addon-dependency.js

@@ -1,5 +1,5 @@
 import classic from 'ember-classic-decorator';
-import { equal } from '@ember/object/computed';
+import { equal, readOnly } from '@ember/object/computed';
 import Model, { belongsTo, attr } from '@ember-data/model';
 
 @classic
@@ -13,9 +13,15 @@ export default class AddonDependency extends Model {
   @belongsTo('version')
   dependentVersion;
 
+  @belongsTo('addon')
+  packageAddon;
+
   @equal('dependencyType', 'dependencies')
   isDependency;
 
   @equal('dependencyType', 'devDependencies')
   isDevDependency;
+
+  @readOnly('packageAddon.latestAddonVersion.addonSize')
+  addonSize;
 }

app/models/addon-size.js

@@ -1,6 +1,7 @@
 import classic from 'ember-classic-decorator';
 import { computed } from '@ember/object';
 import Model, { belongsTo, attr } from '@ember-data/model';
+import normalizeFingerprintedAsset from 'ember-observer/utils/normalize-fingerprinted-asset';
 
 @classic
 export default class AddonSize extends Model {
@@ -10,28 +11,95 @@ export default class AddonSize extends Model {
   @attr('number')
   appCssSize;
 
+  @attr('number')
+  appJsGzipSize;
+
+  @attr('number')
+  appCssGzipSize;
+
   @attr('number')
   vendorJsSize;
 
   @attr('number')
   vendorCssSize;
 
+  @attr('number')
+  vendorJsGzipSize;
+
+  @attr('number')
+  vendorCssGzipSize;
+
   @attr('number')
   otherJsSize;
 
   @attr('number')
   otherCssSize;
 
+  @attr('number')
+  otherJsGzipSize;
+
+  @attr('number')
+  otherCssGzipSize;
+
+  @attr()
+  otherAssets;
+
   @belongsTo('version')
   addonVersion;
 
+  @computed('otherJsSize', 'otherCssSize')
+  get otherAssetsSize() {
+    return this.otherJsSize + this.otherCssSize;
+  }
+
+  @computed('otherJsGzipSize', 'otherCssGzipSize')
+  get otherAssetsGzipSize() {
+    return this.otherJsGzipSize + this.otherCssGzipSize;
+  }
+
   @computed('appJsSize', 'vendorJsSize', 'otherJsSize')
   get totalJsSize() {
     return this.appJsSize + this.vendorJsSize + this.otherJsSize;
   }
 
+  @computed('appJsGzipSize', 'vendorJsGzipSize', 'otherJsGzipSize')
+  get totalJsGzipSize() {
+    return this.appJsGzipSize + this.vendorJsGzipSize + this.otherJsGzipSize;
+  }
+
   @computed('appCssSize', 'vendorCssSize', 'otherJCssSize')
   get totalCssSize() {
     return this.appCssSize + this.vendorCssSize + this.otherCssSize;
   }
+
+  @computed('appCssGzipSize', 'vendorCssGzipSize', 'otherCssGzipSize')
+  get totalCssGzipSize() {
+    return this.appCssGzipSize + this.vendorCssGzipSize + this.otherCssGzipSize;
+  }
+
+  @computed('totalJsSize', 'totalCssSize')
+  get totalSize() {
+    return this.totalJsSize + this.totalCssSize;
+  }
+
+  @computed('totalJsGzipSize', 'totalCssGzipSize')
+  get totalGzipSize() {
+    return this.totalJsGzipSize + this.totalCssGzipSize;
+  }
+
+  @computed('otherAssets')
+  get hasOtherAssetsFiles() {
+    return this.otherAssets.files && this.otherAssets.files.length > 0;
+  }
+
+  @computed('otherAssets')
+  get normalizedOtherAssetFiles() {
+    return this.otherAssets.files.map(function(f) {
+      return {
+        name: normalizeFingerprintedAsset(f.name),
+        size: f.size,
+        gzipSize: f.gzipSize
+      };
+    });
+  }
 }

app/models/version.js

@@ -21,6 +21,9 @@ export default class Version extends Model {
   @belongsTo('review')
   review;
 
+  @belongsTo('addon-size')
+  addonSize;
+
   @hasMany('addon-dependency')
   dependencies;
 }

app/styles/app.scss

@@ -31,6 +31,7 @@
 @import "canary_test_results";
 @import "admin_review";
 @import "components/date-nav";
+@import "components/dependency-size";
 
 ::-ms-clear {
   display: none;

app/styles/components/_dependency-size.scss

@@ -0,0 +1,57 @@
+.dependency-size {
+
+  .toggle-detail {
+    margin-left: 4px;
+    cursor: pointer;
+    font-family: monospace;
+  }
+
+  .size-detail {
+    font-family: monospace;
+    margin: 6px 0;
+
+    @include media($small-screen) {
+      margin: 10px;
+    }
+  }
+
+  .totals {
+    font-weight: bold;
+  }
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+    margin: 8px 0;
+
+    @include media($small-screen) {
+      margin: 2px 0;
+
+      &.other-assets {
+        padding-left: 10px;
+      }
+    }
+  }
+
+  .column-1 {
+    display: flex;
+    flex-basis: 120px;
+  }
+
+  .column-2 {
+    display: flex;
+    flex-basis: 100%;
+    flex-direction: column;
+    flex: 1;
+
+    @include media($small-screen) {
+      flex-direction: row;
+      .asset-size {
+        padding-left: .5rem;
+      }
+    }
+  }
+
+}

app/templates/components/dependency-size.hbs

@@ -0,0 +1,71 @@
+{{#if this.shouldShow}}
+  <span class="dependency-size">
+    <a role="button" href="#" {{on "click" this.toggleDetail}} class="test-size-summary toggle-detail">
+      {{format-bytes @addonSize.totalSize}} ({{format-bytes @addonSize.totalGzipSize}} gzipped) {{svg-icon (if this.isViewingDetails "expand-less" "expand-more")}}
+    </a>
+
+    {{#if this.isViewingDetails}}
+      <div class="size-detail test-size-detail">
+        {{#if @addonSize.appJsSize}}
+          <div class="row">
+            <div class="column-1">App JS:</div>
+            <div class="column-2 test-app-js">{{format-bytes @addonSize.appJsSize}} <span class="asset-size">({{format-bytes @addonSize.appJsGzipSize}} gzipped)</span></div>
+          </div>
+        {{/if}}
+        {{#if @addonSize.appCssSize}}
+          <div class="row">
+            <div class="column-1">App CSS:</div>
+            <div class="column-2 test-app-css">{{format-bytes @addonSize.appCssSize}} <span class="asset-size">({{format-bytes @addonSize.appCssGzipSize}} gzipped)</span></div>
+          </div>
+        {{/if}}
+        {{#if @addonSize.vendorJsSize}}
+          <div class="row">
+            <div class="column-1">Vendor JS:</div>
+            <div class="column-2 test-vendor-js">{{format-bytes @addonSize.vendorJsSize}} <span class="asset-size">({{format-bytes @addonSize.vendorJsGzipSize}} gzipped)</span></div>
+          </div>
+        {{/if}}
+        {{#if @addonSize.vendorCssSize}}
+          <div class="row">
+            <div class="column-1">Vendor CSS:</div>
+            <div class="column-2 test-vendor-css">{{format-bytes @addonSize.vendorCssSize}} <span class="asset-size">({{format-bytes @addonSize.vendorCssGzipSize}} gzipped)</span></div>
+          </div>
+        {{/if}}
+        {{#if @addonSize.otherAssetsSize}}
+          <div class="row">
+            <div class="column-1">Other Assets:</div>
+            <div class="column-2 test-other-assets">{{format-bytes @addonSize.otherAssetsSize}}
+              <span class="asset-size">
+                ({{format-bytes @addonSize.otherAssetsGzipSize}} gzipped)
+                {{#if @addonSize.hasOtherAssetsFiles}}
+                  <a role="button" href="#" class="test-other-assets-toggle toggle-detail" {{on "click" this.toggleOtherAssets}}>
+                    {{svg-icon (if this.isViewingOtherAssets "expand-less" "expand-more")}}
+                  </a>
+                {{/if}}
+              </span>
+            </div>
+          </div>
+        {{/if}}
+        {{#if this.isViewingOtherAssets}}
+          {{#each @addonSize.normalizedOtherAssetFiles as |file|}}
+            <div class="row other-assets test-other-assets-details">
+              <div class="column-1 test-asset-name">- {{file.name}}:</div>
+              <div class="column-2 test-asset-size">{{format-bytes file.size}} <span class="asset-size">({{format-bytes file.gzipSize}} gzipped)</span></div>
+            </div>
+          {{/each}}
+        {{/if}}
+        {{#if @addonSize.totalJsSize}}
+          <div class="row totals">
+            <div class="column-1">Total JS:</div>
+            <div class="column-2 test-total-js">{{format-bytes @addonSize.totalJsSize}} <span class="asset-size">({{format-bytes @addonSize.totalJsGzipSize}} gzipped)</span></div>
+          </div>
+        {{/if}}
+        {{#if @addonSize.totalCssSize}}
+          <div class="row totals">
+            <div class="column-1">Total CSS:</div>
+            <div class="column-2 test-total-css">{{format-bytes @addonSize.totalCssSize}} <span class="asset-size">({{format-bytes @addonSize.totalCssGzipSize}} gzipped)</span></div>
+          </div>
+        {{/if}}
+      </div>
+    {{/if}}
+  </span>
+{{/if}}