Repository: incubator-griffin Updated Branches: refs/heads/master 459c96654 -> 0f5d7421e
Add button to job page Add button to view job results Author: dodobel <1254288...@qq.com> Closes #210 from dodobel/button. Project: http://git-wip-us.apache.org/repos/asf/incubator-griffin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-griffin/commit/0f5d7421 Tree: http://git-wip-us.apache.org/repos/asf/incubator-griffin/tree/0f5d7421 Diff: http://git-wip-us.apache.org/repos/asf/incubator-griffin/diff/0f5d7421 Branch: refs/heads/master Commit: 0f5d7421e2454fa6b62ef8c313e72d7b8ac7e258 Parents: 459c966 Author: dodobel <1254288...@qq.com> Authored: Tue Feb 6 10:05:41 2018 +0800 Committer: Lionel Liu <bhlx3l...@163.com> Committed: Tue Feb 6 10:05:41 2018 +0800 ---------------------------------------------------------------------- ui/angular/src/app/health/health.component.ts | 26 +++--- ui/angular/src/app/job/job.component.html | 7 ++ ui/angular/src/app/job/job.component.ts | 5 ++ .../measure-detail.component.html | 2 +- .../detail-metric/detail-metric.component.css | 4 +- .../detail-metric/detail-metric.component.html | 86 +++++++------------ .../detail-metric/detail-metric.component.ts | 12 ++- ui/angular/src/app/metric/metric.component.ts | 56 +++++------- ui/angular/src/app/service/chart.service.ts | 22 ++--- ui/angular/src/app/sidebar/sidebar.component.ts | 26 +++--- ui/angular/src/assets/img/table.png | Bin 882 -> 0 bytes 11 files changed, 113 insertions(+), 133 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/0f5d7421/ui/angular/src/app/health/health.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/health/health.component.ts b/ui/angular/src/app/health/health.component.ts index bd78065..be31174 100644 --- a/ui/angular/src/app/health/health.component.ts +++ b/ui/angular/src/app/health/health.component.ts @@ -172,23 +172,21 @@ export class HealthComponent implements OnInit { let url_dashboard = this.serviceService.config.uri.dashboard; this.http.get(url_dashboard).subscribe(data => { this.mesWithJob = JSON.parse(JSON.stringify(data)); - var mesNode = null; for (let mesName in this.mesWithJob) { - var jobs = this.mesWithJob[mesName]; - mesNode = new Object(); - mesNode.name = mesName; - var node = null; - node = new Object(); - node.name = mesName; - node.dq = 0; - node.metrics = []; var metricData = this.mesWithJob[mesName][0]; if ( metricData.metricValues[0] != undefined && - metricData.metricValues[0].value.matched != undefined + metricData.type == "accuracy" ) { - for(let i=0;i<jobs.length;i++){ - if(jobs[i].metricValues.length != 0){ + var jobs = this.mesWithJob[mesName]; + var node = null; + node = new Object(); + node.name = mesName; + node.dq = 0; + node.metrics = []; + node.type = "accuracy"; + for (let i = 0; i < jobs.length; i++) { + if (jobs[i].metricValues.length != 0) { var metricNode = { name: "", timestamp: "", @@ -207,6 +205,8 @@ export class HealthComponent implements OnInit { node.metrics.push(metricNode); } } + } else { + break; } this.finalData.push(node); } @@ -227,4 +227,4 @@ export class HealthComponent implements OnInit { // }) } -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/0f5d7421/ui/angular/src/app/job/job.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/job.component.html b/ui/angular/src/app/job/job.component.html index 28a00a7..1480445 100644 --- a/ui/angular/src/app/job/job.component.html +++ b/ui/angular/src/app/job/job.component.html @@ -33,6 +33,7 @@ under the License. <th st-ratio="15">Trigger State</th> <th st-ratio="5">Cron Expression</th> <th st-ratio="5">Action</th> + <th st-ratio="5">Metric</th> </tr> </thead> <tbody> @@ -67,6 +68,12 @@ under the License. <i class="fa fa-trash-o po"></i> </a> </td> + <td> + + <a (click)="show(row)"> + <i class="fa fa-bar-chart po"></i> + </a> + </td> </tr> <tr *ngIf="row.showDetail"> <td colspan="7" style="padding:20px 30px 10px 30px;"> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/0f5d7421/ui/angular/src/app/job/job.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/job.component.ts b/ui/angular/src/app/job/job.component.ts index 2871c5c..66e741e 100644 --- a/ui/angular/src/app/job/job.component.ts +++ b/ui/angular/src/app/job/job.component.ts @@ -73,6 +73,11 @@ export class JobComponent implements OnInit { this.deleteId = row.jobId; } + show(row) { + var curjob = row.jobName; + this.router.navigate(['/detailed/'+curjob]); + } + confirmDelete() { let deleteJob = this.serviceService.config.uri.deleteJob; let deleteUrl = deleteJob + "/" + this.deleteId; http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/0f5d7421/ui/angular/src/app/measure/measure-detail/measure-detail.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/measure-detail/measure-detail.component.html b/ui/angular/src/app/measure/measure-detail/measure-detail.component.html index 2980646..e6ccacb 100644 --- a/ui/angular/src/app/measure/measure-detail/measure-detail.component.html +++ b/ui/angular/src/app/measure/measure-detail/measure-detail.component.html @@ -21,7 +21,7 @@ under the License. <h5 class="over-title margin-bottom-15">View Measure</h5> </div> <!--//row--> - <div class="row y-scrollable" style="max-height: 300px;"> + <div class="row y-scrollable" style="max-height: 350px;"> <div class="col-sm-6 col-xs-12"> <div id="viewruleDefinition" class="viewrule-content"> <div class="row"> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/0f5d7421/ui/angular/src/app/metric/detail-metric/detail-metric.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/detail-metric/detail-metric.component.css b/ui/angular/src/app/metric/detail-metric/detail-metric.component.css index 8515a16..dfc51c4 100644 --- a/ui/angular/src/app/metric/detail-metric/detail-metric.component.css +++ b/ui/angular/src/app/metric/detail-metric/detail-metric.component.css @@ -22,6 +22,7 @@ under the License. /*max-width:800px;*/ margin:auto; overflow:hidden; + text-align: center; /*border:1px solid #f5f5f5;*/ } .table-wrap { @@ -92,11 +93,10 @@ under the License. .title { margin-top: 10px; margin-bottom: 10px; - margin-left: 50%; font-size: 18px; } mfBootstrapPaginator { position: fixed; } -.clone thead, .clone tfoot{background:transparent;} \ No newline at end of file +.clone thead, .clone tfoot{background:transparent;} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/0f5d7421/ui/angular/src/app/metric/detail-metric/detail-metric.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/detail-metric/detail-metric.component.html b/ui/angular/src/app/metric/detail-metric/detail-metric.component.html index b3ea7fb..a76fda9 100644 --- a/ui/angular/src/app/metric/detail-metric/detail-metric.component.html +++ b/ui/angular/src/app/metric/detail-metric/detail-metric.component.html @@ -16,7 +16,10 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<div id="bigChartContainer" class="big-chart-container" (window:resize)="onResize($event)" style="display:none;"> +<div *ngIf="noresults" style="text-align: center;font-size: 26px;margin-top: 20%"> + <b>No content</b> +</div> +<div *ngIf="!noresults" id="bigChartContainer" class="big-chart-container" (window:resize)="onResize($event)" style="display:none;"> <div id="bigChartShow" class="big-chart-content"> <div class="container-fluid"> <div class="row"> @@ -25,58 +28,31 @@ under the License. </div> </div> </div> -<div *ngIf="profiling" id="table-scroll" class="table-scroll"> - <div class="title"> - <b>{{this.prodata[0].name}}</b> - </div> - <div class="table-wrap"> - <table class="main-table y-scrollable" [mfData]="prodata" #mf="mfDataTable" [mfRowsOnPage]="18"> - <thead> - <tr style="background-color:#7D95CC"> - <th class="fixed-side" scope="col" style="background-color:#7D95CC">Time</th> - <th class="cover" scope="col">Time</th> - <th scope="col" *ngFor="let name of this.columnname">{{name}}</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of mf.data"> - <th class="fixed-side">{{(item.tmst | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</th> - <th class="cover">{{(item.tmst | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</th> - <td *ngFor="let key of objectKeys(item.value)">{{item.value[key]}}</td> - </tr> - </tbody> - <tfoot> - <tr> - <td class="text-center" colspan="8" style="background-color:#1f1f1f;" id="pagination"> - <mfBootstrapPaginator></mfBootstrapPaginator> - </td> - </tr> - </tfoot> - </table> - </div> +<div *ngIf="profiling && !noresults" id="table-scroll" class="table-scroll"> + <b class="title">{{this.prodata[0].name}}</b> + <div class="table-wrap"> + <table class="main-table y-scrollable" [mfData]="prodata" #mf="mfDataTable" [mfRowsOnPage]="18"> + <thead> + <tr style="background-color:#7D95CC"> + <th class="fixed-side" scope="col" style="background-color:#7D95CC">Time</th> + <th class="cover" scope="col">Time</th> + <th scope="col" *ngFor="let name of this.columnname">{{name}}</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of mf.data"> + <th class="fixed-side">{{(item.tmst | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</th> + <th class="cover">{{(item.tmst | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</th> + <td *ngFor="let key of objectKeys(item.value)">{{item.value[key]}}</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="text-center" colspan="8" style="background-color:#1f1f1f;" id="pagination"> + <mfBootstrapPaginator></mfBootstrapPaginator> + </td> + </tr> + </tfoot> + </table> + </div> </div> -<!-- <div *ngIf="profiling" id="table-scroll" class="table-scroll"> - <div class="table-wrap"> - <table class="main-table" #mf="mfDataTable" [mfData]="this.data" [mfRowsOnPage]="20"> - <thead> - <tr style="background-color:#7D95CC"> - <th class="fixed-side" scope="col">Time</th> - <th scope="col" *ngFor="let name of this.columnname">{{name}}</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of mf.data"> - <th class="fixed-side">{{(item.tmst | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</th> - <td *ngFor="let key of objectKeys(item.value)">{{item.value[key]}}</td> - </tr> - </tbody> - <tfoot> - <tr> - <td class="text-center" colspan="8" style="background-color:#1f1f1f;" id="pagination"> - <mfBootstrapPaginator></mfBootstrapPaginator> - </td> - </tr> - </tfoot> - </table> - </div> -</div> --> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/0f5d7421/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts b/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts index 5aaf380..d0f7d50 100644 --- a/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts +++ b/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts @@ -52,6 +52,7 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit { offset = 0; profiling = false; columnname = []; + noresults = false; ngOnInit() { this.currentJob = this.route.snapshot.paramMap.get("name"); @@ -68,7 +69,10 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit { this.http.get(metricDetailUrl).subscribe( data => { this.data = data; - if(this.data && this.data[0].value.matched != undefined){ + if(this.data.length == 0){ + this.noresults = true; + } + if(this.data.length != 0 && this.data[0].value.matched != undefined){ var metric = { name: "", timestamp: 0, @@ -84,7 +88,7 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit { $("#bigChartDiv").height(window.innerHeight - 120 + "px"); $("#bigChartDiv").width(window.innerWidth - 400 + "px"); $("#bigChartContainer").show(); - }else{ + }else if(this.data.length != 0){ this.prodata = this.data; this.profiling = true; for(let key in this.data[0].value){ @@ -102,7 +106,7 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit { } ); } - + onResize(event) { this.resizeTreeMap(); } @@ -117,4 +121,4 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit { ngAfterViewChecked() { $(".main-table").addClass('clone'); } -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/0f5d7421/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 179c58f..053e6f4 100644 --- a/ui/angular/src/app/metric/metric.component.ts +++ b/ui/angular/src/app/metric/metric.component.ts @@ -43,6 +43,7 @@ export class MetricComponent implements OnInit { measureOptions = []; selectedMeasureIndex = 0; chartHeight: any; + proHeight: any; mesWithJob: any; ngOnInit() { @@ -53,24 +54,22 @@ export class MetricComponent implements OnInit { let url_dashboard = this.serviceService.config.uri.dashboard; this.http.get(url_dashboard).subscribe(data => { this.mesWithJob = JSON.parse(JSON.stringify(data)); - var mesNode = null; for (let mesName in this.mesWithJob) { - var jobs = this.mesWithJob[mesName]; - mesNode = new Object(); - mesNode.name = mesName; - var node = null; - node = new Object(); - node.name = mesName; - node.dq = 0; - node.metrics = []; - this.measureOptions.push(mesName); var metricData = this.mesWithJob[mesName][0]; if ( metricData.metricValues[0] != undefined && - metricData.type == 'accuracy' + metricData.type == "accuracy" ) { - for(let i=0;i<jobs.length;i++){ - if(jobs[i].metricValues.length != 0){ + var jobs = this.mesWithJob[mesName]; + var node = null; + node = new Object(); + node.name = mesName; + node.dq = 0; + node.metrics = []; + this.measureOptions.push(mesName); + node.type = "accuracy"; + for (let i = 0; i < jobs.length; i++) { + if (jobs[i].metricValues.length != 0) { var metricNode = { name: "", timestamp: "", @@ -89,25 +88,8 @@ export class MetricComponent implements OnInit { node.metrics.push(metricNode); } } - }else if(metricData.metricValues[0] != undefined && - metricData.type == 'profiling'){ - for(let i=0;i<jobs.length;i++){ - if(jobs[i].metricValues.length != 0){ - var metricNode = { - name: "", - timestamp: "", - dq: 0, - details: [] - }; - metricNode.details = JSON.parse( - JSON.stringify(jobs[i].metricValues) - ); - metricNode.name = jobs[i].name; - metricNode.timestamp = jobs[i].metricValues[0].value.tmst; - metricNode.dq = 0; - node.metrics.push(metricNode); - } - } + } else { + break; } this.finalData.push(node); } @@ -125,6 +107,7 @@ export class MetricComponent implements OnInit { redraw(data) { this.chartHeight = $(".chartItem:eq(0)").width() * 0.8 + "px"; + // this.proHeight = $(".chartItem:eq(0)").width() * 0.2 + "px"; for (let i = 0; i < data.length; i++) { var parentIndex = i; for (let j = 0; j < data[i].metrics.length; j++) { @@ -136,8 +119,13 @@ export class MetricComponent implements OnInit { divs.get(0).style.height = this.chartHeight; this.chartOption.set( chartId, - this.chartService.getOptionThum(data[i].metrics[j],chartId) + this.chartService.getOptionThum(data[i].metrics[j]) ); + // divs.get(0).style.height = (data[i].type == "accuracy") ? this.chartHeight : this.proHeight; + // this.chartOption.set( + // chartId, + // this.chartService.getOptionThum(data[i].metrics[j],chartId) + // ); } } } @@ -167,4 +155,4 @@ export class MetricComponent implements OnInit { self.redraw(self.finalData); }, 0); } -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/0f5d7421/ui/angular/src/app/service/chart.service.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/service/chart.service.ts b/ui/angular/src/app/service/chart.service.ts index 9f13813..8b69191 100644 --- a/ui/angular/src/app/service/chart.service.ts +++ b/ui/angular/src/app/service/chart.service.ts @@ -186,16 +186,16 @@ export class ChartService { return series; } - getOptionThum(metric,chartId) { + getOptionThum(metric) { var data = this.getMetricData(metric); - if(isNaN(data[0][1])){ - let _chartId = "#" + chartId; - var divs = $(_chartId); - var i = document.createElement('i'); - var code = "<div><div style='margin-left:30%'>"+metric.name+ - "</div><div style='margin-left:20%'>Click to see details</div><img src='/assets/img/table.png' style='margin-top:30px;margin-left:30%'/></div>"; - $(divs).html(code); - }else{ + // if(isNaN(data[0][1])){ + // let _chartId = "#" + chartId; + // var divs = $(_chartId); + // var i = document.createElement('i'); + // var code = "<div><div style='text-align:center;'>"+metric.name+ + // "</div><div style='text-align:center;'>Click to see details</div></div>"; + // $(divs).html(code); + // }else{ var self = this; var option = { title: { @@ -270,7 +270,7 @@ export class ChartService { }; option.series = this.getSeries(metric); return option; - } + // } } getOptionBig(metric) { @@ -355,4 +355,4 @@ export class ChartService { option.series = this.getSeries(metric); return option; } -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/0f5d7421/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 f0c623e..19610fe 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.ts +++ b/ui/angular/src/app/sidebar/sidebar.component.ts @@ -102,23 +102,21 @@ export class SidebarComponent implements OnInit { let url_dashboard = this.serviceService.config.uri.dashboard; this.http.get(url_dashboard).subscribe(data => { this.mesWithJob = JSON.parse(JSON.stringify(data)); - var mesNode = null; for (let mesName in this.mesWithJob) { - var jobs = this.mesWithJob[mesName]; - mesNode = new Object(); - mesNode.name = mesName; - var node = null; - node = new Object(); - node.name = mesName; - node.dq = 0; - node.metrics = []; var metricData = this.mesWithJob[mesName][0]; if ( metricData.metricValues[0] != undefined && - metricData.metricValues[0].value.matched != undefined + metricData.type == "accuracy" ) { - for(let i=0;i<jobs.length;i++){ - if(jobs[i].metricValues.length != 0){ + var jobs = this.mesWithJob[mesName]; + var node = null; + node = new Object(); + node.name = mesName; + node.dq = 0; + node.metrics = []; + node.type = "accuracy"; + for (let i = 0; i < jobs.length; i++) { + if (jobs[i].metricValues.length != 0) { var metricNode = { name: "", timestamp: "", @@ -137,6 +135,8 @@ export class SidebarComponent implements OnInit { node.metrics.push(metricNode); } } + } else { + break; } this.finalData.push(node); } @@ -146,4 +146,4 @@ export class SidebarComponent implements OnInit { ngOnInit() { this.sideBarList(null); } -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/0f5d7421/ui/angular/src/assets/img/table.png ---------------------------------------------------------------------- diff --git a/ui/angular/src/assets/img/table.png b/ui/angular/src/assets/img/table.png deleted file mode 100644 index d0b7f32..0000000 Binary files a/ui/angular/src/assets/img/table.png and /dev/null differ
