Mercurial > hg > thermostat-ng > web-client
changeset 259:970066338150
Migrate About component to Angular/TS
Reviewed-by: jkang
Review-thread: http://icedtea.classpath.org/pipermail/thermostat/2017-October/025465.html
| author | Andrew Azores <aazores@redhat.com> |
|---|---|
| date | Mon, 23 Oct 2017 09:55:08 -0400 |
| parents | 828e021d52fd |
| children | c37b4d997182 |
| files | .htmlhintrc package.json src/app/app.module.ts src/app/app.routing.js src/app/components/about/about.component.js src/app/components/about/about.component.spec.ts src/app/components/about/about.component.ts src/app/components/about/about.controller.js src/app/components/about/about.controller.spec.js src/app/components/about/about.html src/app/components/about/about.module.ts src/app/components/about/about.routing.js src/app/components/about/about.routing.spec.js src/app/components/about/about.routing.spec.ts src/app/components/about/about.routing.ts src/app/components/about/en.locale.yaml |
| diffstat | 16 files changed, 327 insertions(+), 294 deletions(-) [+] |
line wrap: on
line diff
--- a/.htmlhintrc Mon Oct 23 09:55:00 2017 -0400 +++ b/.htmlhintrc Mon Oct 23 09:55:08 2017 -0400 @@ -1,5 +1,5 @@ { - "attr-lowercase": true, + "attr-lowercase": false, "attr-value-double-quotes": false, "attr-value-not-empty": false, "doctype-html5": true, @@ -9,4 +9,4 @@ "style-disabled": true, "tag-self-close": true, "tagname-lowercase": true -} \ No newline at end of file +}
--- a/package.json Mon Oct 23 09:55:00 2017 -0400 +++ b/package.json Mon Oct 23 09:55:08 2017 -0400 @@ -14,6 +14,7 @@ "@angular/platform-browser": "^4.4.2", "@angular/upgrade": "^4.4.2", "@types/angular": "^1.6.32", + "@types/angular-ui-router": "^1.1.40", "@types/big.js": "^3.2.0", "@types/core-js": "^0.9.43", "@types/jquery": "^3.2.13",
--- a/src/app/app.module.ts Mon Oct 23 09:55:00 2017 -0400 +++ b/src/app/app.module.ts Mon Oct 23 09:55:08 2017 -0400 @@ -43,6 +43,8 @@ import { FiltersModule } from "shared/filters/filters.module"; import { ServicesModule } from "shared/services/services.module"; +import { AboutModule } from "./components/about/about.module"; + const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); @NgModule({ declarations: [], @@ -55,6 +57,8 @@ AuthModule, ServicesModule, FiltersModule, + + AboutModule, ], }) export class AppModule {
--- a/src/app/app.routing.js Mon Oct 23 09:55:00 2017 -0400 +++ b/src/app/app.routing.js Mon Oct 23 09:55:08 2017 -0400 @@ -49,7 +49,7 @@ } let componentRoutingModules = [errorRouter.name]; -let req = require.context('./components', true, /\.routing\.js/); +let req = require.context('./components', true, /\.routing\.(ts|js)/); req.keys().forEach(k => componentRoutingModules.push(req(k).default)); let appRouter = angular.module('app.routing', componentRoutingModules);
--- a/src/app/components/about/about.component.js Mon Oct 23 09:55:00 2017 -0400 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,43 +0,0 @@ -/** - * Copyright 2012-2017 Red Hat, Inc. - * - * Thermostat is distributed under the GNU General Public License, - * version 2 or any later version (with a special exception described - * below, commonly known as the "Classpath Exception"). - * - * A copy of GNU General Public License (GPL) is included in this - * distribution, in the file COPYING. - * - * Linking Thermostat code with other modules is making a combined work - * based on Thermostat. Thus, the terms and conditions of the GPL - * cover the whole combination. - * - * As a special exception, the copyright holders of Thermostat give you - * permission to link this code with independent modules to produce an - * executable, regardless of the license terms of these independent - * modules, and to copy and distribute the resulting executable under - * terms of your choice, provided that you also meet, for each linked - * independent module, the terms and conditions of the license of that - * module. An independent module is a module which is not derived from - * or based on Thermostat code. If you modify Thermostat, you may - * extend this exception to your version of the software, but you are - * not obligated to do so. If you do not wish to do so, delete this - * exception statement from your version. - */ - -import authModule from 'components/auth/auth.module.js'; -import controller from './about.controller.js'; - -export default angular - .module('aboutComponent', [ - authModule, - controller - ]) - .component('about', { - bindings: { - username: '<' - }, - controller: 'AboutController', - template: require('./about.html') - }) - .name;
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/app/components/about/about.component.spec.ts Mon Oct 23 09:55:08 2017 -0400 @@ -0,0 +1,89 @@ +/** + * Copyright 2012-2017 Red Hat, Inc. + * + * Thermostat is distributed under the GNU General Public License, + * version 2 or any later version (with a special exception described + * below, commonly known as the "Classpath Exception"). + * + * A copy of GNU General Public License (GPL) is included in this + * distribution, in the file COPYING. + * + * Linking Thermostat code with other modules is making a combined work + * based on Thermostat. Thus, the terms and conditions of the GPL + * cover the whole combination. + * + * As a special exception, the copyright holders of Thermostat give you + * permission to link this code with independent modules to produce an + * executable, regardless of the license terms of these independent + * modules, and to copy and distribute the resulting executable under + * terms of your choice, provided that you also meet, for each linked + * independent module, the terms and conditions of the license of that + * module. An independent module is a module which is not derived from + * or based on Thermostat code. If you modify Thermostat, you may + * extend this exception to your version of the software, but you are + * not obligated to do so. If you do not wish to do so, delete this + * exception statement from your version. + */ + +import * as sinon from "sinon"; + +import { DebugElement } from "@angular/core"; +import { + ComponentFixture, + ComponentFixtureAutoDetect, + TestBed, +} from "@angular/core/testing"; +import { By } from "@angular/platform-browser"; + +import { AboutComponent } from "./about.component"; + +import { + AuthServiceToken, + IAuthService, +} from "components/auth/auth-service.interface"; + +describe("AboutComponent", () => { + + let authService: IAuthService; + let aboutComponent: AboutComponent; + let fixture: ComponentFixture<AboutComponent>; + let debugElement: DebugElement; + let element: HTMLElement; + + beforeEach(() => { + authService = { + authHeader: "mockAuthHeader", + getCommandChannelUrl: sinon.stub().returns("mockCommandChannelUrl"), + goToLogin: sinon.spy(), + login: sinon.spy(), + logout: sinon.spy(), + refresh: sinon.stub().returns({ + then: sinon.stub().yields(), + }), + rootScope: null as ng.IRootScopeService, + status: sinon.stub().returns(true), + username: "mockUsername", + }; + + TestBed.configureTestingModule({ + declarations: [ AboutComponent ], + providers: [ + { provide: ComponentFixtureAutoDetect, useValue: true }, + { provide: AuthServiceToken, useValue: authService }, + ], + }); + + fixture = TestBed.createComponent(AboutComponent); + + aboutComponent = fixture.componentInstance; + + debugElement = fixture.debugElement.query(By.css("#username")); + + element = debugElement.nativeElement; + }); + + it("should assign username from authService", () => { + element.textContent.should.equal(authService.username); + }); + +});
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/app/components/about/about.component.ts Mon Oct 23 09:55:08 2017 -0400 @@ -0,0 +1,56 @@ +/** + * Copyright 2012-2017 Red Hat, Inc. + * + * Thermostat is distributed under the GNU General Public License, + * version 2 or any later version (with a special exception described + * below, commonly known as the "Classpath Exception"). + * + * A copy of GNU General Public License (GPL) is included in this + * distribution, in the file COPYING. + * + * Linking Thermostat code with other modules is making a combined work + * based on Thermostat. Thus, the terms and conditions of the GPL + * cover the whole combination. + * + * As a special exception, the copyright holders of Thermostat give you + * permission to link this code with independent modules to produce an + * executable, regardless of the license terms of these independent + * modules, and to copy and distribute the resulting executable under + * terms of your choice, provided that you also meet, for each linked + * independent module, the terms and conditions of the license of that + * module. An independent module is a module which is not derived from + * or based on Thermostat code. If you modify Thermostat, you may + * extend this exception to your version of the software, but you are + * not obligated to do so. If you do not wish to do so, delete this + * exception statement from your version. + */ + +import { + Component, + Inject, + InjectionToken, + OnInit, +} from "@angular/core"; + +import { + AuthServiceToken, + IAuthService, +} from "components/auth/auth-service.interface"; + +@Component({ + selector: "example", + template: require("./about.html"), +}) +export class AboutComponent implements OnInit { + + private username: string; + + constructor( + @Inject(AuthServiceToken) private authService: IAuthService, + ) {} + + public ngOnInit(): void { + this.username = this.authService.username; + } + +}
--- a/src/app/components/about/about.controller.js Mon Oct 23 09:55:00 2017 -0400 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,41 +0,0 @@ -/** - * Copyright 2012-2017 Red Hat, Inc. - * - * Thermostat is distributed under the GNU General Public License, - * version 2 or any later version (with a special exception described - * below, commonly known as the "Classpath Exception"). - * - * A copy of GNU General Public License (GPL) is included in this - * distribution, in the file COPYING. - * - * Linking Thermostat code with other modules is making a combined work - * based on Thermostat. Thus, the terms and conditions of the GPL - * cover the whole combination. - * - * As a special exception, the copyright holders of Thermostat give you - * permission to link this code with independent modules to produce an - * executable, regardless of the license terms of these independent - * modules, and to copy and distribute the resulting executable under - * terms of your choice, provided that you also meet, for each linked - * independent module, the terms and conditions of the license of that - * module. An independent module is a module which is not derived from - * or based on Thermostat code. If you modify Thermostat, you may - * extend this exception to your version of the software, but you are - * not obligated to do so. If you do not wish to do so, delete this - * exception statement from your version. - */ - -import services from 'shared/services/services.module.js'; - -class AboutController { - constructor (authService) { - this.username = authService.username; - } -} - -export default angular - .module('about.controller', [ - services - ]) - .controller('AboutController', AboutController) - .name;
--- a/src/app/components/about/about.controller.spec.js Mon Oct 23 09:55:00 2017 -0400 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,57 +0,0 @@ -/** - * Copyright 2012-2017 Red Hat, Inc. - * - * Thermostat is distributed under the GNU General Public License, - * version 2 or any later version (with a special exception described - * below, commonly known as the "Classpath Exception"). - * - * A copy of GNU General Public License (GPL) is included in this - * distribution, in the file COPYING. - * - * Linking Thermostat code with other modules is making a combined work - * based on Thermostat. Thus, the terms and conditions of the GPL - * cover the whole combination. - * - * As a special exception, the copyright holders of Thermostat give you - * permission to link this code with independent modules to produce an - * executable, regardless of the license terms of these independent - * modules, and to copy and distribute the resulting executable under - * terms of your choice, provided that you also meet, for each linked - * independent module, the terms and conditions of the license of that - * module. An independent module is a module which is not derived from - * or based on Thermostat code. If you modify Thermostat, you may - * extend this exception to your version of the software, but you are - * not obligated to do so. If you do not wish to do so, delete this - * exception statement from your version. - */ - -import controllerModule from './about.controller.js'; -import { default as servicesModule, init as initServices } from 'shared/services/services.module.js'; - -describe('AboutController', () => { - - let ctrl, authSvc; - beforeEach(() => { - angular.mock.module(servicesModule); - initServices(); - angular.mock.module(controllerModule); - angular.mock.inject($controller => { - 'ngInject'; - - authSvc = { username: 'fake-username' }; - ctrl = $controller('AboutController', { - authService: authSvc - }); - }); - }); - - it('should exist', () => { - should.exist(ctrl); - }); - - it('should set username from authService', () => { - ctrl.should.have.ownProperty('username'); - ctrl.username.should.equal(authSvc.username); - }); - -});
--- a/src/app/components/about/about.html Mon Oct 23 09:55:00 2017 -0400 +++ b/src/app/components/about/about.html Mon Oct 23 09:55:08 2017 -0400 @@ -1,22 +1,29 @@ <div class="container container-cards-pf"> <div class="col-md-12"> <div class="row"> + <div class="col-md-3 hidden-sm hidden-xs"> <img src="~images/landing-image.png"/> </div> + <div class="col-md-9"> <h1><a class="clickable" ui-sref="default">Thermostat</a></h1> - <h2 translate>about.ABOUT</h2> - <p translate>about.OVERVIEW</p> - <h2 translate>about.VERSION</h2> + <h2>About</h2> + <p><a href="http://icedtea.classpath.org/thermostat">Thermostat</a> is a free and open source distributed instrumentation tool for the Hotspot JVM.</p> + + <h2>Version</h2> <dl class="dl-horizontal"> - <dt translate>about.WEB_CLIENT</dt> - <dd translate>CLIENT_VERSION</dd> + <dt>Web Client</dt> + <dd>0.1.0</dd> </dl> - <p translate>about.DOCUMENTATION</p> - <h2 ng-if="$ctrl.username" translate>about.ACCOUNT</h2> - <p ng-if="$ctrl.username" translate="about.ACCOUNT_DETAIL" translate-values="{ username: $ctrl.username }"></p> + + <p>The <a href="http://icedtea.classpath.org/thermostat/documentation">documentation</a> helps you learn about Thermostat and start exploring its features.</p> + <div *ngIf="username"> + <h2>Account</h2> + <p>You are currently logged in under the user account <strong id="username">{{username}}</strong>.</p> + </div> </div> + </div> </div> </div>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/app/components/about/about.module.ts Mon Oct 23 09:55:08 2017 -0400 @@ -0,0 +1,50 @@ +/** + * Copyright 2012-2017 Red Hat, Inc. + * + * Thermostat is distributed under the GNU General Public License, + * version 2 or any later version (with a special exception described + * below, commonly known as the "Classpath Exception"). + * + * A copy of GNU General Public License (GPL) is included in this + * distribution, in the file COPYING. + * + * Linking Thermostat code with other modules is making a combined work + * based on Thermostat. Thus, the terms and conditions of the GPL + * cover the whole combination. + * + * As a special exception, the copyright holders of Thermostat give you + * permission to link this code with independent modules to produce an + * executable, regardless of the license terms of these independent + * modules, and to copy and distribute the resulting executable under + * terms of your choice, provided that you also meet, for each linked + * independent module, the terms and conditions of the license of that + * module. An independent module is a module which is not derived from + * or based on Thermostat code. If you modify Thermostat, you may + * extend this exception to your version of the software, but you are + * not obligated to do so. If you do not wish to do so, delete this + * exception statement from your version. + */ + +import { NgModule } from "@angular/core"; + +import { CommonModule } from "@angular/common"; + +import { AuthModule } from "components/auth/auth.module"; +import { AboutComponent } from "./about.component"; + +@NgModule({ + declarations: [ + AboutComponent, + ], + entryComponents: [ + AboutComponent, + ], + exports: [ + AboutComponent, + ], + imports: [ + AuthModule, + CommonModule, + ], +}) +export class AboutModule {}
--- a/src/app/components/about/about.routing.js Mon Oct 23 09:55:00 2017 -0400 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,57 +0,0 @@ -/** - * Copyright 2012-2017 Red Hat, Inc. - * - * Thermostat is distributed under the GNU General Public License, - * version 2 or any later version (with a special exception described - * below, commonly known as the "Classpath Exception"). - * - * A copy of GNU General Public License (GPL) is included in this - * distribution, in the file COPYING. - * - * Linking Thermostat code with other modules is making a combined work - * based on Thermostat. Thus, the terms and conditions of the GPL - * cover the whole combination. - * - * As a special exception, the copyright holders of Thermostat give you - * permission to link this code with independent modules to produce an - * executable, regardless of the license terms of these independent - * modules, and to copy and distribute the resulting executable under - * terms of your choice, provided that you also meet, for each linked - * independent module, the terms and conditions of the license of that - * module. An independent module is a module which is not derived from - * or based on Thermostat code. If you modify Thermostat, you may - * extend this exception to your version of the software, but you are - * not obligated to do so. If you do not wish to do so, delete this - * exception statement from your version. - */ - -function config ($stateProvider) { - 'ngInject'; - - $stateProvider.state('about', { - url: '/about', - component: 'about', - resolve: { - lazyLoad: ($q, $ocLazyLoad) => { - 'ngInject'; - return $q(resolve => { - require.ensure(['./about.component.js'], () => { - let module = require('./about.component.js'); - $ocLazyLoad.load({ name: module.default }); - resolve(module); - }); - }); - } - } - }); -} - -export { config }; - -export default angular - .module('aboutRouter', [ - 'ui.router', - 'ui.bootstrap' - ]) - .config(config) - .name;
--- a/src/app/components/about/about.routing.spec.js Mon Oct 23 09:55:00 2017 -0400 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,72 +0,0 @@ -/** - * Copyright 2012-2017 Red Hat, Inc. - * - * Thermostat is distributed under the GNU General Public License, - * version 2 or any later version (with a special exception described - * below, commonly known as the "Classpath Exception"). - * - * A copy of GNU General Public License (GPL) is included in this - * distribution, in the file COPYING. - * - * Linking Thermostat code with other modules is making a combined work - * based on Thermostat. Thus, the terms and conditions of the GPL - * cover the whole combination. - * - * As a special exception, the copyright holders of Thermostat give you - * permission to link this code with independent modules to produce an - * executable, regardless of the license terms of these independent - * modules, and to copy and distribute the resulting executable under - * terms of your choice, provided that you also meet, for each linked - * independent module, the terms and conditions of the license of that - * module. An independent module is a module which is not derived from - * or based on Thermostat code. If you modify Thermostat, you may - * extend this exception to your version of the software, but you are - * not obligated to do so. If you do not wish to do so, delete this - * exception statement from your version. - */ - -describe('AboutRouting', () => { - - let module = require('./about.routing.js'); - - let stateProvider, args, q, ocLazyLoad; - beforeEach(() => { - stateProvider = { state: sinon.spy() }; - module.config(stateProvider); - args = stateProvider.state.args[0]; - q = sinon.spy(); - ocLazyLoad = { load: sinon.spy() }; - }); - - describe('stateProvider', () => { - it('should call $stateProvider.state', () => { - stateProvider.state.should.be.calledOnce(); - }); - - it('should define an \'about\' state', () => { - args[0].should.equal('about'); - }); - - it('should map to /about', () => { - args[1].url.should.equal('/about'); - }); - - it('resolve should load about component', done => { - let resolveFn = args[1].resolve.lazyLoad[2]; - resolveFn.should.be.a.Function(); - resolveFn(q, ocLazyLoad); - q.should.be.calledOnce(); - - let deferred = q.args[0][0]; - deferred.should.be.a.Function(); - - let resolve = sinon.stub().callsFake(val => { - ocLazyLoad.load.should.be.calledWith({ name: require('./about.component.js').default}); - val.should.equal(require('./about.component.js')); - done(); - }); - deferred(resolve); - }); - }); - -});
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/app/components/about/about.routing.spec.ts Mon Oct 23 09:55:08 2017 -0400 @@ -0,0 +1,54 @@ +/** + * Copyright 2012-2017 Red Hat, Inc. + * + * Thermostat is distributed under the GNU General Public License, + * version 2 or any later version (with a special exception described + * below, commonly known as the "Classpath Exception"). + * + * A copy of GNU General Public License (GPL) is included in this + * distribution, in the file COPYING. + * + * Linking Thermostat code with other modules is making a combined work + * based on Thermostat. Thus, the terms and conditions of the GPL + * cover the whole combination. + * + * As a special exception, the copyright holders of Thermostat give you + * permission to link this code with independent modules to produce an + * executable, regardless of the license terms of these independent + * modules, and to copy and distribute the resulting executable under + * terms of your choice, provided that you also meet, for each linked + * independent module, the terms and conditions of the license of that + * module. An independent module is a module which is not derived from + * or based on Thermostat code. If you modify Thermostat, you may + * extend this exception to your version of the software, but you are + * not obligated to do so. If you do not wish to do so, delete this + * exception statement from your version. + */ + +describe("AboutRouting", () => { + + const module = require("./about.routing"); + + let stateProvider: any; + let args: any; + beforeEach(() => { + stateProvider = { state: sinon.spy() }; + module.config(stateProvider); + args = stateProvider.state.args[0]; + }); + + describe("stateProvider", () => { + it("should call $stateProvider.state", () => { + stateProvider.state.should.be.calledOnce(); + }); + + it("should define an \"about\" state", () => { + args[0].should.equal("about"); + }); + + it("should map to /about", () => { + args[1].url.should.equal("/about"); + }); + }); + +});
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/app/components/about/about.routing.ts Mon Oct 23 09:55:08 2017 -0400 @@ -0,0 +1,55 @@ +/** + * Copyright 2012-2017 Red Hat, Inc. + * + * Thermostat is distributed under the GNU General Public License, + * version 2 or any later version (with a special exception described + * below, commonly known as the "Classpath Exception"). + * + * A copy of GNU General Public License (GPL) is included in this + * distribution, in the file COPYING. + * + * Linking Thermostat code with other modules is making a combined work + * based on Thermostat. Thus, the terms and conditions of the GPL + * cover the whole combination. + * + * As a special exception, the copyright holders of Thermostat give you + * permission to link this code with independent modules to produce an + * executable, regardless of the license terms of these independent + * modules, and to copy and distribute the resulting executable under + * terms of your choice, provided that you also meet, for each linked + * independent module, the terms and conditions of the license of that + * module. An independent module is a module which is not derived from + * or based on Thermostat code. If you modify Thermostat, you may + * extend this exception to your version of the software, but you are + * not obligated to do so. If you do not wish to do so, delete this + * exception statement from your version. + */ + +import * as angular from "angular"; + +import { UpgradeAdapter } from "@angular/upgrade"; +import { StateProvider } from "@uirouter/angularjs"; + +import { AboutComponent } from "./about.component"; +import { AboutModule } from "./about.module"; + +const upgradeAdapter = new UpgradeAdapter(AboutModule); + +function config($stateProvider: StateProvider): void { + $stateProvider.state("about", { + component: "about", + url: "/about", + }); +} + +const mod = angular + .module("aboutRouter", [ + "ui.router", + "ui.bootstrap", + ]) + .config(["$stateProvider", config]) + .directive("about", upgradeAdapter.downgradeNg2Component(AboutComponent) as angular.IDirectiveFactory); + +export default mod.name; + +export { config };
--- a/src/app/components/about/en.locale.yaml Mon Oct 23 09:55:00 2017 -0400 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,13 +0,0 @@ -about: - ABOUT: About - - OVERVIEW: <a href="http://icedtea.classpath.org/thermostat">Thermostat</a> is a free and open source distributed instrumentation tool for the Hotspot JVM. - - VERSION: Version - - WEB_CLIENT: Web Client - - DOCUMENTATION: The <a href="http://icedtea.classpath.org/thermostat/documentation">documentation</a> helps you learn about Thermostat and start exploring its features. - - ACCOUNT: Account - ACCOUNT_DETAIL: You are currently logged in under the user account <strong>{{username}}</strong>.