From 8dc2a99926b8d52294c5dc01a5cc4006b1002cec Mon Sep 17 00:00:00 2001 From: Alec Merdler Date: Mon, 31 Jul 2017 12:40:37 -0400 Subject: [PATCH 1/4] refactored Markdown components to reduce bundle size --- package.json | 21 +- .../highlighted-languages.constant.json | 8 + .../inject/inject.decorator.spec.ts | 17 -- .../js/decorators/inject/inject.decorator.ts | 11 - .../markdown-editor.component.spec.ts | 14 +- .../ui/markdown/markdown-editor.component.ts | 9 +- .../ui/markdown/markdown-input.component.ts | 2 + .../markdown/markdown-view.component.spec.ts | 4 +- .../ui/markdown/markdown-view.component.ts | 8 +- .../directives/ui/markdown/markdown.module.ts | 72 +++++++ static/js/main.ts | 1 + static/js/quay.module.ts | 4 +- static/js/services/util-service.js | 6 +- test/data/test.db | Bin 1679360 -> 1687552 bytes webpack.config.js | 17 +- yarn.lock | 194 ++++++++++++++++-- 16 files changed, 315 insertions(+), 73 deletions(-) create mode 100644 static/js/constants/highlighted-languages.constant.json delete mode 100644 static/js/decorators/inject/inject.decorator.spec.ts delete mode 100644 static/js/decorators/inject/inject.decorator.ts create mode 100644 static/js/directives/ui/markdown/markdown.module.ts diff --git a/package.json b/package.json index 9d36e33a3..7f841224b 100644 --- a/package.json +++ b/package.json @@ -4,13 +4,15 @@ "private": true, "version": "1.0.0", "scripts": { - "dev": "./node_modules/.bin/karma start --browsers ChromeHeadless", - "test": "./node_modules/.bin/karma start --single-run --browsers ChromeHeadless", - "test:node": "JASMINE_CONFIG_PATH=static/test/jasmine.json ./node_modules/.bin/jasmine-ts './static/js/**/*.spec.ts'", - "e2e": "./node_modules/.bin/ts-node ./node_modules/.bin/protractor static/test/protractor.conf.ts", - "build": "NODE_ENV=production ./node_modules/.bin/webpack --progress", - "watch": "./node_modules/.bin/webpack --watch", - "lint": "./node_modules/.bin/tslint --type-check -p tsconfig.json -e **/*.spec.ts" + "dev": "karma start --browsers ChromeHeadless", + "test": "karma start --single-run --browsers ChromeHeadless", + "test:node": "JASMINE_CONFIG_PATH=static/test/jasmine.json jasmine-ts './static/js/**/*.spec.ts'", + "e2e": "ts-node protractor static/test/protractor.conf.ts", + "build": "npm run clean && NODE_ENV=production webpack --progress", + "watch": "npm run clean && webpack --watch", + "lint": "tslint --type-check -p tsconfig.json -e **/*.spec.ts", + "analyze": "NODE_ENV=production webpack --profile --json | awk '{if(NR>1)print}' > static/build/stats.json && webpack-bundle-analyzer --mode static -r static/build/report.html static/build/stats.json", + "clean": "rm -f static/build/*" }, "repository": { "type": "git", @@ -32,13 +34,13 @@ "d3": "^3.3.3", "eonasdan-bootstrap-datetimepicker": "^4.17.43", "file-saver": "^1.3.3", + "highlight.js": "^9.12.0", "jquery": "1.12.4", "ng-metadata": "^4.0.1", "raven-js": "^3.1.0", "restangular": "^1.2.0", "rxjs": "^5.0.1", "showdown": "^1.6.4", - "showdown-highlightjs-extension": "^0.1.2", "underscore": "^1.5.2", "urijs": "^1.18.10", "zeroclipboard": "^2.3.0" @@ -75,6 +77,7 @@ "ts-node": "^3.0.6", "tslint": "^5.4.3", "typescript": "^2.2.1", - "webpack": "^2.2" + "webpack": "^2.2", + "webpack-bundle-analyzer": "^2.8.3" } } diff --git a/static/js/constants/highlighted-languages.constant.json b/static/js/constants/highlighted-languages.constant.json new file mode 100644 index 000000000..56ee3c2cf --- /dev/null +++ b/static/js/constants/highlighted-languages.constant.json @@ -0,0 +1,8 @@ +[ + "javascript", + "python", + "bash", + "nginx", + "xml", + "shell" +] diff --git a/static/js/decorators/inject/inject.decorator.spec.ts b/static/js/decorators/inject/inject.decorator.spec.ts deleted file mode 100644 index f3f015e20..000000000 --- a/static/js/decorators/inject/inject.decorator.spec.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Inject } from './inject.decorator'; - - -describe("Decorator: Inject", () => { - - describe("parameter injection", () => { - - it("adds given string to the 'inject' property of the annotated class", () => { - expect(ValidService.$inject).toContain('$scope'); - }); - }); -}); - - -class ValidService { - constructor(@Inject('$scope') private $scope: any) {} -} diff --git a/static/js/decorators/inject/inject.decorator.ts b/static/js/decorators/inject/inject.decorator.ts deleted file mode 100644 index bada5f9c5..000000000 --- a/static/js/decorators/inject/inject.decorator.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Adds the given value to the inject property of the annotated class. - * Used to annotate the constructor parameters of an AngularJS service/component class. - * @param value The string name of the dependency. - */ -export function Inject(value: string) { - return (target: any, propertyKey: string | symbol, parameterIndex: number): void => { - target.$inject = target.$inject = []; - target.$inject[parameterIndex] = value; - }; -} diff --git a/static/js/directives/ui/markdown/markdown-editor.component.spec.ts b/static/js/directives/ui/markdown/markdown-editor.component.spec.ts index e3effd200..70a3cf7a3 100644 --- a/static/js/directives/ui/markdown/markdown-editor.component.spec.ts +++ b/static/js/directives/ui/markdown/markdown-editor.component.spec.ts @@ -8,15 +8,27 @@ describe("MarkdownEditorComponent", () => { var component: MarkdownEditorComponent; var textarea: Mock; var documentMock: Mock; + var $windowMock: Mock; beforeEach(() => { textarea = new Mock(); documentMock = new Mock(); + $windowMock = new Mock(); const $documentMock: any = [documentMock.Object]; - component = new MarkdownEditorComponent($documentMock, 'chrome'); + component = new MarkdownEditorComponent($documentMock, $windowMock.Object, 'chrome'); component.textarea = textarea.Object; }); + describe("onBeforeUnload", () => { + + it("returns false to alert user about losing current changes", () => { + component.changeEditMode("write"); + const allow: boolean = component.onBeforeUnload(); + + expect(allow).toBe(false); + }); + }); + describe("changeEditMode", () => { it("sets component's edit mode to given mode", () => { diff --git a/static/js/directives/ui/markdown/markdown-editor.component.ts b/static/js/directives/ui/markdown/markdown-editor.component.ts index 8cdf50a85..76c3182c2 100644 --- a/static/js/directives/ui/markdown/markdown-editor.component.ts +++ b/static/js/directives/ui/markdown/markdown-editor.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, Input, Output, EventEmitter, ViewChild } from 'ng-metadata/core'; +import { Component, Inject, Input, Output, EventEmitter, ViewChild, HostListener } from 'ng-metadata/core'; import { MarkdownSymbol } from '../../../types/common.types'; import { BrowserPlatform } from '../../../constants/platform.constant'; import './markdown-editor.component.css'; @@ -14,6 +14,7 @@ import './markdown-editor.component.css'; export class MarkdownEditorComponent { @Input('<') public content: string; + @Output() public save: EventEmitter<{editedContent: string}> = new EventEmitter(); @Output() public discard: EventEmitter = new EventEmitter(); @@ -23,8 +24,14 @@ export class MarkdownEditorComponent { private editMode: EditMode = "write"; constructor(@Inject('$document') private $document: ng.IDocumentService, + @Inject('$window') private $window: ng.IWindowService, @Inject('BrowserPlatform') private browserPlatform: BrowserPlatform) { + this.$window.onbeforeunload = this.onBeforeUnload.bind(this); + } + @HostListener('window:beforeunload', []) + public onBeforeUnload(): boolean { + return false; } public changeEditMode(newMode: EditMode): void { diff --git a/static/js/directives/ui/markdown/markdown-input.component.ts b/static/js/directives/ui/markdown/markdown-input.component.ts index 69132feac..9b41fca5a 100644 --- a/static/js/directives/ui/markdown/markdown-input.component.ts +++ b/static/js/directives/ui/markdown/markdown-input.component.ts @@ -14,7 +14,9 @@ export class MarkdownInputComponent { @Input('<') public content: string; @Input('<') public canWrite: boolean; @Input('@') public fieldTitle: string; + @Output() public contentChanged: EventEmitter<{content: string}> = new EventEmitter(); + private isEditing: boolean = false; public editContent(): void { diff --git a/static/js/directives/ui/markdown/markdown-view.component.spec.ts b/static/js/directives/ui/markdown/markdown-view.component.spec.ts index e51d5bdf4..2f2379541 100644 --- a/static/js/directives/ui/markdown/markdown-view.component.spec.ts +++ b/static/js/directives/ui/markdown/markdown-view.component.spec.ts @@ -15,9 +15,7 @@ describe("MarkdownViewComponent", () => { markdownConverterMock = new Mock(); $sceMock = new Mock(); $sanitizeMock = jasmine.createSpy('$sanitizeSpy').and.callFake((html: string) => html); - component = new MarkdownViewComponent((options: ConverterOptions) => markdownConverterMock.Object, - $sceMock.Object, - $sanitizeMock); + component = new MarkdownViewComponent(markdownConverterMock.Object, $sceMock.Object, $sanitizeMock); }); describe("ngOnChanges", () => { diff --git a/static/js/directives/ui/markdown/markdown-view.component.ts b/static/js/directives/ui/markdown/markdown-view.component.ts index b694ce943..d6045af03 100644 --- a/static/js/directives/ui/markdown/markdown-view.component.ts +++ b/static/js/directives/ui/markdown/markdown-view.component.ts @@ -1,7 +1,5 @@ import { Component, Input, Inject, OnChanges, SimpleChanges } from 'ng-metadata/core'; import { Converter, ConverterOptions } from 'showdown'; -import 'showdown-highlightjs-extension'; -import 'highlightjs/styles/vs.css'; import './markdown-view.component.css'; @@ -17,15 +15,15 @@ export class MarkdownViewComponent implements OnChanges { @Input('<') public content: string; @Input('<') public firstLineOnly: boolean = false; @Input('<') public placeholderNeeded: boolean = false; + private convertedHTML: string = ''; private readonly placeholder: string = `

placeholder

`; private readonly markdownChars: string[] = ['#', '-', '>', '`']; - private markdownConverter: Converter; - constructor(@Inject('markdownConverterFactory') private makeConverter: (options?: ConverterOptions) => Converter, + constructor(@Inject('markdownConverter') private markdownConverter: Converter, @Inject('$sce') private $sce: ng.ISCEService, @Inject('$sanitize') private $sanitize: ng.sanitize.ISanitizeService) { - this.markdownConverter = makeConverter({extensions: ['highlightjs']}); + } public ngOnChanges(changes: SimpleChanges): void { diff --git a/static/js/directives/ui/markdown/markdown.module.ts b/static/js/directives/ui/markdown/markdown.module.ts new file mode 100644 index 000000000..82ce0d560 --- /dev/null +++ b/static/js/directives/ui/markdown/markdown.module.ts @@ -0,0 +1,72 @@ +import { NgModule } from 'ng-metadata/core'; +import { Converter, ConverterOptions } from 'showdown'; +import * as showdown from 'showdown'; +import { registerLanguage, highlightAuto } from 'highlight.js/lib/highlight'; +import 'highlight.js/styles/vs.css'; +const highlightedLanguages: string[] = require('../../../constants/highlighted-languages.constant.json'); + + +/** + * Dynamically fetch and register a new language with Highlight.js + */ +export const addHighlightedLanguage = (language: string): Promise<{}> => { + return new Promise((resolve, reject) => { + try { + // TODO(alecmerdler): Use `import()` here instead of `require()` + const langModule = require(`highlight.js/lib/languages/${language}`); + registerLanguage(language, langModule); + resolve(); + } catch (error) { + console.log(`Language ${language} not supported for syntax highlighting`); + reject(error); + } + }); +}; + + +/** + * Showdown JS extension for syntax highlighting using Highlight.js + */ +export const showdownHighlight = (): showdown.FilterExtension => { + const htmlunencode = (text: string) => { + return (text + .replace(/&/g, '&') + .replace(/</g, '<') + .replace(/>/g, '>')); + }; + + const left = '
]*>';
+  const right = '
'; + const flags = 'g'; + const replacement = (wholeMatch: string, match: string, leftSide: string, rightSide: string) => { + // TODO(alecmerdler): Call `addHighlightedLanguage` to load new languages that are detected using code-splitting + match = htmlunencode(match); + return leftSide + highlightAuto(match).value + rightSide; + }; + + return { + type: 'output', + filter: (text, converter, options) => { + return (showdown).helper.replaceRecursiveRegExp(text, replacement, left, right, flags); + } + }; +}; + + +// Dynamically import syntax-highlighting supported languages +highlightedLanguages.forEach((langName) => addHighlightedLanguage(langName)); + + +/** + * Markdown editor and view module. + */ +@NgModule({ + imports: [], + declarations: [], + providers: [ + {provide: 'markdownConverter', useValue: new Converter({extensions: [showdownHighlight]})}, + ], +}) +export class MarkdownModule { + +} diff --git a/static/js/main.ts b/static/js/main.ts index 1ed001411..887445472 100644 --- a/static/js/main.ts +++ b/static/js/main.ts @@ -4,6 +4,7 @@ import { QuayModule } from './quay.module'; import { provideRun } from './quay-run'; import * as angular from 'angular'; + // Load all JS/CSS files into bundle: http://stackoverflow.com/a/30652110 declare var require: any; function requireAll(r) { diff --git a/static/js/quay.module.ts b/static/js/quay.module.ts index 014f2efec..9eaa1683c 100644 --- a/static/js/quay.module.ts +++ b/static/js/quay.module.ts @@ -37,7 +37,7 @@ import { ManageTriggerComponent } from './directives/ui/manage-trigger/manage-tr import { ClipboardCopyDirective } from './directives/ui/clipboard-copy/clipboard-copy.directive'; import { CorTabsModule } from './directives/ui/cor-tabs/cor-tabs.module'; import { TriggerDescriptionComponent } from './directives/ui/trigger-description/trigger-description.component'; -import { Converter, ConverterOptions } from 'showdown'; +import { MarkdownModule } from './directives/ui/markdown/markdown.module'; import * as Clipboard from 'clipboard'; @@ -49,6 +49,7 @@ import * as Clipboard from 'clipboard'; QuayRoutesModule, QuayConfigModule, CorTabsModule, + MarkdownModule, ], declarations: [ RegexMatchViewComponent, @@ -86,7 +87,6 @@ import * as Clipboard from 'clipboard'; DockerfileServiceImpl, DataFileServiceImpl, {provide: 'fileReaderFactory', useValue: () => new FileReader()}, - {provide: 'markdownConverterFactory', useValue: (options?: ConverterOptions) => new Converter(options)}, {provide: 'BrowserPlatform', useValue: browserPlatform}, {provide: 'clipboardFactory', useValue: (trigger, options) => new Clipboard(trigger, options)}, ], diff --git a/static/js/services/util-service.js b/static/js/services/util-service.js index 48895dbf4..8f3f3ea25 100644 --- a/static/js/services/util-service.js +++ b/static/js/services/util-service.js @@ -1,8 +1,8 @@ /** * Service which exposes various utility methods. */ -angular.module('quay').factory('UtilService', ['$sanitize', 'markdownConverterFactory', - function($sanitize, markdownConverterFactory) { +angular.module('quay').factory('UtilService', ['$sanitize', 'markdownConverter', + function($sanitize, markdownConverter) { var utilService = {}; var adBlockEnabled = null; @@ -34,7 +34,7 @@ angular.module('quay').factory('UtilService', ['$sanitize', 'markdownConverterFa }; utilService.getMarkedDown = function(string) { - return markdownConverterFactory().makeHtml(string || ''); + return markdownConverter.makeHtml(string || ''); }; utilService.getFirstMarkdownLineAsText = function(commentString, placeholderNeeded) { diff --git a/test/data/test.db b/test/data/test.db index e109172d6a86edc69ff686a6a5063c939d785ec6..15c7fad71b1638a7c018b213e63c7be43ededfde 100644 GIT binary patch delta 4017 zcmeHJ&2JM&6!(suI^JDp5(1_){uoTeN2)kp8-K(EXi8clR6f)Y0j(*!;7x3Bc3s#3da1c5TP8vkjL}scL1t z$xPmF-pp@)@6GJQ!=Z_Z;p=S;KbuU{+^1webbQTAlZlxG^<4tZd72tb;K55;JBOFl zmS*!G_+{#58x8*9n3LENi4{b&nTe)*}@ zLL8*QOi>Px-n#YHrMFJKZBxYk=qn4sgC?c<7;3{gEa4PRK)AQ?ARbfP&6Gp!c?H?A zA}mnbl(C~|)=cne#d-|+T1R0EX*`V2;?wx9zL9I+w(y&DEKv$)&{YV1)TA`sZ*|$1 z@CZN!{5AwWs&40ztF%YuwJxe%xg?{H%!J*kSTiWZvfs1curursdyw4;5g#!{x4D-J z__;`@KicW%2>Px4#&7aEEMsDqrpgUw`aB6-yI8ud_jL8 z6bZZQ-Mb-jED-Poy8~RP+Xe2u<;6?UA#_w*JQ(ioj&RQU>0B%jj0M8JXgK1J1l!zZ zrT0tZd{96ZvzahY73&0YGjr_wY@F?3oy=3UeFFW+D2ua*DH^i#SZo#chV%^lHT+ij z>j+l;VZR~6DxmDIqp1A;G4iOt&7xhvkhLh*>!@=hNI1u?)DfbYo_b?R^#U}_mVoCc6u&W<)6qCC8ZoLBEGA}}+U1*`$=1u!dE zBbW`024mDai|onA3?4FJ+YJ+*x7|?LTlQI7amtEllWhw%!wuRRbE%O`T0|Wk$HiPe zB@L6Tn2~d-yqvw<(LvLPgi&GOTsD=-(>%|ghf%IHf@yL#PsYjXvP=qOC@YVU9lox! zLUzXFrf^d6Bc25KC&NWJ&WGCqZ1&e!#S< zeq35h{+uqv~lNmnwN5msTdeHhN~}$EAWENsFszzdq8_ zAI^R`|Kn1r0E$`#EKksiKp$v18kh7c&{lnR8I(~g>j38K6|x-t2-E@$YKq~IUJc&D z)Szcs&r=mWjjrBx(=#qT4@HYS|2!3~++;>l>Pi;1V$^m3fBrEM%NkxOxas}nyJu!s zy@)Fx$Nxpto}<4Nai}7qQN>ga`?#x8Fw-Y$&${|mrF~TWx6gWw6P!HngcIDWKb2GF a+9Ry}2wTS^T)(GMFLM1Z#Wi0R-ojtw9(bSt delta 506 zcmYk&K}Z`x6b9g#w@KH{?&hhnYGSP0U_k{XwzStMl;X{x6nb+Hi4wFVbqgXYtf*Mq zw2c%QP!I7USS1ERnM)3W-dc+ES}3C6sR!?h^lj5a4<9qU|IK?at~=o#jThSd$BgmK zbt^%a-pjyZY9+}}UAQOv zUHGcgwr}F*9q8is2WXN%^U&?JoCvi5y>g%cC$*Nd5_HImZMgq$KoKnYs0hbi`a@O^ zV8{#J2(|15WmxipU;db%4{~vI0MXUGDiDSEh@adcDybtH2@qZGRgD)HI(;MRF@_}^ zmqyXdYZc3W%VlieeCq3b1{%}Cy#KjY=VV^yrqVF__pqkZxvZ0Uot>WT6Stqu&ehVP aNrD7PJ!v3~Bt)9XUD8ZiWa+SV=0.0.5" ultron "1.0.x" +ws@^2.3.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/ws/-/ws-2.3.1.tgz#6b94b3e447cb6a363f785eaf94af6359e8e81c80" + dependencies: + safe-buffer "~5.0.1" + ultron "~1.1.0" + wtf-8@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/wtf-8/-/wtf-8-1.0.0.tgz#392d8ba2d0f1c34d1ee2d630f15d0efb68e1048a" From 41c12c853c1cc754dd67ff81cf5df70751ee3651 Mon Sep 17 00:00:00 2001 From: Alec Merdler Date: Tue, 1 Aug 2017 13:28:24 -0400 Subject: [PATCH 2/4] use Webpack code-splitting to dynamically import Highlight.js languages as they are detected by Showdown Markdown extension --- Dockerfile | 9 +++--- endpoints/common.py | 6 ++-- package.json | 2 -- .../markdown-editor.component.spec.ts | 31 ++++++++++++++++++- .../ui/markdown/markdown-editor.component.ts | 12 +++++-- .../directives/ui/markdown/markdown.module.ts | 20 +++++++----- static/js/types/custom.d.ts | 3 ++ static/test/test-index.ts | 2 +- webpack.config.js | 18 +++++------ 9 files changed, 70 insertions(+), 33 deletions(-) create mode 100644 static/js/types/custom.d.ts diff --git a/Dockerfile b/Dockerfile index 0f75ebac4..3f3bc05c0 100644 --- a/Dockerfile +++ b/Dockerfile @@ -20,15 +20,14 @@ RUN virtualenv --distribute venv \ # Install front-end dependencies # JS depedencies -COPY yarn.lock ./ -RUN yarn install --ignore-engines +COPY yarn.lock package.json tsconfig.json webpack.config.js tslint.json ./ +RUN yarn install --ignore-engines # JS compile COPY static static -COPY package.json tsconfig.json webpack.config.js tslint.json ./ RUN yarn build \ - && jpegoptim static/img/**/*.jpg \ - && optipng -clobber -quiet static/img/**/*.png + && jpegoptim static/img/**/*.jpg \ + && optipng -clobber -quiet static/img/**/*.png COPY . . diff --git a/endpoints/common.py b/endpoints/common.py index 26b45848f..1693c5762 100644 --- a/endpoints/common.py +++ b/endpoints/common.py @@ -56,10 +56,10 @@ def common_login(user_uuid, permanent_session=True): return False -def _list_files(path, extension): +def _list_files(path, extension, contains=""): """ Returns a list of all the files with the given extension found under the given path. """ def matches(f): - return os.path.splitext(f)[1] == '.' + extension and f.split(os.path.extsep)[1] != 'spec' + return os.path.splitext(f)[1] == '.' + extension and contains in os.path.splitext(f)[0] def join_path(dp, f): # Remove the static/ prefix. It is added in the template. @@ -74,7 +74,7 @@ def render_page_template(name, route_data=None, **kwargs): library_styles = [] main_styles = [] library_scripts = [] - main_scripts = _list_files('build', 'js') + main_scripts = _list_files('build', 'js', "bundle") use_cdn = app.config.get('USE_CDN', True) if request.args.get('use_cdn') is not None: diff --git a/package.json b/package.json index 7f841224b..df292d270 100644 --- a/package.json +++ b/package.json @@ -53,8 +53,6 @@ "@types/core-js": "^0.9.39", "@types/jasmine": "^2.5.41", "@types/jquery": "^2.0.40", - "@types/react": "0.14.39", - "@types/react-dom": "0.14.17", "@types/showdown": "^1.4.32", "angular-mocks": "1.6.2", "css-loader": "0.25.0", diff --git a/static/js/directives/ui/markdown/markdown-editor.component.spec.ts b/static/js/directives/ui/markdown/markdown-editor.component.spec.ts index 70a3cf7a3..a1a9f32d3 100644 --- a/static/js/directives/ui/markdown/markdown-editor.component.spec.ts +++ b/static/js/directives/ui/markdown/markdown-editor.component.spec.ts @@ -29,6 +29,16 @@ describe("MarkdownEditorComponent", () => { }); }); + describe("ngOnDestroy", () => { + + it("removes 'beforeunload' event listener", () => { + $windowMock.setup(mock => mock.onbeforeunload).is(() => 1); + component.ngOnDestroy(); + + expect($windowMock.Object.onbeforeunload.call(this)).toEqual(null); + }); + }); + describe("changeEditMode", () => { it("sets component's edit mode to given mode", () => { @@ -147,7 +157,15 @@ describe("MarkdownEditorComponent", () => { describe("discardChanges", () => { - it("emits output event with no content", (done) => { + it("prompts user to confirm discarding changes", () => { + const confirmSpy: Spy = $windowMock.setup(mock => mock.confirm).is((message) => false).Spy; + component.discardChanges(); + + expect(confirmSpy.calls.argsFor(0)[0]).toEqual(`Are you sure you want to discard your changes?`); + }); + + it("emits output event with no content if user confirms discarding changes", (done) => { + $windowMock.setup(mock => mock.confirm).is((message) => true); component.discard.subscribe((event: {}) => { expect(event).toEqual({}); done(); @@ -155,5 +173,16 @@ describe("MarkdownEditorComponent", () => { component.discardChanges(); }); + + it("does not emit output event if user declines confirmation of discarding changes", (done) => { + $windowMock.setup(mock => mock.confirm).is((message) => false); + component.discard.subscribe((event: {}) => { + fail(`Should not emit output event`); + done(); + }); + + component.discardChanges(); + done(); + }); }); }); diff --git a/static/js/directives/ui/markdown/markdown-editor.component.ts b/static/js/directives/ui/markdown/markdown-editor.component.ts index 76c3182c2..38f3d098b 100644 --- a/static/js/directives/ui/markdown/markdown-editor.component.ts +++ b/static/js/directives/ui/markdown/markdown-editor.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, Input, Output, EventEmitter, ViewChild, HostListener } from 'ng-metadata/core'; +import { Component, Inject, Input, Output, EventEmitter, ViewChild, HostListener, OnDestroy } from 'ng-metadata/core'; import { MarkdownSymbol } from '../../../types/common.types'; import { BrowserPlatform } from '../../../constants/platform.constant'; import './markdown-editor.component.css'; @@ -11,7 +11,7 @@ import './markdown-editor.component.css'; selector: 'markdown-editor', templateUrl: '/static/js/directives/ui/markdown/markdown-editor.component.html' }) -export class MarkdownEditorComponent { +export class MarkdownEditorComponent implements OnDestroy { @Input('<') public content: string; @@ -34,6 +34,10 @@ export class MarkdownEditorComponent { return false; } + public ngOnDestroy(): void { + this.$window.onbeforeunload = () => null; + } + public changeEditMode(newMode: EditMode): void { this.editMode = newMode; } @@ -110,7 +114,9 @@ export class MarkdownEditorComponent { } public discardChanges(): void { - this.discard.emit({}); + if (this.$window.confirm(`Are you sure you want to discard your changes?`)) { + this.discard.emit({}); + } } public get currentEditMode(): EditMode { diff --git a/static/js/directives/ui/markdown/markdown.module.ts b/static/js/directives/ui/markdown/markdown.module.ts index 82ce0d560..d1792d283 100644 --- a/static/js/directives/ui/markdown/markdown.module.ts +++ b/static/js/directives/ui/markdown/markdown.module.ts @@ -1,5 +1,5 @@ import { NgModule } from 'ng-metadata/core'; -import { Converter, ConverterOptions } from 'showdown'; +import { Converter } from 'showdown'; import * as showdown from 'showdown'; import { registerLanguage, highlightAuto } from 'highlight.js/lib/highlight'; import 'highlight.js/styles/vs.css'; @@ -10,14 +10,15 @@ const highlightedLanguages: string[] = require('../../../constants/highlighted-l * Dynamically fetch and register a new language with Highlight.js */ export const addHighlightedLanguage = (language: string): Promise<{}> => { - return new Promise((resolve, reject) => { + return new Promise(async(resolve, reject) => { try { - // TODO(alecmerdler): Use `import()` here instead of `require()` - const langModule = require(`highlight.js/lib/languages/${language}`); + // TODO(alecmerdler): Use `import()` here instead of `System.import()` after upgrading to TypeScript 2.4 + const langModule = await System.import(`highlight.js/lib/languages/${language}`); registerLanguage(language, langModule); + console.debug(`Language ${language} registered for syntax highlighting`); resolve(); } catch (error) { - console.log(`Language ${language} not supported for syntax highlighting`); + console.debug(`Language ${language} not supported for syntax highlighting`); reject(error); } }); @@ -25,7 +26,7 @@ export const addHighlightedLanguage = (language: string): Promise<{}> => { /** - * Showdown JS extension for syntax highlighting using Highlight.js + * Showdown JS extension for syntax highlighting using Highlight.js. Will attempt to register detected languages. */ export const showdownHighlight = (): showdown.FilterExtension => { const htmlunencode = (text: string) => { @@ -39,7 +40,10 @@ export const showdownHighlight = (): showdown.FilterExtension => { const right = ''; const flags = 'g'; const replacement = (wholeMatch: string, match: string, leftSide: string, rightSide: string) => { - // TODO(alecmerdler): Call `addHighlightedLanguage` to load new languages that are detected using code-splitting + const language: string = leftSide.slice(leftSide.indexOf('language-') + ('language-').length, + leftSide.indexOf('"', leftSide.indexOf('language-'))); + addHighlightedLanguage(language).catch(error => null); + match = htmlunencode(match); return leftSide + highlightAuto(match).value + rightSide; }; @@ -53,7 +57,7 @@ export const showdownHighlight = (): showdown.FilterExtension => { }; -// Dynamically import syntax-highlighting supported languages +// Import default syntax-highlighting supported languages highlightedLanguages.forEach((langName) => addHighlightedLanguage(langName)); diff --git a/static/js/types/custom.d.ts b/static/js/types/custom.d.ts new file mode 100644 index 000000000..94e6d20d5 --- /dev/null +++ b/static/js/types/custom.d.ts @@ -0,0 +1,3 @@ +declare var System: { + import: (module: string) => Promise; +}; diff --git a/static/test/test-index.ts b/static/test/test-index.ts index a7e4772b0..4592bcf12 100644 --- a/static/test/test-index.ts +++ b/static/test/test-index.ts @@ -1,4 +1,4 @@ -declare var require: any; +declare var require: NodeRequire; // Require all modules ending in ".spec.ts" from the js directory and all subdirectories var testsContext = (require).context("../js", true, /\.spec\.ts$/); diff --git a/webpack.config.js b/webpack.config.js index 9d4d20d3f..35fd72fa0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,13 +1,14 @@ const webpack = require('webpack'); const path = require('path'); -const highlightedLanguages = require('./static/js/constants/highlighted-languages.constant.json'); let config = { entry: "./static/js/main.ts", output: { path: path.resolve(__dirname, "static/build"), - filename: 'quay-frontend.js' + publicPath: "/static/build/", + filename: '[name]-quay-frontend.bundle.js', + chunkFilename: '[name]-quay-frontend.chunk.js' }, resolve: { extensions: [".ts", ".js"], @@ -47,10 +48,6 @@ let config = { angular: "angular", $: "jquery", }), - // Whitelist highlight-supported languages (based on https://bjacobel.com/2016/12/04/highlight-bundle-size/) - new webpack.ContextReplacementPlugin( - /highlight\.js\/lib\/languages$/, - new RegExp(`^./(${highlightedLanguages.join('|')})$`)), ], devtool: "cheap-module-source-map", }; @@ -60,14 +57,15 @@ let config = { * Production settings */ if (process.env.NODE_ENV === 'production') { - config.plugins.push( + config.plugins.concat([ new webpack.optimize.UglifyJsPlugin({ sourceMap: true, // Disable mangle to prevent AngularJS errors mangle: false - }) - ); - config.output.filename = 'quay-frontend-[hash].js'; + }), + new webpack.optimize.CommonsChunkPlugin({name: 'common'}), + ]); + config.output.filename = '[name]-quay-frontend-[hash].bundle.js'; } module.exports = config; From 82a08a942e6ea9e0c2f017279284c8530497f4c0 Mon Sep 17 00:00:00 2001 From: Alec Merdler Date: Wed, 2 Aug 2017 10:27:44 -0400 Subject: [PATCH 3/4] removed Rickshaw dependency used by dead code --- package.json | 2 +- static/css/core-ui.css | 10 - static/directives/realtime-area-chart.html | 6 - static/directives/realtime-line-chart.html | 6 - static/js/core-ui.js | 230 --------------------- static/lib/rickshaw.min.css | 1 - static/lib/rickshaw.min.js | 3 - 7 files changed, 1 insertion(+), 257 deletions(-) delete mode 100644 static/directives/realtime-area-chart.html delete mode 100644 static/directives/realtime-line-chart.html delete mode 100644 static/lib/rickshaw.min.css delete mode 100644 static/lib/rickshaw.min.js diff --git a/package.json b/package.json index df292d270..fa3c588a8 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "dev": "karma start --browsers ChromeHeadless", "test": "karma start --single-run --browsers ChromeHeadless", "test:node": "JASMINE_CONFIG_PATH=static/test/jasmine.json jasmine-ts './static/js/**/*.spec.ts'", - "e2e": "ts-node protractor static/test/protractor.conf.ts", + "e2e": "ts-node ./node_modules/.bin/protractor static/test/protractor.conf.ts", "build": "npm run clean && NODE_ENV=production webpack --progress", "watch": "npm run clean && webpack --watch", "lint": "tslint --type-check -p tsconfig.json -e **/*.spec.ts", diff --git a/static/css/core-ui.css b/static/css/core-ui.css index d28c74129..76e6ca859 100644 --- a/static/css/core-ui.css +++ b/static/css/core-ui.css @@ -920,16 +920,6 @@ a:focus { margin-top: 6px; } -.realtime-area-chart, .realtime-line-chart { - margin: 10px; - text-align: center; -} - -.rickshaw_graph { - overflow: hidden; - padding-bottom: 40px; -} - .cor-container { padding-left: 15px; padding-right: 15px; diff --git a/static/directives/realtime-area-chart.html b/static/directives/realtime-area-chart.html deleted file mode 100644 index b6d16741c..000000000 --- a/static/directives/realtime-area-chart.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
-
-
-
-
diff --git a/static/directives/realtime-line-chart.html b/static/directives/realtime-line-chart.html deleted file mode 100644 index 36c0602c5..000000000 --- a/static/directives/realtime-line-chart.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
-
-
-
-
diff --git a/static/js/core-ui.js b/static/js/core-ui.js index 3d94d659c..4e9f9814e 100644 --- a/static/js/core-ui.js +++ b/static/js/core-ui.js @@ -302,236 +302,6 @@ angular.module("core-ui", []) return directiveDefinitionObject; }) - .directive('realtimeAreaChart', function () { - var directiveDefinitionObject = { - priority: 0, - templateUrl: '/static/directives/realtime-area-chart.html', - replace: false, - transclude: false, - restrict: 'C', - scope: { - 'data': '=data', - 'labels': '=labels', - 'colors': '=colors', - 'counter': '=counter' - }, - controller: function($scope, $element) { - var graph = null; - var series = []; - var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum14' } ); - var colors = $scope.colors || []; - - var setupGraph = function() { - for (var i = 0; i < $scope.labels.length; ++i) { - series.push({ - name: $scope.labels[i], - color: i >= colors.length ? palette.color(): $scope.colors[i], - stroke: 'rgba(0,0,0,0.15)', - data: [] - }); - } - - var options = { - element: $element.find('.chart')[0], - renderer: 'area', - stroke: true, - series: series, - min: 0, - padding: { - 'top': 0.3, - 'left': 0, - 'right': 0, - 'bottom': 0.3 - } - }; - - if ($scope.minimum != null) { - options['min'] = $scope.minimum == 'auto' ? 'auto' : $scope.minimum * 1; - } else { - options['min'] = 0; - } - - if ($scope.maximum != null) { - options['max'] = $scope.maximum == 'auto' ? 'auto' : $scope.maximum * 1; - } - - graph = new Rickshaw.Graph(options); - - xaxes = new Rickshaw.Graph.Axis.Time({ - graph: graph, - timeFixture: new Rickshaw.Fixtures.Time.Local() - }); - - yaxes = new Rickshaw.Graph.Axis.Y({ - graph: graph, - tickFormat: Rickshaw.Fixtures.Number.formatKMBT - }); - - hoverDetail = new Rickshaw.Graph.HoverDetail({ - graph: graph, - xFormatter: function(x) { - return new Date(x * 1000).toString(); - } - }); - }; - - var refresh = function(data) { - if (!data || $scope.counter < 0) { return; } - if (!graph) { - setupGraph(); - } - - var timecode = new Date().getTime() / 1000; - for (var i = 0; i < $scope.data.length; ++i) { - var arr = series[i].data; - arr.push( - {'x': timecode, 'y': $scope.data[i] } - ); - - if (arr.length > 10) { - series[i].data = arr.slice(arr.length - 10, arr.length); - } - } - - graph.renderer.unstack = true; - graph.update(); - }; - - $scope.$watch('counter', function() { - refresh($scope.data_raw); - }); - - $scope.$watch('data', function(data) { - $scope.data_raw = data; - refresh($scope.data_raw); - }); - } - }; - return directiveDefinitionObject; - }) - - - .directive('realtimeLineChart', function () { - var directiveDefinitionObject = { - priority: 0, - templateUrl: '/static/directives/realtime-line-chart.html', - replace: false, - transclude: false, - restrict: 'C', - scope: { - 'data': '=data', - 'labels': '=labels', - 'counter': '=counter', - 'labelTemplate': '@labelTemplate', - 'minimum': '@minimum', - 'maximum': '@maximum' - }, - controller: function($scope, $element) { - var graph = null; - var xaxes = null; - var yaxes = null; - var hoverDetail = null; - var series = []; - var counter = 0; - var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum14' } ); - - var setupGraph = function() { - var options = { - element: $element.find('.chart')[0], - renderer: 'line', - series: series, - padding: { - 'top': 0.3, - 'left': 0, - 'right': 0, - 'bottom': 0.3 - } - }; - - if ($scope.minimum != null) { - options['min'] = $scope.minimum == 'auto' ? 'auto' : $scope.minimum * 1; - } else { - options['min'] = 0; - } - - if ($scope.maximum != null) { - options['max'] = $scope.maximum == 'auto' ? 'auto' : $scope.maximum * 1; - } - - graph = new Rickshaw.Graph(options); - xaxes = new Rickshaw.Graph.Axis.Time({ - graph: graph, - timeFixture: new Rickshaw.Fixtures.Time.Local() - }); - - yaxes = new Rickshaw.Graph.Axis.Y({ - graph: graph, - tickFormat: Rickshaw.Fixtures.Number.formatKMBT - }); - - hoverDetail = new Rickshaw.Graph.HoverDetail({ - graph: graph, - xFormatter: function(x) { - return new Date(x * 1000).toString(); - } - }); - }; - - var refresh = function(data) { - if (data == null) { return; } - if (!graph) { - setupGraph(); - } - - if (typeof data == 'number') { - data = [data]; - } - - if ($scope.labels) { - data = data.slice(0, $scope.labels.length); - } - - if (series.length == 0){ - for (var i = 0; i < data.length; ++i) { - var title = $scope.labels ? $scope.labels[i] : $scope.labelTemplate.replace('{x}', i + 1); - series.push({ - 'color': palette.color(), - 'data': [], - 'name': title - }) - } - } - - counter++; - var timecode = new Date().getTime() / 1000; - - for (var i = 0; i < data.length; ++i) { - var arr = series[i].data; - arr.push({ - 'x': timecode, - 'y': data[i] - }) - - if (arr.length > 10) { - series[i].data = arr.slice(arr.length - 10, arr.length); - } - } - - graph.update(); - }; - - $scope.$watch('counter', function(counter) { - refresh($scope.data_raw); - }); - - $scope.$watch('data', function(data) { - $scope.data_raw = data; - }); - } - }; - return directiveDefinitionObject; - }) - .directive('corProgressBar', function() { var directiveDefinitionObject = { priority: 4, diff --git a/static/lib/rickshaw.min.css b/static/lib/rickshaw.min.css deleted file mode 100644 index d1b32d8eb..000000000 --- a/static/lib/rickshaw.min.css +++ /dev/null @@ -1 +0,0 @@ -.rickshaw_graph .detail{pointer-events:none;position:absolute;top:0;z-index:2;background:rgba(0,0,0,.1);bottom:0;width:1px;transition:opacity .25s linear;-moz-transition:opacity .25s linear;-o-transition:opacity .25s linear;-webkit-transition:opacity .25s linear}.rickshaw_graph .detail.inactive{opacity:0}.rickshaw_graph .detail .item.active{opacity:1}.rickshaw_graph .detail .x_label{font-family:Arial,sans-serif;border-radius:3px;padding:6px;opacity:.5;border:1px solid #e0e0e0;font-size:12px;position:absolute;background:#fff;white-space:nowrap}.rickshaw_graph .detail .x_label.left{left:0}.rickshaw_graph .detail .x_label.right{right:0}.rickshaw_graph .detail .item{position:absolute;z-index:2;border-radius:3px;padding:.25em;font-size:12px;font-family:Arial,sans-serif;opacity:0;background:rgba(0,0,0,.4);color:#fff;border:1px solid rgba(0,0,0,.4);margin-left:1em;margin-right:1em;margin-top:-1em;white-space:nowrap}.rickshaw_graph .detail .item.left{left:0}.rickshaw_graph .detail .item.right{right:0}.rickshaw_graph .detail .item.active{opacity:1;background:rgba(0,0,0,.8)}.rickshaw_graph .detail .item:after{position:absolute;display:block;width:0;height:0;content:"";border:5px solid transparent}.rickshaw_graph .detail .item.left:after{top:1em;left:-5px;margin-top:-5px;border-right-color:rgba(0,0,0,.8);border-left-width:0}.rickshaw_graph .detail .item.right:after{top:1em;right:-5px;margin-top:-5px;border-left-color:rgba(0,0,0,.8);border-right-width:0}.rickshaw_graph .detail .dot{width:4px;height:4px;margin-left:-3px;margin-top:-3.5px;border-radius:5px;position:absolute;box-shadow:0 0 2px rgba(0,0,0,.6);box-sizing:content-box;-moz-box-sizing:content-box;background:#fff;border-width:2px;border-style:solid;display:none;background-clip:padding-box}.rickshaw_graph .detail .dot.active{display:block}.rickshaw_graph{position:relative}.rickshaw_graph svg{display:block;overflow:hidden}.rickshaw_graph .x_tick{position:absolute;top:0;bottom:0;width:0;border-left:1px dotted rgba(0,0,0,.2);pointer-events:none}.rickshaw_graph .x_tick .title{position:absolute;font-size:12px;font-family:Arial,sans-serif;opacity:.5;white-space:nowrap;margin-left:3px;bottom:1px}.rickshaw_annotation_timeline{height:1px;border-top:1px solid #e0e0e0;margin-top:10px;position:relative}.rickshaw_annotation_timeline .annotation{position:absolute;height:6px;width:6px;margin-left:-2px;top:-3px;border-radius:5px;background-color:rgba(0,0,0,.25)}.rickshaw_graph .annotation_line{position:absolute;top:0;bottom:-6px;width:0;border-left:2px solid rgba(0,0,0,.3);display:none}.rickshaw_graph .annotation_line.active{display:block}.rickshaw_graph .annotation_range{background:rgba(0,0,0,.1);display:none;position:absolute;top:0;bottom:-6px}.rickshaw_graph .annotation_range.active{display:block}.rickshaw_graph .annotation_range.active.offscreen{display:none}.rickshaw_annotation_timeline .annotation .content{background:#fff;color:#000;opacity:.9;padding:5px;box-shadow:0 0 2px rgba(0,0,0,.8);border-radius:3px;position:relative;z-index:20;font-size:12px;padding:6px 8px 8px;top:18px;left:-11px;width:160px;display:none;cursor:pointer}.rickshaw_annotation_timeline .annotation .content:before{content:"\25b2";position:absolute;top:-11px;color:#fff;text-shadow:0 -1px 1px rgba(0,0,0,.8)}.rickshaw_annotation_timeline .annotation.active,.rickshaw_annotation_timeline .annotation:hover{background-color:rgba(0,0,0,.8);cursor:none}.rickshaw_annotation_timeline .annotation .content:hover{z-index:50}.rickshaw_annotation_timeline .annotation.active .content{display:block}.rickshaw_annotation_timeline .annotation:hover .content{display:block;z-index:50}.rickshaw_graph .y_axis,.rickshaw_graph .x_axis_d3{fill:none}.rickshaw_graph .y_ticks .tick line,.rickshaw_graph .x_ticks_d3 .tick{stroke:rgba(0,0,0,.16);stroke-width:2px;shape-rendering:crisp-edges;pointer-events:none}.rickshaw_graph .y_grid .tick,.rickshaw_graph .x_grid_d3 .tick{z-index:-1;stroke:rgba(0,0,0,.2);stroke-width:1px;stroke-dasharray:1 1}.rickshaw_graph .y_grid .tick[data-y-value="0"]{stroke-dasharray:1 0}.rickshaw_graph .y_grid path,.rickshaw_graph .x_grid_d3 path{fill:none;stroke:none}.rickshaw_graph .y_ticks path,.rickshaw_graph .x_ticks_d3 path{fill:none;stroke:gray}.rickshaw_graph .y_ticks text,.rickshaw_graph .x_ticks_d3 text{opacity:.5;font-size:12px;pointer-events:none}.rickshaw_graph .x_tick.glow .title,.rickshaw_graph .y_ticks.glow text{fill:#000;color:#000;text-shadow:-1px 1px 0 rgba(255,255,255,.1),1px -1px 0 rgba(255,255,255,.1),1px 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1),0 -1px 0 rgba(255,255,255,.1),1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1),-1px -1px 0 rgba(255,255,255,.1)}.rickshaw_graph .x_tick.inverse .title,.rickshaw_graph .y_ticks.inverse text{fill:#fff;color:#fff;text-shadow:-1px 1px 0 rgba(0,0,0,.8),1px -1px 0 rgba(0,0,0,.8),1px 1px 0 rgba(0,0,0,.8),0 1px 0 rgba(0,0,0,.8),0 -1px 0 rgba(0,0,0,.8),1px 0 0 rgba(0,0,0,.8),-1px 0 0 rgba(0,0,0,.8),-1px -1px 0 rgba(0,0,0,.8)}.rickshaw_legend{font-family:Arial;font-size:12px;color:#fff;background:#404040;display:inline-block;padding:12px 5px;border-radius:2px;position:relative}.rickshaw_legend:hover{z-index:10}.rickshaw_legend .swatch{width:10px;height:10px;border:1px solid rgba(0,0,0,.2)}.rickshaw_legend .line{clear:both;line-height:140%;padding-right:15px}.rickshaw_legend .line .swatch{display:inline-block;margin-right:3px;border-radius:2px}.rickshaw_legend .label{margin:0;white-space:nowrap;display:inline;font-size:inherit;background-color:transparent;color:inherit;font-weight:400;line-height:normal;padding:0;text-shadow:none}.rickshaw_legend .action:hover{opacity:.6}.rickshaw_legend .action{margin-right:.2em;font-size:10px;opacity:.2;cursor:pointer;font-size:14px}.rickshaw_legend .line.disabled{opacity:.4}.rickshaw_legend ul{list-style-type:none;margin:0;padding:0;margin:2px;cursor:pointer}.rickshaw_legend li{padding:0 0 0 2px;min-width:80px;white-space:nowrap}.rickshaw_legend li:hover{background:rgba(255,255,255,.08);border-radius:3px}.rickshaw_legend li:active{background:rgba(255,255,255,.2);border-radius:3px} \ No newline at end of file diff --git a/static/lib/rickshaw.min.js b/static/lib/rickshaw.min.js deleted file mode 100644 index bd5769912..000000000 --- a/static/lib/rickshaw.min.js +++ /dev/null @@ -1,3 +0,0 @@ -(function(root,factory){if(typeof define==="function"&&define.amd){define(["d3"],function(d3){return root.Rickshaw=factory(d3)})}else if(typeof exports==="object"){module.exports=factory(require("d3"))}else{root.Rickshaw=factory(d3)}})(this,function(d3){var Rickshaw={namespace:function(namespace,obj){var parts=namespace.split(".");var parent=Rickshaw;for(var i=1,length=parts.length;i0){var x=s.data[0].x;var y=s.data[0].y;if(typeof x!="number"||typeof y!="number"&&y!==null){throw"x and y properties of points should be numbers instead of "+typeof x+" and "+typeof y}}if(s.data.length>=3){if(s.data[2].xthis.window.xMax)isInRange=false;return isInRange}return true};this.onUpdate=function(callback){this.updateCallbacks.push(callback)};this.onConfigure=function(callback){this.configureCallbacks.push(callback)};this.registerRenderer=function(renderer){this._renderers=this._renderers||{};this._renderers[renderer.name]=renderer};this.configure=function(args){this.config=this.config||{};if(args.width||args.height){this.setSize(args)}Rickshaw.keys(this.defaults).forEach(function(k){this.config[k]=k in args?args[k]:k in this?this[k]:this.defaults[k]},this);Rickshaw.keys(this.config).forEach(function(k){this[k]=this.config[k]},this);if("stack"in args)args.unstack=!args.stack;var renderer=args.renderer||this.renderer&&this.renderer.name||"stack";this.setRenderer(renderer,args);this.configureCallbacks.forEach(function(callback){callback(args)})};this.setRenderer=function(r,args){if(typeof r=="function"){this.renderer=new r({graph:self});this.registerRenderer(this.renderer)}else{if(!this._renderers[r]){throw"couldn't find renderer "+r}this.renderer=this._renderers[r]}if(typeof args=="object"){this.renderer.configure(args)}};this.setSize=function(args){args=args||{};if(typeof window!==undefined){var style=window.getComputedStyle(this.element,null);var elementWidth=parseInt(style.getPropertyValue("width"),10);var elementHeight=parseInt(style.getPropertyValue("height"),10)}this.width=args.width||elementWidth||400;this.height=args.height||elementHeight||250;this.vis&&this.vis.attr("width",this.width).attr("height",this.height)};this.initialize(args)};Rickshaw.namespace("Rickshaw.Fixtures.Color");Rickshaw.Fixtures.Color=function(){this.schemes={};this.schemes.spectrum14=["#ecb796","#dc8f70","#b2a470","#92875a","#716c49","#d2ed82","#bbe468","#a1d05d","#e7cbe6","#d8aad6","#a888c2","#9dc2d3","#649eb9","#387aa3"].reverse();this.schemes.spectrum2000=["#57306f","#514c76","#646583","#738394","#6b9c7d","#84b665","#a7ca50","#bfe746","#e2f528","#fff726","#ecdd00","#d4b11d","#de8800","#de4800","#c91515","#9a0000","#7b0429","#580839","#31082b"];this.schemes.spectrum2001=["#2f243f","#3c2c55","#4a3768","#565270","#6b6b7c","#72957f","#86ad6e","#a1bc5e","#b8d954","#d3e04e","#ccad2a","#cc8412","#c1521d","#ad3821","#8a1010","#681717","#531e1e","#3d1818","#320a1b"];this.schemes.classic9=["#423d4f","#4a6860","#848f39","#a2b73c","#ddcb53","#c5a32f","#7d5836","#963b20","#7c2626","#491d37","#2f254a"].reverse();this.schemes.httpStatus={503:"#ea5029",502:"#d23f14",500:"#bf3613",410:"#efacea",409:"#e291dc",403:"#f457e8",408:"#e121d2",401:"#b92dae",405:"#f47ceb",404:"#a82a9f",400:"#b263c6",301:"#6fa024",302:"#87c32b",307:"#a0d84c",304:"#28b55c",200:"#1a4f74",206:"#27839f",201:"#52adc9",202:"#7c979f",203:"#a5b8bd",204:"#c1cdd1"};this.schemes.colorwheel=["#b5b6a9","#858772","#785f43","#96557e","#4682b4","#65b9ac","#73c03a","#cb513a"].reverse();this.schemes.cool=["#5e9d2f","#73c03a","#4682b4","#7bc3b8","#a9884e","#c1b266","#a47493","#c09fb5"];this.schemes.munin=["#00cc00","#0066b3","#ff8000","#ffcc00","#330099","#990099","#ccff00","#ff0000","#808080","#008f00","#00487d","#b35a00","#b38f00","#6b006b","#8fb300","#b30000","#bebebe","#80ff80","#80c9ff","#ffc080","#ffe680","#aa80ff","#ee00cc","#ff8080","#666600","#ffbfff","#00ffcc","#cc6699","#999900"]};Rickshaw.namespace("Rickshaw.Fixtures.RandomData");Rickshaw.Fixtures.RandomData=function(timeInterval){var addData;timeInterval=timeInterval||1;var lastRandomValue=200;var timeBase=Math.floor((new Date).getTime()/1e3);this.addData=function(data){var randomValue=Math.random()*100+15+lastRandomValue;var index=data[0].length;var counter=1;data.forEach(function(series){var randomVariance=Math.random()*20;var v=randomValue/25+counter++ +(Math.cos(index*counter*11/960)+2)*15+(Math.cos(index/7)+2)*7+(Math.cos(index/17)+2)*1;series.push({x:index*timeInterval+timeBase,y:v+randomVariance})});lastRandomValue=randomValue*.85};this.removeData=function(data){data.forEach(function(series){series.shift()});timeBase+=timeInterval}};Rickshaw.namespace("Rickshaw.Fixtures.Time");Rickshaw.Fixtures.Time=function(){var self=this;this.months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];this.units=[{name:"decade",seconds:86400*365.25*10,formatter:function(d){return parseInt(d.getUTCFullYear()/10,10)*10}},{name:"year",seconds:86400*365.25,formatter:function(d){return d.getUTCFullYear()}},{name:"month",seconds:86400*30.5,formatter:function(d){return self.months[d.getUTCMonth()]}},{name:"week",seconds:86400*7,formatter:function(d){return self.formatDate(d)}},{name:"day",seconds:86400,formatter:function(d){return d.getUTCDate()}},{name:"6 hour",seconds:3600*6,formatter:function(d){return self.formatTime(d)}},{name:"hour",seconds:3600,formatter:function(d){return self.formatTime(d)}},{name:"15 minute",seconds:60*15,formatter:function(d){return self.formatTime(d)}},{name:"minute",seconds:60,formatter:function(d){return d.getUTCMinutes()}},{name:"15 second",seconds:15,formatter:function(d){return d.getUTCSeconds()+"s"}},{name:"second",seconds:1,formatter:function(d){return d.getUTCSeconds()+"s"}},{name:"decisecond",seconds:1/10,formatter:function(d){return d.getUTCMilliseconds()+"ms"}},{name:"centisecond",seconds:1/100,formatter:function(d){return d.getUTCMilliseconds()+"ms"}}];this.unit=function(unitName){return this.units.filter(function(unit){return unitName==unit.name}).shift()};this.formatDate=function(d){return d3.time.format("%b %e")(d)};this.formatTime=function(d){return d.toUTCString().match(/(\d+:\d+):/)[1]};this.ceil=function(time,unit){var date,floor,year;if(unit.name=="month"){date=new Date(time*1e3);floor=Date.UTC(date.getUTCFullYear(),date.getUTCMonth())/1e3;if(floor==time)return time;year=date.getUTCFullYear();var month=date.getUTCMonth();if(month==11){month=0;year=year+1}else{month+=1}return Date.UTC(year,month)/1e3}if(unit.name=="year"){date=new Date(time*1e3);floor=Date.UTC(date.getUTCFullYear(),0)/1e3;if(floor==time)return time;year=date.getUTCFullYear()+1;return Date.UTC(year,0)/1e3}return Math.ceil(time/unit.seconds)*unit.seconds}};Rickshaw.namespace("Rickshaw.Fixtures.Time.Local");Rickshaw.Fixtures.Time.Local=function(){var self=this;this.months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];this.units=[{name:"decade",seconds:86400*365.25*10,formatter:function(d){return parseInt(d.getFullYear()/10,10)*10}},{name:"year",seconds:86400*365.25,formatter:function(d){return d.getFullYear()}},{name:"month",seconds:86400*30.5,formatter:function(d){return self.months[d.getMonth()]}},{name:"week",seconds:86400*7,formatter:function(d){return self.formatDate(d)}},{name:"day",seconds:86400,formatter:function(d){return d.getDate()}},{name:"6 hour",seconds:3600*6,formatter:function(d){return self.formatTime(d)}},{name:"hour",seconds:3600,formatter:function(d){return self.formatTime(d)}},{name:"15 minute",seconds:60*15,formatter:function(d){return self.formatTime(d)}},{name:"minute",seconds:60,formatter:function(d){return d.getMinutes()}},{name:"15 second",seconds:15,formatter:function(d){return d.getSeconds()+"s"}},{name:"second",seconds:1,formatter:function(d){return d.getSeconds()+"s"}},{name:"decisecond",seconds:1/10,formatter:function(d){return d.getMilliseconds()+"ms"}},{name:"centisecond",seconds:1/100,formatter:function(d){return d.getMilliseconds()+"ms"}}];this.unit=function(unitName){return this.units.filter(function(unit){return unitName==unit.name}).shift()};this.formatDate=function(d){return d3.time.format("%b %e")(d)};this.formatTime=function(d){return d.toString().match(/(\d+:\d+):/)[1]};this.ceil=function(time,unit){var date,floor,year;if(unit.name=="day"){var nearFuture=new Date((time+unit.seconds-1)*1e3);var rounded=new Date(0);rounded.setMilliseconds(0);rounded.setSeconds(0);rounded.setMinutes(0);rounded.setHours(0);rounded.setDate(nearFuture.getDate());rounded.setMonth(nearFuture.getMonth());rounded.setFullYear(nearFuture.getFullYear());return rounded.getTime()/1e3}if(unit.name=="month"){date=new Date(time*1e3);floor=new Date(date.getFullYear(),date.getMonth()).getTime()/1e3;if(floor==time)return time;year=date.getFullYear();var month=date.getMonth();if(month==11){month=0;year=year+1}else{month+=1}return new Date(year,month).getTime()/1e3}if(unit.name=="year"){date=new Date(time*1e3);floor=new Date(date.getUTCFullYear(),0).getTime()/1e3;if(floor==time)return time;year=date.getFullYear()+1;return new Date(year,0).getTime()/1e3}return Math.ceil(time/unit.seconds)*unit.seconds}};Rickshaw.namespace("Rickshaw.Fixtures.Number");Rickshaw.Fixtures.Number.formatKMBT=function(y){var abs_y=Math.abs(y);if(abs_y>=1e12){return y/1e12+"T"}else if(abs_y>=1e9){return y/1e9+"B"}else if(abs_y>=1e6){return y/1e6+"M"}else if(abs_y>=1e3){return y/1e3+"K"}else if(abs_y<1&&y>0){return y.toFixed(2)}else if(abs_y===0){return""}else{return y}};Rickshaw.Fixtures.Number.formatBase1024KMGTP=function(y){var abs_y=Math.abs(y);if(abs_y>=0x4000000000000){return y/0x4000000000000+"P"}else if(abs_y>=1099511627776){return y/1099511627776+"T"}else if(abs_y>=1073741824){return y/1073741824+"G"}else if(abs_y>=1048576){return y/1048576+"M"}else if(abs_y>=1024){return y/1024+"K"}else if(abs_y<1&&y>0){return y.toFixed(2)}else if(abs_y===0){return""}else{return y}};Rickshaw.namespace("Rickshaw.Color.Palette");Rickshaw.Color.Palette=function(args){var color=new Rickshaw.Fixtures.Color;args=args||{};this.schemes={};this.scheme=color.schemes[args.scheme]||args.scheme||color.schemes.colorwheel;this.runningIndex=0;this.generatorIndex=0;if(args.interpolatedStopCount){var schemeCount=this.scheme.length-1;var i,j,scheme=[];for(i=0;iself.graph.x.range()[1]){if(annotation.element){annotation.line.classList.add("offscreen");annotation.element.style.display="none"}annotation.boxes.forEach(function(box){if(box.rangeElement)box.rangeElement.classList.add("offscreen")});return}if(!annotation.element){var element=annotation.element=document.createElement("div");element.classList.add("annotation");this.elements.timeline.appendChild(element);element.addEventListener("click",function(e){element.classList.toggle("active");annotation.line.classList.toggle("active");annotation.boxes.forEach(function(box){if(box.rangeElement)box.rangeElement.classList.toggle("active")})},false)}annotation.element.style.left=left+"px";annotation.element.style.display="block";annotation.boxes.forEach(function(box){var element=box.element;if(!element){element=box.element=document.createElement("div");element.classList.add("content");element.innerHTML=box.content;annotation.element.appendChild(element);annotation.line=document.createElement("div");annotation.line.classList.add("annotation_line");self.graph.element.appendChild(annotation.line);if(box.end){box.rangeElement=document.createElement("div");box.rangeElement.classList.add("annotation_range");self.graph.element.appendChild(box.rangeElement)}}if(box.end){var annotationRangeStart=left;var annotationRangeEnd=Math.min(self.graph.x(box.end),self.graph.x.range()[1]);if(annotationRangeStart>annotationRangeEnd){annotationRangeEnd=left;annotationRangeStart=Math.max(self.graph.x(box.end),self.graph.x.range()[0])}var annotationRangeWidth=annotationRangeEnd-annotationRangeStart;box.rangeElement.style.left=annotationRangeStart+"px";box.rangeElement.style.width=annotationRangeWidth+"px";box.rangeElement.classList.remove("offscreen")}annotation.line.classList.remove("offscreen");annotation.line.style.left=left+"px"})},this)};this.graph.onUpdate(function(){self.update()})};Rickshaw.namespace("Rickshaw.Graph.Axis.Time");Rickshaw.Graph.Axis.Time=function(args){var self=this;this.graph=args.graph;this.elements=[];this.ticksTreatment=args.ticksTreatment||"plain";this.fixedTimeUnit=args.timeUnit;var time=args.timeFixture||new Rickshaw.Fixtures.Time;this.appropriateTimeUnit=function(){var unit;var units=time.units;var domain=this.graph.x.domain();var rangeSeconds=domain[1]-domain[0];units.forEach(function(u){if(Math.floor(rangeSeconds/u.seconds)>=2){unit=unit||u}});return unit||time.units[time.units.length-1]};this.tickOffsets=function(){var domain=this.graph.x.domain();var unit=this.fixedTimeUnit||this.appropriateTimeUnit();var count=Math.ceil((domain[1]-domain[0])/unit.seconds);var runningTick=domain[0];var offsets=[];for(var i=0;iself.graph.x.range()[1])return;var element=document.createElement("div");element.style.left=self.graph.x(o.value)+"px";element.classList.add("x_tick");element.classList.add(self.ticksTreatment);var title=document.createElement("div");title.classList.add("title");title.innerHTML=o.unit.formatter(new Date(o.value*1e3));element.appendChild(title);self.graph.element.appendChild(element);self.elements.push(element)})};this.graph.onUpdate(function(){self.render()})};Rickshaw.namespace("Rickshaw.Graph.Axis.X");Rickshaw.Graph.Axis.X=function(args){var self=this;var berthRate=.1;this.initialize=function(args){this.graph=args.graph;this.orientation=args.orientation||"top";this.pixelsPerTick=args.pixelsPerTick||75;if(args.ticks)this.staticTicks=args.ticks;if(args.tickValues)this.tickValues=args.tickValues;this.tickSize=args.tickSize||4;this.ticksTreatment=args.ticksTreatment||"plain";if(args.element){this.element=args.element;this._discoverSize(args.element,args);this.vis=d3.select(args.element).append("svg:svg").attr("height",this.height).attr("width",this.width).attr("class","rickshaw_graph x_axis_d3");this.element=this.vis[0][0];this.element.style.position="relative";this.setSize({width:args.width,height:args.height})}else{this.vis=this.graph.vis}this.graph.onUpdate(function(){self.render()})};this.setSize=function(args){args=args||{};if(!this.element)return;this._discoverSize(this.element.parentNode,args);this.vis.attr("height",this.height).attr("width",this.width*(1+berthRate));var berth=Math.floor(this.width*berthRate/2);this.element.style.left=-1*berth+"px"};this.render=function(){if(this._renderWidth!==undefined&&this.graph.width!==this._renderWidth)this.setSize({auto:true});var axis=d3.svg.axis().scale(this.graph.x).orient(this.orientation);axis.tickFormat(args.tickFormat||function(x){return x});if(this.tickValues)axis.tickValues(this.tickValues);this.ticks=this.staticTicks||Math.floor(this.graph.width/this.pixelsPerTick);var berth=Math.floor(this.width*berthRate/2)||0;var transform;if(this.orientation=="top"){var yOffset=this.height||this.graph.height;transform="translate("+berth+","+yOffset+")"}else{transform="translate("+berth+", 0)"}if(this.element){this.vis.selectAll("*").remove()}this.vis.append("svg:g").attr("class",["x_ticks_d3",this.ticksTreatment].join(" ")).attr("transform",transform).call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize));var gridSize=(this.orientation=="bottom"?1:-1)*this.graph.height;this.graph.vis.append("svg:g").attr("class","x_grid_d3").call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(gridSize)).selectAll("text").each(function(){this.parentNode.setAttribute("data-x-value",this.textContent)});this._renderHeight=this.graph.height};this._discoverSize=function(element,args){if(typeof window!=="undefined"){var style=window.getComputedStyle(element,null);var elementHeight=parseInt(style.getPropertyValue("height"),10);if(!args.auto){var elementWidth=parseInt(style.getPropertyValue("width"),10)}}this.width=(args.width||elementWidth||this.graph.width)*(1+berthRate);this.height=args.height||elementHeight||40};this.initialize(args)};Rickshaw.namespace("Rickshaw.Graph.Axis.Y");Rickshaw.Graph.Axis.Y=Rickshaw.Class.create({initialize:function(args){this.graph=args.graph;this.orientation=args.orientation||"right";this.pixelsPerTick=args.pixelsPerTick||75;if(args.ticks)this.staticTicks=args.ticks;if(args.tickValues)this.tickValues=args.tickValues;this.tickSize=args.tickSize||4;this.ticksTreatment=args.ticksTreatment||"plain";this.tickFormat=args.tickFormat||function(y){return y};this.berthRate=.1;if(args.element){this.element=args.element;this.vis=d3.select(args.element).append("svg:svg").attr("class","rickshaw_graph y_axis");this.element=this.vis[0][0];this.element.style.position="relative";this.setSize({width:args.width,height:args.height})}else{this.vis=this.graph.vis}var self=this;this.graph.onUpdate(function(){self.render()})},setSize:function(args){args=args||{};if(!this.element)return;if(typeof window!=="undefined"){var style=window.getComputedStyle(this.element.parentNode,null);var elementWidth=parseInt(style.getPropertyValue("width"),10);if(!args.auto){var elementHeight=parseInt(style.getPropertyValue("height"),10)}}this.width=args.width||elementWidth||this.graph.width*this.berthRate;this.height=args.height||elementHeight||this.graph.height;this.vis.attr("width",this.width).attr("height",this.height*(1+this.berthRate));var berth=this.height*this.berthRate;if(this.orientation=="left"){this.element.style.top=-1*berth+"px"}},render:function(){if(this._renderHeight!==undefined&&this.graph.height!==this._renderHeight)this.setSize({auto:true});this.ticks=this.staticTicks||Math.floor(this.graph.height/this.pixelsPerTick);var axis=this._drawAxis(this.graph.y);this._drawGrid(axis);this._renderHeight=this.graph.height},_drawAxis:function(scale){var axis=d3.svg.axis().scale(scale).orient(this.orientation);axis.tickFormat(this.tickFormat);if(this.tickValues)axis.tickValues(this.tickValues);if(this.orientation=="left"){var berth=this.height*this.berthRate;var transform="translate("+this.width+", "+berth+")"}if(this.element){this.vis.selectAll("*").remove()}this.vis.append("svg:g").attr("class",["y_ticks",this.ticksTreatment].join(" ")).attr("transform",transform).call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize));return axis},_drawGrid:function(axis){var gridSize=(this.orientation=="right"?1:-1)*this.graph.width;this.graph.vis.append("svg:g").attr("class","y_grid").call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(gridSize)).selectAll("text").each(function(){this.parentNode.setAttribute("data-y-value",this.textContent) -})}});Rickshaw.namespace("Rickshaw.Graph.Axis.Y.Scaled");Rickshaw.Graph.Axis.Y.Scaled=Rickshaw.Class.create(Rickshaw.Graph.Axis.Y,{initialize:function($super,args){if(typeof args.scale==="undefined"){throw new Error("Scaled requires scale")}this.scale=args.scale;if(typeof args.grid==="undefined"){this.grid=true}else{this.grid=args.grid}$super(args)},_drawAxis:function($super,scale){var domain=this.scale.domain();var renderDomain=this.graph.renderer.domain().y;var extents=[Math.min.apply(Math,domain),Math.max.apply(Math,domain)];var extentMap=d3.scale.linear().domain([0,1]).range(extents);var adjExtents=[extentMap(renderDomain[0]),extentMap(renderDomain[1])];var adjustment=d3.scale.linear().domain(extents).range(adjExtents);var adjustedScale=this.scale.copy().domain(domain.map(adjustment)).range(scale.range());return $super(adjustedScale)},_drawGrid:function($super,axis){if(this.grid){$super(axis)}}});Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Highlight");Rickshaw.Graph.Behavior.Series.Highlight=function(args){this.graph=args.graph;this.legend=args.legend;var self=this;var colorSafe={};var activeLine=null;var disabledColor=args.disabledColor||function(seriesColor){return d3.interpolateRgb(seriesColor,d3.rgb("#d8d8d8"))(.8).toString()};this.addHighlightEvents=function(l){l.element.addEventListener("mouseover",function(e){if(activeLine)return;else activeLine=l;self.legend.lines.forEach(function(line){if(l===line){if(self.graph.renderer.unstack&&(line.series.renderer?line.series.renderer.unstack:true)){var seriesIndex=self.graph.series.indexOf(line.series);line.originalIndex=seriesIndex;var series=self.graph.series.splice(seriesIndex,1)[0];self.graph.series.push(series)}return}colorSafe[line.series.name]=colorSafe[line.series.name]||line.series.color;line.series.color=disabledColor(line.series.color)});self.graph.update()},false);l.element.addEventListener("mouseout",function(e){if(!activeLine)return;else activeLine=null;self.legend.lines.forEach(function(line){if(l===line&&line.hasOwnProperty("originalIndex")){var series=self.graph.series.pop();self.graph.series.splice(line.originalIndex,0,series);delete line.originalIndex}if(colorSafe[line.series.name]){line.series.color=colorSafe[line.series.name]}});self.graph.update()},false)};if(this.legend){this.legend.lines.forEach(function(l){self.addHighlightEvents(l)})}};Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Order");Rickshaw.Graph.Behavior.Series.Order=function(args){this.graph=args.graph;this.legend=args.legend;var self=this;if(typeof window.jQuery=="undefined"){throw"couldn't find jQuery at window.jQuery"}if(typeof window.jQuery.ui=="undefined"){throw"couldn't find jQuery UI at window.jQuery.ui"}jQuery(function(){jQuery(self.legend.list).sortable({containment:"parent",tolerance:"pointer",update:function(event,ui){var series=[];jQuery(self.legend.list).find("li").each(function(index,item){if(!item.series)return;series.push(item.series)});for(var i=self.graph.series.length-1;i>=0;i--){self.graph.series[i]=series.shift()}self.graph.update()}});jQuery(self.legend.list).disableSelection()});this.graph.onUpdate(function(){var h=window.getComputedStyle(self.legend.element).height;self.legend.element.style.height=h})};Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Toggle");Rickshaw.Graph.Behavior.Series.Toggle=function(args){this.graph=args.graph;this.legend=args.legend;var self=this;this.addAnchor=function(line){var anchor=document.createElement("a");anchor.innerHTML="✔";anchor.classList.add("action");line.element.insertBefore(anchor,line.element.firstChild);anchor.onclick=function(e){if(line.series.disabled){line.series.enable();line.element.classList.remove("disabled")}else{if(this.graph.series.filter(function(s){return!s.disabled}).length<=1)return;line.series.disable();line.element.classList.add("disabled")}self.graph.update()}.bind(this);var label=line.element.getElementsByTagName("span")[0];label.onclick=function(e){var disableAllOtherLines=line.series.disabled;if(!disableAllOtherLines){for(var i=0;idomainX){dataIndex=Math.abs(domainX-data[i].x)0){alignables.forEach(function(el){el.classList.remove("left");el.classList.add("right")});var rightAlignError=this._calcLayoutError(alignables);if(rightAlignError>leftAlignError){alignables.forEach(function(el){el.classList.remove("right");el.classList.add("left")})}}if(typeof this.onRender=="function"){this.onRender(args)}},_calcLayoutError:function(alignables){var parentRect=this.element.parentNode.getBoundingClientRect();var error=0;var alignRight=alignables.forEach(function(el){var rect=el.getBoundingClientRect();if(!rect.width){return}if(rect.right>parentRect.right){error+=rect.right-parentRect.right}if(rect.left=self.previewWidth){frameAfterDrag[0]-=frameAfterDrag[1]-self.previewWidth;frameAfterDrag[1]=self.previewWidth}}self.graphs.forEach(function(graph){var domainScale=d3.scale.linear().interpolate(d3.interpolateNumber).domain([0,self.previewWidth]).range(graph.dataDomain());var windowAfterDrag=[domainScale(frameAfterDrag[0]),domainScale(frameAfterDrag[1])];self.slideCallbacks.forEach(function(callback){callback(graph,windowAfterDrag[0],windowAfterDrag[1])});if(frameAfterDrag[0]===0){windowAfterDrag[0]=undefined}if(frameAfterDrag[1]===self.previewWidth){windowAfterDrag[1]=undefined}graph.window.xMin=windowAfterDrag[0];graph.window.xMax=windowAfterDrag[1];graph.update()})}function onMousedown(){drag.target=d3.event.target;drag.start=self._getClientXFromEvent(d3.event,drag);self.frameBeforeDrag=self.currentFrame.slice();d3.event.preventDefault?d3.event.preventDefault():d3.event.returnValue=false;d3.select(document).on("mousemove.rickshaw_range_slider_preview",onMousemove);d3.select(document).on("mouseup.rickshaw_range_slider_preview",onMouseup);d3.select(document).on("touchmove.rickshaw_range_slider_preview",onMousemove);d3.select(document).on("touchend.rickshaw_range_slider_preview",onMouseup);d3.select(document).on("touchcancel.rickshaw_range_slider_preview",onMouseup)}function onMousedownLeftHandle(datum,index){drag.left=true;onMousedown()}function onMousedownRightHandle(datum,index){drag.right=true;onMousedown()}function onMousedownMiddleHandle(datum,index){drag.left=true;drag.right=true;drag.rigid=true;onMousedown()}function onMouseup(datum,index){d3.select(document).on("mousemove.rickshaw_range_slider_preview",null);d3.select(document).on("mouseup.rickshaw_range_slider_preview",null);d3.select(document).on("touchmove.rickshaw_range_slider_preview",null);d3.select(document).on("touchend.rickshaw_range_slider_preview",null);d3.select(document).on("touchcancel.rickshaw_range_slider_preview",null);delete self.frameBeforeDrag;drag.left=false;drag.right=false;drag.rigid=false}element.select("rect.left_handle").on("mousedown",onMousedownLeftHandle);element.select("rect.right_handle").on("mousedown",onMousedownRightHandle);element.select("rect.middle_handle").on("mousedown",onMousedownMiddleHandle);element.select("rect.left_handle").on("touchstart",onMousedownLeftHandle);element.select("rect.right_handle").on("touchstart",onMousedownRightHandle);element.select("rect.middle_handle").on("touchstart",onMousedownMiddleHandle)},_getClientXFromEvent:function(event,drag){switch(event.type){case"touchstart":case"touchmove":var touchList=event.changedTouches;var touch=null;for(var touchIndex=0;touchIndexyMax)yMax=y});if(!series.length)return;if(series[0].xxMax)xMax=series[series.length-1].x});xMin-=(xMax-xMin)*this.padding.left;xMax+=(xMax-xMin)*this.padding.right;yMin=this.graph.min==="auto"?yMin:this.graph.min||0;yMax=this.graph.max===undefined?yMax:this.graph.max;if(this.graph.min==="auto"||yMin<0){yMin-=(yMax-yMin)*this.padding.bottom}if(this.graph.max===undefined){yMax+=(yMax-yMin)*this.padding.top}return{x:[xMin,xMax],y:[yMin,yMax]}},render:function(args){args=args||{};var graph=this.graph;var series=args.series||graph.series;var vis=args.vis||graph.vis;vis.selectAll("*").remove();var data=series.filter(function(s){return!s.disabled}).map(function(s){return s.stack});var pathNodes=vis.selectAll("path.path").data(data).enter().append("svg:path").classed("path",true).attr("d",this.seriesPathFactory());if(this.stroke){var strokeNodes=vis.selectAll("path.stroke").data(data).enter().append("svg:path").classed("stroke",true).attr("d",this.seriesStrokeFactory())}var i=0;series.forEach(function(series){if(series.disabled)return;series.path=pathNodes[0][i];if(this.stroke)series.stroke=strokeNodes[0][i];this._styleSeries(series);i++},this)},_styleSeries:function(series){var fill=this.fill?series.color:"none";var stroke=this.stroke?series.color:"none";series.path.setAttribute("fill",fill);series.path.setAttribute("stroke",stroke);series.path.setAttribute("stroke-width",this.strokeWidth);if(series.className){d3.select(series.path).classed(series.className,true)}if(series.className&&this.stroke){d3.select(series.stroke).classed(series.className,true)}},configure:function(args){args=args||{};Rickshaw.keys(this.defaults()).forEach(function(key){if(!args.hasOwnProperty(key)){this[key]=this[key]||this.graph[key]||this.defaults()[key];return}if(typeof this.defaults()[key]=="object"){Rickshaw.keys(this.defaults()[key]).forEach(function(k){this[key][k]=args[key][k]!==undefined?args[key][k]:this[key][k]!==undefined?this[key][k]:this.defaults()[key][k]},this)}else{this[key]=args[key]!==undefined?args[key]:this[key]!==undefined?this[key]:this.graph[key]!==undefined?this.graph[key]:this.defaults()[key]}},this)},setStrokeWidth:function(strokeWidth){if(strokeWidth!==undefined){this.strokeWidth=strokeWidth}},setTension:function(tension){if(tension!==undefined){this.tension=tension}}});Rickshaw.namespace("Rickshaw.Graph.Renderer.Line");Rickshaw.Graph.Renderer.Line=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"line",defaults:function($super){return Rickshaw.extend($super(),{unstack:true,fill:false,stroke:true})},seriesPathFactory:function(){var graph=this.graph;var factory=d3.svg.line().x(function(d){return graph.x(d.x)}).y(function(d){return graph.y(d.y)}).interpolate(this.graph.interpolation).tension(this.tension);factory.defined&&factory.defined(function(d){return d.y!==null});return factory}});Rickshaw.namespace("Rickshaw.Graph.Renderer.Stack");Rickshaw.Graph.Renderer.Stack=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"stack",defaults:function($super){return Rickshaw.extend($super(),{fill:true,stroke:false,unstack:false})},seriesPathFactory:function(){var graph=this.graph;var factory=d3.svg.area().x(function(d){return graph.x(d.x)}).y0(function(d){return graph.y(d.y0)}).y1(function(d){return graph.y(d.y+d.y0)}).interpolate(this.graph.interpolation).tension(this.tension);factory.defined&&factory.defined(function(d){return d.y!==null});return factory}});Rickshaw.namespace("Rickshaw.Graph.Renderer.Bar");Rickshaw.Graph.Renderer.Bar=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"bar",defaults:function($super){var defaults=Rickshaw.extend($super(),{gapSize:.05,unstack:false});delete defaults.tension;return defaults},initialize:function($super,args){args=args||{};this.gapSize=args.gapSize||this.gapSize;$super(args)},domain:function($super){var domain=$super();var frequentInterval=this._frequentInterval(this.graph.stackedData.slice(-1).shift());domain.x[1]+=Number(frequentInterval.magnitude);return domain},barWidth:function(series){var frequentInterval=this._frequentInterval(series.stack);var barWidth=this.graph.x.magnitude(frequentInterval.magnitude)*(1-this.gapSize);return barWidth},render:function(args){args=args||{};var graph=this.graph;var series=args.series||graph.series;var vis=args.vis||graph.vis;vis.selectAll("*").remove();var barWidth=this.barWidth(series.active()[0]);var barXOffset=0;var activeSeriesCount=series.filter(function(s){return!s.disabled}).length;var seriesBarWidth=this.unstack?barWidth/activeSeriesCount:barWidth;var transform=function(d){var matrix=[1,0,0,d.y<0?-1:1,0,d.y<0?graph.y.magnitude(Math.abs(d.y))*2:0];return"matrix("+matrix.join(",")+")"};series.forEach(function(series){if(series.disabled)return;var barWidth=this.barWidth(series);var nodes=vis.selectAll("path").data(series.stack.filter(function(d){return d.y!==null})).enter().append("svg:rect").attr("x",function(d){return graph.x(d.x)+barXOffset}).attr("y",function(d){return graph.y(d.y0+Math.abs(d.y))*(d.y<0?-1:1)}).attr("width",seriesBarWidth).attr("height",function(d){return graph.y.magnitude(Math.abs(d.y))}).attr("transform",transform);Array.prototype.forEach.call(nodes[0],function(n){n.setAttribute("fill",series.color)});if(this.unstack)barXOffset+=seriesBarWidth},this)},_frequentInterval:function(data){var intervalCounts={};for(var i=0;i0){this[0].data.forEach(function(plot){item.data.push({x:plot.x,y:0})})}else if(item.data.length===0){item.data.push({x:this.timeBase-(this.timeInterval||0),y:0})}this.push(item);if(this.legend){this.legend.addLine(this.itemByName(item.name))}},addData:function(data,x){var index=this.getIndex();Rickshaw.keys(data).forEach(function(name){if(!this.itemByName(name)){this.addItem({name:name})}},this);this.forEach(function(item){item.data.push({x:x||(index*this.timeInterval||1)+this.timeBase,y:data[item.name]||0})},this)},getIndex:function(){return this[0]&&this[0].data&&this[0].data.length?this[0].data.length:0},itemByName:function(name){for(var i=0;i1;i--){this.currentSize+=1;this.currentIndex+=1;this.forEach(function(item){item.data.unshift({x:((i-1)*this.timeInterval||1)+this.timeBase,y:0,i:i})},this)}}},addData:function($super,data,x){$super(data,x);this.currentSize+=1;this.currentIndex+=1;if(this.maxDataPoints!==undefined){while(this.currentSize>this.maxDataPoints){this.dropData()}}},dropData:function(){this.forEach(function(item){item.data.splice(0,1)});this.currentSize-=1},getIndex:function(){return this.currentIndex}});return Rickshaw}); \ No newline at end of file From 6dae6c4f825093a34aa3f3911c63207a8f447ac1 Mon Sep 17 00:00:00 2001 From: Alec Merdler Date: Wed, 2 Aug 2017 11:26:36 -0400 Subject: [PATCH 4/4] whitelisted moment.js locales to reduce bundle size --- endpoints/common.py | 11 ++++------- static/js/quay-config.module.ts | 1 + static/js/services/user-service.js | 3 +++ templates/base.html | 12 ------------ test/data/test.db | Bin 1687552 -> 1679360 bytes webpack.config.js | 5 +++++ 6 files changed, 13 insertions(+), 19 deletions(-) diff --git a/endpoints/common.py b/endpoints/common.py index 1693c5762..7e1625c71 100644 --- a/endpoints/common.py +++ b/endpoints/common.py @@ -24,6 +24,9 @@ from _init import __version__ logger = logging.getLogger(__name__) +JS_BUNDLE_NAME = 'bundle' + + def common_login(user_uuid, permanent_session=True): """ Performs login of the given user, with optional non-permanence on the session. """ user = model.get_user(user_uuid) @@ -71,10 +74,7 @@ def _list_files(path, extension, contains=""): def render_page_template(name, route_data=None, **kwargs): """ Renders the page template with the given name as the response and returns its contents. """ - library_styles = [] - main_styles = [] - library_scripts = [] - main_scripts = _list_files('build', 'js', "bundle") + main_scripts = _list_files('build', 'js', JS_BUNDLE_NAME) use_cdn = app.config.get('USE_CDN', True) if request.args.get('use_cdn') is not None: @@ -118,10 +118,7 @@ def render_page_template(name, route_data=None, **kwargs): route_data=route_data, external_styles=external_styles, external_scripts=external_scripts, - main_styles=main_styles, - library_styles=library_styles, main_scripts=main_scripts, - library_scripts=library_scripts, feature_set=features.get_features(), config_set=frontend_visible_config(app.config), oauth_set=get_oauth_config(), diff --git a/static/js/quay-config.module.ts b/static/js/quay-config.module.ts index 171f2e0b9..7ef10b3cb 100644 --- a/static/js/quay-config.module.ts +++ b/static/js/quay-config.module.ts @@ -4,6 +4,7 @@ import { NAME_PATTERNS } from "./constants/name-patterns.constant"; import * as Raven from "raven-js"; + var quayDependencies: string[] = [ 'chieffancypants.loadingBar', 'cfp.hotkeys', diff --git a/static/js/services/user-service.js b/static/js/services/user-service.js index d9bc0f9a0..faaebcea0 100644 --- a/static/js/services/user-service.js +++ b/static/js/services/user-service.js @@ -1,3 +1,6 @@ +import * as Raven from 'raven-js'; + + /** * Service which monitors the current user session and provides methods for returning information * about the user. diff --git a/templates/base.html b/templates/base.html index 213725d92..5cb29deed 100644 --- a/templates/base.html +++ b/templates/base.html @@ -22,14 +22,6 @@ - {% for style_path in main_styles %} - - {% endfor %} - - {% for style_path in library_styles %} - - {% endfor %} - {% block added_stylesheets %} {% endblock %} @@ -57,10 +49,6 @@ {% endfor %} - {% for script_path in library_scripts %} - - {% endfor %} - {% block added_dependencies %} {% endblock %} diff --git a/test/data/test.db b/test/data/test.db index 15c7fad71b1638a7c018b213e63c7be43ededfde..e109172d6a86edc69ff686a6a5063c939d785ec6 100644 GIT binary patch delta 506 zcmYk&K}Z`x6b9g#w@KH{?&hhnYGSP0U_k{XwzStMl;X{x6nb+Hi4wFVbqgXYtf*Mq zw2c%QP!I7USS1ERnM)3W-dc+ES}3C6sR!?h^lj5a4<9qU|IK?at~=o#jThSd$BgmK zbt^%a-pjyZY9+}}UAQOv zUHGcgwr}F*9q8is2WXN%^U&?JoCvi5y>g%cC$*Nd5_HImZMgq$KoKnYs0hbi`a@O^ zV8{#J2(|15WmxipU;db%4{~vI0MXUGDiDSEh@adcDybtH2@qZGRgD)HI(;MRF@_}^ zmqyXdYZc3W%VlieeCq3b1{%}Cy#KjY=VV^yrqVF__pqkZxvZ0Uot>WT6Stqu&ehVP aNrD7PJ!v3~Bt)9XUD8ZiWa+SV#3da1c5TP8vkjL}scL1t z$xPmF-pp@)@6GJQ!=Z_Z;p=S;KbuU{+^1webbQTAlZlxG^<4tZd72tb;K55;JBOFl zmS*!G_+{#58x8*9n3LENi4{b&nTe)*}@ zLL8*QOi>Px-n#YHrMFJKZBxYk=qn4sgC?c<7;3{gEa4PRK)AQ?ARbfP&6Gp!c?H?A zA}mnbl(C~|)=cne#d-|+T1R0EX*`V2;?wx9zL9I+w(y&DEKv$)&{YV1)TA`sZ*|$1 z@CZN!{5AwWs&40ztF%YuwJxe%xg?{H%!J*kSTiWZvfs1curursdyw4;5g#!{x4D-J z__;`@KicW%2>Px4#&7aEEMsDqrpgUw`aB6-yI8ud_jL8 z6bZZQ-Mb-jED-Poy8~RP+Xe2u<;6?UA#_w*JQ(ioj&RQU>0B%jj0M8JXgK1J1l!zZ zrT0tZd{96ZvzahY73&0YGjr_wY@F?3oy=3UeFFW+D2ua*DH^i#SZo#chV%^lHT+ij z>j+l;VZR~6DxmDIqp1A;G4iOt&7xhvkhLh*>!@=hNI1u?)DfbYo_b?R^#U}_mVoCc6u&W<)6qCC8ZoLBEGA}}+U1*`$=1u!dE zBbW`024mDai|onA3?4FJ+YJ+*x7|?LTlQI7amtEllWhw%!wuRRbE%O`T0|Wk$HiPe zB@L6Tn2~d-yqvw<(LvLPgi&GOTsD=-(>%|ghf%IHf@yL#PsYjXvP=qOC@YVU9lox! zLUzXFrf^d6Bc25KC&NWJ&WGCqZ1&e!#S< zeq35h{+uqv~lNmnwN5msTdeHhN~}$EAWENsFszzdq8_ zAI^R`|Kn1r0E$`#EKksiKp$v18kh7c&{lnR8I(~g>j38K6|x-t2-E@$YKq~IUJc&D z)Szcs&r=mWjjrBx(=#qT4@HYS|2!3~++;>l>Pi;1V$^m3fBrEM%NkxOxas}nyJu!s zy@)Fx$Nxpto}<4Nai}7qQN>ga`?#x8Fw-Y$&${|mrF~TWx6gWw6P!HngcIDWKb2GF a+9Ry}2wTS^T)(GMFLM1Z#Wi0R-ojtw9(bSt diff --git a/webpack.config.js b/webpack.config.js index 35fd72fa0..6944a3a64 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -17,6 +17,8 @@ let config = { externals: { angular: "angular", jquery: "$", + moment: "moment", + "raven-js": "Raven", }, module: { rules: [ @@ -47,7 +49,10 @@ let config = { FileSaver: 'file-saver', angular: "angular", $: "jquery", + moment: "moment", }), + // Restrict the extra locales that moment.js can load; en is always included + new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/), ], devtool: "cheap-module-source-map", };