This repository has been archived by the owner on Jul 24, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 201
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #412 from gashcrumb/tech-ext-ui
- Loading branch information
Showing
12 changed files
with
426 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
83 changes: 82 additions & 1 deletion
83
ui/src/app/customizations/tech-extensions/detail/tech-extension-detail.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,82 @@ | ||
| <div>WIP - Detail</div> | ||
| <div class="row toolbar-pf"> | ||
| <div class="col-sm-12"> | ||
| <div class="toolbar-pf-actions"> | ||
| <div class="inline-block"> | ||
| <ol class="breadcrumb no-bottom-margin"> | ||
| <li> | ||
| <a [routerLink]="['/customizations']"> | ||
| Customizations | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a [routerLink]="['..']"> | ||
| Technical Extensions | ||
| </a> | ||
| </li> | ||
| <li class="active"> | ||
| <strong> | ||
| Technical Extension Details | ||
| </strong> | ||
| </li> | ||
| </ol> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <syndesis-loading [loading]="loading$ | async"> | ||
| <div class="row" *ngIf="extension$ | async; let extension"> | ||
| <div class="col-xs-12"> | ||
| <p></p> | ||
| <div class="panel panel-default"> | ||
| <div class="panel-heading"> | ||
| <h1 class="panel-title"> | ||
| {{ extension.name }} | ||
| <small>({{ extension.id }})</small> | ||
| </h1> | ||
| </div> | ||
| <div class="panel-body"> | ||
| <h4>Overview</h4> | ||
| <dl class="dl-horizontal"> | ||
| <dt> | ||
| Name | ||
| </dt> | ||
| <dd> | ||
| {{ extension.name }} | ||
| </dd> | ||
| </dl> | ||
| <dl class="dl-horizontal"> | ||
| <dt> | ||
| Description | ||
| </dt> | ||
| <dd> | ||
| {{ extension.description }} | ||
| </dd> | ||
| </dl> | ||
| <p></p> | ||
| <h4>Supported Steps</h4> | ||
| <div class="row"> | ||
| <div class="col-xs-1"> | ||
| </div> | ||
| <div class="col-xs-11"> | ||
| <div *ngFor="let action of extension.actions"> | ||
| <strong> | ||
| {{ action.name }} | ||
| </strong> | ||
| - {{ action.description }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <p></p> | ||
| <h4>Usage</h4> | ||
| <div class="row"> | ||
| <div class="col-xs-1"> | ||
| </div> | ||
| <div class="col-xs-11"> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </syndesis-loading> |
14 changes: 12 additions & 2 deletions
14
ui/src/app/customizations/tech-extensions/detail/tech-extension-detail.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,24 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
| import { ActivatedRoute, Router } from '@angular/router'; | ||
| import { Observable } from 'rxjs/Observable'; | ||
| import { Extension } from '../../../model'; | ||
| import { ExtensionStore } from '../../../store/extension/extension.store'; | ||
|
|
||
| @Component({ | ||
| selector: 'syndesis-tech-extension-detail', | ||
| templateUrl: 'tech-extension-detail.component.html' | ||
| }) | ||
| export class TechExtensionDetailComponent implements OnInit { | ||
| constructor(private store: ExtensionStore) { } | ||
| extension$: Observable<Extension>; | ||
| loading$: Observable<boolean>; | ||
| constructor(private extensionStore: ExtensionStore, | ||
| private router: Router, | ||
| private route: ActivatedRoute) { | ||
| this.loading$ = this.extensionStore.loading; | ||
| this.extension$ = this.extensionStore.resource; | ||
| } | ||
|
|
||
| ngOnInit() { | ||
| // WIP | ||
| this.route.paramMap.first(params => params.has('id')).subscribe(params => this.extensionStore.load(params.get('id'))); | ||
| } | ||
| } |
143 changes: 142 additions & 1 deletion
143
ui/src/app/customizations/tech-extensions/import/tech-extension-import.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,142 @@ | ||
| <div>WIP - import</div> | ||
| <div class="row toolbar-pf"> | ||
| <div class="col-sm-12"> | ||
| <div class="toolbar-pf-actions"> | ||
| <div class="inline-block"> | ||
| <ol class="breadcrumb no-bottom-margin"> | ||
| <li> | ||
| <a [routerLink]="['/customizations']"> | ||
| Customizations | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a [routerLink]="['..']"> | ||
| Technical Extensions | ||
| </a> | ||
| </li> | ||
| <li class="active"> | ||
| <strong> | ||
| Import Technical Extension | ||
| </strong> | ||
| </li> | ||
| </ol> | ||
| </div> | ||
| <div class="toolbar-pf-action-right"> | ||
| <div class="toolbar-pf-action-right-alignment"> | ||
| <button class="btn btn-default" | ||
| [routerLink]="['..']"> | ||
| Cancel | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-xs-12"> | ||
| <p></p> | ||
| <div class="panel panel-default"> | ||
| <div class="panel-heading"> | ||
| <h3 class="panel-title"> | ||
| Import Technical Extension | ||
| </h3> | ||
| </div> | ||
| <div class="panel-body"> | ||
| <p> | ||
| To import a technical extension, it must be packaged as a .jar file. To update a technical extension in the breadcrumbs above, | ||
| click Technical Extensions and in the list of technical extensions, click Update for the appropriate technical | ||
| extension. | ||
| </p> | ||
| <ng-container *ngIf="error"> | ||
| <div [class]="error.level" [innerHtml]="error.message"> | ||
| </div> | ||
| </ng-container> | ||
| <dl class="dl-horizontal" | ||
| ng2FileDrop | ||
| [uploader]="uploader"> | ||
| <dt> | ||
| Upload File | ||
| </dt> | ||
| <dd> | ||
| <div class="row"> | ||
| <div class="col-md-6"> | ||
| <input #fileSelect | ||
| type="file" | ||
| ng2FileSelect | ||
| [uploader]="uploader"> | ||
| <p class="help-block">Accepted file type: .jar</p> | ||
| </div> | ||
| <div class="col-md-6"> | ||
| <div *ngIf="uploader.queue.length"> | ||
| <div *ngFor="let item of uploader.queue"> | ||
| <p *ngIf="!item.isUploaded"> | ||
| <span class="spinner spinner-lg spinner-inline"></span> | ||
| {{ item.file.name }} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </dd> | ||
| </dl> | ||
| <ng-container *ngIf="response"> | ||
| <dl class="dl-horizontal"> | ||
| <dt> | ||
| ID | ||
| </dt> | ||
| <dd> | ||
| {{ response.id }} | ||
| </dd> | ||
| </dl> | ||
| <dl class="dl-horizontal"> | ||
| <dt> | ||
| Name | ||
| </dt> | ||
| <dd> | ||
| {{ response.name }} | ||
| </dd> | ||
| </dl> | ||
| <dl class="dl-horizontal"> | ||
| <dt> | ||
| Description | ||
| </dt> | ||
| <dd> | ||
| {{ response.description }} | ||
| </dd> | ||
| </dl> | ||
| <dl class="dl-horizontal"> | ||
| <dt> | ||
| Steps | ||
| </dt> | ||
| <dd> | ||
| <div *ngFor="let action of response.actions"> | ||
| <strong> | ||
| {{ action.name }} | ||
| </strong> | ||
| - {{ action.description }} | ||
| </div> | ||
| </dd> | ||
| </dl> | ||
| <dl class="dl-horizontal"> | ||
| <dt></dt> | ||
| <dd> | ||
| <button type="button" | ||
| class="btn btn-primary" | ||
| [disabled]="importing" | ||
| (click)="doImport()"> | ||
| <span *ngIf="importing" | ||
| class="spinner spinner-sm spinner-inline"></span> | ||
| Import | ||
| </button> | ||
| <button *ngIf="!importing" | ||
| type="button" | ||
| class="btn btn-default" | ||
| [routerLink]="['..']"> | ||
| Cancel | ||
| </button> | ||
| </dd> | ||
| </dl> | ||
| </ng-container> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
106 changes: 102 additions & 4 deletions
106
ui/src/app/customizations/tech-extensions/import/tech-extension-import.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,113 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
| import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; | ||
| import { ActivatedRoute, Router } from '@angular/router'; | ||
| import { | ||
| FileUploader, | ||
| FileItem, | ||
| FileLikeObject, | ||
| FilterFunction, | ||
| FileUploaderOptions, | ||
| ParsedResponseHeaders | ||
| } from 'ng2-file-upload-base/src'; | ||
| import { NotificationType } from 'patternfly-ng'; | ||
| import { Extension } from '../../../model'; | ||
| import { ExtensionStore } from '../../../store/extension/extension.store'; | ||
| import { NotificationService } from 'app/common/ui-patternfly/notification-service'; | ||
|
|
||
| interface FileError { | ||
| level: string; | ||
| message: string; | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: 'syndesis-tech-extentions-import', | ||
| templateUrl: 'tech-extension-import.component.html' | ||
| }) | ||
|
|
||
| export class TechExtensionImportComponent implements OnInit { | ||
| constructor(private store: ExtensionStore) { } | ||
|
|
||
| uploader: FileUploader; | ||
| response: Extension; | ||
| error: FileError; | ||
| importing = false; | ||
|
|
||
| @ViewChild('fileSelect') fileSelect: ElementRef; | ||
|
|
||
| constructor(private store: ExtensionStore, | ||
| private notificationService: NotificationService, | ||
| private router: Router, | ||
| private route: ActivatedRoute) { } | ||
|
|
||
| getGenericError() { | ||
| return { | ||
| level: 'alert alert-danger', | ||
| message: '<strong>This is not a valid file type.</strong> Try again and specify a .jar file' | ||
| }; | ||
| } | ||
|
|
||
| doImport() { | ||
| this.importing = true; | ||
| if (!this.response || !this.response.id) { | ||
| // safety net | ||
| this.response = undefined; | ||
| return; | ||
| } | ||
| this.store.importExtension(this.response.id).toPromise().then( value => { | ||
| this.notificationService.message( | ||
| NotificationType.SUCCESS, | ||
| 'Imported!', | ||
| 'Your technical extension has been imported', | ||
| false, | ||
| null, | ||
| [] | ||
| ); | ||
| this.router.navigate(['..', this.response.id], { relativeTo: this.route }); | ||
| }).catch((reason: any) => { | ||
| this.error = { | ||
| level: 'alert alert-danger', | ||
| message: reason.userMsg || 'An unknown error has occurred' | ||
| }; | ||
| }); | ||
| } | ||
|
|
||
| ngOnInit() { | ||
| // WIP | ||
| this.uploader = new FileUploader({ | ||
| url: this.store.getUploadUrl(), | ||
| disableMultipart: false, | ||
| autoUpload: true, | ||
| filters: [ | ||
| { | ||
| name: 'filename filter', | ||
| fn: (item: FileLikeObject, options: FileUploaderOptions) => { | ||
| if (!item.name.endsWith('.jar')) { | ||
| return false; | ||
| } | ||
| return true; | ||
| } | ||
| } | ||
| ] | ||
| }); | ||
| this.uploader.onWhenAddingFileFailed = (item: FileLikeObject, filter: any, options: any): any => { | ||
| this.error = this.getGenericError(); | ||
| this.fileSelect.nativeElement['value'] = ''; | ||
| this.uploader.clearQueue(); | ||
| }; | ||
| this.uploader.onCompleteItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => { | ||
| this.error = undefined; | ||
| this.response = undefined; | ||
| let resp: any = {}; | ||
| try { | ||
| resp = JSON.parse(response); | ||
| } catch (err) { | ||
| this.error = this.getGenericError(); | ||
| return; | ||
| } | ||
| if (status === 200) { | ||
| this.response = <Extension> resp; | ||
| return; | ||
| } | ||
| this.error = { | ||
| level: 'alert alert-danger', | ||
| message: resp.userMsg || 'An unknown error has occurred' | ||
| }; | ||
| }; | ||
| } | ||
| } |
Oops, something went wrong.