Skip to content
This repository has been archived by the owner on Nov 22, 2019. It is now read-only.

Commit

Permalink
Addition of QuickLook on Dataservice summary page
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdrillin
mdrillin committed Dec 5, 2017
1 parent 8abf4f9 commit da97f88
Show file tree
Hide file tree
Showing 15 changed files with 237 additions and 44 deletions.
2 changes: 1 addition & 1 deletion ngapp/src/app/connections/connections-cards/connections-cards.component.html
View file
Expand Up @@ -8,7 +8,7 @@
<h2 class="connection-card-title">
<span class="fa fa-fw fa-plug connection-card-icon"></span>
<span><a [routerLink]="[connection.getId()]">{{ connection.getId() }}</a></span>
<span class="pull-right fa fa-fw fa-close connection-card-action-icon" style="color:darkred;" (click)="onDeleteConnection(connection.getId())"></span>
<span class="pull-right pficon-delete connection-card-action-icon" style="color:darkred;" (click)="onDeleteConnection(connection.getId())"></span>
</h2>
<hr/>
<div>
Expand Down
4 changes: 2 additions & 2 deletions ngapp/src/app/dataservices/dataservices-cards/dataservices-cards.component.css
View file
Expand Up @@ -9,12 +9,12 @@

.dataservice-card-action-icon {
cursor: pointer;
margin-left: 7px;
margin-left: 10px;
}

.dataservice-card-action-disabled-icon {
color: lightgray;
margin-left: 7px;
margin-left: 10px;
}

.dataservice-card-icon {
Expand Down
3 changes: 3 additions & 0 deletions ngapp/src/app/dataservices/dataservices-cards/dataservices-cards.component.html
View file
Expand Up @@ -22,6 +22,9 @@ <h2 class="dataservice-card-title">
<span *ngIf="!dataservice.serviceDeploymentActive" class="pull-right fa fa-list-alt dataservice-card-action-disabled-icon"></span>
</h2>
<hr/>
<div class="pull-right">
<span class="pull-right fa fa-search dataservice-card-action-icon" (click)="onQuickLookDataservice(dataservice.getId())"></span>
</div>
<div>
<span>{{ dataservice.getDescription() }}</span>
</div>
Expand Down
5 changes: 5 additions & 0 deletions ngapp/src/app/dataservices/dataservices-cards/dataservices-cards.component.ts
View file
Expand Up @@ -35,6 +35,7 @@ export class DataservicesCardsComponent {
@Output() public testDataservice: EventEmitter<string> = new EventEmitter<string>();
@Output() public publishDataservice: EventEmitter<string> = new EventEmitter<string>();
@Output() public deleteDataservice: EventEmitter<string> = new EventEmitter<string>();
@Output() public quickLookDataservice: EventEmitter<string> = new EventEmitter<string>();

/**
* Constructor.
Expand Down Expand Up @@ -71,6 +72,10 @@ export class DataservicesCardsComponent {
this.deleteDataservice.emit(dataserviceName);
}

public onQuickLookDataservice(dataserviceName: string): void {
this.quickLookDataservice.emit(dataserviceName);
}

public onSelectTag(tag: string, event: MouseEvent): void {
event.stopPropagation();
event.preventDefault();
Expand Down
6 changes: 6 additions & 0 deletions ngapp/src/app/dataservices/dataservices-list/dataservices-list.component.css
View file
Expand Up @@ -3,6 +3,12 @@
font-size: 1.7em;
}

.dataservice-list-quicklook-icon {
margin-left: 20px;
font-size: 1.3em;
cursor: pointer;
}

.list-view-pf-main-info {
padding-bottom: 5px;
padding-top: 5px;
Expand Down
3 changes: 3 additions & 0 deletions ngapp/src/app/dataservices/dataservices-list/dataservices-list.component.html
View file
Expand Up @@ -24,6 +24,9 @@
<span *ngIf="dataservice.getServiceViewTables().length==1">{{dataservice.getServiceViewTables()[0]}}</span>
<span *ngIf="dataservice.getServiceViewTables().length==2">{{dataservice.getServiceViewTables()[0]}}, {{dataservice.getServiceViewTables()[1]}}</span>
</div>
<div>
<span class="fa fa-search dataservice-list-quicklook-icon" (click)="onQuickLookDataservice(dataservice.getId())"></span>
</div>
<!--
<div class="dataservice-tags" *ngIf="dataservice.tags && dataservice.tags.length > 0">
<span class="dataservice-tags-label">Tags:</span>
Expand Down
5 changes: 5 additions & 0 deletions ngapp/src/app/dataservices/dataservices-list/dataservices-list.component.ts
View file
Expand Up @@ -36,6 +36,7 @@ export class DataservicesListComponent {
@Output() public testDataservice: EventEmitter<string> = new EventEmitter<string>();
@Output() public publishDataservice: EventEmitter<string> = new EventEmitter<string>();
@Output() public deleteDataservice: EventEmitter<string> = new EventEmitter<string>();
@Output() public quickLookDataservice: EventEmitter<string> = new EventEmitter<string>();

private router: Router;

Expand Down Expand Up @@ -74,6 +75,10 @@ export class DataservicesListComponent {
this.deleteDataservice.emit(dataserviceName);
}

public onQuickLookDataservice(dataserviceName: string): void {
this.quickLookDataservice.emit(dataserviceName);
}

// public onSelectTag(tag: string, event: MouseEvent): void {
// event.stopPropagation();
// event.preventDefault();
Expand Down
40 changes: 40 additions & 0 deletions ngapp/src/app/dataservices/dataservices.component.css
View file
Expand Up @@ -55,3 +55,43 @@ a.clear-filters {
.dataservice-list-items .none-matched-state .alert {
background-color: white;
}

.dataservice-summary-top-area-with-results {
height: 20vh;
overflow-y: auto;
overflow-x: hidden;
}

.dataservice-summary-bottom-area-with-results {
height: 50vh;
}

.dataservice-summary-top-area-no-results {
}

.dataservice-summary-bottom-area-no-results {
}

.dataservice-results-hr {
height: 3px;
border: none;
color: darkgray;
background-color: darkgray;
}

.dataservice-results-action-icon-close {
cursor: pointer;
color: darkred;
font-size: 1.5em;
}

.dataservice-results-action-icon-refresh {
cursor: pointer;
font-size: 1.5em;
margin-left: 10px;
}

.dataservice-results-action-icon {
cursor: pointer;
font-size: 1.5em;
}
42 changes: 27 additions & 15 deletions ngapp/src/app/dataservices/dataservices.component.html
View file
Expand Up @@ -90,23 +90,35 @@ <h1 class="card-pf-title">
<!-- The list or card view -->
<div class="col-md-12" *ngIf="isLoaded('dataservices')">
<!-- Notification for Dataservice Export -->
<pfng-inline-notification [header]="exportNotificationHeader"
[message]="exportNotificationMessage"
[dismissable]="true"
[type]="exportNotificationType"
[hidden]="exportNotificationHidden">
</pfng-inline-notification>
<pfng-toast-notification *ngIf="showExportNotification" [header]="exportNotificationHeader"
[message]="exportNotificationMessage"
[type]="exportNotificationType"
[showClose]="true"
(onCloseSelect)="onCloseExportNotification()">
</pfng-toast-notification>

<app-dataservices-list *ngIf="isListLayout" [dataservices]="filteredDataservices" [selectedDataservices]="selectedDataservices"
(activateDataservice)="onActivate($event)" (testDataservice)="onTest($event)"
(publishDataservice)="onPublish($event)" (deleteDataservice)="onDelete($event)"
(dataserviceSelected)="onSelected($event)" (dataserviceDeselected)="onDeselected($event)"></app-dataservices-list>
<app-dataservices-cards *ngIf="isCardLayout" [dataservices]="filteredDataservices" [selectedDataservices]="selectedDataservices"
(activateDataservice)="onActivate($event)" (testDataservice)="onTest($event)"
(publishDataservice)="onPublish($event)" (deleteDataservice)="onDelete($event)"
(dataserviceSelected)="onSelected($event)" (dataserviceDeselected)="onDeselected($event)"></app-dataservices-cards>
<div class="{{cardListAreaCss}}">
<app-dataservices-list *ngIf="isListLayout" [dataservices]="filteredDataservices" [selectedDataservices]="selectedDataservices"
(activateDataservice)="onActivate($event)" (testDataservice)="onTest($event)"
(publishDataservice)="onPublish($event)" (deleteDataservice)="onDelete($event)"
(quickLookDataservice)="onQuickLook($event)"
(dataserviceSelected)="onSelected($event)" (dataserviceDeselected)="onDeselected($event)"></app-dataservices-list>
<app-dataservices-cards *ngIf="isCardLayout" [dataservices]="filteredDataservices" [selectedDataservices]="selectedDataservices"
(activateDataservice)="onActivate($event)" (testDataservice)="onTest($event)"
(publishDataservice)="onPublish($event)" (deleteDataservice)="onDelete($event)"
(quickLookDataservice)="onQuickLook($event)"
(dataserviceSelected)="onSelected($event)" (dataserviceDeselected)="onDeselected($event)"></app-dataservices-cards>
</div>
</div>
<div class="col-md-12 {{resultsAreaCss}}" *ngIf="showResults">
<hr class="dataservice-results-hr">
<span class="pull-left fa fa-list-alt dataservice-results-action-icon" (click)="onTest(quickLookServiceName)"></span>
<span class="pull-left fa fa-refresh dataservice-results-action-icon-refresh" (click)="onSubmitQuickLookQuery()"></span>
<span class="pull-right fa fa-fw fa-close dataservice-results-action-icon-close" (click)="setQuickLookPanelOpenState(false)"></span>
<h3 style="margin-left: 75px">Quick Look Results for Dataservice &apos;<strong>{{ quickLookServiceName }}</strong>&apos;</h3>
<br>
<app-sql-control [editorVisible]="editorVisible" ></app-sql-control>
</div>

</div>

</div>
Expand Down
8 changes: 6 additions & 2 deletions ngapp/src/app/dataservices/dataservices.component.spec.ts
View file
Expand Up @@ -12,7 +12,10 @@ import { DataserviceService } from "@dataservices/shared/dataservice.service";
import { MockDataserviceService } from "@dataservices/shared/mock-dataservice.service";
import { MockVdbService } from "@dataservices/shared/mock-vdb.service";
import { VdbService } from "@dataservices/shared/vdb.service";
import { SqlControlComponent } from "@dataservices/sql-control/sql-control.component";
import { SharedModule } from "@shared/shared.module";
import { NgxDatatableModule } from "@swimlane/ngx-datatable";
import { CodemirrorModule } from "ng2-codemirror";
import { ModalModule } from "ngx-bootstrap";
import { PatternFlyNgModule } from "patternfly-ng";

Expand All @@ -22,8 +25,9 @@ describe("DataservicesComponent", () => {

beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ CoreModule, FormsModule, HttpModule, ModalModule.forRoot(), PatternFlyNgModule, RouterTestingModule, SharedModule ],
declarations: [ DataservicesComponent, DataservicesListComponent, DataservicesCardsComponent ],
imports: [ CoreModule, FormsModule, HttpModule, ModalModule.forRoot(), PatternFlyNgModule,
RouterTestingModule, SharedModule, CodemirrorModule, NgxDatatableModule ],
declarations: [ DataservicesComponent, DataservicesListComponent, DataservicesCardsComponent, SqlControlComponent ],
providers: [
AppSettingsService,
{ provide: VdbService, useClass: MockVdbService }
Expand Down

0 comments on commit da97f88

Please sign in to comment.