You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@griffin.apache.org by gu...@apache.org on 2018/02/06 02:05:48 UTC
incubator-griffin git commit: Add button to job page
Repository: incubator-griffin
Updated Branches:
refs/heads/master 459c96654 -> 0f5d7421e
Add button to job page
Add button to view job results
Author: dodobel <12...@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 <12...@qq.com>
Authored: Tue Feb 6 10:05:41 2018 +0800
Committer: Lionel Liu <bh...@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