commit c24d38c6bb44fb2e6b46377758d6547f218b651f Author: hunan Date: Fri Nov 1 10:33:39 2024 +0800 add git-src mbs-ui diff --git a/mbs-ui/.editorconfig b/mbs-ui/.editorconfig new file mode 100644 index 0000000..6e87a00 --- /dev/null +++ b/mbs-ui/.editorconfig @@ -0,0 +1,13 @@ +# Editor configuration, see http://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/mbs-ui/.gitignore b/mbs-ui/.gitignore new file mode 100644 index 0000000..13a9216 --- /dev/null +++ b/mbs-ui/.gitignore @@ -0,0 +1,44 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# compiled output +/dist +/tmp +/out-tsc + +# dependencies +/node_modules + +# IDEs and editors +/.idea +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace +*.swp + +# IDE - VSCode +.vscode/ +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json + +# misc +/.sass-cache +/connect.lock +/coverage +/libpeerconnection.log +npm-debug.log +testem.log +/typings + +# e2e +/e2e/*.js +/e2e/*.map + +# System Files +.DS_Store +Thumbs.db diff --git a/mbs-ui/.travis.yml b/mbs-ui/.travis.yml new file mode 100644 index 0000000..ff6e299 --- /dev/null +++ b/mbs-ui/.travis.yml @@ -0,0 +1,19 @@ +sudo: required +dist: trusty +addons: + apt: + sources: + - google-chrome + packages: + - google-chrome-stable +language: node_js +node_js: +- 8 +before_script: +- export CHROME_BIN=chromium-browser +- export DISPLAY=:99.0 +- sh -e /etc/init.d/xvfb start +install: +- npm install +script: +- npm run ci diff --git a/mbs-ui/README.md b/mbs-ui/README.md new file mode 100644 index 0000000..d463e8a --- /dev/null +++ b/mbs-ui/README.md @@ -0,0 +1,36 @@ +# Module Build Service User Interface (MBS-UI) + +A simple frontend to the Module Build Service written in Angular. + +## Development + +To setup a development environment, make sure you have `npm` installed. + +Once npm is installed: +* Run `npm install` to install the dev and production dependencies +* Run `ng serve` to start the development server +* In your browser, you can now navigate to `http://localhost:4200/` + +## Build + +Although it's recommended to use OpenShift for builds and deployments, you can +manaully build MBS-UI for production with +`ng build --environment `. The build artifacts will be stored +in the `dist/` directory. + +## Deployment + +The recommended deployment method is OpenShift. The easiest way is to use the +OpenShift template provided in `openshift/mbs-ui-deployment-template.yaml` by +running `oc new-app mbs-ui-deployment-template.yaml -p NG_ENVIRONMENT=`. +You can override the route's hostname/FQDN with the `ROUTE_HOSTNAME` parameter. + +Alternatively, you can do the more manual approach with the following steps: +* Add the S2I builder image for Angular apps with: + `oc create -f https://raw.githubusercontent.com/mprahl/s2i-angular-httpd24/master/s2i-angular-httpd24.yml` +* Build and deploy the application with: + `oc new-app s2i-angular-httpd24~https://github.com/release-engineering/mbs-ui --build-env NG_ENVIRONMENT=` +* Create a route with: + `oc expose svc/mbs-ui --port 8080` +* Perform any additional configuration such as adding readiness and health + probes diff --git a/mbs-ui/angular.json b/mbs-ui/angular.json new file mode 100644 index 0000000..78fba2b --- /dev/null +++ b/mbs-ui/angular.json @@ -0,0 +1,158 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "mbs": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "src/index.html", + "main": "src/main.ts", + "tsConfig": "src/tsconfig.app.json", + "polyfills": "src/polyfills.ts", + "assets": [ + "src/assets", + "src/favicon.ico" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": [] + }, + "configurations": { + "redhat-prod": { + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.redhat.ts" + } + ] + }, + "fedora-prod": { + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.fedora.ts" + } + ] + }, + "production": { + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "mbs:build" + }, + "configurations": { + "redhat-prod": { + "browserTarget": "mbs:build:redhat-prod" + }, + "fedora-prod": { + "browserTarget": "mbs:build:fedora-prod" + }, + "production": { + "browserTarget": "mbs:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "mbs:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "karmaConfig": "./karma.conf.js", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "scripts": [], + "styles": [ + "src/styles.scss" + ], + "assets": [ + "src/assets", + "src/favicon.ico" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "mbs", + "schematics": { + "@schematics/angular:class": { + "spec": false + }, + "@schematics/angular:component": { + "spec": false, + "prefix": "app", + "styleext": "scss" + }, + "@schematics/angular:directive": { + "spec": false, + "prefix": "app" + }, + "@schematics/angular:guard": { + "spec": false + }, + "@schematics/angular:module": { + "spec": false + }, + "@schematics/angular:pipe": { + "spec": false + }, + "@schematics/angular:service": { + "spec": false + } + } +} \ No newline at end of file diff --git a/mbs-ui/karma.conf.js b/mbs-ui/karma.conf.js new file mode 100644 index 0000000..0840f6c --- /dev/null +++ b/mbs-ui/karma.conf.js @@ -0,0 +1,31 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/1.0/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-coverage-istanbul-reporter'), + require('@angular-devkit/build-angular/plugins/karma') + ], + client:{ + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + coverageIstanbulReporter: { + dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ], + fixWebpackSourcePaths: true + }, + + reporters: ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false + }); +}; diff --git a/mbs-ui/openshift/mbs-ui-deployment-template.yaml b/mbs-ui/openshift/mbs-ui-deployment-template.yaml new file mode 100644 index 0000000..268602b --- /dev/null +++ b/mbs-ui/openshift/mbs-ui-deployment-template.yaml @@ -0,0 +1,177 @@ +apiVersion: v1 +kind: Template +metadata: + annotations: + openshift.io/display-name: MBS UI + description: A frontend to the Module Build Service (MBS) + iconClass: icon-js + tags: javscript + name: mbs-ui-template +parameters: +- name: NG_ENVIRONMENT + displayName: Angular Environment + description: Name of the Angular environment to build from + required: true +- name: ROUTE_HOSTNAME + displayName: Route hostname/FQDN + description: Hostname/FQDN for the route to listen on + required: false +objects: +# The image stream for the S2I builder image +- apiVersion: v1 + kind: ImageStream + metadata: + name: s2i-angular-httpd24 + annotations: + openshift.io/display-name: Angular + spec: + tags: + - name: angular5 + annotations: + openshift.io/display-name: Angular + description: >- + Build and run Angular 2-5 apps based on the official + centos/httpd-24-centos7 image. For more information about using this + builder image, see https://github.com/mprahl/s2i-angular-httpd24. + iconClass: icon-js + tags: 'builder,angular,javascript' + supports: 'angular' + from: + kind: DockerImage + name: 'mprahl/s2i-angular-httpd24:angular5' +# The image stream that will represent the built image. Without this, the build +# will fail. +- apiVersion: v1 + kind: ImageStream + metadata: + labels: + app: mbs-ui + name: mbs-ui + spec: + tags: + - from: + kind: DockerImage + name: mbs-ui:latest + name: latest +- apiVersion: v1 + kind: BuildConfig + metadata: + labels: + app: mbs-ui + name: mbs-ui + annotations: + template.alpha.openshift.io/wait-for-ready: "true" + spec: + output: + to: + kind: ImageStreamTag + name: mbs-ui:latest + postCommit: {} + resources: {} + runPolicy: Serial + source: + git: + ref: master + uri: https://github.com/release-engineering/mbs-ui + type: Git + strategy: + sourceStrategy: + env: + - name: NG_ENVIRONMENT + value: ${NG_ENVIRONMENT} + from: + kind: ImageStreamTag + name: s2i-angular-httpd24:angular5 + type: Source + triggers: + - type: ConfigChange + - imageChange: {} + type: ImageChange +- apiVersion: v1 + kind: DeploymentConfig + metadata: + labels: + app: mbs-ui + name: mbs-ui + annotations: + template.alpha.openshift.io/wait-for-ready: "true" + spec: + replicas: 1 + selector: + app: mbs-ui + deploymentconfig: mbs-ui + template: + metadata: + labels: + app: mbs-ui + deploymentconfig: mbs-ui + spec: + containers: + - image: mbs-ui + imagePullPolicy: Always + name: mbs-ui + ports: + - containerPort: 8443 + protocol: TCP + - containerPort: 8080 + protocol: TCP + livenessProbe: + failureThreshold: 3 + httpGet: + path: /modules + port: 8080 + scheme: HTTP + initialDelaySeconds: 5 + periodSeconds: 60 + timeoutSeconds: 5 + readinessProbe: + failureThreshold: 3 + httpGet: + path: /modules + port: 8080 + scheme: HTTP + initialDelaySeconds: 5 + periodSeconds: 60 + timeoutSeconds: 5 + triggers: + - type: ConfigChange + - imageChangeParams: + automatic: true + containerNames: + - mbs-ui + from: + kind: ImageStreamTag + name: mbs-ui:latest + type: ImageChange +- apiVersion: v1 + kind: Service + metadata: + labels: + app: mbs-ui + name: mbs-ui + spec: + ports: + - name: 8080-tcp + port: 8080 + protocol: TCP + targetPort: 8080 + - name: 8443-tcp + port: 8443 + protocol: TCP + targetPort: 8443 + selector: + app: mbs-ui + deploymentconfig: mbs-ui +- apiVersion: v1 + kind: Route + metadata: + labels: + app: mbs-ui + name: mbs-ui + spec: + host: ${ROUTE_HOSTNAME} + port: + targetPort: 8080 + to: + kind: Service + name: mbs-ui diff --git a/mbs-ui/package.json b/mbs-ui/package.json new file mode 100644 index 0000000..a9894b0 --- /dev/null +++ b/mbs-ui/package.json @@ -0,0 +1,59 @@ +{ + "name": "mbs", + "version": "0.0.0", + "license": "MIT", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "test:once": "ng test --watch=false", + "ci": "npm run lint && npm run test:once" + }, + "private": true, + "dependencies": { + "@angular/animations": "^7.2.14", + "@angular/common": "^7.2.14", + "@angular/compiler": "^7.2.14", + "@angular/core": "^7.2.14", + "@angular/forms": "^7.2.14", + "@angular/http": "^7.2.14", + "@angular/platform-browser": "^7.2.14", + "@angular/platform-browser-dynamic": "^7.2.14", + "@angular/platform-server": "^7.2.14", + "@angular/router": "^7.2.14", + "@ng-bootstrap/ng-bootstrap": "^3.2.0", + "@ngx-progressbar/core": "^5.3.2", + "@ngx-progressbar/http": "^5.3.2", + "bootstrap": "^4.0.0", + "core-js": "^2.6.5", + "font-awesome": "^4.7.0", + "ngx-infinite-scroll": "^7.1.0", + "rxjs": "^6.3.3", + "zone.js": "^0.9.1" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^0.13.8", + "@angular/cli": "^7.3.8", + "@angular/compiler-cli": "^7.2.14", + "@angular/language-service": "^7.2.14", + "@types/jasmine": "^3.3.12", + "@types/jasminewd2": "~2.0.2", + "@types/node": "^12.0.0", + "codelyzer": "^5.0.1", + "jasmine-core": "^3.4.0", + "jasmine-spec-reporter": "^4.2.1", + "karma": "^4.1.0", + "karma-chrome-launcher": "^2.2.0", + "karma-cli": "^2.0.0", + "karma-coverage-istanbul-reporter": "~2.0.1", + "karma-jasmine": "^2.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "^5.4.2", + "rxjs-tslint": "^0.1.7", + "ts-node": "~7.0.0", + "tslint": "^5.16.0", + "typescript": ">=3.1.1 <3.3.0" + } +} diff --git a/mbs-ui/protractor.conf.js b/mbs-ui/protractor.conf.js new file mode 100644 index 0000000..7ee3b5e --- /dev/null +++ b/mbs-ui/protractor.conf.js @@ -0,0 +1,28 @@ +// Protractor configuration file, see link for more information +// https://github.com/angular/protractor/blob/master/lib/config.ts + +const { SpecReporter } = require('jasmine-spec-reporter'); + +exports.config = { + allScriptsTimeout: 11000, + specs: [ + './e2e/**/*.e2e-spec.ts' + ], + capabilities: { + 'browserName': 'chrome' + }, + directConnect: true, + baseUrl: 'http://localhost:4200/', + framework: 'jasmine', + jasmineNodeOpts: { + showColors: true, + defaultTimeoutInterval: 30000, + print: function() {} + }, + onPrepare() { + require('ts-node').register({ + project: 'e2e/tsconfig.e2e.json' + }); + jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); + } +}; diff --git a/mbs-ui/src/app/app-routing.module.ts b/mbs-ui/src/app/app-routing.module.ts new file mode 100644 index 0000000..4a01dbe --- /dev/null +++ b/mbs-ui/src/app/app-routing.module.ts @@ -0,0 +1,39 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { ModulesComponent } from './mbs/modules/modules.component'; +import { ModuleComponentsComponent } from './mbs/module-components/module-components.component'; +import { ModuleDetailComponent } from './mbs/module-detail/module-detail.component'; + +const routes: Routes = [ + { + path: 'module/:id', + component: ModuleDetailComponent, + pathMatch: 'full' + }, + { + path: 'modules', + component: ModulesComponent, + pathMatch: 'full' + }, + { + path: 'components', + component: ModuleComponentsComponent, + pathMatch: 'full' + }, + { + path: 'module/:id/components', + component: ModuleComponentsComponent, + pathMatch: 'full' + }, + { + path: '', + redirectTo: '/modules', + pathMatch: 'full' + } +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] +}) +export class AppRoutingModule { } diff --git a/mbs-ui/src/app/app.component.html b/mbs-ui/src/app/app.component.html new file mode 100644 index 0000000..97d8688 --- /dev/null +++ b/mbs-ui/src/app/app.component.html @@ -0,0 +1,30 @@ + +
+ +
+ +
+ +
diff --git a/mbs-ui/src/app/app.component.scss b/mbs-ui/src/app/app.component.scss new file mode 100644 index 0000000..d250076 --- /dev/null +++ b/mbs-ui/src/app/app.component.scss @@ -0,0 +1,27 @@ +.navbar-brand span { + margin-left: 0.4em; +} + +// Landscape phones and smaller +@media (max-width: 767px) { + #logoTextShort { + display: inline; + } + #logoText { + display: None; + } +} + +// Tablets and larger +@media (min-width: 768px) { + .navbar { + padding-left: 10% !important; + padding-right: 10% !important; + } + #logoTextShort { + display: None; + } + #logoText { + display: inline; + } +} diff --git a/mbs-ui/src/app/app.component.ts b/mbs-ui/src/app/app.component.ts new file mode 100644 index 0000000..32978d6 --- /dev/null +++ b/mbs-ui/src/app/app.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'] +}) +export class AppComponent { + title = 'app'; + navbarCollapsed = true; +} diff --git a/mbs-ui/src/app/app.module.ts b/mbs-ui/src/app/app.module.ts new file mode 100644 index 0000000..2b39c4e --- /dev/null +++ b/mbs-ui/src/app/app.module.ts @@ -0,0 +1,42 @@ +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; +import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; + +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { InfiniteScrollModule } from 'ngx-infinite-scroll'; +import { NgProgressModule } from '@ngx-progressbar/core'; +import { NgProgressHttpModule } from '@ngx-progressbar/http'; + +import { AppRoutingModule } from './app-routing.module'; +import { AppComponent } from './app.component'; +import { ModulesComponent } from './mbs/modules/modules.component'; +import { ModuleService } from './mbs/services/module.service'; +import { ModuleComponentsComponent } from './mbs/module-components/module-components.component'; +import { ModuleDetailComponent } from './mbs/module-detail/module-detail.component'; + + +@NgModule({ + declarations: [ + AppComponent, + ModulesComponent, + ModuleComponentsComponent, + ModuleDetailComponent + ], + imports: [ + BrowserModule, + AppRoutingModule, + HttpClientModule, + BrowserAnimationsModule, + NgbModule.forRoot(), + InfiniteScrollModule, + NgProgressModule, + NgProgressHttpModule + ], + providers: [ + ModuleService + ], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/mbs-ui/src/app/mbs/base-components/base-list.component.ts b/mbs-ui/src/app/mbs/base-components/base-list.component.ts new file mode 100644 index 0000000..9a28a22 --- /dev/null +++ b/mbs-ui/src/app/mbs/base-components/base-list.component.ts @@ -0,0 +1,42 @@ +import { Router, ActivatedRoute, ParamMap } from '@angular/router'; + + +export class BaseListComponent { + orderBy: string; + orderDirection: string; + currentPage: number; + loading = false; + exhausted = false; + + processRouteParams(params: ParamMap) { + // TODO: Add validation here + if (params.get('orderBy')) { + this.orderBy = params.get('orderBy'); + } else { + this.orderBy = 'id'; + } + if (params.get('orderDirection')) { + this.orderDirection = params.get('orderDirection'); + } else { + this.orderDirection = 'desc'; + } + } + + getOrderDirection(header): string { + if (header.toLowerCase().replace(' ', '_') === this.orderBy && this.orderDirection === 'desc') { + return 'asc'; + } + return 'desc'; + } + + getArrowClass(header: string): string { + if (header.toLowerCase().replace(' ', '_') === this.orderBy) { + if (this.orderDirection === 'asc') { + return 'orderAsc'; + } else { + return 'orderDesc'; + } + } + return ''; + } +} diff --git a/mbs-ui/src/app/mbs/models/mbs.type.ts b/mbs-ui/src/app/mbs/models/mbs.type.ts new file mode 100644 index 0000000..52a3dc8 --- /dev/null +++ b/mbs-ui/src/app/mbs/models/mbs.type.ts @@ -0,0 +1,56 @@ +interface MbsMetaApi { + first: string; + last: string; + next: string | undefined; + page: number; + pages: number; + per_page: number; + prev: number | undefined; + total: number; +} + +interface MbsApi { + items: Array; + meta: MbsMetaApi; +} + +export interface MbsModuleShort { + context?: string; + id: number; + name: string; + scratch?: boolean; + state: number; + state_name: string; + stream: string; + version: string; +} + +export interface MbsModule extends MbsModuleShort { + koji_tag: string; + owner: string; + rebuild_strategy: string; + scmurl: string | undefined; + state_reason: string | undefined; + tasks: any; + time_completed: string | undefined; + time_modified: string | undefined; + time_submitted: string; +} + +export interface MbsComponent { + id: number; + format: string; + module_build: number; + package: string; + state: number; + state_name: string; + task_id: number; +} + +export interface MbsModulesShortApi extends MbsApi { + items: Array; +} + +export interface MbsComponentsApi extends MbsApi { + items: Array; +} diff --git a/mbs-ui/src/app/mbs/module-components/module-components.component.html b/mbs-ui/src/app/mbs/module-components/module-components.component.html new file mode 100644 index 0000000..064dc5b --- /dev/null +++ b/mbs-ui/src/app/mbs/module-components/module-components.component.html @@ -0,0 +1,32 @@ +

Components

+ + + + + + + + + + + + + + + + +
+ + {{ header }} + + {{ header }} +
{{ component.id }}{{ component.module_build }}{{ component.package }} + + {{ component.task_id }} + + + + {{ component.state_name.charAt(0) + component.state_name.toLowerCase().slice(1) }} + +
diff --git a/mbs-ui/src/app/mbs/module-components/module-components.component.scss b/mbs-ui/src/app/mbs/module-components/module-components.component.scss new file mode 100644 index 0000000..0cc7428 --- /dev/null +++ b/mbs-ui/src/app/mbs/module-components/module-components.component.scss @@ -0,0 +1,9 @@ +table thead { + th { + width: 15%; + white-space: nowrap; + } + th:nth-child(3) { + width: 25%; + } +} diff --git a/mbs-ui/src/app/mbs/module-components/module-components.component.ts b/mbs-ui/src/app/mbs/module-components/module-components.component.ts new file mode 100644 index 0000000..efda311 --- /dev/null +++ b/mbs-ui/src/app/mbs/module-components/module-components.component.ts @@ -0,0 +1,90 @@ +import { Component, OnInit } from '@angular/core'; +import { Router, ActivatedRoute, ParamMap } from '@angular/router'; + +import { BaseListComponent } from '../base-components/base-list.component'; +import { ModuleService } from '../services/module.service'; +import { MbsComponent } from '../models/mbs.type'; +import { environment } from '../../../environments/environment'; + + +@Component({ + selector: 'app-module-components', + templateUrl: './module-components.component.html', + styleUrls: ['./module-components.component.scss'] +}) +export class ModuleComponentsComponent extends BaseListComponent implements OnInit { + + readonly kojiUrl: string = environment.kojiUrl; + components: Array = []; + moduleID: number; + + constructor( + private route: ActivatedRoute, + private router: Router, + private moduleService: ModuleService + ) { + super(); + } + + ngOnInit() { + this.route.paramMap.subscribe((params: ParamMap) => { + this.processRouteParams(params); + this.components = []; + this.exhausted = false; + this.currentPage = 1; + const routeParams = this.route.snapshot.params; + let moduleID = null; + if (routeParams.id) { + moduleID = parseInt(routeParams.id, 10); + if (isNaN(moduleID)) { + moduleID = null; + // Redirect to /components if moduleID is not a number + this.router.navigate(['/components']); + } + } + this.moduleID = moduleID; + this.getComponents(); + }); + } + + getComponents(): void { + if (!this.exhausted && !this.loading) { + this.loading = true; + this.moduleService.getComponents(this.currentPage, this.orderBy, this.orderDirection, this.moduleID).subscribe( + data => { + if (data.items.length) { + this.components = this.components.concat(data.items); + this.currentPage += 1; + } else { + this.exhausted = true; + } + }, + error => { + console.error(error); + }, + () => { + this.loading = false; + } + ); + } + } + + getStateCssClass(component: MbsComponent): string { + switch (component.state_name) { + case 'COMPLETE': + return 'text-success'; + case 'FAILED': + return 'text-danger'; + case 'CANCELED': + case 'DELETED': + return 'text-warning'; + default : + return 'text-info'; + } + } + + onScrollDown () { + this.getComponents(); + } + +} diff --git a/mbs-ui/src/app/mbs/module-detail/module-detail.component.html b/mbs-ui/src/app/mbs/module-detail/module-detail.component.html new file mode 100644 index 0000000..20f782b --- /dev/null +++ b/mbs-ui/src/app/mbs/module-detail/module-detail.component.html @@ -0,0 +1,113 @@ + +

Module #{{ module.id }}

+ + +
    +
  • Init
    • +
  • Wait
    • +
  • Build
    • +
  • Done
    • +
  • {{ module.state_name.charAt(0).toUpperCase() + module.state_name.slice(1) }}
    • +
+ +
    +
  • Init
    • +
  • Wait
    • +
  • Build
    • +
  • Done
    • +
  • Ready
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyValue
Components + + {{ num_built_components }}/{{ num_components }} complete + +
Context{{ module.context }}
ID{{ module.id }}
Koji Build Tag + + {{ module.koji_tag + '-build' }} + +
Koji Tag + + {{ module.koji_tag }} + +
Name{{ module.name }}
NSVC{{ module.name }}:{{ module.stream }}:{{ module.version }}:{{ module.context }}
Owner{{ module.owner }}
Rebuild Strategy{{ module.rebuild_strategy }}
Scratch{{ module.scratch ? 'Yes' : 'No' }}
State + {{ module.state_name.toUpperCase().charAt(0) + module.state_name.slice(1) }} +
State Reason{{ module.state_reason }}
Stream{{ module.stream }}
{{ time.replace('_', ' ') | titlecase }} + + + {{ module[time] | date:'MMMM d, y, HH:mm:ss':'+0000' }} UTC + +
Version{{ module.version }}
+ diff --git a/mbs-ui/src/app/mbs/module-detail/module-detail.component.scss b/mbs-ui/src/app/mbs/module-detail/module-detail.component.scss new file mode 100644 index 0000000..26ad7a0 --- /dev/null +++ b/mbs-ui/src/app/mbs/module-detail/module-detail.component.scss @@ -0,0 +1,107 @@ +table tbody td:first-child { + width: 30%; +} + +.timeValue { + text-decoration: underline; + text-decoration-style: dashed; + cursor: help; +} + +ul.build-tracker { + // Set the padding so the list takes up all the content in the DOM that + // it graphically represents + padding: 0 0 65px 0; + // Provide adequate spacing between the title and table + margin: 1rem 0 1.5rem 0; + + li { + // This number multiplied by the number of list items must equal to + // 100% so it can take up the whole container + width: 20%; + list-style-type: none; + // Makes the list look inline + float: left; + position: relative; + // Align the text with the icons + text-align: center; + } + + li:before { + font-family: FontAwesome; + content: '\f10c'; + font-size: 30px; + color: #28a745; + line-height: 0.8; + // Hide the line behind it + background-color: #ffffff; + // the size is tweaked so that it is slightly smaller then the icon + // size so the pulse doesn't show any white + width: 25px; + height: 23px; + // Make the icon act as a block so that the text is displayed below + // it and not next to it + display: block; + // Center the icon and have the text 5 px below it + margin: 0 auto 5px; + } + + li:after { + content: ''; + position: absolute; + width: 100%; + height: 3px; + background-color: #343a40; + top: 12px; + left: -50%; + // Put it behind the symbol + z-index: -1; + } + + // Tablets and larger + @media (min-width: 767px) { + padding: 10px 0 80px 0; + margin: 3rem 0 3rem 0; + li:before { + font-size: 50px; + width: 42.5px; + height: 40px; + line-height: 0.8; + margin: 0 auto 15px; + } + + li:after { + top: 20px; + } + } + + li:first-child:after { + content: none; + } + + li.build-tracker-step-done:before { + content: '\f05d'; + } + + li.build-tracker-step-active:before { + // Settings so that we can pulse the icon + border-radius: 50%; + box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); + animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); + } +} + +ul.build-tracker-failed { + li:before { + color: #cc0000; + content: '\f05c'; + } +} + +// Pulse the active icon +@keyframes pulse {to {box-shadow: 0 0 0 15px rgba(204, 0, 0, 0);}} +// Tablets and larger +@media (min-width: 767px) { + @keyframes pulse {to {box-shadow: 0 0 0 25px rgba(204, 0, 0, 0);}} +} + diff --git a/mbs-ui/src/app/mbs/module-detail/module-detail.component.ts b/mbs-ui/src/app/mbs/module-detail/module-detail.component.ts new file mode 100644 index 0000000..f851806 --- /dev/null +++ b/mbs-ui/src/app/mbs/module-detail/module-detail.component.ts @@ -0,0 +1,66 @@ +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { ActivatedRoute, ParamMap } from '@angular/router'; +import { switchMap } from 'rxjs/operators'; +import { Observable } from 'rxjs'; + +import { ModuleService } from '../services/module.service'; +import { MbsModule } from '../models/mbs.type'; +import { environment } from '..//../../environments/environment'; + + +@Component({ + selector: 'app-module-detail', + templateUrl: './module-detail.component.html', + styleUrls: ['./module-detail.component.scss'] +}) +export class ModuleDetailComponent implements OnInit, OnDestroy { + + module: MbsModule; + interval: any; + num_built_components: number; + num_components: number; + readonly dateTimeFormat: string = 'MMMM d, y, HH:mm:ss zzzz'; + readonly kojiUrl: string = environment.kojiUrl; + constructor(private route: ActivatedRoute, private moduleService: ModuleService) { } + + ngOnInit() { + this.getModule(); + // Run it every 15 seconds + this.interval = setInterval(() => { this.getModule(); }, 15000); + } + + ngOnDestroy() { + clearInterval(this.interval); + } + + getModule(): void { + // Don't reload the page when the build has failed or completed + if (!this.module || (this.module.state_name !== 'failed' && this.module.state_name !== 'ready')) { + const moduleObservable: Observable = this.route.paramMap.pipe(switchMap( + (params: ParamMap) => this.moduleService.getModule(+params.get('id')))); + moduleObservable.subscribe( + data => { + this.module = data; + let num_built_components = 0; + let num_components = 0; + for (const component of Object.keys(this.module.tasks.rpms)) { + num_components += 1; + if (this.module.tasks.rpms[component].state === 1) { + num_built_components += 1; + } + } + this.num_built_components = num_built_components; + this.num_components = num_components; + }, + error => { + console.error(error); + } + ); + } + } + + getKojiTagUrl(tag: string): string { + // encodeURI doesn't convert plus signs to $%2B, so this does this manually + return `${this.kojiUrl}search?match=exact&type=tag&terms=${encodeURI(tag).replace('+', '%2B')}`; + } +} diff --git a/mbs-ui/src/app/mbs/modules/modules.component.html b/mbs-ui/src/app/mbs/modules/modules.component.html new file mode 100644 index 0000000..f77b393 --- /dev/null +++ b/mbs-ui/src/app/mbs/modules/modules.component.html @@ -0,0 +1,30 @@ +

Modules

+ + + + + + + + + + + + + + + + + +
+ + {{ header }} + + + {{ header }} + +
{{ module.id }}{{ module.name + (module.scratch ? ' (scratch)' : '') }}{{ module.stream }}{{ module.version }}{{ module.context }} + {{ module.state_name.toUpperCase().charAt(0) + module.state_name.slice(1) }} +
diff --git a/mbs-ui/src/app/mbs/modules/modules.component.scss b/mbs-ui/src/app/mbs/modules/modules.component.scss new file mode 100644 index 0000000..077cdfd --- /dev/null +++ b/mbs-ui/src/app/mbs/modules/modules.component.scss @@ -0,0 +1,19 @@ +table thead { + th { + width: 20%; + white-space: nowrap; + } + #nameHeader { + width:30%; + } +} + +// Landscape phones and smaller +@media (max-width: 767px) { + table { + // Don't display the context column on larger screens + #contextHeader, td.context { + display: none; + } + } +} diff --git a/mbs-ui/src/app/mbs/modules/modules.component.ts b/mbs-ui/src/app/mbs/modules/modules.component.ts new file mode 100644 index 0000000..6171cf0 --- /dev/null +++ b/mbs-ui/src/app/mbs/modules/modules.component.ts @@ -0,0 +1,70 @@ +import { Component, OnInit } from '@angular/core'; +import { Router, ActivatedRoute, ParamMap } from '@angular/router'; + +import { BaseListComponent } from '../base-components/base-list.component'; +import { ModuleService } from '../services/module.service'; +import { MbsModuleShort } from '../models/mbs.type'; + + +@Component({ + selector: 'app-modules', + templateUrl: './modules.component.html', + styleUrls: ['./modules.component.scss'], +}) +export class ModulesComponent extends BaseListComponent implements OnInit { + + modules: Array; + + constructor(private route: ActivatedRoute, + private moduleService: ModuleService) { super(); } + + ngOnInit() { + this.route.paramMap.subscribe((params: ParamMap) => { + this.processRouteParams(params); + this.modules = []; + this.exhausted = false; + this.currentPage = 1; + this.getModules(); + }); + } + + getModules(): void { + if (!this.exhausted && !this.loading) { + this.loading = true; + this.moduleService.getModules(this.currentPage, this.orderBy, this.orderDirection).subscribe( + data => { + if (data.items.length) { + this.modules = this.modules.concat(data.items); + this.currentPage += 1; + } else { + this.exhausted = true; + } + }, + error => { + console.error(error); + }, + () => { + this.loading = false; + } + ); + } + } + + getStateCssClass(module: MbsModuleShort): string { + switch (module.state_name) { + case 'ready': { + return 'text-success'; + } + case 'failed': { + return 'text-danger'; + } + default : { + return 'text-info'; + } + } + } + + onScrollDown () { + this.getModules(); + } +} diff --git a/mbs-ui/src/app/mbs/services/module.service.spec.ts b/mbs-ui/src/app/mbs/services/module.service.spec.ts new file mode 100644 index 0000000..4cd1ef1 --- /dev/null +++ b/mbs-ui/src/app/mbs/services/module.service.spec.ts @@ -0,0 +1,118 @@ +import { TestBed } from '@angular/core/testing'; +import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; + +import { ModuleService } from 'mbs/services/module.service'; +import { MbsModulesShortApi } from '../models/mbs.type'; + +describe('ModuleService', () => { + let service: ModuleService; + let httpMock: HttpTestingController; + const mockModulesShell: MbsModulesShortApi = { + items: [], + meta: { + first: null, + last: null, + next: null, + page: 1, + pages: 1, + per_page: 40, + prev: null, + total: 0 + } + }; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + providers: [ModuleService] + }); + + service = TestBed.get(ModuleService); + httpMock = TestBed.get(HttpTestingController); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); + + it('should get a list of modules', () => { + const mockModules: MbsModulesShortApi = Object.assign({}, mockModulesShell); + mockModules.meta.total = 4; + mockModules.items = [ + { + 'context': 'c2c572ec', + 'id': 1547, + 'name': 'testmodule', + 'state': 5, + 'state_name': 'ready', + 'stream': 'master', + 'version': '20180224011125' + }, + { + 'context': '00000000', + 'id': 1546, + 'name': 'mongodb', + 'state': 4, + 'state_name': 'failed', + 'stream': 'private_mskalick_test', + 'version': '20171120143335' + }, + { + 'context': '5332648f', + 'id': 1545, + 'name': 'perl', + 'state': 5, + 'state_name': 'ready', + 'stream': '5.26', + 'version': '20180220133547' + }, + { + 'context': '3cc1cf22', + 'id': 1544, + 'name': 'perl', + 'state': 5, + 'state_name': 'ready', + 'stream': '5.24', + 'version': '20180220083157' + } + ]; + // Default arguments + service.getModules().subscribe(modules => { + expect(modules.items.length).toBe(4); + }); + const req = httpMock.expectOne(`${service.mbsUrl}module-builds/?short=true&per_page=40&page=1&order_desc_by=id`); + expect(req.request.method).toEqual('GET'); + // Respond with mock data + req.flush(mockModules); + // Assert that there are no outstanding requests + httpMock.verify(); + }); + + it('should ask for list of modules ordered by name and ascending', () => { + // Order by name in ascending order + service.getModules(1, 'name', 'asc').subscribe(modules => { + expect(modules.items.length).toBe(0); + }); + const req = httpMock.expectOne(`${service.mbsUrl}module-builds/?short=true&per_page=40&page=1&order_by=name`); + expect(req.request.method).toEqual('GET'); + // Respond with mock data + req.flush(mockModulesShell); + // Assert that there are no outstanding requests + httpMock.verify(); + }); + + it('should ask for list of modules on page 2', () => { + const mockModules: MbsModulesShortApi = Object.assign({}, mockModulesShell); + mockModules.meta.page = 2; + // Order by name in ascending order + service.getModules(2).subscribe(modules => { + expect(modules.items.length).toBe(0); + }); + const req = httpMock.expectOne(`${service.mbsUrl}module-builds/?short=true&per_page=40&page=2&order_desc_by=id`); + expect(req.request.method).toEqual('GET'); + // Respond with mock data + req.flush(mockModules); + // Assert that there are no outstanding requests + httpMock.verify(); + }); +}); diff --git a/mbs-ui/src/app/mbs/services/module.service.ts b/mbs-ui/src/app/mbs/services/module.service.ts new file mode 100644 index 0000000..f32ad26 --- /dev/null +++ b/mbs-ui/src/app/mbs/services/module.service.ts @@ -0,0 +1,46 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Observable } from 'rxjs'; + +import { environment } from '../../../environments/environment'; +import { MbsModulesShortApi, MbsModule, MbsComponentsApi, MbsComponent } from '../models/mbs.type'; + + +@Injectable() +export class ModuleService { + + readonly mbsUrl: string = environment.mbsUrl; + constructor(private http: HttpClient) { } + + private getOrderKey(orderDirection: string): string { + if (orderDirection === 'desc') { + return 'order_desc_by'; + } else { + return 'order_by'; + } + } + + getModules(page: number = 1, orderBy: string = 'id', orderDirection: string = 'desc'): Observable { + const orderKey = this.getOrderKey(orderDirection); + const url = this.mbsUrl + 'module-builds/?short=true&per_page=40&page=' + page + '&' + orderKey + '=' + orderBy; + return this.http.get(url); + } + + getModule(id: number): Observable { + return this.http.get(this.mbsUrl + 'module-builds/' + id); + } + + getComponents(page: number = 1, orderBy: string = 'id', orderDirection: string = 'desc', moduleID: number = null): + Observable { + const orderKey = this.getOrderKey(orderDirection); + let url = `${this.mbsUrl}component-builds/?per_page=40&page=${page}&orderKey=${orderBy}`; + if (moduleID !== null) { + url += `&module_id=${moduleID}`; + } + return this.http.get(url); + } + + getComponent(id: number): Observable { + return this.http.get(this.mbsUrl + 'component-builds/' + id); + } +} diff --git a/mbs-ui/src/assets/android-chrome-192x192.png b/mbs-ui/src/assets/android-chrome-192x192.png new file mode 100644 index 0000000..b433e30 Binary files /dev/null and b/mbs-ui/src/assets/android-chrome-192x192.png differ diff --git a/mbs-ui/src/assets/apple-touch-icon.png b/mbs-ui/src/assets/apple-touch-icon.png new file mode 100644 index 0000000..20ec692 Binary files /dev/null and b/mbs-ui/src/assets/apple-touch-icon.png differ diff --git a/mbs-ui/src/assets/browserconfig.xml b/mbs-ui/src/assets/browserconfig.xml new file mode 100644 index 0000000..14eda4f --- /dev/null +++ b/mbs-ui/src/assets/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #2b5797 + + + diff --git a/mbs-ui/src/assets/favicon-16x16.png b/mbs-ui/src/assets/favicon-16x16.png new file mode 100644 index 0000000..39cf855 Binary files /dev/null and b/mbs-ui/src/assets/favicon-16x16.png differ diff --git a/mbs-ui/src/assets/favicon-32x32.png b/mbs-ui/src/assets/favicon-32x32.png new file mode 100644 index 0000000..5c1d185 Binary files /dev/null and b/mbs-ui/src/assets/favicon-32x32.png differ diff --git a/mbs-ui/src/assets/favicon.ico b/mbs-ui/src/assets/favicon.ico new file mode 100644 index 0000000..c46bc2a Binary files /dev/null and b/mbs-ui/src/assets/favicon.ico differ diff --git a/mbs-ui/src/assets/mbs.png b/mbs-ui/src/assets/mbs.png new file mode 100644 index 0000000..27d285c Binary files /dev/null and b/mbs-ui/src/assets/mbs.png differ diff --git a/mbs-ui/src/assets/mstile-150x150.png b/mbs-ui/src/assets/mstile-150x150.png new file mode 100644 index 0000000..ca3b9d4 Binary files /dev/null and b/mbs-ui/src/assets/mstile-150x150.png differ diff --git a/mbs-ui/src/assets/site.webmanifest b/mbs-ui/src/assets/site.webmanifest new file mode 100644 index 0000000..fb5728b --- /dev/null +++ b/mbs-ui/src/assets/site.webmanifest @@ -0,0 +1,14 @@ +{ + "name": "", + "short_name": "", + "icons": [ + { + "src": "./assets/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/mbs-ui/src/environments/environment.fedora.ts b/mbs-ui/src/environments/environment.fedora.ts new file mode 100644 index 0000000..0055d0c --- /dev/null +++ b/mbs-ui/src/environments/environment.fedora.ts @@ -0,0 +1,5 @@ +export const environment = { + production: true, + mbsUrl: 'https://mbs.fedoraproject.org/module-build-service/1/', + kojiUrl: 'https://koji.fedoraproject.org/koji/' +}; diff --git a/mbs-ui/src/environments/environment.redhat.ts b/mbs-ui/src/environments/environment.redhat.ts new file mode 100644 index 0000000..8020d91 --- /dev/null +++ b/mbs-ui/src/environments/environment.redhat.ts @@ -0,0 +1,5 @@ +export const environment = { + production: true, + mbsUrl: 'https://mbs.engineering.redhat.com/module-build-service/1/', + kojiUrl: 'https://brewweb.engineering.redhat.com/brew/' +}; diff --git a/mbs-ui/src/environments/environment.ts b/mbs-ui/src/environments/environment.ts new file mode 100644 index 0000000..261298b --- /dev/null +++ b/mbs-ui/src/environments/environment.ts @@ -0,0 +1,10 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `.angular-cli.json`. + +export const environment = { + production: false, + mbsUrl: 'https://mbs.fedoraproject.org/module-build-service/1/', + kojiUrl: 'https://koji.fedoraproject.org/koji/' +}; diff --git a/mbs-ui/src/index.html b/mbs-ui/src/index.html new file mode 100644 index 0000000..d212136 --- /dev/null +++ b/mbs-ui/src/index.html @@ -0,0 +1,20 @@ + + + + + Module Build Service + + + + + + + + + + + + + + + diff --git a/mbs-ui/src/main.ts b/mbs-ui/src/main.ts new file mode 100644 index 0000000..91ec6da --- /dev/null +++ b/mbs-ui/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.log(err)); diff --git a/mbs-ui/src/polyfills.ts b/mbs-ui/src/polyfills.ts new file mode 100644 index 0000000..20d4075 --- /dev/null +++ b/mbs-ui/src/polyfills.ts @@ -0,0 +1,76 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + + +/** Evergreen browsers require these. **/ +// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. +import 'core-js/es7/reflect'; + + +/** + * Required to support Web Animations `@angular/platform-browser/animations`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/mbs-ui/src/styles.scss b/mbs-ui/src/styles.scss new file mode 100644 index 0000000..0370628 --- /dev/null +++ b/mbs-ui/src/styles.scss @@ -0,0 +1,47 @@ +@import "~bootstrap/scss/bootstrap"; +$fa-font-path: "../node_modules/font-awesome/fonts"; +@import '~font-awesome/scss/font-awesome.scss'; + +.title { + text-align: center; + margin-bottom: 1.5rem; +} + +// Tablets and larger +@media (min-width: 767px) { + .title { + margin-bottom: 2.5rem; + } +} + +table.mbs-list-table thead { + th { + background-color: #343a40 !important; + border-color: #151515; + color: #FDFDFD; + + a { + text-decoration: none; + color: #FDFDFD; + display:inline-block; + } + + a:hover { + text-decoration: underline; + } + + a.orderAsc:after { + font-family: FontAwesome; + content: '\f077'; + font-weight: lighter; + display:inline-block; + } + + a.orderDesc:after { + font-family: FontAwesome; + content: '\f078'; + font-weight: lighter; + display:inline-block; + } + } +} diff --git a/mbs-ui/src/test.ts b/mbs-ui/src/test.ts new file mode 100644 index 0000000..cd612ee --- /dev/null +++ b/mbs-ui/src/test.ts @@ -0,0 +1,32 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js/dist/long-stack-trace-zone'; +import 'zone.js/dist/proxy.js'; +import 'zone.js/dist/sync-test'; +import 'zone.js/dist/jasmine-patch'; +import 'zone.js/dist/async-test'; +import 'zone.js/dist/fake-async-test'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. +declare const __karma__: any; +declare const require: any; + +// Prevent Karma from running prematurely. +__karma__.loaded = function () {}; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); +// Finally, start Karma to run the tests. +__karma__.start(); diff --git a/mbs-ui/src/tsconfig.app.json b/mbs-ui/src/tsconfig.app.json new file mode 100644 index 0000000..b90ffb0 --- /dev/null +++ b/mbs-ui/src/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/app", + "module": "es2015", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/mbs-ui/src/tsconfig.spec.json b/mbs-ui/src/tsconfig.spec.json new file mode 100644 index 0000000..971a111 --- /dev/null +++ b/mbs-ui/src/tsconfig.spec.json @@ -0,0 +1,21 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/spec", + "baseUrl": "./app", + "module": "commonjs", + "target": "es5", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "test.ts", + "polyfills.ts" + ], + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/mbs-ui/src/typings.d.ts b/mbs-ui/src/typings.d.ts new file mode 100644 index 0000000..ef5c7bd --- /dev/null +++ b/mbs-ui/src/typings.d.ts @@ -0,0 +1,5 @@ +/* SystemJS module definition */ +declare var module: NodeModule; +interface NodeModule { + id: string; +} diff --git a/mbs-ui/tsconfig.json b/mbs-ui/tsconfig.json new file mode 100644 index 0000000..7168743 --- /dev/null +++ b/mbs-ui/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "target": "es5", + "typeRoots": [ + "node_modules/@types" + ], + "lib": [ + "es2017", + "dom" + ], + "module": "es2015", + "baseUrl": "./" + } +} \ No newline at end of file diff --git a/mbs-ui/tslint.json b/mbs-ui/tslint.json new file mode 100644 index 0000000..c6773f5 --- /dev/null +++ b/mbs-ui/tslint.json @@ -0,0 +1,140 @@ +{ + "rulesDirectory": [ + "node_modules/codelyzer" + ], + "rules": { + "arrow-return-shorthand": true, + "callable-types": true, + "class-name": true, + "comment-format": [ + true, + "check-space" + ], + "curly": true, + "eofline": true, + "forin": true, + "import-blacklist": [ + true, + "rxjs/Rx" + ], + "import-spacing": true, + "indent": [ + true, + "spaces" + ], + "interface-over-type-literal": true, + "label-position": true, + "max-line-length": [ + true, + 140 + ], + "member-access": false, + "member-ordering": [ + true, + { + "order": [ + "static-field", + "instance-field", + "static-method", + "instance-method" + ] + } + ], + "no-arg": true, + "no-bitwise": true, + "no-console": [ + true, + "debug", + "info", + "time", + "timeEnd", + "trace" + ], + "no-construct": true, + "no-debugger": true, + "no-duplicate-super": true, + "no-empty": false, + "no-empty-interface": true, + "no-eval": true, + "no-inferrable-types": [ + true, + "ignore-params" + ], + "no-misused-new": true, + "no-non-null-assertion": true, + "no-shadowed-variable": true, + "no-string-literal": false, + "no-string-throw": true, + "no-switch-case-fall-through": true, + "no-trailing-whitespace": true, + "no-unnecessary-initializer": true, + "no-unused-expression": true, + "no-use-before-declare": true, + "no-var-keyword": true, + "object-literal-sort-keys": false, + "one-line": [ + true, + "check-open-brace", + "check-catch", + "check-else", + "check-whitespace" + ], + "prefer-const": true, + "quotemark": [ + true, + "single" + ], + "radix": true, + "semicolon": [ + true, + "always" + ], + "triple-equals": [ + true, + "allow-null-check" + ], + "typedef-whitespace": [ + true, + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + } + ], + "typeof-compare": true, + "unified-signatures": true, + "variable-name": false, + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-operator", + "check-separator", + "check-type" + ], + "directive-selector": [ + true, + "attribute", + "app", + "camelCase" + ], + "component-selector": [ + true, + "element", + "app", + "kebab-case" + ], + "use-input-property-decorator": true, + "use-output-property-decorator": true, + "use-host-property-decorator": true, + "no-input-rename": true, + "no-output-rename": true, + "use-life-cycle-interface": true, + "use-pipe-transform-interface": true, + "component-class-suffix": true, + "directive-class-suffix": true, + "invoke-injectable": true + } +}