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/07/24 00:41:49 UTC

incubator-griffin git commit: [GRIFFIN-185] Feature/download ui

Repository: incubator-griffin
Updated Branches:
  refs/heads/master f0ee5ec92 -> 4523ded12


[GRIFFIN-185] Feature/download ui

GRIFFIN-185 - Feature/download ui

Author: Li, Juan <su...@gmail.com>

Closes #366 from icesmartjuan/feature/download_ui.


Project: http://git-wip-us.apache.org/repos/asf/incubator-griffin/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-griffin/commit/4523ded1
Tree: http://git-wip-us.apache.org/repos/asf/incubator-griffin/tree/4523ded1
Diff: http://git-wip-us.apache.org/repos/asf/incubator-griffin/diff/4523ded1

Branch: refs/heads/master
Commit: 4523ded126d1126bc75c7e3d92e7fa60f867dddb
Parents: f0ee5ec
Author: Li, Juan <su...@gmail.com>
Authored: Tue Jul 24 08:41:44 2018 +0800
Committer: William Guo <gu...@apache.org>
Committed: Tue Jul 24 08:41:44 2018 +0800

----------------------------------------------------------------------
 .../org/apache/griffin/core/util/FSUtil.java    |  2 +-
 .../detail-metric/detail-metric.component.html  | 45 +++++++++++++++
 .../detail-metric/detail-metric.component.ts    | 59 ++++++++++++++++++--
 ui/angular/src/app/service/service.service.ts   |  6 +-
 4 files changed, 104 insertions(+), 8 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/4523ded1/service/src/main/java/org/apache/griffin/core/util/FSUtil.java
----------------------------------------------------------------------
diff --git a/service/src/main/java/org/apache/griffin/core/util/FSUtil.java b/service/src/main/java/org/apache/griffin/core/util/FSUtil.java
index f6cfd2c..1aa20e6 100644
--- a/service/src/main/java/org/apache/griffin/core/util/FSUtil.java
+++ b/service/src/main/java/org/apache/griffin/core/util/FSUtil.java
@@ -53,7 +53,7 @@ public class FSUtil {
 
     private static void initFileSystem() {
         Configuration conf = new Configuration();
-
+        
         if (StringUtils.isEmpty(conf.get("fs.hdfs.impl"))) {
             LOGGER.info("Setting fs.hdfs.impl:{}", org.apache.hadoop.hdfs.DistributedFileSystem.class.getName());
             conf.set("fs.hdfs.impl", org.apache.hadoop.hdfs.DistributedFileSystem.class.getName());

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/4523ded1/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 3d112b6..f99e5fe 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
@@ -19,10 +19,14 @@ under the License.
 <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">
+        <a (click)="showDownloadSample()" style="font-size:15px;margin:30px 30px;"><u>Download Miss Sample</u></a>
+      </div>
+      <div class="row">
         <div id="bigChartDiv" echarts [options]="chartOption"></div>
       </div>
     </div>
@@ -56,3 +60,44 @@ under the License.
     </table>
   </div>
 </div>
+
+<div class="modal fade" id="downloadSampleModal" role="dialog" tabindex="-1" [ngClass]="{'in': visibleAnimate}" *ngIf="missRecordList" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" (click)="onContainerClicked($event)">
+  <div class="modal-dialog modal-md modal-md">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <toaster-container></toaster-container>
+        <h4 class="modal-title">{{currentJob}} job miss records timestamp list</h4>
+      </div>
+      <div class="modal-body">
+        <div class="container-fluid" id="dowloadContent" style="overflow:auto;">
+          <tr  >
+            <td colspan="7" style="padding:20px 30px 10px 30px;">
+              <table class="table table-striped" [mfData]="missRecordList" #mf2="mfDataTable" [mfRowsOnPage]="10">
+
+                <tbody>
+                  <tr *ngIf="!missRecordList">
+                    <td colspan="7" style="text-align:center">No content.</td>
+                  </tr>
+                  <tr *ngFor="let item of mf2.data">
+                    <td style="background-color:black;"><a (click)="downloadSample(item)" >{{item.tmst}}  {{item.tmst | date: 'yyyy/MM/dd HH:mm:ss'}}</a>  </td>
+                  </tr>
+                </tbody>
+                <tfoot>
+                  <tr>
+                    <td class="text-center" colspan="8" style="background-color:#1f1f1f;" id="paginationdownlad">
+                      <mfBootstrapPaginator></mfBootstrapPaginator>
+                    </td>
+                  </tr>
+                </tfoot>
+              </table>
+            </td>
+          </tr>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="hide()">Back</button>
+      </div>
+    </div>
+  </div>
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/4523ded1/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 693bb30..5279f93 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
@@ -53,6 +53,10 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit {
   profiling = false;
   columnname = [];
   noresults = false;
+  missRecordList = [];
+  public visible = false;
+  public visibleAnimate = false;
+
 
   ngOnInit() {
     this.currentJob = this.route.snapshot.paramMap.get("name");
@@ -85,6 +89,7 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit {
             this.data[0].value.matched / this.data[0].value.total * 100;
             metric.details = JSON.parse(JSON.stringify(this.data));
           this.chartOption = this.chartService.getOptionBig(metric);
+          this.missRecordList = metric.details.filter(val => val.value.missed!== 0);
           $("#bigChartDiv").height(window.innerHeight - 120 + "px");
           $("#bigChartDiv").width(window.innerWidth - 400 + "px");
           $("#bigChartContainer").show();
@@ -110,10 +115,10 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit {
                   record = ' (' + name + ',' + count + ') ';
                   records += record;
                 }
-                delete item.value[key];                
+                delete item.value[key];
                 key = key + ' (' + keysplit[0] + ', count)';
                 item.value[key] = records;
-                // var sortable = [];  
+                // var sortable = [];
                 // for(let i in item.value[key]){
                 //   for(let category in item.value[key][i]){
                 //     if(category != "count"){
@@ -128,7 +133,7 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit {
                 // for(let i=0;i<5;i++){
                 //   let grpname = sortable[i][0];
                 //   item.value[grpname] = sortable[i][1];
-                // }       
+                // }
                 // delete item.value[key];
               }
             }
@@ -143,7 +148,7 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit {
       }
     );
   }
-  
+
   onResize(event) {
     this.resizeTreeMap();
   }
@@ -158,4 +163,48 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit {
   ngAfterViewChecked() {
     $(".main-table").addClass('clone');
   }
-}
\ No newline at end of file
+
+  showDownloadSample() {
+    this.visible = true;
+    setTimeout(() => (this.visibleAnimate = true), 100);
+  }
+
+  public hide(): void {
+    this.visibleAnimate = false;
+    setTimeout(() => (this.visible = false), 300);
+  }
+  public onContainerClicked(event: MouseEvent): void {
+    if ((<HTMLElement>event.target).classList.contains("close")) {
+      this.hide();
+    }
+  }
+  
+  downloadSample(row){
+    let urlDownload = this.serviceService.config.uri.missRecordDownload + "?jobName=" + row.name + "&ts=" + row.tmst;
+    this.http
+      .get(urlDownload,
+      { responseType: 'blob', observe: 'response' })
+      .map(res => {
+        return {
+          filename: row.name+"_"+row.tmst+'_missRecordSample.json',
+          data: res.body
+        };
+      })
+      .subscribe(res => {
+        console.log('start download:', res);
+        var url = window.URL.createObjectURL(res.data);
+        var a = document.createElement('a');
+        document.body.appendChild(a);
+        a.setAttribute('style', 'display: none');
+        a.href = url;
+        a.download = res.filename;
+        a.click();
+        window.URL.revokeObjectURL(url);
+        a.remove();
+      }, error => {
+        console.log('download error:', JSON.stringify(error));
+      }, () => {
+        console.log('Completed file download.')
+      });
+    }
+  }

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/4523ded1/ui/angular/src/app/service/service.service.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/service/service.service.ts b/ui/angular/src/app/service/service.service.ts
index 1b3f4d4..3e35de5 100644
--- a/ui/angular/src/app/service/service.service.ts
+++ b/ui/angular/src/app/service/service.service.ts
@@ -22,7 +22,7 @@ import { Injectable } from "@angular/core";
 export class ServiceService {
   constructor() {}
   // public BACKEND_SERVER = 'http://10.64.222.80:38080';
-  // public BACKEND_SERVER = 'http://localhost:8080';
+//  public BACKEND_SERVER = 'http://localhost:8080';
   public BACKEND_SERVER = "";
   public API_ROOT_PATH = "/api/v1";
 
@@ -71,9 +71,11 @@ export class ServiceService {
         this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/sample",
       metricdownload:
         this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/download",
+      missRecordDownload:
+        this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs/download",
 
-      //Models
 
+      //Models
       allModels: this.BACKEND_SERVER + this.API_ROOT_PATH + "/measures",
       addModels: this.BACKEND_SERVER + this.API_ROOT_PATH + "/measures",
       deleteModel: this.BACKEND_SERVER + this.API_ROOT_PATH + "/measures",