http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-node-svg.component.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-node-svg.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-node-svg.component.ts new file mode 100644 index 0000000..a8d1987 --- /dev/null +++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-node-svg.component.ts @@ -0,0 +1,196 @@ +/* +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ +/* +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ +import { Renderer2, ViewEncapsulation, Component, Input } from '@angular/core'; + +export interface ViewParams { + viewMode: string, + width: string, + height: string, + visible: string, + display: string, + opacity: number, + border: string +} + +export const FULL:ViewParams = { + viewMode: 'FULL', + width: '350px', + height: '180px', + visible: 'visible', + display: 'block', + opacity: 1, + border: "2px solid #0000FF" +}; + +export const NORMAL:ViewParams = { + viewMode: 'NORMAL', + width: '200px', + height: '60px', + visible: 'hidden', + display: 'none', + opacity: 0, + border: "none" +}; + +@Component({ + moduleId: module.id, + selector: 'plan-node-svg', + templateUrl: 'plan-node-svg.component.html', + styleUrls: ['plan-node-svg.component.scss'], + encapsulation: ViewEncapsulation.None, +}) + +export class PlanNodeSVGComponent { + @Input() node: any; + @Input() level; + @Input() item = 0; + @Input() subplan = 0; + @Input() planName = ""; + @Input() viewParams; + + details: any; + viewParams_: any; + + constructor(private renderer: Renderer2) {} + + numberOfInputs: 0; + selected = false; + + ngOnInit() { + + this.viewParams_ = NORMAL; + + /* Some preprocessing to show explanation details */ + if (this.node.inputs){ + this.numberOfInputs = this.node.inputs.length; + } else { + this.numberOfInputs = 0; + } + + if (this.node) { + let node_= JSON.parse(JSON.stringify(this.node)); + + if (node_.inputs) { + delete node_['inputs']; + } + + if (node_.subplan) { + delete node_['subplan']; + } + + if (node_.visible != undefined ) { + delete node_['visible']; + } + + if (node_.viewDetails != undefined) { + delete node_['viewDetails']; + } + + if (node_.operator) { + delete node_['operator']; + } + + if (node_.operatorId) { + delete node_['operatorId']; + } + + this.details = JSON.stringify(node_, null, 8); + + this.details = this.details.replace(/^{/, ''); + this.details = this.details.replace(/^\n/, ''); + this.details = this.details.replace(/}$/, ''); + } + } + + getNodeName() { + if(this.node) { + if (this.node.operator) { + return (this.node.operator).toUpperCase(); + } else { + return "NA"; + } + } + } + + getNodeOperatorId() { + if(this.node) { + if (this.node.operatorId) { + return (this.node.operatorId).toUpperCase(); + } else { + return "NA"; + } + } + } + + getNodeSubPlan() { + if(this.node) { + if (this.node['inputs']) { + if (this.node['inputs'][this.item]) { + if (this.node['inputs'][this.item]['subplan']) { + return "Subplan"; + } else { + return ""; + } + } else { + return ""; + } + } + } + } + + seeDetails(me) { + // Future Implementation + } + + checkSubPlan() { + if(this.node) { + if (this.node['inputs']) { + if (this.node['inputs'][this.item]) { + if (this.node['inputs'][this.item]['subplan']) { + return true; + } else { + return false; + } + } else { + return false; + } + } else { + return false; + } + } + } + + checkMerge() { + if(this.node) { + if (this.node['mergeWith']) { + return true; + } else { + return false; + } + } + } +} \ No newline at end of file
http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.html ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.html new file mode 100644 index 0000000..cda6cf5 --- /dev/null +++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.html @@ -0,0 +1,37 @@ +<!--/* +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ --> +<div *ngIf="plan_" class="plan-graph" id={{planName}}> + <mat-expansion-panel hideToggle> + <mat-expansion-panel-header class="plan-header header-centered-v"> + <mat-icon>assessment</mat-icon> + <mat-panel-title>{{planName}}</mat-panel-title> + <mat-panel-description></mat-panel-description> + </mat-expansion-panel-header> + <mat-panel-description class='content'> + <div class='panel'> + <button mat-button class='button' (click)="showJSON()" matTooltip="Toggle JSON or Graphic View">JSON</button> + </div> + <div class="divider"> + <div *ngIf="!jsonVisible" class="plan"> + <plan-node-svg [planName]="planName" [node]="plan_" [level]="0" [item]="0" [subplan]="0"></plan-node-svg> + </div> + <div *ngIf="jsonVisible" class="json"> + <div class='center'> + <pre class="json-content">{{jsonPlan}}</pre> + </div> + </div> + </div> + </mat-panel-description> + </mat-expansion-panel> +</div> http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.scss ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.scss new file mode 100644 index 0000000..916620c --- /dev/null +++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.scss @@ -0,0 +1,98 @@ +/* +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.plan-graph { + display: block; + margin: 0 0px 0 0px; + padding: 0; + mat-expansion-panel { + border: none !important; + } +} + +.panel { + display: flex; + flex-flow: row; + justify-content: flex-start; + border-bottom: 1px dashed gray; + margin-bottom: 15px; +} + +.plan-header { + max-height: 42px; + min-height: 42px; + font-size: 0.80rem; + font-weight: 500; + border-bottom: 1px solid gray; +} + +.divider { + display: flex; + flex-flow: row; + align-items: flex-start; +} + +.plan { + margin: 0px; + padding: 20px; + padding-left: 50px; + padding-right: 50px; + margin-right: auto; + margin-left: auto; + padding-left: 50px; + overflow: visible; +} + +.plan1 { + display: flow; + flex-flow: row; +} + +.content { + margin-top: 20px; + display: block; + font-size: 0.80rem; + font-weight: 500; +} + +.json { + //padding: 20px; + //padding-right: 50px; + //margin-right: 25px; + min-width: 100%; + max-width: 100%; +} + +.json-content { + //border-left: 1px solid gray; + padding-left: 25px; //display: inline-block; + //margin: auto; +} + +.button { + font-size: 12px !important; + float: right; + color: blue !important; + margin-bottom: 15px; +} + +#wrapper { + position: relative; +} + +.center { + margin-left: auto; + margin-right: auto; + width: 50%; +} http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.ts new file mode 100644 index 0000000..e66ac5f --- /dev/null +++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.ts @@ -0,0 +1,113 @@ +import { Component, Input, SimpleChange } from '@angular/core'; + +export interface planCount { + nodesCnt: number, + levelsCnt: number +} + +@Component({ + selector: 'plan-view', + templateUrl: 'plan-view.component.html', + styleUrls: ['plan-view.component.scss'], +}) + +export class PlanViewComponent { + + @Input() plan: any; + @Input() planName: any; + @Input() jsonPlan: any; + + plan_: any; + numberOfLevels: number = 0; + numberOfNodes: number = 0; + jsonVisible = false; + + constructor() {} + + ngOnInit() { + this.plan_ = this.plan; + /* find the number of nodes in the tree */ + let summary : planCount = {nodesCnt:0, levelsCnt:0} + summary = this.analyzePlan(this.plan_, summary); + this.numberOfLevels = summary.levelsCnt; + this.numberOfNodes = summary.nodesCnt; + } + + ngOnChanges(changes: SimpleChange) { + this.plan_ = this.plan; + /* find the number of nodes in the tree */ + let summary : planCount = {nodesCnt:0, levelsCnt:0} + summary = this.analyzePlan(this.plan_, summary); + this.numberOfLevels = summary.levelsCnt; + this.numberOfNodes = summary.nodesCnt; + } + + /* + * See the JSON contents inside of each node + */ + showJSON() { + this.jsonVisible = !this.jsonVisible; + } + + /* + * Check the merge paths, from operation ID + */ + operation = []; + checkOperationId(operationId, levelsCnt){ + console.log('LEVEL:' + levelsCnt + 'OP' + operationId) + // console.log(this.operation) + if (this.operation.length > 0) { + for (let i = 0; i < this.operation.length; i++) { + if (this.operation[i] === operationId) { + console.log('found') + console.log('BREAK') + this.operation = []; + return true; + } + } + } + this.operation.push(operationId); + console.log('not found') + return false; + } + + /* + * Counts the number of nodes/operations in the tree + */ + analyzePlan(plan, planCounter) { + planCounter.nodesCnt += 1; + planCounter.levelsCnt += 1; + let nodes = {} + nodes = plan; + // augment + if (nodes) { + nodes['visible'] = true; + nodes['viewDetails'] = false; + if (nodes['inputs']) { + for (let i = 0; i< nodes['inputs'].length; i++) + { + planCounter = this.analyzePlan(nodes['inputs'][i], planCounter); + } + } + } + return planCounter; + } + + /* + * See the JSON contents inside of each node, with pre-format + * Not used in this version + */ + toggleViewDetails(plan) { + let nodes = {} + nodes = plan; + // augment + nodes['visible'] = true; + nodes['viewDetails'] = !nodes['viewDetails']; + if (nodes['inputs']) { + for (let i = 0; i< nodes['inputs'].length; i++) + { + this.toggleViewDetails(nodes['inputs'][i]); + } + } + } +} http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.html ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.html index 6dd3ef3..4aeaab5 100755 --- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.html +++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.html @@ -11,14 +11,12 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ --> - <div class="query-container"> - <div class="metadata"> - <awc-metadata class="metadata-card"></awc-metadata> - </div> - <div class="vertical"> - <awc-query class="query-card"></awc-query> - <awc-results class="output-card"></awc-results> - </div> -</div> - + <div class="content"> + <awc-query class="input-card"></awc-query> + <awc-results class="output-card"></awc-results> + </div> + <div *ngIf="visible" class="drawer"> + <awc-metadata></awc-metadata> + </div> +</div> http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.scss ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.scss index d6b530b..95e70e7 100755 --- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.scss +++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.scss @@ -16,67 +16,40 @@ * specific language governing permissions and limitations * under the License. */ - .query-container { - display: flex; - flex-direction: row; - //background-color: red; - width: 100%; - margin:0; - padding:0; - overflow: hidden; - } -.metadata { +.query-container { display: flex; - flex-direction: row; - width: 20%; - // background-color: rgb(0, 255, 42); - margin:0; + flex-flow: row; + background-color: gainsboro; + width: 100%; + //min-height: 200px; + margin: 0; padding: 0; - // padding-right: 10px; - border-right: 1px solid hsla(0,0%,0%,.20); } -.vertical { - display: flex; - flex-direction: column; - align-items: center; - width: 80%; - overflow: hidden; - margin:0; - padding: 1px0; - // background-color: rgb(38, 0, 255); +.drawer { + transition-property: display; + width: 320px; } -.metadata-card { - display: flex; - flex-direction: row; - justify-content: center; +.content { width: 100%; - overflow: hidden; - margin:0; - padding: 0; - // background-color: green; } .query-card { display: flex; flex-direction: row; - justify-content: center; + justify-content: center; width: 100%; - overflow: hidden; - margin:0; + margin: 0; padding: 0; - //background-color: green; } .output-card { display: flex; flex-direction: row; - justify-content: center; + justify-content: center; width: 100%; - overflow: hidden; - margin:0; + margin: 0; padding: 0; - //background-color: yellow; -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.ts index 776e184..aff5e50 100755 --- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.ts +++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.ts @@ -11,64 +11,35 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import { Dataverse } from '../../shared/models/asterixDB.model' +import { Component, AfterViewInit} from '@angular/core'; import { Store } from '@ngrx/store'; -import { Observable } from 'rxjs/Observable'; -import * as dataverseActions from '../../shared/actions/dataverse.actions' -import * as datasetActions from '../../shared/actions/dataset.actions' -import * as datatypesActions from '../../shared/actions/datatype.actions' -import * as indexesActions from '../../shared/actions/index.actions' -import * as metadataActions from '../../shared/actions/metadata.actions' -import { ElementRef, ViewChild} from '@angular/core'; -import {DataSource} from '@angular/cdk/collections'; -import {BehaviorSubject} from 'rxjs/BehaviorSubject'; -import 'rxjs/add/operator/startWith'; -import 'rxjs/add/observable/merge'; -import 'rxjs/add/operator/map'; -import 'rxjs/add/operator/debounceTime'; -import 'rxjs/add/operator/distinctUntilChanged'; -import 'rxjs/add/observable/fromEvent'; -import { Subscription } from "rxjs/Rx"; -import * as fromRoot from '../../shared/reducers/dataverse.reducer'; -import { State } from '../../shared/reducers/dataverse.reducer'; -import * as sqlQueryActions from '../../shared/actions/query.actions' +import { Observable } from 'rxjs'; + /* * query component * has editor (codemirror) for writing some query */ @Component({ - moduleId: module.id, - selector: 'awc-query-container', - templateUrl:'query-container.component.html', - styleUrls: ['query-container.component.scss'] + moduleId: module.id, + selector: 'awc-query-container', + templateUrl:'query-container.component.html', + styleUrls: ['query-container.component.scss'] }) -export class QueryContainerComponent { - nodes = [] - constructor(private store: Store<any>) { +export class QueryContainerComponent implements AfterViewInit { + sideMenuVisible$: Observable<any>; + visible = false; - this.store.select(s => s.metadata.tree).subscribe((data: any[]) => { - this.nodes = [] - for (let i = 0; i < data.length; i++) { - if (data[i]['DataverseName']) { - let node = { id: 0, name:"", children:[] }; - node.id = i; - node.name = data[i]['DataverseName']; - for (let j = 0; j < data[i]['Datasets'].length; j++) { - let children = { id: 0, name:"", children:[] }; - children.id = j - children.name = data[i]['Datasets'][j]['DatasetName']; - node.children.push(children) - } - this.nodes.push(node) - } - } - }); - } + constructor(private store: Store<any>) {} - treeCalc() { - this.store.dispatch(new metadataActions.UpdateMetadataTree()); - } -} + ngAfterViewInit() { + this.sideMenuVisible$ = this.store.select(s => s.app.sideMenuVisible); + this.sideMenuVisible$.subscribe((data: any) => { + if (data === true) { + this.visible = true; + } else { + this.visible = false; + } + }) + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.html ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.html new file mode 100644 index 0000000..29487be --- /dev/null +++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.html @@ -0,0 +1,40 @@ +<!--/* +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.S +See the License for the specific language governing permissions and +limitations under the License. +*/--> +<ul class="node"> + <li class='node-children' *ngFor="let node of node_ let i = index" > + <div id="item{{node.item}}{{node.key}}{{node.value}}{{i}}" [ngSwitch]="nodeCheckType(node)"> + <div *ngSwitchCase="'ROOT'" class="node-details" (click)="toggle(node)" (mouseover)="jsonPathSelect(node, i)" (mouseleave)="jsonPathDeselect(node, i)"> + <i class='pre-item-icon' *ngIf="!checkRoot(node)"> + <img src="/assets/tree.svg"> + </i> + {{(node.label)}} [{{node.item}}] {{actionIcon(node)}} </div> + <div *ngSwitchCase="'ARRAY'" class="node-details" (click)="toggle(node)" (mouseover)="jsonPathSelect(node, i)" (mouseleave)="jsonPathDeselect(node, i)"> + <i class='pre-item-icon' *ngIf="!checkRoot(node)"> + <img src="./assets/tree.svg"> + </i> + <span class='node-content'>{{node.label}}: [ {{childrenCount(node.children)}} ] {{actionIcon(node)}}</span></div> + <div *ngSwitchCase="'OBJECT'" class="node-details" (click)="toggle(node)" (mouseover)="jsonPathSelect(node, i)" (mouseleave)="jsonPathDeselect(node, i)"> + <i class='pre-item-icon' *ngIf="!checkRoot(node)"> + <img src="./assets/tree.svg"> + </i> + <span class='node-content'>{{(node.label)}}: {{actionIcon(node)}}</span></div> + <div *ngSwitchCase="'KEYVALUE'" class="node-details" (click)="toggle(node)" (mouseover)="jsonPathSelect(node, i)" (mouseleave)="jsonPathDeselect(node, i)"> + <i class='pre-item-icon' *ngIf="!checkRoot(node)"> + <img src="./assets/tree.svg"> + </i> + <span class='node-content'>{{(node.key)}}: <span class='value'>{{(node.value)}}</span></span> + </div> + </div> + <tree-node class='tree-node' (jsonPath)='changeJsonPathValue($event)' [node]="node.children" *ngIf="checkVisible(node)"></tree-node> +</ul> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.scss ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.scss new file mode 100644 index 0000000..3349a8e --- /dev/null +++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.scss @@ -0,0 +1,63 @@ +/* +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.tree-node { + margin-top: 20px; + margin-bottom: 20px; +} + +.node { + color: black; + margin-top: 20px; + margin-bottom: 20px; + font-size: 14px; +} + +.node-content{ + padding-top: 5px; + border: 1px dashed gainsboro; +} + +.node-details { + margin-top: 10px; + margin-bottom: 10px; + list-style-type: none; + .node-content{ + padding: 10px; + border: 1px dashed gainsboro; + } +} + +.node-children { + &:hover { + cursor: pointer; + } + margin-left: 20px; + margin-bottom: 30px; +} + +ul { + list-style-type: none; +} + +.pre-item-icon { + opacity: 0.5; + padding-bottom: 6px; +} + +.value { + color: blue; + padding: 5px; + border: 1px dashed gainsboro; +} http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.ts new file mode 100644 index 0000000..405d6ef --- /dev/null +++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.ts @@ -0,0 +1,104 @@ +/* +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ +import { Component, Input, Output, OnInit, OnChanges, EventEmitter } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'tree-node', + templateUrl: 'tree-node.component.html', + styleUrls: ['tree-node.component.scss'], +}) + +export class TreeNodeComponent { + + @Input() node: any; + @Output() jsonPath = new EventEmitter(); + + node_: any; + final = true; + visible = true; + nestedVisible = false; + nodeContentKeys: any; + nodeChildren: any; + jsonPathChild_: any; + + constructor() { this.final = true; } + + initData() { + this.node_ = this.node; + } + + changeJsonPathValue(event) { + this.jsonPathChild_ = event.link; + this.jsonPath.emit(event); + } + + ngOnChanges() { + this.initData(); + } + + ngOnInit() { + this.initData(); + } + + toggle(node){ + node.visible = !node.visible; + } + + toggleNested(item){ + item.visible = !item.visible; + } + + checkVisible(item) { + return (item.visible); + } + + nodeCheckType(node) { + return node.type; + } + + childrenCount(children) { + return children.length; + } + + jsonPathSelect(item, index){ + var el = document.getElementById('item'+ item.item + item.key + item.value + index); + el.style.color = 'blue'; + var itemLink = ' [ ' + item.item + ' ] ' + ': ' + item.link; + this.jsonPath.emit({ link: itemLink }); + } + + jsonPathDeselect(item, index) { + var el = document.getElementById('item'+ item.item + item.key + item.value + index); + el.style.color = "black"; + } + + actionIcon(item) { + if(item.visible === true) { + return '-'; + } + else { + return '+'; + } + } + + checkRoot(item) { + if(item.level === 0) { + return true; + } + else { + return false; + } + } +} http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.html ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.html new file mode 100644 index 0000000..2488c3e --- /dev/null +++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.html @@ -0,0 +1,62 @@ +<!--/* +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ --> +<div id='top' *ngIf='treeData' class='tree-card'> + <mat-expansion-panel hideToggle [expanded]="true"> + <mat-expansion-panel-header class='header header-centered-v'> + <mat-panel-title>OUTPUT DATA</mat-panel-title> + <mat-icon>format_list_numbered_rtl</mat-icon> + </mat-expansion-panel-header> + <mat-panel-description class='content'> + <div class='panel'> + <span class='summary' >Items: {{metrics.resultCount}} Size: {{metrics.resultSizeKb}} Kb</span> + <mat-paginator [showFirstLastButtons]="true" [length]='metrics.resultCount' [pageSize]='pagedefaults.pageSize' [pageSizeOptions]='pageSizeOptions' (page)='showResults($event, false)'> + </mat-paginator> + <span class='options'> + <button mat-button class='button' (click)='dataExpand()' matTooltip="Expand Data"><mat-icon>add_circle</mat-icon></button> + <button mat-button class='button' (click)='dataCollapse()' matTooltip="Collapse Data"><mat-icon>remove_circle_outline</mat-icon></button> + <button mat-button class='button button-json' (click)='showTable()' matTooltip="Show Table View">TABLE</button> + <button mat-button class='button button-json' (click)='showTree()' matTooltip="Show Tree View">TREE</button> + <button mat-button class='button button-json' (click)='showJSON()' matTooltip="Show JSON View">JSON</button> + <button id='export' mat-button class='button' (click)='exportToText()' matTooltip="Export JSON file to Computer">EXPORT</button> + </span> + </div> + <div *ngIf='treeVisible' class='navi-data' class='navi-data'> + <mat-icon class='navi-path'>link</mat-icon> + <span class='navi-path'>{{jsonPath_}}</span> + </div> + <div class='divider'> + <div *ngIf='tableVisible'> + <table mat-table [dataSource]="dataSource" class='items-table'> + <ng-container matColumnDef="{{col}}" *ngFor="let col of displayedColumns"> + <th mat-header-cell *matHeaderCellDef class='cell'>{{col}}</th> + <td mat-cell *matCellDef="let element"class='cell' >{{element[col]}}</td> + </ng-container> + <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> + <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> + </table> + </div> + <div *ngIf='treeVisible'> + <tree-node (jsonPath)='changeJsonPathValue($event)' [node]='treeData_'></tree-node> + </div> + <div *ngIf='jsonVisible' class='json'> + <pre>{{jsonData}}</pre> + </div> + <div id='bottom'></div> + </div> + <button *ngIf='showGoTop' mat-fab color='warn' class='button back-button' (click)='gotoTop()'> + <mat-icon>keyboard_arrow_up</mat-icon> + </button> + </mat-panel-description> + </mat-expansion-panel> +</div> http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.scss ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.scss new file mode 100644 index 0000000..effa0ad --- /dev/null +++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.scss @@ -0,0 +1,141 @@ +/* +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.tree-card { + display: block; + margin: 0 0px 0 0px; + padding: 0; + background-color: seashell; +} + +.panel { + display: flex; + flex-flow: row; + align-items: center; + font-size: 12px; + padding-top: 15px; + border-bottom: 1px dashed gray; + padding-bottom: 15px; +} + +.navi-buttons { + display: flex; + flex-flow: row; + justify-content: flex-start; +} + +.header { + max-height: 42px; + min-height: 42px; + display: flex; + flex-flow: row; + font-size: 0.80rem; + font-weight: 500; + border-bottom: 1px solid blue; +} + +.divider { + display: flex; + flex-flow: row; + align-items: flex-start; + font-size: 14px; + border: 1px dashed gainsboro; + padding-top: 20px; + padding-bottom: 20px +} + +.content { + display: flex; + flex-flow: column; + font-size: 0.80rem; + font-weight: 500; + padding-bottom: 20px; + margin-right: 0px; +} + +.json { + padding: 20px; + padding-right: 50px; + margin-right: 25px; + min-width: 50%; + max-width: 50%; +} + +.button { + font-size: 12px !important; + float: left; + color: black; +} + +.button-json { + color: blue !important; +} + +.navi-data { + display: flex; + flex-flow: row; + margin-top: 15px; + margin-bottom: 15px; + padding-bottom: 15px; + font-size: 14px; + border-bottom: 1px dashed gray; +} + +.navi-path { + display: flex; + flex-flow: row; + align-items: center; + font-size: 14px; + color: blue; + border-radius: 4px; + height: 40px; +} + +.back-button { + cursor: pointer; + position: fixed; + bottom: 50px; + right: 100px; + font-size: 14px; +} + +.summary { + float: left; + margin-right: 15px; + padding-top: 8px; + padding-bottom: 10px; + padding-left: 15px; + padding-right: 15px; + font-size: 14px; + background-color: gainsboro; + border-radius: 4px; + color: #30332E; + display: inline-flex; +} + +table { + width: 100%; +} + +tr.example-element-row:not(.example-expanded-row):hover { + background: #f5f5f5; +} + +tr.example-element-row:not(.example-expanded-row):active { + background: #efefef; +} + +.cell { + padding-left: 15px; +} http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.ts new file mode 100644 index 0000000..823d994 --- /dev/null +++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.ts @@ -0,0 +1,332 @@ +/* +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ +import { Component, Input, NgZone, SimpleChange, ViewChild } from '@angular/core'; +import { MatTableDataSource } from '@angular/material/table'; +import { saveAs } from 'file-saver'; + +@Component({ + selector: 'tree-view', + templateUrl: 'tree-view.component.html', + styleUrls: ['tree-view.component.scss'] +}) + +export class TreeViewComponent { + @Input() data: any; + @Input() queryId: any; + + jsonVisible: any = false; + tableVisible: any = true; + treeVisible: any = false; + jsonData: any; + jsonPath_: any = ': < JSON PATH >'; + rawData: any; + treeData: any; + treeData_: any; + metrics: any; + currentIndex: any = 0; + currentRange: any; + /* see 10 records as initial set */ + pagedefaults: any = { pageIndex: 0, pageSize:10, lenght: 0}; + pageSizeOptions = [5, 10, 25, 100, 200]; + viewMode = 'JSON'; + showGoTop = false; + showGoBottom = false; + EXPANDED = true; + COLLAPSED = false; + + flattenData = []; + dataSource = new MatTableDataSource<any>(); + + + private eventOptions: boolean|{capture?: boolean, passive?: boolean}; + + constructor( private ngZone: NgZone) {} + + ngOnInit() { + this.ngZone.runOutsideAngular(() => { + window.addEventListener('scroll', this.scroll, <any>this.eventOptions); + }); + } + + ngOnChanges(changes: SimpleChange) { + this.rawData = this.data['results']; + if (this.rawData) { + this.showResults(this.pagedefaults, this.EXPANDED); + } + } + + /* + * Filters the resulst array of JSON Objects + */ + filter(element, index, array) { + var params = Object.create(this) ; + var startRange = (params.pageSize * params.pageIndex) + return index >= startRange && index < startRange + params.pageSize; + } + + showResults(range, expanded) { + this.currentRange = range; + this.currentIndex = this.currentRange.pageIndex; + this.treeData = this.rawData.filter(this.filter, this.currentRange); + // Build the dynamic table column names + this.buildTableColums(this.treeData[0]); + // Flat the results to display in a table + this.flatDataforTable(this.treeData); + + if (this.treeData.length > 0) { + this.metrics = this.data['metrics']; + this.metrics['resultSizeKb'] = (this.metrics.resultSize/1024).toFixed(2); + var myData_ = []; + for (let i = 0; i < this.treeData.length; i++) { + let nodeContent= {}; + // mat-paginator start counting from 1, thats why the i+1 trick + myData_.push(this.generateTree(this.treeData[i], '/', nodeContent, (this.currentRange.pageSize * this.currentRange.pageIndex) + (i + 1), 0, expanded)); + } + + this.treeData_ = myData_; + /* Prepare the JSON view */ + this.jsonData = JSON.stringify(this.treeData, null, 8) + } else { + console.log('no data') + this.treeData = []; + } + } + + /* + * Shows JSON View + */ + showJSON() { + this.jsonVisible = true; + this.treeVisible = false; + this.tableVisible = false; + } + + /* + * Shows Table View + */ + showTable() { + this.jsonVisible = false; + this.treeVisible = false; + this.tableVisible = true; + this.viewMode = 'TABLE'; + } + + /* + * Shows Tree Mode + */ + showTree() { + this.jsonVisible = false; + this.treeVisible = true; + this.tableVisible = false; + this.viewMode = 'TREE'; + } + + /* + * Export to CSV + */ + exportToCSV(){ + var exportOutput = JSON.stringify(this.rawData, null, 4); + var blob = new Blob([this.jsonData], {type: "text/csv;charset=utf-8"}); + saveAs(blob, "Asterix-results.csv"); + } + + /* + * Export to plain text + */ + exportToText(){ + var exportOutput = JSON.stringify(this.rawData, null, 4); + var blob = new Blob([exportOutput], {type: "text/json;charset=utf-8"}); + saveAs(blob, "Asterix-results.json"); + } + + /* + * This function converts the json object into a node/array graph structure ready to be display as a tree + * it will also augment the nodes with a link containing the path that the elements occupies in the json graph + */ + generateTree(node, nodeLink, rootMenu, index, level, expanded): any { + // Check in case the root object is not defined properly + if (rootMenu === {}) { + console.log(expanded) + rootMenu = { item: '', label: 'K', key: '', value: '', link: '/', visible: expanded, children: [], level: 0}; + } + + let nodeArray = []; + + // Going through all the keys in a node looking for objects or array of key values + // and create a sub menu if is an object. + Object.keys(node).map((k) => { + + if (typeof node[k] === 'object') { + if(Array.isArray(node[k]) ){ + let nodeObject = { nested: true, item: '', label: '', key: '', value: '', type: 'ARRAY', link: '/', visible: expanded, children: [], level: level }; + nodeObject.item = index; + nodeObject.label = k; + nodeObject.key = k; + nodeObject.value = node[k]; + nodeObject.link = nodeLink + '/' + k; + nodeObject.level = level; + level = level + 1; + // if this is an object then a new node is created and + // recursive call to find and fill with the nested elements + let newNodeObject = this.generateTree(node[k], nodeObject.link, nodeObject, index, level, expanded); + // if this is the first node, then will become the root. + if (rootMenu.children) { + rootMenu.children.push(newNodeObject) + } else { + rootMenu = newNodeObject; + newNodeObject.type = 'ROOT'; + } + } else { + let nodeObject = { nested: true, item: '', label: '', key: '', value: '', type: 'OBJECT', link: '/', visible: expanded, children: [], level: level }; + nodeObject.item = index; + nodeObject.label = k; + nodeObject.key = k; + nodeObject.value = node[k]; + nodeObject.link = nodeLink + '/' + k; + nodeObject.level = level; + level = level + 1; + // if this is an object then a new node is created and + // recursive call to find and fill with the nested elements + let newNodeObject = this.generateTree(node[k], nodeObject.link, nodeObject, index, level, expanded); + // if this is the first node, then will become the root. + if (rootMenu.children) { + rootMenu.children.push(newNodeObject) + } else { + nodeObject.nested = false; + newNodeObject.visible = expanded; + newNodeObject.type = 'ROOT'; + rootMenu = newNodeObject + } + } + } + else { + // Array of key values converted into a unique string with a : separator + let nodeKeyValue = { nested: false, item: '', label: '', key: '', value: '', type: 'KEYVALUE', link: '/', visible: expanded, children: [], level: level}; + nodeKeyValue.item = index; + nodeKeyValue.label = k + " : " + node[k]; + nodeKeyValue.key = k; + nodeKeyValue.value = node[k]; + nodeKeyValue.link = nodeLink + '/' + k + '/' + node[k]; + nodeKeyValue.level = level; + nodeArray.push(nodeKeyValue); + } + }) + // The array will be added as value to a parent key. + if (nodeArray.length > 0) { + rootMenu.children = nodeArray.concat(rootMenu.children) + } + + return rootMenu + } + + gotoTop() { + window.document.getElementById('top').scrollIntoView(); + } + + ngOnDestroy() { + window.removeEventListener('scroll', this.scroll, <any>this.eventOptions); + } + + scroll = ($event): void => { + this.ngZone.run(() => { + this.showGoTop = false; + this.showGoBottom = true; + var element = document.getElementById('top'); + if (element) { + var bodyRect = document.body.getBoundingClientRect(), + elemRect = element.getBoundingClientRect(), + offset = elemRect.top - bodyRect.top; + var elementOptimizedPlan = document.getElementById('OPTIMIZED PLAN'); + var elementPlan = document.getElementById('PLAN'); + + // this is calculated just manually + var elementOptimizedPlanOffset = 0; + if (elementOptimizedPlan) { + elementOptimizedPlanOffset = elementOptimizedPlan.clientHeight; + } + + var elementPlanOffset = 0; + if (elementPlan) { + elementPlanOffset = elementPlan.clientHeight; + } + + if (window.pageYOffset > 600 + elementPlanOffset + elementOptimizedPlanOffset) { + this.showGoTop = true; + } else { + this.showGoBottom = false; + } + } + }) + } + + changeJsonPathValue(event) { + this.jsonPath_ = event.link; + } + + dataExpand() { + this.showResults(this.currentRange, this.EXPANDED); + } + + dataCollapse() { + this.showResults(this.currentRange, this.COLLAPSED); + } + + /* + * Build the table column names from result data + */ + displayedColumns: string[] = []; + buildTableColums(item) { + var resultKeyList = Object.keys(item); + var resultKey: string = resultKeyList[0]; + if (item[resultKey] instanceof Object) { + // is a SQL++ Query Results + var nestedKeyList = Object.keys(item[resultKey]); + this.displayedColumns = nestedKeyList; + } + else { // is a SQL++ Metadata Results and there is an Array + this.displayedColumns = resultKeyList; + } + } + + /* + * Flat the result data for Table display + */ + flatDataforTable(data) { + var resultKeyList = Object.keys(data[0]); + var resultKey: string = resultKeyList[0]; + this.flattenData = []; + if (data[0][resultKey] instanceof Object) { + for (let i = 0; i < data.length; i++) { + var nestedKeyList = Object.keys(data[i][resultKey]); + for (let k = 0; k < nestedKeyList.length; k++) { + if ( typeof data[i][resultKey][nestedKeyList[k]] === 'object' ){ + var nestedObjectStr = JSON.stringify(data[i][resultKey][nestedKeyList[k]], null, '\n'); + // Not Implemented Yet + } else { + this.flattenData[i] = data[i][resultKey]; + } + } + } + } + else { + this.flattenData = data; + } + + this.dataSource.data = this.flattenData; + } + + jsonTransform(item) { + return JSON.stringify(item, null, 4); + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/db.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/db.ts b/asterixdb/asterix-dashboard/src/node/src/app/db.ts deleted file mode 100755 index 8f51b00..0000000 --- a/asterixdb/asterix-dashboard/src/node/src/app/db.ts +++ /dev/null @@ -1,23 +0,0 @@ -/* -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ -import { DBSchema } from '@ngrx/db'; - -/* -* Persistent storage capability to the dashboard in case is needed. -*/ -export const schema: DBSchema = { - version: 1, - name: 'asterixDB_app', - stores: {}, -}; http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/material.module.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/material.module.ts b/asterixdb/asterix-dashboard/src/node/src/app/material.module.ts index 3bb67d9..d172bf8 100755 --- a/asterixdb/asterix-dashboard/src/node/src/app/material.module.ts +++ b/asterixdb/asterix-dashboard/src/node/src/app/material.module.ts @@ -13,60 +13,12 @@ limitations under the License. */ import {NgModule} from '@angular/core'; import { - MatAutocompleteModule, - MatButtonModule, - MatButtonToggleModule, - MatCardModule, - MatCheckboxModule, - MatChipsModule, - MatDatepickerModule, - MatDialogModule, - MatExpansionModule, - MatFormFieldModule, - MatGridListModule, - MatIconModule, - MatInputModule, - MatListModule, - MatMenuModule, - MatPaginatorModule, - MatProgressBarModule, - MatProgressSpinnerModule, - MatRadioModule, - MatSelectModule, - MatSidenavModule, - MatSliderModule, - MatSlideToggleModule, - MatSnackBarModule, - MatSortModule, - MatTableModule, - MatTabsModule, - MatToolbarModule, - MatTooltipModule, - MatStepperModule, -} from '@angular/material'; -import {MatNativeDateModule, MatRippleModule} from '@angular/material'; -import {CdkTableModule} from '@angular/cdk/table'; -//import {CdkAccordionModule} from '@angular/cdk/accordion'; -import {A11yModule} from '@angular/cdk/a11y'; -import {BidiModule} from '@angular/cdk/bidi'; -import {OverlayModule} from '@angular/cdk/overlay'; -import {PlatformModule} from '@angular/cdk/platform'; -import {ObserversModule} from '@angular/cdk/observers'; -import {PortalModule} from '@angular/cdk/portal'; - -/* -* NgModule that includes all Material modules that are required to -* serve AsterixDB Dashboard -*/ -@NgModule({ - exports: [ MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, - MatTableModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, @@ -80,26 +32,75 @@ import {PortalModule} from '@angular/cdk/portal'; MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, - MatRippleModule, MatSelectModule, MatSidenavModule, - MatSlideToggleModule, MatSliderModule, + MatSlideToggleModule, MatSnackBarModule, MatSortModule, - MatStepperModule, + MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, - MatNativeDateModule, - CdkTableModule, - A11yModule, - BidiModule, - // CdkAccordionModule, - ObserversModule, - OverlayModule, - PlatformModule, - PortalModule, - ] + MatStepperModule, +} from '@angular/material'; +import {MatNativeDateModule, MatRippleModule} from '@angular/material'; +import {CdkTableModule} from '@angular/cdk/table'; +//import {CdkAccordionModule} from '@angular/cdk/accordion'; +import {A11yModule} from '@angular/cdk/a11y'; +import {BidiModule} from '@angular/cdk/bidi'; +import {OverlayModule} from '@angular/cdk/overlay'; +import {PlatformModule} from '@angular/cdk/platform'; +import {ObserversModule} from '@angular/cdk/observers'; +import {PortalModule} from '@angular/cdk/portal'; + +/* +* NgModule that includes all Material modules that are required to +* serve AsterixDB Dashboard +*/ +@NgModule({ + exports: [ + MatAutocompleteModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatChipsModule, + MatTableModule, + MatDatepickerModule, + MatDialogModule, + MatExpansionModule, + MatFormFieldModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSlideToggleModule, + MatSliderModule, + MatSnackBarModule, + MatSortModule, + MatStepperModule, + MatTabsModule, + MatTableModule, + MatToolbarModule, + MatTooltipModule, + MatNativeDateModule, + CdkTableModule, + A11yModule, + BidiModule, + // CdkAccordionModule, + ObserversModule, + OverlayModule, + PlatformModule, + PortalModule, + ] }) -export class MaterialModule {} +export class MaterialModule {} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/app.actions.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/app.actions.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/app.actions.ts index 29da05f..186a082 100755 --- a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/app.actions.ts +++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/app.actions.ts @@ -12,22 +12,36 @@ See the License for the specific language governing permissions and limitations under the License. */ import { Action } from '@ngrx/store'; -import { AsterixDBQueryMessage, Dataset } from '../models/asterixDB.model'; /* * Definition of App Actions */ export const APP_MODE_CHANGE = '[App State] App Mode Change'; +export const APP_SIDE_MENU = '[App State] App Side Menu Mode Change'; +export const APP_QUERY_INPUT_INDEX = '[App State] App Query Input Index'; +export const APP_ACTIVE_DATAVERSE = '[App State] App Active Dataverse'; /* * Guide Select Datasets for UI Helpers */ export class ChangeMode implements Action { - readonly type = APP_MODE_CHANGE; - constructor(public payload: string) {} + readonly type = APP_MODE_CHANGE; + constructor(public payload: string) {} +} + +export class setEditorIndex implements Action { + readonly type = APP_QUERY_INPUT_INDEX; + constructor(public payload: string) {} +} + +export class setSideMenuVisible implements Action { + readonly type = APP_SIDE_MENU; + constructor(public payload: boolean) {} } /* * Exports of datasets actions */ -export type All = ChangeMode; +export type All = ChangeMode | + setEditorIndex | + setSideMenuVisible; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataset.actions.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataset.actions.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataset.actions.ts index a49e07c..61259bb 100755 --- a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataset.actions.ts +++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataset.actions.ts @@ -12,7 +12,6 @@ See the License for the specific language governing permissions and limitations under the License. */ import { Action } from '@ngrx/store'; -import { AsterixDBQueryMessage, Dataset } from '../models/asterixDB.model'; /* * Definition of Datasets Actions @@ -36,95 +35,95 @@ export const GUIDE_SELECT_DATASET = '[Dataset Collection] Guide Select Datas * Guide Select Datasets for UI Helpers */ export class GuideSelectDatasets implements Action { - readonly type = GUIDE_SELECT_DATASET; - constructor(public payload: string) {} + readonly type = GUIDE_SELECT_DATASET; + constructor(public payload: string) {} } /* * Select Datasets */ export class SelectDatasets implements Action { - readonly type = SELECT_DATASETS; - constructor(public payload: string) {} + readonly type = SELECT_DATASETS; + constructor(public payload: string) {} } export class SelectDatasetsSuccess implements Action { - readonly type = SELECT_DATASETS_SUCCESS; - constructor(public payload: AsterixDBQueryMessage[]) {} + readonly type = SELECT_DATASETS_SUCCESS; + constructor(public payload: any[]) {} } export class SelectDatasetsFail implements Action { - readonly type = SELECT_DATASETS_FAIL; - constructor(public payload: AsterixDBQueryMessage[]) {} + readonly type = SELECT_DATASETS_FAIL; + constructor(public payload: any[]) {} } /* * Create Dataset */ export class CreateDataset implements Action { - readonly type = CREATE_DATASET; - constructor(public payload: string) {} + readonly type = CREATE_DATASET; + constructor(public payload: string) {} } export class CreateDatasetSuccess implements Action { - readonly type = CREATE_DATASET_SUCCESS; - constructor(public payload: Dataset[]) {} + readonly type = CREATE_DATASET_SUCCESS; + constructor(public payload: any[]) {} } export class CreateDatasetFail implements Action { - readonly type = CREATE_DATASET_FAIL; - constructor(public payload: Dataset) {} + readonly type = CREATE_DATASET_FAIL; + constructor(public payload: any) {} } /* * Update Dataset */ export class UpdateDataset implements Action { - readonly type = UPDATE_DATASET; - constructor(public payload: Dataset) {} + readonly type = UPDATE_DATASET; + constructor(public payload: any) {} } export class UpdateDatasetSuccess implements Action { - readonly type = UPDATE_DATASET_SUCCESS; - constructor(public payload: Dataset[]) {} + readonly type = UPDATE_DATASET_SUCCESS; + constructor(public payload: any[]) {} } export class UpdateDatasetFail implements Action { - readonly type = UPDATE_DATASET_FAIL; - constructor(public payload: Dataset) {} + readonly type = UPDATE_DATASET_FAIL; + constructor(public payload: any) {} } /* * Drop Dataset */ export class DropDataset implements Action { - readonly type = DROP_DATASET; - constructor(public payload: string) {} + readonly type = DROP_DATASET; + constructor(public payload: string) {} } export class DropDatasetSuccess implements Action { - readonly type = DROP_DATASET_SUCCESS; - constructor(public payload: Dataset[]) {} + readonly type = DROP_DATASET_SUCCESS; + constructor(public payload: any[]) {} } export class DropDatasetFail implements Action { - readonly type = DROP_DATASET_FAIL; - constructor(public payload: Dataset) {} + readonly type = DROP_DATASET_FAIL; + constructor(public payload: any) {} } /* * Exports of datasets actions */ export type All = SelectDatasets | - SelectDatasetsSuccess | - SelectDatasetsFail | - CreateDataset | - CreateDatasetSuccess | - CreateDatasetFail | - UpdateDataset | - UpdateDatasetSuccess | - UpdateDatasetFail | - DropDataset | - DropDatasetSuccess | - DropDatasetFail | - GuideSelectDatasets; + SelectDatasetsSuccess | + SelectDatasetsFail | + CreateDataset | + CreateDatasetSuccess | + CreateDatasetFail | + UpdateDataset | + UpdateDatasetSuccess | + UpdateDatasetFail | + DropDataset | + DropDatasetSuccess | + DropDatasetFail | + GuideSelectDatasets; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/datatype.actions.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/datatype.actions.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/datatype.actions.ts index 5543a7a..2e6acba 100755 --- a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/datatype.actions.ts +++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/datatype.actions.ts @@ -12,7 +12,6 @@ See the License for the specific language governing permissions and limitations under the License. */ import { Action } from '@ngrx/store'; -import { AsterixDBQueryMessage, Datatype } from '../models/asterixDB.model'; /* * Definition of Datatypes Actions @@ -34,89 +33,89 @@ export const DROP_DATATYPE_FAIL = '[Datatype Collection] Drop Datatypes Fa * Select Datatypes */ export class SelectDatatypes implements Action { - readonly type = SELECT_DATATYPES; - constructor(public payload: string) {} + readonly type = SELECT_DATATYPES; + constructor(public payload: string) {} } export class SelectDatatypesSuccess implements Action { - readonly type = SELECT_DATATYPES_SUCCESS; - constructor(public payload: AsterixDBQueryMessage[]) {} + readonly type = SELECT_DATATYPES_SUCCESS; + constructor(public payload: any[]) {} } export class SelectDatatypesFail implements Action { - readonly type = SELECT_DATATYPES_FAIL; - constructor(public payload: AsterixDBQueryMessage[]) {} + readonly type = SELECT_DATATYPES_FAIL; + constructor(public payload: any[]) {} } /* * Create Datatype */ export class CreateDatatype implements Action { - readonly type = CREATE_DATATYPE; - constructor(public payload: string) {} + readonly type = CREATE_DATATYPE; + constructor(public payload: string) {} } export class CreateDatatypeSuccess implements Action { - readonly type = CREATE_DATATYPE_SUCCESS; - constructor(public payload: Datatype[]) {} + readonly type = CREATE_DATATYPE_SUCCESS; + constructor(public payload: any[]) {} } export class CreateDatatypeFail implements Action { - readonly type = CREATE_DATATYPE_FAIL; - constructor(public payload: Datatype) {} + readonly type = CREATE_DATATYPE_FAIL; + constructor(public payload: any) {} } /* * Update Datatype */ export class UpdateDatatype implements Action { - readonly type = UPDATE_DATATYPE; - constructor(public payload: Datatype) {} + readonly type = UPDATE_DATATYPE; + constructor(public payload: any) {} } export class UpdateDatatypeSuccess implements Action { - readonly type = UPDATE_DATATYPE_SUCCESS; - constructor(public payload: Datatype[]) {} + readonly type = UPDATE_DATATYPE_SUCCESS; + constructor(public payload: any[]) {} } export class UpdateDatatypeFail implements Action { - readonly type = UPDATE_DATATYPE_FAIL; - constructor(public payload: Datatype) {} + readonly type = UPDATE_DATATYPE_FAIL; + constructor(public payload: any) {} } /* * Drop Datatype */ export class DropDatatype implements Action { - readonly type = DROP_DATATYPE; + readonly type = DROP_DATATYPE; - constructor(public payload: string) {} + constructor(public payload: string) {} } export class DropDatatypeSuccess implements Action { - readonly type = DROP_DATATYPE_SUCCESS; + readonly type = DROP_DATATYPE_SUCCESS; - constructor(public payload: Datatype[]) {} + constructor(public payload: any[]) {} } export class DropDatatypeFail implements Action { - readonly type = DROP_DATATYPE_FAIL; + readonly type = DROP_DATATYPE_FAIL; - constructor(public payload: Datatype) {} + constructor(public payload: any) {} } /* * Exports of datastypes actions */ export type All = SelectDatatypes | - SelectDatatypesSuccess | - SelectDatatypesFail | - CreateDatatype | - CreateDatatypeSuccess | - CreateDatatypeFail | - UpdateDatatype | - UpdateDatatypeSuccess | - UpdateDatatypeFail | - DropDatatype | - DropDatatypeSuccess | - DropDatatypeFail; + SelectDatatypesSuccess | + SelectDatatypesFail | + CreateDatatype | + CreateDatatypeSuccess | + CreateDatatypeFail | + UpdateDatatype | + UpdateDatatypeSuccess | + UpdateDatatypeFail | + DropDatatype | + DropDatatypeSuccess | + DropDatatypeFail; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataverse.actions.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataverse.actions.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataverse.actions.ts index dc33c0a..ed0eb8f 100755 --- a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataverse.actions.ts +++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataverse.actions.ts @@ -12,7 +12,6 @@ See the License for the specific language governing permissions and limitations under the License. */ import { Action } from '@ngrx/store'; -import { AsterixDBQueryMessage, Dataverse } from '../models/asterixDB.model'; /* * Definition of Dataverses Actions @@ -29,91 +28,99 @@ export const UPDATE_DATAVERSE_FAIL = '[Dataverse Collection] Update Dataver export const DROP_DATAVERSE = '[Dataverse Collection] Drop Dataverses'; export const DROP_DATAVERSE_SUCCESS = '[Dataverse Collection] Drop Dataverses Success'; export const DROP_DATAVERSE_FAIL = '[Dataverse Collection] Drop Dataverses Fail'; +export const SET_DEFAULT_DATAVERSE = '[Dataverse Collection] Set Default Dataverse'; /* * Select Dataverses */ export class SelectDataverses implements Action { - readonly type = SELECT_DATAVERSES; - constructor(public payload: string) {} + readonly type = SELECT_DATAVERSES; + constructor(public payload: string) {} } export class SelectDataversesSuccess implements Action { - readonly type = SELECT_DATAVERSES_SUCCESS; - constructor(public payload: AsterixDBQueryMessage[]) {} + readonly type = SELECT_DATAVERSES_SUCCESS; + constructor(public payload: any[]) {} } export class SelectDataversesFail implements Action { - readonly type = SELECT_DATAVERSES_FAIL; - constructor(public payload: AsterixDBQueryMessage[]) {} + readonly type = SELECT_DATAVERSES_FAIL; + constructor(public payload: any[]) {} } /* * Create Dataverse */ export class CreateDataverse implements Action { - readonly type = CREATE_DATAVERSE; - constructor(public payload: string) {} + readonly type = CREATE_DATAVERSE; + constructor(public payload: string) {} } export class CreateDataverseSuccess implements Action { - readonly type = CREATE_DATAVERSE_SUCCESS; - constructor(public payload: Dataverse[]) {} + readonly type = CREATE_DATAVERSE_SUCCESS; + constructor(public payload: any[]) {} } export class CreateDataverseFail implements Action { - readonly type = CREATE_DATAVERSE_FAIL; - constructor(public payload: Dataverse) {} + readonly type = CREATE_DATAVERSE_FAIL; + constructor(public payload: any) {} } /* * Update Dataverse */ export class UpdateDataverse implements Action { - readonly type = UPDATE_DATAVERSE; - constructor(public payload: Dataverse) {} + readonly type = UPDATE_DATAVERSE; + constructor(public payload: any) {} } export class UpdateDataverseSuccess implements Action { - readonly type = UPDATE_DATAVERSE_SUCCESS; - constructor(public payload: Dataverse[]) {} + readonly type = UPDATE_DATAVERSE_SUCCESS; + constructor(public payload: any[]) {} } export class UpdateDataverseFail implements Action { - readonly type = UPDATE_DATAVERSE_FAIL; - constructor(public payload: Dataverse) {} + readonly type = UPDATE_DATAVERSE_FAIL; + constructor(public payload: any) {} } /* * Drop Dataverse */ export class DropDataverse implements Action { - readonly type = DROP_DATAVERSE; - constructor(public payload: string) {} + readonly type = DROP_DATAVERSE; + constructor(public payload: string) {} } export class DropDataverseSuccess implements Action { - readonly type = DROP_DATAVERSE_SUCCESS; - constructor(public payload: Dataverse[]) {} + readonly type = DROP_DATAVERSE_SUCCESS; + constructor(public payload: any[]) {} } export class DropDataverseFail implements Action { - readonly type = DROP_DATAVERSE_FAIL; - constructor(public payload: Dataverse) {} + readonly type = DROP_DATAVERSE_FAIL; + constructor(public payload: any) {} } +export class SetDefaultDataverse implements Action { + readonly type = SET_DEFAULT_DATAVERSE; + constructor(public payload: any) {} +} + + /* * Exports of datasverses actions */ export type All = SelectDataverses | - SelectDataversesSuccess | - SelectDataversesFail | - CreateDataverse | - CreateDataverseSuccess | - CreateDataverseFail | - UpdateDataverse | - UpdateDataverseSuccess | - UpdateDataverseFail | - DropDataverse | - DropDataverseSuccess | - DropDataverseFail; + SelectDataversesSuccess | + SelectDataversesFail | + CreateDataverse | + CreateDataverseSuccess | + CreateDataverseFail | + UpdateDataverse | + UpdateDataverseSuccess | + UpdateDataverseFail | + DropDataverse | + DropDataverseSuccess | + DropDataverseFail | + SetDefaultDataverse; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/index.actions.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/index.actions.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/index.actions.ts index 1304644..2a794fb 100755 --- a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/index.actions.ts +++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/index.actions.ts @@ -12,7 +12,6 @@ See the License for the specific language governing permissions and limitations under the License. */ import { Action } from '@ngrx/store'; -import { Index } from '../models/asterixDB.model'; /* * Definition of Index Actions @@ -34,86 +33,86 @@ export const DROP_INDEX_FAIL = '[Index Collection] Drop Indexes Fail'; * Select Indexes */ export class SelectIndexes implements Action { - readonly type = SELECT_INDEXES; - constructor(public payload: string) {} + readonly type = SELECT_INDEXES; + constructor(public payload: string) {} } export class SelectIndexesSuccess implements Action { - readonly type = SELECT_INDEXES_SUCCESS; - constructor(public payload: Index[]) {} + readonly type = SELECT_INDEXES_SUCCESS; + constructor(public payload: any[]) {} } export class SelectIndexesFail implements Action { - readonly type = SELECT_INDEXES_FAIL; - constructor(public payload: Index[]) {} + readonly type = SELECT_INDEXES_FAIL; + constructor(public payload: any[]) {} } /* * Create Index */ export class CreateIndex implements Action { - readonly type = CREATE_INDEX; - constructor(public payload: string) {} + readonly type = CREATE_INDEX; + constructor(public payload: string) {} } export class CreateIndexSuccess implements Action { - readonly type = CREATE_INDEX_SUCCESS; - constructor(public payload: Index[]) {} + readonly type = CREATE_INDEX_SUCCESS; + constructor(public payload: any[]) {} } export class CreateIndexFail implements Action { - readonly type = CREATE_INDEX_FAIL; - constructor(public payload: Index) {} + readonly type = CREATE_INDEX_FAIL; + constructor(public payload: any) {} } /* * Update Index */ export class UpdateIndex implements Action { - readonly type = UPDATE_INDEX; - constructor(public payload: Index) {} + readonly type = UPDATE_INDEX; + constructor(public payload: any) {} } export class UpdateIndexSuccess implements Action { - readonly type = UPDATE_INDEX_SUCCESS; - constructor(public payload: Index[]) {} + readonly type = UPDATE_INDEX_SUCCESS; + constructor(public payload: any[]) {} } export class UpdateIndexFail implements Action { - readonly type = UPDATE_INDEX_FAIL; - constructor(public payload: Index) {} + readonly type = UPDATE_INDEX_FAIL; + constructor(public payload: any) {} } /* * Remove Index */ export class DropIndex implements Action { - readonly type = DROP_INDEX; - constructor(public payload: string) {} + readonly type = DROP_INDEX; + constructor(public payload: string) {} } export class DropIndexSuccess implements Action { - readonly type = DROP_INDEX_SUCCESS; - constructor(public payload: Index[]) {} + readonly type = DROP_INDEX_SUCCESS; + constructor(public payload: any[]) {} } export class DropIndexFail implements Action { - readonly type = DROP_INDEX_FAIL; - constructor(public payload: Index) {} + readonly type = DROP_INDEX_FAIL; + constructor(public payload: any) {} } /* * Exports of indexes actions */ export type All = SelectIndexes | - SelectIndexesSuccess | - SelectIndexesFail | - CreateIndex | - CreateIndexSuccess | - CreateIndexFail | - UpdateIndex | - UpdateIndexSuccess | - UpdateIndexFail | - DropIndex | - DropIndexSuccess | - DropIndexFail; + SelectIndexesSuccess | + SelectIndexesFail | + CreateIndex | + CreateIndexSuccess | + CreateIndexFail | + UpdateIndex | + UpdateIndexSuccess | + UpdateIndexFail | + DropIndex | + DropIndexSuccess | + DropIndexFail; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/metadata.actions.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/metadata.actions.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/metadata.actions.ts deleted file mode 100755 index 4a3c125..0000000 --- a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/metadata.actions.ts +++ /dev/null @@ -1,46 +0,0 @@ -/* -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ -import { Action } from '@ngrx/store'; - -/* -* Definition of Metadata Tree Actions -*/ -export const UPDATE_METADATA_TREE = '[Metadata Tree Query] UPDATE Metadata tree'; -export const UPDATE_METADATA_TREE_SUCCESS = '[Metadata Tree Query] UPDATE Metadata tree Success'; -export const UPDATE_METADATA_TREE_FAIL = '[Metadata Tree Query] UPDATE Metadata tree Fail'; - -/* -* Construct Metadata Tree Actions -*/ -export class UpdateMetadataTree implements Action { - readonly type = UPDATE_METADATA_TREE - constructor() {} -} - -export class UpdateMetadataTreeSuccess implements Action { - readonly type = UPDATE_METADATA_TREE_SUCCESS; - constructor(public payload: any) {} -} - -export class UpdateMetadataTreeFail implements Action { - readonly type = UPDATE_METADATA_TREE_FAIL; - constructor(public payload: any) {} -} - -/* -* Exports of Metatada Tree actions -*/ -export type All = UpdateMetadataTree | - UpdateMetadataTreeSuccess | - UpdateMetadataTreeFail; http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/query.actions.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/query.actions.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/query.actions.ts index 866b3e9..e18a89e 100755 --- a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/query.actions.ts +++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/query.actions.ts @@ -12,60 +12,79 @@ See the License for the specific language governing permissions and limitations under the License. */ import { Action } from '@ngrx/store'; -import { AsterixDBQueryMessage } from '../models/asterixDB.model'; /* * Definition of SQL++ Actions */ -export const EXECUTE_QUERY = '[Query] Execute SQL++ Query'; -export const EXECUTE_QUERY_SUCCESS = '[Query] Execute SQL++ Query Success'; -export const EXECUTE_QUERY_FAIL = '[Query] Execute SQL++ Query Fail'; -export const EXECUTE_METADATA_QUERY = '[Query] Execute Metadata SQL++ Query'; -export const EXECUTE_METADATA_QUERY_SUCCESS = '[Query] Execute Metadata SQL++ Query Success'; -export const EXECUTE_METADATA_QUERY_FAIL = '[Query] Execute Metadata SQL++ Query Fail'; +export const PREPARE_QUERY = '[Query] Prepare SQL++ Query'; +export const CLEAN_QUERY = '[Query] Clean SQL++ Query'; +export const EXECUTE_QUERY = '[Query] Execute SQL++ Query'; +export const EXECUTE_QUERY_SUCCESS = '[Query] Execute SQL++ Query Success'; +export const EXECUTE_QUERY_FAIL = '[Query] Execute SQL++ Query Fail'; +export const EXECUTE_METADATA_QUERY = '[Query] Execute Metadata SQL++ Query'; +export const EXECUTE_METADATA_QUERY_SUCCESS = '[Query] Execute Metadata SQL++ Query Success'; +export const EXECUTE_METADATA_QUERY_FAIL = '[Query] Execute Metadata SQL++ Query Fail'; + +/* +* Prepare Query, stores the current editing query string +*/ +export class PrepareQuery implements Action { + readonly type = PREPARE_QUERY; + constructor(public payload: any) {} // string the AsterixDB Query String +} + +/* +* Prepare Query, stores the current editing query string +*/ +export class CleanQuery implements Action { + readonly type = CLEAN_QUERY; + constructor(public payload: any) {} // string the AsterixDB Query String +} /* * Execute SQL++ Query */ export class ExecuteQuery implements Action { - readonly type = EXECUTE_QUERY; - constructor(public payload: string) {} // the AsterixDB Query String + readonly type = EXECUTE_QUERY; + constructor(public payload: any) {} // string the AsterixDB Query String } export class ExecuteQuerySuccess implements Action { - readonly type = EXECUTE_QUERY_SUCCESS; - constructor(public payload: AsterixDBQueryMessage[]) {} + readonly type = EXECUTE_QUERY_SUCCESS; + constructor(public payload: any) {} } export class ExecuteQueryFail implements Action { - readonly type = EXECUTE_QUERY_FAIL; - constructor(public payload: AsterixDBQueryMessage[]) {} + readonly type = EXECUTE_QUERY_FAIL; + constructor(public payload: any) {} } /* * Execute Metadata SQL++ Query */ export class ExecuteMetadataQuery implements Action { - readonly type = EXECUTE_METADATA_QUERY; - constructor(public payload: string) {} // the AsterixDB Query String + readonly type = EXECUTE_METADATA_QUERY; + constructor(public payload: string) {} // the AsterixDB Query String } export class ExecuteMetadataQuerySuccess implements Action { - readonly type = EXECUTE_METADATA_QUERY_SUCCESS; - constructor(public payload: AsterixDBQueryMessage[]) {} + readonly type = EXECUTE_METADATA_QUERY_SUCCESS; + constructor(public payload: any) {} } export class ExecuteMetadataQueryFail implements Action { - readonly type = EXECUTE_METADATA_QUERY_FAIL; - constructor(public payload: AsterixDBQueryMessage[]) {} + readonly type = EXECUTE_METADATA_QUERY_FAIL; + constructor(public payload: any) {} } /* * Exports of SQL++ actions */ -export type All = ExecuteQuery | - ExecuteQuerySuccess | - ExecuteQueryFail | - ExecuteMetadataQuery | - ExecuteMetadataQuerySuccess | - ExecuteMetadataQueryFail; \ No newline at end of file +export type All = PrepareQuery | + CleanQuery | + ExecuteQuery | + ExecuteQuerySuccess | + ExecuteQueryFail | + ExecuteMetadataQuery | + ExecuteMetadataQuerySuccess | + ExecuteMetadataQueryFail; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/app.effects.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/app.effects.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/app.effects.ts new file mode 100644 index 0000000..891191b --- /dev/null +++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/app.effects.ts @@ -0,0 +1,24 @@ +/* +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ +import { Injectable } from '@angular/core'; +import { Action } from '@ngrx/store'; +import { Actions } from '@ngrx/effects'; +import * as appActions from '../actions/app.actions'; + +export type Action = appActions.All + +@Injectable() +export class AppEffects { + constructor(private actions: Actions) {} +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/asterixdb/blob/3e5815a7/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/dataset.effects.ts ---------------------------------------------------------------------- diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/dataset.effects.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/dataset.effects.ts index b5624a4..3ca0da4 100755 --- a/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/dataset.effects.ts +++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/dataset.effects.ts @@ -14,13 +14,10 @@ limitations under the License. import { Injectable } from '@angular/core'; import { Action } from '@ngrx/store'; import { Effect, Actions } from '@ngrx/effects'; -import { Observable } from 'rxjs/Observable'; -import { of } from 'rxjs/observable/of'; +import { Observable , of } from 'rxjs'; import * as datasetActions from '../actions/dataset.actions'; import { SQLService } from '../services/async-query.service'; -import 'rxjs/add/operator/map'; -import 'rxjs/add/operator/switchMap'; -import 'rxjs/add/operator/catch'; +import 'rxjs/add/operator/switchMap' export type Action = datasetActions.All @@ -36,8 +33,8 @@ export class DatasetEffects { .ofType(datasetActions.SELECT_DATASETS) .switchMap(query => { return this.sqlService.selectDatasets() - .map(dataset => new datasetActions.SelectDatasetsSuccess(dataset)) - .catch(err => of(new datasetActions.SelectDatasetsFail(err))); + .map(dataset => new datasetActions.SelectDatasetsSuccess(dataset)) + .catch(err => of(new datasetActions.SelectDatasetsFail(err))); }); /* Effect to create a Datasets from AsterixDB @@ -47,8 +44,8 @@ export class DatasetEffects { .ofType(datasetActions.CREATE_DATASET) .switchMap(dataset => { return this.sqlService.createDataset((dataset as any).payload) - .map(dataset => new datasetActions.CreateDatasetSuccess(dataset)) - .catch(err => of(new datasetActions.CreateDatasetFail(err))); + .map(dataset => new datasetActions.CreateDatasetSuccess(dataset)) + .catch(err => of(new datasetActions.CreateDatasetFail(err))); }); /* Effect to drop a Datasets from AsterixDB @@ -57,9 +54,8 @@ export class DatasetEffects { dropDatasets$: Observable<Action> = this.actions .ofType(datasetActions.DROP_DATASET) .switchMap(dataset => { - console.log((dataset as any).payload) return this.sqlService.dropDataset((dataset as any).payload) - .map(dataset => new datasetActions.DropDatasetSuccess(dataset)) - .catch(err => of(new datasetActions.DropDatasetFail(err))); + .map(dataset => new datasetActions.DropDatasetSuccess(dataset)) + .catch(err => of(new datasetActions.DropDatasetFail(err))); }); -} +} \ No newline at end of file