Repository: incubator-griffin Updated Branches: refs/heads/master 8e9b50ff9 -> a714b60c9
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/metric/metric.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/metric.component.ts b/ui/angular/src/app/metric/metric.component.ts index 9381999..f50f652 100644 --- a/ui/angular/src/app/metric/metric.component.ts +++ b/ui/angular/src/app/metric/metric.component.ts @@ -102,31 +102,32 @@ export class MetricComponent implements OnInit { 'dq':0, 'details':[] } - var array = []; - node.metrics = array; + node.metrics = []; for(let key in this.orgWithMeasure[orgName]){ orgNode.measureMap.push(key); this.measureOptions.push(key); var jobs = this.orgWithMeasure[orgName][key]; for(let i = 0;i < jobs.length;i++){ - orgNode.jobMap.push(jobs[i].jobName); - var job = jobs[i].jobName; - jobMap.set(job, orgNode.name); - this.http.post(url_dashboard, {"query": { "bool":{"filter":[ {"term" : {"name.keyword": job }}]}}, "sort": [{"tmst": {"order": "desc"}}],"size":300}).subscribe( jobes=> { - this.originalData = jobes; - if(this.originalData.hits){ - this.metricData = this.originalData.hits.hits; - metricNode.details = this.metricData; - metricNode.name = this.metricData[0]._source.name; - metricNode.timestamp = this.metricData[0]._source.tmst; - metricNode.dq = this.metricData[0]._source.value.matched/this.metricData[0]._source.value.total*100; - this.pushToNode(jobMap, metricNode); - } - }, - err => { - // console.log(err); - console.log('Error occurs when connect to elasticsearh!'); - }); + orgNode.jobMap.push(jobs[i].jobName); + var job = jobs[i].jobName; + jobMap.set(job, orgNode.name); + this.http.post(url_dashboard, {"query": { "bool":{"filter":[ {"term" : {"name.keyword": job }}]}}, "sort": [{"tmst": {"order": "desc"}}],"size":300}).subscribe( jobes=> { + this.originalData = jobes; + if(this.originalData.hits){ + this.metricData = this.originalData.hits.hits; + if(this.metricData[0]._source.value.miss != undefined){ + metricNode.details = this.metricData; + metricNode.name = this.metricData[0]._source.name; + metricNode.timestamp = this.metricData[0]._source.tmst; + metricNode.dq = this.metricData[0]._source.value.matched/this.metricData[0]._source.value.total*100; + this.pushToNode(jobMap, metricNode); + } + } + }, + err => { + // console.log(err); + console.log('Error occurs when connect to elasticsearh!'); + }); } } this.finalData.push(node); @@ -155,22 +156,22 @@ export class MetricComponent implements OnInit { getOption(parent,i){ return this.chartOption.get('thumbnail'+parent+'-'+i); - } + } redraw (data) { this.chartHeight = $('.chartItem:eq(0)').width()*0.8+'px'; - for(let i = 0;i<data.length;i++){ - var parentIndex = i; - for(let j = 0;j<data[i].metrics.length;j++){ - let index = j; - let chartId = 'thumbnail' + parentIndex + '-' + index; - let _chartId = '#' + chartId; - var divs = $(_chartId); - divs.get(0).style.width = divs.parent().width()+'px'; - divs.get(0).style.height = this.chartHeight; - this.chartOption.set(chartId,this.chartService.getOptionThum(data[i].metrics[j])); - } + for(let i = 0;i<data.length;i++){ + var parentIndex = i; + for(let j = 0;j<data[i].metrics.length;j++){ + let index = j; + let chartId = 'thumbnail' + parentIndex + '-' + index; + let _chartId = '#' + chartId; + var divs = $(_chartId); + divs.get(0).style.width = divs.parent().width()+'px'; + divs.get(0).style.height = this.chartHeight; + this.chartOption.set(chartId,this.chartService.getOptionThum(data[i].metrics[j])); } + } } goTo(parent,i){ @@ -178,64 +179,64 @@ export class MetricComponent implements OnInit { } changeOrg() { - this.selectedMeasureIndex = undefined; - this.measureOptions = []; - this.oData = this.finalData.slice(0); - if(this.selectedOrgIndex == 0){ - this.oData = this.finalData; - } - else { - var org = this.orgs[this.selectedOrgIndex-1]; - this.measureOptions = org.measureMap; - for(let i = 0;i<this.oData.length;i++){ - if(this.oData[i].name!=org.name){ - for(var j = i; j < this.oData.length - 1; j++){ - this.oData[j] = this.oData[j + 1]; - } - this.oData.length--; - i--; + this.selectedMeasureIndex = undefined; + this.measureOptions = []; + this.oData = this.finalData.slice(0); + if(this.selectedOrgIndex == 0){ + this.oData = this.finalData; + } + else { + var org = this.orgs[this.selectedOrgIndex-1]; + this.measureOptions = org.measureMap; + for(let i = 0;i<this.oData.length;i++){ + if(this.oData[i].name!=org.name){ + for(var j = i; j < this.oData.length - 1; j++){ + this.oData[j] = this.oData[j + 1]; } + this.oData.length--; + i--; } } - this.mData = this.oData.slice(0); - var self = this; - setTimeout(function() { - self.redraw(self.oData); - }, 1000); + } + this.mData = this.oData.slice(0); + var self = this; + setTimeout(function() { + self.redraw(self.oData); + }, 1000); }; changeMeasure() { - var jobdetail = []; - this.fData = JSON.parse(JSON.stringify(this.mData)); - this.oData = this.fData; - if(this.selectedMeasureIndex != undefined && this.selectedMeasureIndex != 0){ - var measure = this.measureOptions[this.selectedMeasureIndex-1]; - for(let key in this.orgWithMeasure){ - if(key == this.fData[0].name){ - for(let measurename in this.orgWithMeasure[key]){ - if(measurename == measure){ - var jobname = this.orgWithMeasure[key][measurename]; - for(let i=0;i< jobname.length;i++){ - jobdetail.push(jobname[i].jobName); - } - } + var jobdetail = []; + this.fData = JSON.parse(JSON.stringify(this.mData)); + this.oData = this.fData; + if(this.selectedMeasureIndex != undefined && this.selectedMeasureIndex != 0){ + var measure = this.measureOptions[this.selectedMeasureIndex-1]; + for(let key in this.orgWithMeasure){ + if(key == this.fData[0].name){ + for(let measurename in this.orgWithMeasure[key]){ + if(measurename == measure){ + var jobname = this.orgWithMeasure[key][measurename]; + for(let i=0;i< jobname.length;i++){ + jobdetail.push(jobname[i].jobName); + } } } } - for(let i = 0;i<this.fData[0].metrics.length;i++){ - if(jobdetail.indexOf(this.fData[0].metrics[i].name) === -1){ - for(var j = i; j < this.fData[0].metrics.length - 1; j++){ - this.fData[0].metrics[j] = this.fData[0].metrics[j + 1]; - } - this.fData[0].metrics.length--; - i--; - } - } } - var self = this; - setTimeout(function() { - self.redraw(self.oData); - }, 0); + for(let i = 0;i<this.fData[0].metrics.length;i++){ + if(jobdetail.indexOf(this.fData[0].metrics[i].name) === -1){ + for(var j = i; j < this.fData[0].metrics.length - 1; j++){ + this.fData[0].metrics[j] = this.fData[0].metrics[j + 1]; + } + this.fData[0].metrics.length--; + i--; + } + } + } + var self = this; + setTimeout(function() { + self.redraw(self.oData); + }, 0); } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/sidebar/sidebar.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/sidebar/sidebar.component.css b/ui/angular/src/app/sidebar/sidebar.component.css index 5c74f3a..8850a17 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.css +++ b/ui/angular/src/app/sidebar/sidebar.component.css @@ -66,25 +66,25 @@ under the License. overflow-x: hidden; } -.sideBar::-webkit-scrollbar-track +#side-bar-metrics::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } -.sideBar::-webkit-scrollbar +#side-bar-metrics::-webkit-scrollbar { - width: 12px; + width: 7px; border-radius: 10px; background-color: #F5F5F5; } -.sideBar::-webkit-scrollbar-thumb +#side-bar-metrics::-webkit-scrollbar-thumb { - border-radius: 10px; + border-radius: 2px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); - background-color: #D62929; + background-color: #ADADAD; } .well .side-metrics{ @@ -210,10 +210,12 @@ a>.side-name:hover{ } #side-bar-metrics{ + /*position: absolute;*/ margin-top:20px; overflow-y:auto; overflow-x:hidden; margin-left:0; margin-right:0; - height:auto; + height:1px; + width: 95%; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/sidebar/sidebar.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/sidebar/sidebar.component.html b/ui/angular/src/app/sidebar/sidebar.component.html index 34bd1d3..194db04 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.html +++ b/ui/angular/src/app/sidebar/sidebar.component.html @@ -16,69 +16,62 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - -<div id="rightbar" (window:resize)="onResize($event)" class="" style="background-color:#262626;"> - <div id="side-bar-stats" class="row" style="border-bottom:5px solid #060606;margin-left:0;margin-right:0"> - <div class="col-xs-15 col-md-15 col-lg-6 " id="sidebar-option"> - <div> - <div class="sidebar-stat-center"> - <i class="fa fa-table" aria-hidden="true"></i> - <span><a class="bark-link" routerLink="/dataassets"> - DataAssets</a></span> - </div> - <div class="sidebar-stat-center"> - <i class="fa fa-line-chart" aria-hidden="true"></i> - <span><a class="bark-link" routerLink="/metrics" > - DQ Metrics</a></span> - </div> - </div> +<div id="rightbar" (window:resize)="onResize($event)" style="background-color:#262626;"> + <div id="side-bar-stats" class="row" style="border-bottom:5px solid #060606;margin-left:0;margin-right:0"> + <div class="col-xs-15 col-md-15 col-lg-6 " id="sidebar-option"> + <div> + <div class="sidebar-stat-center"> + <i class="fa fa-table" style="color:#b2c831;" aria-hidden="true"></i> + <span><a routerLink="/dataassets"> DataAssets</a></span> </div> - <div class="col-xs-12 col-md-12 col-lg-6"> - <div id="data-asset-pie"></div> + <div class="sidebar-stat-center"> + <i class="fa fa-line-chart" style="color:#b2c831;" aria-hidden="true"></i> + <span><a routerLink="/metrics" > DQ Metrics</a></span> </div> + </div> + </div> + <div class="col-xs-12 col-md-12 col-lg-6"> + <div id="data-asset-pie"></div> </div> - <div id="side-bar-metrics" class="row"> - <div *ngFor="let outerItems of oData;let parent=index"> - <div class="well"> - <div class="col-sm-4 col-lg-4 col-md-4 "> - <h4 > - <a routerLink="/metrics/{{outerItems.name}}"> {{outerItems.name}}</a> - </h4> - </div> - <div class="col-sm-3 col-lg-3 col-md-3 " style="display: flex;justify-content: center;height:46px;"> - <!-- <div [ngClass]="outerItems.dq >=90 ? 'led-green':'led-yellow'" style="align-self: center;"></div> --> - </div> - <!-- <div class="col-sm-5 col-lg-5 col-md-5 " style="display: flex;justify-content: center;height:46px;"><a style="align-self: center;" class="btn btn-primary" href="https://github.com/eBay/DQSolution/issues"; target="_blank">Report issue</a></div> --> + </div> + <div id="side-bar-metrics" class="row"> + <div *ngFor="let outerItems of oData;let parent=index"> + <div class="well"> + <div class="col-sm-4 col-lg-4 col-md-4 "> + <h4> + <!-- <a routerLink="/metrics/{{outerItems.name}}"> {{outerItems.name}}</a> --> + <a> {{outerItems.name}}</a> + </h4> + </div> + <div class="col-sm-3 col-lg-3 col-md-3 " style="display: flex;justify-content: center;height:46px;"> + <!-- <div [ngClass]="outerItems.dq >=90 ? 'led-green':'led-yellow'" style="align-self: center;"></div> --> + </div> + <!-- <div class="col-sm-5 col-lg-5 col-md-5 " style="display: flex;justify-content: center;height:46px;"><a style="align-self: center;" class="btn btn-primary" href="https://github.com/eBay/DQSolution/issues"; target="_blank">Report issue</a></div> --> + </div> + <br/> + <div class="well side-bar-scroll"> + <div class="panel-group" *ngFor="let items of outerItems.metrics;let i=index;"> + <div class="panel panel-default"> + <div class="panel-heading" style="background:transparent;"> + <h4 class="panel-title side-metrics"> + <a style="cursor: pointer;" (click)="draw(items,parent, i);items.tag=!items.tag;" > + <i class="faChevron" [ngClass]="items.tag ? 'fa fa-caret-down':'fa fa-caret-right'" style="width:10px"></i> + <i class="fa fa-line-chart faArrows"></i> + <span class="side-date">{{items.timestamp | date:'short' }}</span> + + <span class="side-name" title="{{items.name}}">{{items.name |truncate :13}} + </span> + </a> + </h4> </div> - <br/> - <div class="well side-bar-scroll"> - <div class="panel-group" *ngFor="let items of outerItems.metrics;let i=index;"> - <div class="panel panel-default" style="margin-right: 10px;"> - <div class="panel-heading" style="background:transparent;"> - <h4 class="panel-title side-metrics"> - <a style="cursor: pointer;" - (click)="draw(items,parent, i);" - > - <!-- <i class="faChevron" - [ngClass]="items.tag ? 'fa fa-caret-right':'fa fa-caret-down'" style="width:10px"></i> --> - <i class="fa fa-line-chart faArrows"></i> - <span class="side-date">{{items.timestamp | date:'short' }}</span> - - <span class="side-name" title="{{items.name}}">{{items.name |truncate :10}}</span> - <!-- <span ng-if="items.dq <= 100" class="pull-right" [ngClass]="items.dqfail?'side-percent-red':'side-percent'">{{items.dq}}%</span> --> - <!-- <span ng-if="items.dq > 100" class="pull-right" [ngClass]="items.dqfail?'side-percent-red':''">{{items.dq/1000}}K</span> --> - </a> - </h4> - </div> - <div id="side{{parent}}{{i}}" class="panel-collapse collapse" > - <div class="panel-body" style="cursor:pointer;padding:0px 15px;border-top-width: 0;"> - <div id="chart{{parent}}-{{i}}" class="side-chart" echarts [options]="getOption(parent,i)" - ></div> - </div> - </div> - </div> - </div> + <div id="side{{parent}}{{i}}" class="panel-collapse collapse"> + <div class="panel-body" style="cursor:pointer;padding:0px 15px;border-top-width: 0;"> + <div id="chart{{parent}}-{{i}}" class="side-chart" echarts [options]="getOption(parent,i)"></div> + </div> </div> + </div> </div> + </div> </div> + </div> </div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/sidebar/sidebar.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/sidebar/sidebar.component.ts b/ui/angular/src/app/sidebar/sidebar.component.ts index 225421c..8a62fbf 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.ts +++ b/ui/angular/src/app/sidebar/sidebar.component.ts @@ -60,18 +60,13 @@ export class SidebarComponent implements OnInit { // var formatUtil = echarts.format; pageInit() { - // var allDataassets = this.serviceService.config.uri.dataassetlist; var health_url = this.serviceService.config.uri.statistics; - this.http.get(health_url).subscribe(data => { - // this.status.health = data.healthyJobCount; - // this.status.invalid = data.jobCount - data.healthyJobCount; - // renderDataAssetPie(this.status); - this.sideBarList(null); - },err => {}); + this.http.get(health_url).subscribe(data => { + this.sideBarList(null); + },err => {}); } onResize(event){ - // console.log('sidebar resize'); if(window.innerWidth < 992) { $('#rightbar').css('display', 'none'); } else { @@ -82,7 +77,7 @@ export class SidebarComponent implements OnInit { resizeSideChart(){ $('#side-bar-metrics').css({ - height: $('#mainContent').height()-$('#side-bar-stats').outerHeight()+70 + height: $('#mainContent').height()-$('#side-bar-stats').outerHeight()+70 }); for(let i=0;i<this.oData.length;i++){ for(let j=0;j<this.oData[i].metrics.length;j++){ @@ -111,10 +106,10 @@ export class SidebarComponent implements OnInit { } sideBarList(sysName){ - // this.finalData = this.getMetricService.renderData(); - var url_organization = this.serviceService.config.uri.organization; - let url_dashboard = this.serviceService.config.uri.dashboard; - this.http.get(url_organization).subscribe(data => { + // this.finalData = this.getMetricService.renderData(); + var url_organization = this.serviceService.config.uri.organization; + let url_dashboard = this.serviceService.config.uri.dashboard; + this.http.get(url_organization).subscribe(data => { var jobMap = new Map(); this.orgWithMeasure = data; var orgNode = null; @@ -141,24 +136,26 @@ export class SidebarComponent implements OnInit { this.measureOptions.push(key); var jobs = this.orgWithMeasure[orgName][key]; for(let i = 0;i < jobs.length;i++){ - orgNode.jobMap.push(jobs[i].jobName); - var job = jobs[i].jobName; - jobMap.set(job, orgNode.name); - this.http.post(url_dashboard, {"query": { "bool":{"filter":[ {"term" : {"name.keyword": job }}]}}, "sort": [{"tmst": {"order": "desc"}}],"size":300}).subscribe( jobes=> { - this.originalData = jobes; - if(this.originalData.hits){ - this.metricData = this.originalData.hits.hits; - metricNode.details = this.metricData; - metricNode.name = this.metricData[0]._source.name; - metricNode.timestamp = this.metricData[0]._source.tmst; - metricNode.dq = this.metricData[0]._source.value.matched/this.metricData[0]._source.value.total*100; - this.pushToNode(jobMap, metricNode); - } - }, - err => { - // console.log(err); - console.log('Error occurs when connect to elasticsearh!'); - }); + orgNode.jobMap.push(jobs[i].jobName); + var job = jobs[i].jobName; + jobMap.set(job, orgNode.name); + this.http.post(url_dashboard, {"query": { "bool":{"filter":[ {"term" : {"name.keyword": job }}]}}, "sort": [{"tmst": {"order": "desc"}}],"size":300}).subscribe( jobes=> { + this.originalData = jobes; + if(this.originalData.hits){ + this.metricData = this.originalData.hits.hits; + if(this.metricData[0]._source.value.miss != undefined){ + metricNode.details = this.metricData; + metricNode.name = this.metricData[0]._source.name; + metricNode.timestamp = this.metricData[0]._source.tmst; + metricNode.dq = this.metricData[0]._source.value.matched/this.metricData[0]._source.value.total*100; + this.pushToNode(jobMap, metricNode); + } + } + }, + err => { + // console.log(err); + console.log('Error occurs when connect to elasticsearh!'); + }); } } this.finalData.push(node); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/main.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/main.ts b/ui/angular/src/main.ts index a1450f6..27a3fd8 100644 --- a/ui/angular/src/main.ts +++ b/ui/angular/src/main.ts @@ -33,3 +33,4 @@ if (environment.production) { } platformBrowserDynamic().bootstrapModule(AppModule); + http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/styles.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/styles.css b/ui/angular/src/styles.css index e6b90ab..0806a18 100644 --- a/ui/angular/src/styles.css +++ b/ui/angular/src/styles.css @@ -30,6 +30,7 @@ body { background:#1f1f1f; font-family: 'Open Sans', sans-serif; height: 100%; + overflow: hidden; } html{ @@ -56,8 +57,11 @@ h3 { h5 { color:#b2c831; margin-left:5px; + font-size: 20px; +} +label { + font-weight: bold !important; } - /***********BLOCKS & WRAPS***********/ /*--- Dash Unit / Used in Dashboard page ---*/ @@ -894,7 +898,8 @@ a:hover { #footerwrap { padding-left: 30px; - height: 90px; + /*height: 90px;*/ + height: 20px; background:#1f1f1f; padding-top:10px; padding-bottom: 10px; @@ -1141,7 +1146,7 @@ tbody { background: #518dab !important; } -.myclass * div.selected-list .c-btn , .myclass * ul , .list-filter input{ +.myclass * div.selected-list .c-btn , .myclass * ul ,.myclass * div.list-area, .list-filter input{ background: #dcdad6; } @@ -1163,4 +1168,23 @@ input{ .toggle-children{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAApUlEQVQ4T8XULQ7CQBCG4fcTWBJuVodEcAEEBtcbcAU0Bq7ATQgKi0PQTAOhzdD0b7aC9fPs7O43K+AEbIArCUtmZpLepRdgFYU+QLXxFzoD2dhmfgAHFcABWA9BrUAE6gUa0BbYNzsaBTjoAeQeCgFtUBLgoPt/AEn1XYQ68IX1MXwSu0Ij6Qnsws8ozQp49SayI8oLg/kRbstQlJOHadI4T/1QSjKSYdGc5u4/AAAAAElFTkSuQmCC') !important; - } \ No newline at end of file + } + +/* .myclass { + position: relative; + z-index: 9999; +} + +#mainWindow { + position: relative; + z-index: 1; +}*/ + +#toast-container { + margin-top: 50px; +} + +.y-scrollable { + overflow-y: auto; + overflow-x: hidden; +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/pom.xml ---------------------------------------------------------------------- diff --git a/ui/pom.xml b/ui/pom.xml index 555803e..83bfd88 100644 --- a/ui/pom.xml +++ b/ui/pom.xml @@ -57,7 +57,7 @@ under the License. <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> - <version>1.0</version> + <version>1.6</version> <configuration> <workingDirectory>angular</workingDirectory> <installDirectory>.tmp</installDirectory>
