updating trace ui to angular 4

Author: paxtonhare

marklogic-data-hub/src/trace-ui/.angular-cli.json

@@ -1,21 +1,22 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "version": "1.0.0-beta.32.3",
     "name": "trace-ui"
   },
   "apps": [
     {
       "root": "src",
       "outDir": "dist",
       "assets": [
-        "assets"
+        "assets",
+        "favicon.ico"
       ],
       "index": "index.html",
       "main": "main.ts",
       "polyfills": "polyfills.ts",
       "test": "test.ts",
-      "tsconfig": "tsconfig.json",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
         "../node_modules/mdi/css/materialdesignicons.css",
@@ -38,12 +39,13 @@
   },
   "lint": [
     {
-      "files": "src/main/ui/**/*.ts",
-      "project": "src/main/ui/tsconfig.json"
+      "project": "src/tsconfig.app.json"
     },
     {
-      "files": "e2e/**/*.ts",
-      "project": "e2e/tsconfig.json"
+      "project": "src/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
     }
   ],
   "test": {

marklogic-data-hub/src/trace-ui/dependency-check.js

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types":[
+      "jasmine",
+      "node"
+    ]
+  }
+}

marklogic-data-hub/src/trace-ui/e2e/tsconfig.e2e.json

@@ -29,7 +29,6 @@ module.exports = function (config) {
       fixWebpackSourcePaths: true
     },
     angularCli: {
-      config: './.angular-cli.json',
       environment: 'dev'
     },
     reporters: config.angularCli && config.angularCli.codeCoverage

marklogic-data-hub/src/trace-ui/karma.conf.js

@@ -3,7 +3,6 @@
   "version": "1.1.1",
   "license": "APACHE",
   "homepage": "https://github.com/marklogic/marklogic-data-hub",
-  "angular-cli": {},
   "scripts": {
     "rimraf": "rimraf",
     "ng": "ng",
@@ -16,45 +15,41 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^2.4.0",
-    "@angular/compiler": "^2.4.0",
-    "@angular/core": "^2.4.0",
-    "@angular/forms": "^2.4.0",
-    "@angular/http": "^2.4.0",
-    "@angular/platform-browser": "^2.4.0",
-    "@angular/platform-browser-dynamic": "^2.4.0",
-    "@angular/router": "^3.4.0",
-    "@angular2-material/core": "^2.0.0-alpha.8-2",
-    "@angular2-mdl-ext/popover": "^0.5.0",
-    "@angular2-mdl-ext/select": "^0.9.0",
-    "angular2-mdl": "^2.13.1",
-    "angular2-moment": "^1.0.0-beta.1",
-    "clipboard": "^1.5.12",
-    "codemirror": "^5.17.0",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
+    "@angular-mdl/core": "^4.0.1",
+    "@angular-mdl/popover": "^0.6.3",
+    "@angular-mdl/select": "^0.10.4",
+    "angular2-moment": "^1.3.3",
+    "clipboard": "^1.6.1",
+    "codemirror": "^5.25.0",
     "core-js": "^2.4.1",
-    "d3": "^4.2.6",
-    "font-awesome": "^4.6.3",
-    "hammerjs": "^2.0.8",
-    "lodash": "^4.14.2",
-    "material-design-icons-iconfont": "^3.0.2",
-    "material-design-lite": "^1.2.0",
-    "mdi": "1.7.22",
-    "ng2-truncate": "^1.2.0",
+    "font-awesome": "^4.7.0",
+    "lodash": "^4.17.4",
+    "material-design-icons-iconfont": "^3.0.3",
+    "material-design-lite": "^1.3.0",
+    "mdi": "1.8.36",
     "rxjs": "^5.1.0",
-    "sockjs-client": "^1.1.1",
+    "semver": "^5.3.0",
+    "sockjs-client": "^1.1.2",
     "stompjs": "^2.3.3",
-    "ts-helpers": "^1.1.1",
-    "zone.js": "^0.7.6"
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@types/codemirror": "0.0.32",
-    "@types/d3": "^3.5.36",
-    "@types/hammerjs": "^2.0.32",
-    "@angular/cli": "1.0.0-beta.32.3",
-    "@angular/compiler-cli": "^2.4.0",
+    "@types/codemirror": "0.0.38",
+    "@angular/cli": "1.0.0",
+    "@angular/compiler-cli": "^4.0.0",
     "@types/jasmine": "2.5.38",
-    "@types/lodash": "^4.14.34",
-    "codelyzer": "~2.0.0-beta.4",
+    "@types/lodash": "^4.14.58",
+    "@types/node": "~6.0.60",
+    "@types/semver": "^5.3.31",
+    "codelyzer": "~2.0.0",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
     "karma": "~1.4.1",
@@ -67,7 +62,7 @@
     "protractor": "~5.1.0",
     "rimraf": "^2.5.4",
     "ts-node": "~2.0.0",
-    "tslint": "~4.4.2",
-    "typescript": "~2.0.0"
+    "tslint": "~4.5.0",
+    "typescript": "~2.2.0"
   }
 }

marklogic-data-hub/src/trace-ui/package.json

@@ -1,7 +1,6 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-/*global jasmine */
 const { SpecReporter } = require('jasmine-spec-reporter');
 
 exports.config = {
@@ -22,7 +21,7 @@ exports.config = {
   },
   beforeLaunch: function() {
     require('ts-node').register({
-      project: 'e2e'
+      project: 'e2e/tsconfig.e2e.json'
     });
   },
   onPrepare() {

marklogic-data-hub/src/trace-ui/protractor.conf.js

@@ -3,17 +3,15 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { RouterModule } from '@angular/router';
-import { TruncateCharactersPipe } from 'ng2-truncate/dist/truncate-characters.pipe'
-import { TruncateWordsPipe } from 'ng2-truncate/dist/truncate-words.pipe'
+import { TruncateCharactersPipe } from './truncate'
 
 import { ConfirmModule } from './confirm';
 
 import { AppComponent } from './app.component';
 
-import { MdlModule } from 'angular2-mdl';
+import { MdlModule } from '@angular-mdl/core';
 import { CodemirrorComponent } from './codemirror';
 import { MomentModule } from 'angular2-moment';
-import { MdDialogModule } from './dialog';
 
 import { ROUTES } from './app.routes';
 import { HeaderComponent } from './header/header.component';
@@ -41,7 +39,6 @@ import { ObjectToArrayPipe } from './object-to-array.pipe';
     TitlecasePipe,
     FacetsComponent,
     TruncateCharactersPipe,
-    TruncateWordsPipe,
     ObjectToArrayPipe
   ],
   imports: [
@@ -52,7 +49,6 @@ import { ObjectToArrayPipe } from './object-to-array.pipe';
     ConfirmModule,
     TooltipModule,
     MomentModule,
-    MdDialogModule.forRoot(),
     RouterModule.forRoot(ROUTES, { useHash: true })
   ],
   providers: [
@@ -62,4 +58,4 @@ import { ObjectToArrayPipe } from './object-to-array.pipe';
     AppComponent
   ],
 })
-export class AppModule {}
+export class AppModule { }

marklogic-data-hub/src/trace-ui/src/app/app.e2e.ts

@@ -1,4 +1,4 @@
-<template #defaultTemplate let-options="options">
+<ng-template #defaultTemplate let-options="options">
   <div class="dialog-container active">
     <div class="mdl-dialog confirm-dialog active">
       <div class="mdl-dialog__title" [innerHTML]="options.title"></div>
@@ -13,8 +13,8 @@
     </div>
     <div class="modal-backdrop"></div>
   </div>
-</template>
-<template
+</ng-template>
+<ng-template
   [ngTemplateOutlet]="options.customTemplate || defaultTemplate"
   [ngOutletContext]="{options: options}">
-</template>
+</ng-template>

marklogic-data-hub/src/trace-ui/src/app/app.module.ts

@@ -13,7 +13,7 @@ import {PopoverConfirmOptions} from './confirmOptions.provider';
 })
 export class ConfirmPopoverComponent implements AfterViewInit {
 
-  constructor(private options: PopoverConfirmOptions) {}
+  constructor(public options: PopoverConfirmOptions) {}
 
   ngAfterViewInit(): void {
     this.options.onAfterViewInit();