Revert Jobs-related changes from "AMBARI-2702. UI cleanup after merge branch-1.4.0 into trunk. (Andrii Tkach via srimanth)" (yusaku)

Revert Jobs-related changes from "AMBARI-2677. Merge from branch-1.4.0 (ncole)" (yusaku)

ambari-web/app/classes/app_class.js

@@ -1,38 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-
-var App = require('app');
-var date = require('utils/date');
-var misc = require('utils/misc');
-
-App.App2 = Ember.Object.extend({
-
-  app_id: "", //string
-  app_name: "", //string
-  app_type: "", //string
-  workflow_entity_name: "", //string
-  user_name: "", //string
-  queue: "", //string
-  submit_time: 0, //number
-  launch_time: 0, //number
-  finish_time: 0, //number
-  num_stages: 0, //number
-  stages: [], //number
-  status: "", //string
-});

ambari-web/app/classes/run_class.js

@@ -32,7 +32,6 @@ App.Run2 = Ember.Object.extend({
   workflowContext: null, //string
   input: 0, //number
   output: 0, //number
-  tags: null, //string
 
   /**
    * Will set to true when we load all jobs related to this run
@@ -96,12 +95,9 @@ App.Run2 = Ember.Object.extend({
     if (this.get('id').indexOf('hive_') === 0) {
       return 'Hive';
     }
-    if (this.get('id').indexOf('mr_') === 0 || this.get('id').indexOf('mapreduce_') === 0) {
+    if (this.get('id').indexOf('mr_') === 0) {
       return 'MapReduce';
     }
-    if (this.get('id').indexOf('yarn_') === 0) {
-      return 'Yarn';
-    }
     return 'Undefined';
   }.property('id')
-});
+});

ambari-web/app/controllers/main/apps/item_controller.js

@@ -34,29 +34,16 @@ App.MainAppsItemController = Em.Controller.extend({
     }
     var self = this;
 
-    if (!App.testMode && !App.get('isHadoop2Stack')) {
-      var url = App.testMode ? '/data/apps/jobs/'+ currentId +'.json' :
-        App.apiPrefix + "/jobhistory/job?workflowId=" + currentId;
+    var url = App.testMode ? '/data/apps/jobs/'+ currentId +'.json' :
+      App.apiPrefix + "/jobhistory/job?workflowId=" + currentId;
 
-      var mapper = App.jobsMapper;
-      mapper.set('controller', this);
-      App.HttpClient.get(url, mapper,{
-        complete:function(jqXHR, textStatus) {
-          self.set('content.loadAllJobs', true);
-        }
-      });
-    } else {
-      var url = App.testMode ? '/data/apps/apps/'+ currentId +'.json' :
-        App.apiPrefix + "/jobhistory/app?workflowId=" + currentId;
-
-      var mapper = App.appsMapper;
-      mapper.set('controller', this);
-      App.HttpClient.get(url, mapper,{
-        complete:function(jqXHR, textStatus) {
-          self.set('content.loadAllJobs', true);
-        }
-      });
-    }
+    var mapper = App.jobsMapper;
+    mapper.set('controller', this);
+    App.HttpClient.get(url, mapper,{
+      complete:function(jqXHR, textStatus) {
+        self.set('content.loadAllJobs', true);
+      }
+    });
   }.observes('content')
 
 })

ambari-web/app/controllers/main/apps_controller.js

@@ -48,12 +48,7 @@ App.MainAppsController = Em.ArrayController.extend({
     var self = this;
 
     //var runsUrl = App.testMode ? "/data/apps/runs.json" : App.apiPrefix + "/jobhistory/workflow?orderBy=startTime&sortDir=DESC&limit=" + App.maxRunsForAppBrowser;
-    var runsUrl;
-    if (App.testMode) {
-      runsUrl = App.get('isHadoop2Stack') ? "/data/apps/runs2.json" : "/data/apps/runs.json";
-    } else {
-      runsUrl = App.apiPrefix + this.get("runUrl");
-    }
+    var runsUrl = App.testMode ? "/data/apps/runs.json" : App.apiPrefix + this.get("runUrl");
 
     App.HttpClient.get(runsUrl, App.runsMapper, {
       complete:function (jqXHR, textStatus) {
@@ -93,6 +88,10 @@ App.MainAppsController = Em.ArrayController.extend({
     sSearch_3:"",
     minJobs:"",
     maxJobs:"",
+    minInputBytes:"",
+    maxInputBytes:"",
+    minOutputBytes:"",
+    maxOutputBytes:"",
     minDuration:"",
     maxDuration:"",
     minStartTime:"",
@@ -102,7 +101,6 @@ App.MainAppsController = Em.ArrayController.extend({
     iDisplayStart:"",
     iSortCol_0:"",
     sSortDir_0:"",
-    tagSearch:"",
 
     allFilterActivated:false,
     filteredDisplayRecords:null,
@@ -114,21 +112,15 @@ App.MainAppsController = Em.ArrayController.extend({
      * Direct binding to job filter field
      */
     runType:"",
-    onRunTypeChange: function () {
-      if (this.runType == "MapReduce") {
-        if (!App.testMode && !App.get('isHadoop2Stack')) {
-          this.set("sSearch_2", "mr");
-        } else {
-          this.set("sSearch_2", "mapreduce");
-        }
-      } else if (this.runType == "Hive") {
-        this.set("sSearch_2", "hive");
-      } else if (this.runType == "Pig") {
-        this.set("sSearch_2", "pig");
-      } else if (this.runType == "Yarn") {
-        this.set("sSearch_2", "yarn");
-      } else {
-        this.set("sSearch_2", "");
+    onRunTypeChange:function(){
+      if(this.runType == "MapReduce"){
+        this.set("sSearch_2","mr");
+      }else if(this.runType == "Hive"){
+        this.set("sSearch_2","hive");
+      }else if(this.runType == "Pig"){
+        this.set("sSearch_2","pig");
+      }else{
+        this.set("sSearch_2","");
       }
     }.observes("runType"),
 
@@ -142,6 +134,26 @@ App.MainAppsController = Em.ArrayController.extend({
       this.set("maxJobs", minMaxTmp.max);
     }.observes("jobs"),
 
+    /**
+     * Direct binding to Input filter field
+     */
+    input:"",
+    onInputChange:function(){
+      var minMaxTmp = this.parseBandWidth(this.input);
+      this.set("minInputBytes", minMaxTmp.min);
+      this.set("maxInputBytes", minMaxTmp.max);
+    }.observes("input"),
+
+    /**
+     * Direct binding to Output filter field
+     */
+    output:"",
+    onOutputChange:function(){
+      var minMaxTmp = this.parseBandWidth(this.output);
+      this.set("minOutputBytes", minMaxTmp.min);
+      this.set("maxOutputBytes", minMaxTmp.max);
+    }.observes("output"),
+
     /**
      * Direct binding to Duration filter field
      */
@@ -308,9 +320,10 @@ App.MainAppsController = Em.ArrayController.extend({
 
       var arr = [
         "sSearch_0", "sSearch_1", "sSearch_2", "sSearch_3", "minJobs",
-        "maxJobs", "minDuration", "maxDuration", "minStartTime",
+        "maxJobs", "minInputBytes", "maxInputBytes", "minOutputBytes",
+        "maxOutputBytes", "minDuration", "maxDuration", "minStartTime",
         "maxStartTime", "sSearch", "iDisplayLength", "iDisplayStart",
-        "iSortCol_0", "sSortDir_0", "tagSearch"
+        "iSortCol_0", "sSortDir_0"
       ];
 
       var notFilterFields = ["iDisplayLength", "iDisplayStart", "iSortCol_0", "sSortDir_0"];
@@ -349,9 +362,10 @@ App.MainAppsController = Em.ArrayController.extend({
     obj.set("sSearch_3","");
     obj.set("runType","Any");
     obj.set("jobs","");
+    obj.set("input","");
+    obj.set("output","");
     obj.set("duration","");
     obj.set("runDate","Any");
-    obj.set("tagSearch","");
   },
 
 
@@ -389,6 +403,10 @@ App.MainAppsController = Em.ArrayController.extend({
       'filterObject.sSearch_3',
       'filterObject.minJobs',
       'filterObject.maxJobs',
+      'filterObject.minInputBytes',
+      'filterObject.maxInputBytes',
+      'filterObject.minOutputBytes',
+      'filterObject.maxOutputBytes',
       'filterObject.minDuration',
       'filterObject.maxDuration',
       'filterObject.minStartTime',
@@ -398,8 +416,7 @@ App.MainAppsController = Em.ArrayController.extend({
       'filterObject.iDisplayStart',
       'filterObject.iSortCol_0',
       'filterObject.sSortDir_0',
-      'filterObject.viewType',
-      'filterObject.tagSearch'
+      'filterObject.viewType'
   ),
 
   serverData: "",
@@ -418,6 +435,16 @@ App.MainAppsController = Em.ArrayController.extend({
           'min': '-',
           'max': '-'
         },
+        'input': {
+          'avg': '-',
+          'min': '-',
+          'max': '-'
+        },
+        'output': {
+          'avg': '-',
+          'min': '-',
+          'max': '-'
+        },
         'duration': {
           'avg': '-',
           'min': '-',
@@ -435,6 +462,16 @@ App.MainAppsController = Em.ArrayController.extend({
           'min': summary.jobs.min,
           'max': summary.jobs.max
         },
+        'input': {
+          'avg': misc.formatBandwidth(summary.input.avg),
+          'min': misc.formatBandwidth(summary.input.min),
+          'max': misc.formatBandwidth(summary.input.max)
+        },
+        'output': {
+          'avg': misc.formatBandwidth(summary.output.avg),
+          'min': misc.formatBandwidth(summary.output.min),
+          'max': misc.formatBandwidth(summary.output.max)
+        },
         'duration': {
           'avg': date.timingFormat(Math.round(summary.duration.avg)),
           'min': date.timingFormat(summary.duration.min),
@@ -456,10 +493,11 @@ App.MainAppsController = Em.ArrayController.extend({
       { name: Em.I18n.t('common.name'), index: 1 },
       { name: Em.I18n.t('common.type'), index: 2 },
       { name: Em.I18n.t('common.user'), index: 3 },
-      { name: Em.I18n.t('common.tags'), index: 4 },
-      { name: Em.I18n.t('apps.avgTable.jobs'), index: 5 },
-      { name: Em.I18n.t('apps.avgTable.duration'), index: 6 },
-      { name: Em.I18n.t('apps.table.column.runDate'), index: 7 }
+      { name: Em.I18n.t('apps.avgTable.jobs'), index: 4 },
+      { name: Em.I18n.t('apps.avgTable.input'), index: 5 },
+      { name: Em.I18n.t('apps.avgTable.output'), index: 6 },
+      { name: Em.I18n.t('apps.avgTable.duration'), index: 7 },
+      { name: Em.I18n.t('apps.table.column.runDate'), index: 8 }
     ]
   })
 

ambari-web/app/initialize.js

@@ -40,7 +40,6 @@ require('mappers/status_mapper');
 require('mappers/hosts_mapper');
 require('mappers/cluster_mapper');
 require('mappers/jobs_mapper');
-require('mappers/apps_mapper');
 require('mappers/runs_mapper');
 require('mappers/racks_mapper');
 require('mappers/alerts_mapper');

ambari-web/app/mappers/apps_mapper.js

@@ -1,63 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-var App = require('app');
-
-App.appsMapper = App.QuickDataMapper.create({
-  model:App.App,
-  map:function (json) {
-    if (!this.get('model')) {
-      return;
-    }
-    if (json.apps) {
-      var result = [];
-      json.apps.forEach(function (item) {
-        var a = this.parseIt(item, this.config);
-        // assume a nonzero elapsed time (otherwise axis labels are blank)
-        if (a.finish_time < a.submit_time)
-          a.finish_time = a.submit_time + 1000;
-        a.elapsed_time = a.finish_time - a.submit_time;
-        a.num_stages = a.stages.length;
-        result.push(a);
-      }, this);
-
-      var r = Ember.ArrayProxy.create({"content":[]});
-      result.forEach(function(item){
-        r.content.push(App.App2.create(item));
-      });
-
-      this.set('controller.content.jobs', r.content);
-    }
-  },
-  config:{
-    id:'appId',
-    run_id:'workflowId',
-    app_name:'appName',
-    app_type:'appType',
-    workflow_entity_name:'workflowEntityName',
-    user_name:'userName',
-    queue:'queue',
-    submit_time:'submitTime',
-    launch_time:'launchTime',
-    finish_time:'finishTime',
-    num_stages:'numStages',
-    stages:'stages',
-    status:'status',
-    elapsed_time:'elapsedTime'
-  }
-});

ambari-web/app/mappers/runs_mapper.js

@@ -87,7 +87,6 @@ App.runsMapper = App.QuickDataMapper.create({
     startTime: 'startTime',
     elapsedTime: 'elapsedTime',
     input: 'inputBytes',
-    output: 'outputBytes',
-    tags: 'workflowTags'
+    output: 'outputBytes'
   }
 });

ambari-web/app/models.js

@@ -48,4 +48,3 @@ require('models/dataset');
 require('models/dataset_job');
 require('classes/run_class');
 require('classes/job_class');
-require('classes/app_class');

ambari-web/app/models/apps.js

@@ -1,42 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-
-var App = require('app');
-var date = require('utils/date');
-var misc = require('utils/misc');
-
-App.App = DS.Model.extend({
-
-  run: DS.belongsTo('App.Run'),
-
-  appId: DS.attr('string'),
-  appName: DS.attr('string'),
-  appType: DS.attr('string'),
-  workflowEntityName: DS.attr('string'),
-  userName: DS.attr('string'),
-  queue: DS.attr('string'),
-  submitTime: DS.attr('number'),
-  launchTime: DS.attr('number'),
-  finishTime: DS.attr('number'),
-  numStages: DS.attr('number'),
-  stages: DS.attr('object'),
-  status: DS.attr('string'),
-});
-
-App.App.FIXTURES = [];

ambari-web/app/models/job.js

@@ -33,12 +33,28 @@ App.Job = DS.Model.extend({
   maps: DS.attr('number'),
   reduces: DS.attr('number'),
   status: DS.attr('string'),
+  input: DS.attr('number'),
+  output: DS.attr('number'),
   elapsedTime: DS.attr('number'),
   duration: function () {
     return date.timingFormat(parseInt(this.get('elapsedTime')));
   }.property('elapsedTime'),
   jobTimeLine: DS.attr('string'),
-  jobTaskView: DS.attr('string')
+  jobTaskView: DS.attr('string'),
+  /**
+   *  Sum of input bandwidth for all jobs with appropriate measure
+   */
+  inputFormatted: function () {
+    var input = this.get('input');
+    return misc.formatBandwidth(input);
+  }.property('input'),
+  /**
+   *  Sum of output bandwidth for all jobs with appropriate measure
+   */
+  outputFormatted: function () {
+    var output = this.get('output');
+    return misc.formatBandwidth(output);
+  }.property('output')
 
 });
 

ambari-web/app/models/run.js

@@ -29,7 +29,8 @@ App.Run = DS.Model.extend({
   startTime:DS.attr('string'),
   elapsedTime:DS.attr('string'),
   workflowContext:DS.attr('string'),
-  tags: DS.attr('string'),
+  input: DS.attr('number'),
+  output: DS.attr('number'),
 
   loadAllJobs : false,
 
@@ -62,6 +63,23 @@ App.Run = DS.Model.extend({
   isRunning: function () {
     return !this.get('numJobsTotal') == this.get('numJobsCompleted');
   }.property('numJobsTotal', 'numJobsCompleted'),
+  /**
+   * Sum of input bandwidth for all jobs with appropriate measure
+   */
+  inputFormatted: function () {
+    var input = this.get('input');
+    input = misc.formatBandwidth(input);
+    return input;
+  }.property('input'),
+
+  /**
+   *  Sum of output bandwidth for all jobs with appropriate measure
+   */
+  outputFormatted: function () {
+    var output = this.get('output');
+    output = misc.formatBandwidth(output);
+    return output;
+  }.property('output'),
 
   /**
    *
@@ -88,7 +106,7 @@ App.Run = DS.Model.extend({
     if (this.get('id').indexOf('hive_') === 0) {
       return 'Hive';
     }
-    if (this.get('id').indexOf('mr_') === 0 || this.get('id').indexOf('mapreduce_') === 0) {
+    if (this.get('id').indexOf('mr_') === 0) {
       return 'MapReduce';
     }
   }.property('id')

ambari-web/app/routes/main.js

@@ -474,8 +474,6 @@ module.exports = Em.Route.extend({
     index: Ember.Route.extend({
       route: '/',
       connectOutlets: function (router, context) {
-        router.set('mainHostController.clearFilters', !router.get('mainHostController.comeWithFilter'));
-        router.set('mainHostController.comeWithFilter', false);
         router.get('mainController').connectOutlet('mainHost');
       }
     }),
@@ -528,7 +526,6 @@ module.exports = Em.Route.extend({
     }),
 
     back: function (router, event) {
-      router.get('mainHostController').set('comeWithFilter', true);
       window.history.back();
     },
 
@@ -650,78 +647,6 @@ module.exports = Em.Route.extend({
       }
     }),
 
-    adminHighAvailability: Em.Route.extend({
-      route: '/highAvailability',
-      enter: function (router) {
-        Em.run.next(function () {
-          router.transitionTo('adminHighAvailability.index');
-        });
-      },
-      index: Ember.Route.extend({
-        route: '/',
-        connectOutlets: function (router, context) {
-          router.set('mainAdminController.category', "highAvailability");
-          router.get('mainAdminController').connectOutlet('mainAdminHighAvailability');
-        }
-      })
-    }),
-
-    highAvailabilityRollback: Ember.Route.extend({
-      route: '/highAvailability/rollback',
-      enter: function (router) {
-        //after refresh check if the wizard is open then restore it
-        Ember.run.next(function () {
-          App.router.get('updateController').set('isWorking', false);
-
-          var highAvailabilityWizardController = router.get('highAvailabilityWizardController');
-          if(highAvailabilityWizardController.get('popup')){
-            highAvailabilityWizardController.finish();
-            highAvailabilityWizardController.get('popup').hide();
-          }
-          highAvailabilityWizardController.loadTasksStatuses();
-          highAvailabilityWizardController.loadRequestIds();
-          highAvailabilityWizardController.loadLogs();
-          var popup = App.ModalPopup.show({
-            classNames: ['full-width-modal'],
-            header: Em.I18n.t('admin.highAvailability.rollback.header'),
-            bodyClass: App.HighAvailabilityRollbackView.extend({
-              controllerBinding: 'App.router.highAvailabilityRollbackController'
-            }),
-            showCloseButton: false,
-            primary: Em.I18n.t('form.cancel'),
-            secondary: null,
-            showFooter: false,
-
-            proceedOnClose: function () {
-              var controller = router.get('highAvailabilityWizardController');
-              controller.clearTasksData();
-              controller.clearStorageData();
-              App.router.get('updateController').set('isWorking', true);
-              App.clusterStatus.setClusterStatus({
-              clusterName: router.get('content.cluster.name'),
-              clusterState: 'HIGH_AVAILABILITY_DISABLED',
-              wizardControllerName: router.get('highAvailabilityRollbackController.name'),
-              localdb: App.db.data
-              });
-              this.hide();
-              router.transitionTo('main.admin.index');
-              location.reload();
-            },
-            didInsertElement: function () {
-              this.fitHeight();
-            }
-          });
-          router.set('highAvailabilityRollbackController.popup', popup);
-        });
-
-      },
-
-      unroutePath: function () {
-        return false;
-      }
-    }),
-
-    enableHighAvailability: require('routes/high_availability_routes'),
 
     adminSecurity: Em.Route.extend({
       route: '/security',
@@ -737,9 +662,7 @@ module.exports = Em.Route.extend({
             controller.setAddSecurityWizardStatus(currentClusterStatus.localdb.status);
             App.db.setSecureConfigProperties(currentClusterStatus.localdb.secureConfigProperties);
             App.db.setWizardCurrentStep('AddSecurity', currentClusterStatus.localdb.currentStep);
-            App.db.setIsNameNodeHa(currentClusterStatus.localdb.haStatus);
             App.db.setDisableSecurityStatus(currentClusterStatus.localdb.disableSecurityStatus);
-            App.db.setSecureUserInfo(currentClusterStatus.localdb.secureUserInfo);
           }
         }
         if (!(controller.getAddSecurityWizardStatus() === 'RUNNING') && !(controller.getDisableSecurityStatus() === 'RUNNING')) {
@@ -991,7 +914,6 @@ module.exports = Em.Route.extend({
     router.transitionTo('hosts.hostDetails.index', event.context);
   },
   filterHosts: function (router, component) {
-    router.get('mainHostController').set('comeWithFilter', true);
     router.get('mainHostController').filterByComponent(component.context);
     router.transitionTo('hosts.index');
   }

ambari-web/app/styles/apps.less

@@ -60,7 +60,7 @@
     }
 
     input, select{
-      width: 75%;
+      width: 76%;
     }
 
     .no-data{
@@ -68,7 +68,7 @@
     }
 
     input.input-super-mini{
-      width: 46px;
+      width: 47px;
       max-width: 57%;
     }
 
@@ -78,22 +78,22 @@
     .col0,
     td:first-child,
     th:first-child {
-      width: 14%;
+      width: 16%;
     }
     .col1,
     td:first-child + td + td,
     th:first-child + th + th{
-      width: 14%;
+      width: 15%;
     }
     .col2,
     td:first-child + td + td + td,
     th:first-child + th + th + th{
-      width: 9%;
+      width: 11%;
     }
     .col3,
     td:first-child + td + td + td + td,
     th:first-child + th + th + th + th{
-      width: 8%;
+      width: 11%;
     }
     .col4,.col5,.col6,.col7,
     td:first-child + td + td + td + td + td,
@@ -105,17 +105,12 @@
     td:first-child + td + td + td + td + td + td + td + td,
     th:first-child + th + th + th + th + th + th + th + th
     {
-      width: 8%;
+      width: 9%;
     }
     .col8,
     td:first-child + td + td + td + td + td + td + td + td + td,
     th:first-child + th + th + th + th + th + th + th + th + th{
-      width: 8%;
-    }
-    .col9,
-    td:first-child + td + td + td + td + td + td + td + td + td + td,
-    th:first-child + th + th + th + th + th + th + th + th + th + th{
-      width: 9%;
+      width: 13%;
     }
   }
 
@@ -471,6 +466,58 @@
       visibility: hidden;
     }
   }
+  #dag_viewer_legend {
+    border: 1px solid #DDDDDD;
+    padding: 10px;
+    padding-left: 20px;
+    float: left;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    li {
+      display: block;
+      width: 25%;
+      float: left;
+    }
+    span {
+      width: 15px;
+      height: 15px;
+      display: block;
+      float: left;
+      margin-right: 5px;
+    }
+    #job {
+      border: 1px solid #333;
+      background: #ccc;
+    }
+    #jobdone {
+      border: 1px solid #333;
+      background: rgba(0,128,0,0.8);
+    }
+    #allmap {
+      border: 2px solid #007000;
+    }
+    #map {
+      border: 2px solid #007000;
+      background: rgba(0,128,0,0.8);
+    }
+    #allshuffle {
+      border: 2px solid #97BDC9;
+    }
+    #shuffle {
+      border: 2px solid #97BDC9;
+      background: rgba(173,216,230,0.8);
+    }
+    #allreduce {
+      border: 2px solid #3D729E;
+    }
+    #reduce {
+      border: 2px solid #3D729E;
+      background: rgba(70,130,180,0.8);
+    }
+  }
 }
 
 
@@ -487,147 +534,3 @@
 }
 
 /*Big modal window end*/
-
-/*
- * D3  visualization components 
- * Styles for App Graph
- */
-.wfdag {
-  width: 100%;
-}
-
-#app_graph .axis path,
-#app_graph .axis line {
-  fill: none;
-  stroke: #000;
-  shape-rendering: crispEdges;
-}
-
-#app_graph line.link,
-#app_graph path.link {
-  fill: none;
-  stroke: #666;
-  stroke-width: 2.5px;
-}
-
-#app_graph line.link.finished,
-#app_graph path.link.finished {
-  stroke: #444;
-}
-
-#app_graph path.link.stage {
-  stroke: #fff;
-}
-
-#app_graph marker#finished {
-  fill: #444;
-}
-
-#app_graph marker#circle {
-  fill: #666;
-  stroke: none;
-}
-
-#app_graph marker#stage {
-  fill: #fff;
-}
-
-#app_graph line.source.mark,
-#app_graph line.target.mark {
-  stroke: #666;
-  stroke-width: 2.5px;
-}
-
-#app_graph rect {
-  fill: #ccc;
-  stroke: #333;
-  stroke-width: 1px;
-}
-
-#app_graph rect.finished {
-  fill: green;
-  fill-opacity: 0.8;
-}
-
-#app_graph text.joblabel {
-  pointer-events: none;
-  text-anchor: middle;
-}
-
-#app_graph text.axislabel {
-  pointer-events: none;
-  text-anchor: end;
-  font-size: 11px;
-  font-weight: bold;
-}
-
-#app_graph text.shadow {
-  stroke: #fff;
-  stroke-width: 3px;
-  stroke-opacity: .8;
-}
-#app_graph .y.axis {
-  font-size: 10px;
-}
-
-#app_graph circle.stage,
-#app_graph rect.stage,
-#app_graph_legend circle.stage {
-  fill: lightblue;
-  stroke: black;
-}
-
-#app_graph text.stagelabel {
-  stroke: black;
-  pointer-events: none;
-  text-anchor: middle;
-  dominant-baseline: central;
-  font-weight: bold;
-}
-
-#app_graph_legend {
-  border: 1px solid #DDDDDD;
-  padding: 10px;
-  padding-left: 20px;
-  margin: 0 auto;
-  width: 50%;
-  height: 40px;
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-  li {
-    display: block;
-    width: 50%;
-    float: left;
-  }
-  span {
-    width: 15px;
-    height: 15px;
-    display: block;
-    float: left;
-    margin-right: 5px;
-  }
-  span.stage {
-    margin-right: 8px;
-  }
-  .job {
-    border: 1px solid #333;
-    background: #ccc;
-  }
-  .jobdone {
-    border: 1px solid #333;
-    background: rgba(0,128,0,0.8);
-  }
-  .map {
-    border: 1px solid black;
-    background: lightblue;
-  }
-  .reduce {
-    stroke: white;
-    fill: white;
-  }
-}
-
-/* App Graph end */

ambari-web/app/templates/main/apps.hbs

@@ -22,6 +22,8 @@
     <tr>
       <td></td>
       <td>{{t apps.avgTable.jobs}}</td>
+      <td>{{t apps.avgTable.input}}</td>
+      <td>{{t apps.avgTable.output}}</td>
       <td>{{t apps.avgTable.duration}}</td>
       <td>{{t apps.avgTable.oldest}}</td>
       <td>{{t apps.avgTable.mostRecent}}</td>
@@ -29,6 +31,8 @@
     <tr class="avg-info">
       <td>{{t apps.avgTable.avg}}</td>
       <td>{{summary.jobs.avg}}</td>
+      <td>{{summary.input.avg}}</td>
+      <td>{{summary.output.avg}}</td>
       <td>{{summary.duration.avg}}</td>
       <td>{{summary.times.oldest}}</td>
       <td>{{summary.times.youngest}}</td>
@@ -37,6 +41,8 @@
     <tr class="compare-info">
       <td>{{t apps.avgTable.min}} / {{t apps.avgTable.max}}</td>
       <td>{{summary.jobs.min}} / {{summary.jobs.max}}</td>
+      <td>{{summary.input.min}} / {{summary.input.max}}</td>
+      <td>{{summary.output.min}} / {{summary.output.max}}</td>
       <td>{{summary.duration.min}} / {{summary.duration.max}}</td>
       <td></td>
       <td></td>
@@ -74,8 +80,9 @@
       <th>{{view view.nameFilterView}}</th>
       <th>{{view view.typeFilterView}}</th>
       <th>{{view view.userFilterView}}</th>
-      <th>{{view view.tagFilterView}}</th>
       <th>{{view view.jobsFilterView}}</th>
+      <th>{{view view.inputFilterView}}</th>
+      <th>{{view view.outputFilterView}}</th>
       <th>{{view view.durationFilterView}}</th>
       <th>{{view view.runDateFilterView}}</th>
     </tr>

ambari-web/app/templates/main/apps/item/app.hbs

@@ -1,64 +0,0 @@
-{{!
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you 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="app_graph"></div>
-
-    <div id="app_graph_legend">
-      <ul>
-        <li><span class="job"></span>Unfinished Job</li>
-        <li><span class="map"></span>Map Stage with Task Count</li>
-        <li><span class="jobdone"></span>Finished Job</li>
-        <li><span>
-          <svg width="18" height="18">
-            <rect class="reduce" x="0" y="0" width="18" height="18"/>
-            <circle class="stage" r="8" cx="9" cy="9"/>
-          </svg></span>Reduce Stage with Task Count</li>
-      </ul>
-    </div>
-
-    <table class="table table-bordered table-striped" id="innerTable">
-      <thead>
-      <tr>
-        {{#view view.sortView contentBinding="controller.content.jobs"}}
-          {{#if view.parentView.hasManyJobs}}{{view view.parentView.nameSort}}{{/if}}
-          {{view view.parentView.idSort}}
-          {{view view.parentView.typeSort}}
-          {{view view.parentView.statusSort}}
-          {{view view.parentView.numStagesSort}}
-          {{view view.parentView.stagesSort}}
-          {{view view.parentView.durationSort}}
-        {{/view}}
-      </tr>
-      </thead>
-      <tbody>
-      {{#if view.loaded}}
-        {{#each job in view.jobs}}
-        <tr>
-          {{#if view.hasManyJobs}}<td>{{job.entityName}}</td>{{/if}}
-          <td>{{job.name}}</td>
-          <td>{{job.type}}</td>
-          <td>{{job.status}}</td>
-          <td>{{job.numStages}}</td>
-          <td>{{job.stages}}</td>
-          <td>{{job.elapsedTime}}</td>
-        </tr>
-        {{/each}}
-      {{/if}}
-      </tbody>
-    </table>
-
-

ambari-web/app/templates/main/apps/item/dag.hbs

@@ -17,6 +17,19 @@
 }}
     <div id="dag_viewer"></div>
 
+    <div id="dag_viewer_legend">
+      <ul>
+        <li><span id="job"></span>Unfinished Job</li>
+        <li><span id="allmap"></span>All Maps on Cluster</li>
+        <li><span id="allshuffle"></span>All Shuffles on Cluster</li>
+        <li><span id="allreduce"></span>All Reduces on Cluster</li>
+        <li><span id="jobdone"></span>Finished Job</li>
+        <li><span id="map"></span>Maps for this App</li>
+        <li><span id="shuffle"></span>Shuffles for this App</li>
+        <li><span id="reduce"></span>Reduces for this App</li>
+      </ul>
+    </div>
+
     <table class="table table-bordered table-striped" id="innerTable">
       <thead>
       <tr>

ambari-web/app/templates/main/apps/list_row.hbs

@@ -20,8 +20,9 @@
 <td>{{unbound run.appName}}</td>
 <td>{{unbound run.type}}</td>
 <td>{{unbound run.userName}}</td>
-<td>{{unbound run.tags}}</td>
 <td>{{unbound run.numJobsTotal}}</td>
+<td>{{unbound run.inputFormatted}}</td>
+<td>{{unbound run.outputFormatted}}</td>
 <td>{{unbound run.duration}}</td>
 {{#if run.isRunning}}
 <td rel="popover" {{translateAttr title="apps.isRunning.popup.title" data-content="apps.isRunning.popup.content"}}>

ambari-web/app/utils/app_graph.js

@@ -1,441 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-
-module.exports = {
-  create:function(domId, wfData, jobData, svgw, svgh, nodeHeight, labelFontSize, maxLabelWidth, axisPadding, stageFontSize) {
-    // initialize variables
-    var nodes = new Array();
-    var links = new Array();
-    var numNodes = 0;
-    var id = domId;
-    var formatDuration = this.formatDuration;
-
-    // create map from entity names to nodes
-    var existingNodes = new Array();
-    var jobData = (jobData) ? jobData : new Array();
-    var minStartTime = 0;
-    if (jobData.length > 0)
-      minStartTime = jobData[0].submitTime;
-    var maxFinishTime = 0;
-    // iterate through job data
-    for (var i = 0; i < jobData.length; i++) {
-      jobData[i].info = "jobId:"+jobData[i].name+"  \n"+
-        "nodeName:"+jobData[i].entityName+"  \n"+
-        "status:"+jobData[i].status+"  \n"+
-        "startTime:"+(new Date(jobData[i].submitTime).toUTCString())+"  \n"+
-        "duration:"+formatDuration(jobData[i].finishTime - jobData[i].submitTime);
-      jobData[i].state = jobData[i].status==="FINISHED";
-      minStartTime = Math.min(minStartTime, jobData[i].submitTime);
-      maxFinishTime = Math.max(maxFinishTime, jobData[i].finishTime);
-      // add a node to the nodes array and to a provided map of entity names to nodes
-      existingNodes[jobData[i].entityName] = jobData[i];
-      nodes.push(jobData[i]);
-      numNodes++;
-    }
-    var dag = eval('(' + wfData + ')').dag;
-    var sourceMarker = new Array();
-    var targetMarker = new Array();
-    var sourceMap = new Array();
-    // for each source node in the context, create links between it and its target nodes
-    for (var source in dag) {
-      var sourceNode = null;
-      if (source in existingNodes)
-        sourceNode = existingNodes[source];
-      for (var i = 0; i < dag[source].length; i++) {
-        var targetNode = null;
-        if (dag[source][i] in existingNodes)
-          targetNode = existingNodes[dag[source][i]];
-        // add a link between sourceNode and targetNode
-        // if source or target is null, add marker indicating unsubmitted job and return
-        if (sourceNode==null) {
-          if (targetNode==null)
-            continue;
-          sourceMarker.push(targetNode);
-          continue;
-        }
-        if (targetNode==null) {
-          targetMarker.push(sourceNode);
-          continue;
-        }
-        // add link between nodes
-        var state = false;
-        if (sourceNode.state && targetNode.state)
-          state = true;
-        links.push({"source":sourceNode, "target":targetNode, "state":state, "value":sourceNode.output});
-        // add source to map of targets to sources
-        if (!(targetNode.name in sourceMap))
-          sourceMap[targetNode.name] = new Array();
-        sourceMap[targetNode.name].push(sourceNode);
-      }
-    }
-  
-    // display the graph
-    // rules of thumb: nodeHeight = 20, labelFontSize = 14, maxLabelWidth = 180
-    //                 nodeHeight = 15, labelFontSize = 10, maxLabelWidth = 120
-    //                 nodeHeight = 40, labelFontSize = 20, maxLabelWidth = 260
-    //                 nodeHeight = 30, labelFontSize = 16
-    var nodeHeight = nodeHeight || 26;
-    var labelFontSize = labelFontSize || 12;
-    var maxLabelWidth = maxLabelWidth || 180;
-    var axisPadding = axisPadding || 30;
-    var stageFontSize = stageFontSize || 16;
-
-    // draw timeline graph
-    var margin = {"vertical":10, "horizontal":50};
-    var w = svgw - 2*margin.horizontal;
-
-    var startTime = minStartTime;
-    var elapsedTime = maxFinishTime - minStartTime;
-    var x = d3.time.scale.utc()
-      .domain([startTime, startTime+elapsedTime])
-      .range([0, w]);
-    var xrel = d3.time.scale()
-      .domain([0, elapsedTime])
-      .range([0, w]);
-
-    // process nodes and determine their x and y positions, width and height
-    var minNodeSpacing = nodeHeight/2;
-    var ends = new Array();
-    var maxIndex = 0;
-    nodes.sort(function(a,b){return a.name.localeCompare(b.name);});
-    for (var i = 0; i < numNodes; i++) {
-      var d = nodes[i];
-      d.x = x(d.submitTime);
-      d.w = x(d.finishTime) - x(d.submitTime);
-      if (d.w < d.stages.length*(nodeHeight-4)) {
-        d.w = d.stages.length*(nodeHeight-4);
-        if (d.x + d.w > w)
-          d.x = w - d.w;
-      }
-      var effectiveX = d.x
-      var effectiveWidth = d.w;
-      if (d.w < maxLabelWidth) {
-        effectiveWidth = maxLabelWidth;
-        if (d.x + effectiveWidth > w)
-          effectiveX = w - effectiveWidth;
-        else if (d.x > 0)
-          effectiveX = d.x+(d.w-maxLabelWidth)/2;
-      }
-      // select "lane" (slot for y-position) for this node
-      // starting at the slot above the node's closest source node (or 0, if none exists)
-      // and moving down until a slot is found that has no nodes within minNodeSpacing of this node
-      // excluding slots that contain more than one source of this node
-      var index = 0;
-      var rejectIndices = new Array();
-      if (d.name in sourceMap) {
-        var sources = sourceMap[d.name];
-        var closestSource = sources[0];
-        var indices = new Array();
-        for (var j = 0; j < sources.length; j++) {
-          if (sources[j].index in indices)
-            rejectIndices[sources[j].index] = true;
-          indices[sources[j].index] = true;
-          if (sources[j].submitTime + sources[j].elapsedTime > closestSource.submitTime + closestSource.elapsedTime)
-            closestSource = sources[j];
-        }
-        index = Math.max(0, closestSource.index-1);
-      }
-      while ((index in ends) && ((index in rejectIndices) || (ends[index]+minNodeSpacing >= effectiveX))) {
-        index++
-      }
-      ends[index] = Math.max(effectiveX + effectiveWidth);
-      maxIndex = Math.max(maxIndex, index);
-      d.y = index*2*nodeHeight + axisPadding;
-      d.h = nodeHeight;
-      d.index = index;
-    }
-
-    var h = 2*axisPadding + 2*nodeHeight*(maxIndex+1);
-    var realh = svgh - 2*margin.vertical;
-    var scale = 1;
-    if (h > realh)
-      scale = realh / h;
-    svgh = Math.min(svgh, h + 2*margin.vertical);
-    var svg = d3.select("div#" + id).append("svg:svg")
-      .attr("width", svgw+"px")
-      .attr("height", svgh+"px");
-    
-    var svgg = svg.append("g")
-      .attr("transform", "translate("+margin.horizontal+","+margin.vertical+") scale("+scale+")");
-
-    // add an untranslated white rectangle below everything
-    // so mouse doesn't have to be over nodes for panning/zooming
-    svgg.append("svg:rect")
-      .attr("x", 0)
-      .attr("y", 0)
-      .attr("width", svgw)
-      .attr("height", svgh/scale)
-      .attr("style", "fill:white;stroke:none");
- 
-    // create axes
-    var topAxis = d3.svg.axis()
-      .scale(x)
-      .orient("bottom");
-    var bottomAxis = d3.svg.axis()
-      .scale(xrel)
-      .orient("top")
-      .tickFormat(function(x) { return formatDuration(x.getTime()); });
-    var topg = svgg.append("g")
-      .attr("class", "x axis top")
-      .call(topAxis);
-    topg.append("svg:text")
-      .attr("class", "axislabel")
-      .attr("x", -9)
-      .attr("y", 13)
-      .text("Time");
-    var botg = svgg.append("g")
-      .attr("class", "x axis bottom")
-      .call(bottomAxis)
-      .attr("transform", "translate(0,"+h+")")
-    botg.append("svg:text")
-      .attr("class", "axislabel")
-      .attr("x", -9)
-      .attr("y", -19)
-      .text("Elapsed");
-    botg.append("svg:text")
-      .attr("class", "axislabel")
-      .attr("x", -9)
-      .attr("y", -4)
-      .text("Time");
-
-  
-    // create a rectangle for each node
-    var boxes = svgg.append("svg:g").selectAll("rect")
-      .data(nodes)
-      .enter().append("svg:rect")
-      .attr("x", function(d) { return d.x; } )
-      .attr("y", function(d) { return d.y; } )
-      .attr("width", function(d) { return d.w; } )
-      .attr("height", function(d) { return d.h; } )
-      .attr("class", function (d) {
-        return "node " + (d.state ? " finished" : "");
-      })
-      .attr("id", function (d) {
-        return d.name;
-      })
-      .append("title")
-      .text(function(d) { return d.info; });
-  
-    // defs for arrowheads marked as to whether they link finished jobs or not
-    svgg.append("svg:defs").selectAll("arrowmarker")
-      .data(["finished", "unfinished", "stage"])
-      .enter().append("svg:marker")
-      .attr("id", String)
-      .attr("viewBox", "0 -5 10 10")
-      .attr("markerWidth", 6)
-      .attr("markerHeight", 6)
-      .attr("refX", function(d) { return (d==="stage") ? 5 : 3 })
-      .attr("orient", "auto")
-      .append("svg:path")
-      .attr("d", function(d) { return (d==="stage") ? "M0,-2L6,0L0,2" : "M0,-3L8,0L0,3" });
-    // defs for unsubmitted node marker
-    svgg.append("svg:defs").selectAll("circlemarker")
-      .data(["circle"])
-      .enter().append("svg:marker")
-      .attr("id", String)
-      .attr("viewBox", "-2 -2 18 18")
-      .attr("markerWidth", 10)
-      .attr("markerHeight", 10)
-      .attr("refX", 10)
-      .attr("refY", 5)
-      .attr("orient", "auto")
-      .append("svg:circle")
-      .attr("cx", 5)
-      .attr("cy", 5)
-      .attr("r", 5);
-
-    // create dangling links representing unsubmitted jobs
-    var markerWidth = nodeHeight/2;
-    var sourceMarker = svgg.append("svg:g").selectAll("line")
-      .data(sourceMarker)
-      .enter().append("svg:line")
-      .attr("x1", function(d) { return d.x - markerWidth; } )
-      .attr("x2", function(d) { return d.x; } )
-      .attr("y1", function(d) { return d.y; } )
-      .attr("y2", function(d) { return d.y + 3; } )
-      .attr("class", "source mark")
-      .attr("marker-start", "url(#circle)");
-    var targetMarker = svgg.append("svg:g").selectAll("line")
-      .data(targetMarker)
-      .enter().append("svg:line")
-      .attr("x1", function(d) { return d.x + d.w + markerWidth; } )
-      .attr("x2", function(d) { return d.x + d.w; } )
-      .attr("y1", function(d) { return d.y + d.h; } )
-      .attr("y2", function(d) { return d.y + d.h - 3; } )
-      .attr("class", "target mark")
-      .attr("marker-start", "url(#circle)");
-
-    // create links between the nodes
-    var lines = svgg.append("svg:g").selectAll("path")
-      .data(links)
-      .enter().append("svg:path")
-      .attr("d", function(d) {
-        var s = d.source;
-        var t = d.target;
-        var x1 = s.x + s.w;
-        var x2 = t.x;
-        var y1 = s.y;
-        var y2 = t.y;
-        if (y1==y2) {
-          y1 += s.h/2;
-          y2 += t.h/2;
-        } else if (y1 < y2) {
-          y1 += s.h;
-        } else {
-          y2 += t.h;
-        }
-        return "M "+x1+" "+y1+" L "+((x2+x1)/2)+" "+((y2+y1)/2)+" L "+x2+" "+y2;
-      } )
-      .attr("class", function (d) {
-        return "link" + (d.state ? " finished" : "");
-      })
-      .attr("marker-mid", function (d) {
-        return "url(#" + (d.state ? "finished" : "unfinished") + ")";
-      });
-  
-    // create text group for each node label
-    var text = svgg.append("svg:g").selectAll("g")
-      .data(nodes)
-      .enter().append("svg:g");
-  
-    // add a shadow copy of the node label (will have a lighter color and thicker
-    // stroke for legibility)
-    text.append("svg:text")
-      .attr("x", function(d) {
-        var goal = d.x + d.w/2;
-        var halfLabel = maxLabelWidth/2;
-        if (goal < halfLabel) return halfLabel;
-        else if (goal > w-halfLabel) return w-halfLabel;
-        return goal;
-      } )
-      .attr("y", function(d) { return d.y + d.h + labelFontSize; } )
-      .attr("class", "joblabel shadow")
-      .attr("style", "font: "+labelFontSize+"px sans-serif")
-      .text(function (d) {
-        return d.name;
-      });
-  
-    // add the main node label
-    text.append("svg:text")
-      .attr("x", function(d) {
-        var goal = d.x + d.w/2;
-        var halfLabel = maxLabelWidth/2;
-        if (goal < halfLabel) return halfLabel;
-        else if (goal > w-halfLabel) return w-halfLabel;
-        return goal;
-      } )
-      .attr("y", function(d) { return d.y + d.h + labelFontSize; } )
-      .attr("class", "joblabel")
-      .attr("style", "font: "+labelFontSize+"px sans-serif")
-      .text(function (d) {
-        return d.name;
-      });
-
-    // add node stage information
-    var topstageg = svgg.append("svg:g");
-    for (var i = 0; i < numNodes; i++) {
-      var parentg = topstageg.append("svg:g")
-        .attr("class", "parent");
-      var d = nodes[i];
-      var cr = d.h / 2 - 2;
-      var cy = d.y + cr + 2;
-      var cxSpacing = d.w / d.stages.length;
-      if (cxSpacing < 2*cr)
-        cxSpacing = 2*cr;
-      var cxBase = d.x + cxSpacing / 2;
-
-      for (var j = 0; j < d.stages.length; j++) {
-        var data = d.stages[j];
-        var stageg = parentg.append("svg:g")
-          .attr("id", "child"+j);
-        var cx = cxBase + j*cxSpacing;
-        var x1 = cx + cr;
-        var x2 = cx + cxSpacing - cr;
-        if (cxSpacing!=2*cr && j!=d.stages.length-1) {
-          var path = stageg.append("svg:path")
-            .attr("class", "link stage")
-            .attr("d", "M "+x1+" "+cy+" L "+((x1+x2)/2)+" "+cy+" L "+x2+" "+cy)
-            .attr("marker-end", "url(#stage)");
-        }
-        if (j==0) {
-          stageg.append("svg:rect")
-            .attr("class", "stage")
-            .attr("x", cx - cr)
-            .attr("y", cy - cr)
-            .attr("width", 2*cr)
-            .attr("height", 2*cr)
-            .append("title")
-            .text("Map stage with "+data+" task"+(data != 1 ? "s" : ""));
-        } else {
-          stageg.append("svg:circle")
-            .attr("class", "stage")
-            .attr("r", cr)
-            .attr("cx", cx)
-            .attr("cy", cy)
-            .append("title")
-            .text("Reduce stage with "+data+" task"+(data != 1 ? "s" : ""));
-        }
-        var fontSize = stageFontSize;
-        if (data > 9) fontSize = fontSize - 2;
-        if (data > 99) fontSize = fontSize - 4;
-        if (data > 999) fontSize = fontSize - 2;
-        if (data > 9999) fontSize = fontSize - 1;
-        stageg.append("svg:text")
-          .attr("class", "stagelabel")
-          .attr("x", cx)
-          .attr("y", cy)
-          .text(data)
-          .attr("style", "font: "+fontSize+"px sans-serif");
-      }
-    }
-
-    svg.call(d3.behavior.zoom().on("zoom", function() {
-      var left = Math.min(Math.max(d3.event.translate[0]+margin.horizontal, margin.horizontal-w*d3.event.scale*scale), margin.horizontal+w);
-      var top = Math.min(Math.max(d3.event.translate[1]+margin.vertical, margin.vertical-h*d3.event.scale*scale), margin.vertical+h);
-      svgg.attr("transform", "translate("+left+","+top+") scale("+(d3.event.scale*scale)+")");
-    }));
-  },
-  formatDuration:function(d) {
-    if (d==0) { return "0" }
-    var subseconds = parseInt(d) / 1000;
-    if (subseconds < 1)
-      return subseconds + "s";
-    var seconds = Math.floor(subseconds);
-    if ( seconds < 60 )
-      return seconds + "s";
-    var minutes = Math.floor(seconds / 60);
-    if ( minutes < 60 ) {
-      var x = seconds - 60*minutes;
-      return minutes + "m" + (x==0 ? "" : " " + x + "s");
-    }
-    var hours = Math.floor(minutes / 60);
-    if ( hours < 24 ) {
-      var x = minutes - 60*hours;
-      return hours + "h" + (x==0 ? "" : " " + x + "m");
-    }
-    var days = Math.floor(hours / 24);
-    if ( days < 7 ) {
-      var x = hours - 24*days;
-      return days + "d " + (x==0 ? "" : " " + x + "h");
-    }
-    var weeks = Math.floor(days / 7);
-    var x = days - 7*weeks;
-    return weeks + "w " + (x==0 ? "" : " " + x + "d");
-  }
-}

ambari-web/app/views.js

@@ -201,7 +201,6 @@ require('views/main/apps_view');
 require('views/main/apps/item_view');
 require('views/main/apps/item/bar_view');
 require('views/main/apps/item/dag_view');
-require('views/main/apps/item/app_view');
 require('views/main/mirroring_view');
 require('views/main/mirroring/dropdown_view');
 require('views/main/mirroring/dataset_view');

ambari-web/app/views/main/apps/item/app_view.js

@@ -1,136 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-var App = require('app');
-var sort = require('views/common/sort_view');
-var appGraph = require('utils/app_graph');
-
-App.MainAppsItemAppView = Em.View.extend({
-  templateName: require('templates/main/apps/item/app'),
-  elementId : 'jobs',
-  content:function(){
-    return this.get('controller.content.jobs');
-  }.property('controller.content.jobs'),
-
-  classNames:['table','dataTable'],
-  /**
-   * convert content to special jobs object
-   */
-  jobs: function(){
-    var c = this.get('content');
-    var result = [];
-    c.forEach(function(item, index){
-      result[index] = new Object({
-        'name' : item.get('id'),
-        'type' : item.get('app_type'),
-        'entityName' : item.get('workflow_entity_name'),
-        'status' : item.get('status'),
-        'submitTime' : item.get('submit_time'),
-        'finishTime' : item.get('finish_time'),
-        'elapsedTime' : appGraph.formatDuration(item.get('elapsed_time')),
-        'numStages' : item.get('num_stages'),
-        'stages' : item.get('stages')
-      })
-    });
-    return result;
-  }.property('content'),
-
-  loaded : false,
-
-  hasManyJobs: function(){
-    return (this.get('content') && this.get('content').length > 1);
-  }.property('content'),
-
-  onLoad:function (){
-    if(!this.get('controller.content.loadAllJobs') || this.get('loaded')){
-      return;
-    }
-
-    this.set('loaded', true);
-
-    var self = this;
-
-    Ember.run.next(function(){
-      self.draw();
-    });
-
-  }.observes('controller.content.loadAllJobs'),
-
-  resizeModal: function () {
-    var modal = $('.modal');
-    var body = $('body');
-    modal.find('.modal-body').first().css('max-height', 'none');
-    var modalHeight = modal.height() + 300;
-    var bodyHeight = body.height();
-    if (modalHeight > bodyHeight) {
-      modal.css('top', '20px');
-      $('.modal-body').height(bodyHeight - 180);
-    } else {
-      modal.css('top', (bodyHeight - modalHeight) / 2 + 'px');
-    }
-
-    var modalWidth = modal.width();
-    var bodyWidth = body.width();
-    if (modalWidth > bodyWidth) {
-      modal.css('left', '10px');
-      modal.width(bodyWidth - 20);
-    } else {
-      modal.css('left', (bodyWidth - modalWidth) / 2 + 'px');
-    }
-  },
-
-  didInsertElement: function(){
-    this.onLoad();
-  },
-
-  draw: function(){
-    var dagSchema = this.get('controller.content.workflowContext');
-    var jobs = this.get('jobs');
-    this.resizeModal();
-    appGraph.create('app_graph', dagSchema, jobs, this.$().width(), 300);
-  },
-  sortView: sort.wrapperView,
-  nameSort: sort.fieldView.extend({
-    name:'workflow_entity_name',
-    displayName: Em.I18n.t('apps.item.dag.job')
-  }),
-  idSort: sort.fieldView.extend({
-    name:'id',
-    displayName: Em.I18n.t('apps.item.dag.jobId')
-  }),
-  typeSort: sort.fieldView.extend({
-    name:'app_type',
-    displayName: Em.I18n.t('apps.item.dag.type')
-  }),
-  statusSort: sort.fieldView.extend({
-    name:'status',
-    displayName: Em.I18n.t('apps.item.dag.status')
-  }),
-  numStagesSort: sort.fieldView.extend({
-    name:'num_stages',
-    displayName: Em.I18n.t('apps.item.dag.num_stages')
-  }),
-  stagesSort: sort.fieldView.extend({
-    name:'stages',
-    displayName: Em.I18n.t('apps.item.dag.stages')
-  }),
-  durationSort: sort.fieldView.extend({
-    name:'elapsed_time',
-    displayName: Em.I18n.t('apps.item.dag.duration')
-  })
-});

ambari-web/app/views/main/apps/item_view.js

@@ -17,13 +17,23 @@
  */
 
 var App = require('app');
-var stringUtils = require('utils/string_utils');
 
 App.MainAppsItemView = Em.View.extend({
   tagName: 'tr',
   classNames : ['containerRow'],
   templateName:require('templates/main/apps/item'),
-  menuTabs:[],
+  menuTabs:[
+    Em.Object.create({
+      label:Em.I18n.t('apps.dagCharts.popup.dag'),
+      active:'active',
+      content:'App.MainAppsItemDagView'
+    }),
+    Em.Object.create({
+      label:Em.I18n.t('apps.dagCharts.popup.tasks'),
+      active:'',
+      content:'App.MainAppsItemBarView'
+    })
+  ],
   activeTab:null,
   switchTab:function(event){
     var tabs = this.get('menuTabs');
@@ -38,30 +48,10 @@ App.MainAppsItemView = Em.View.extend({
     this.set('activeTab', event.context);
   },
   didInsertElement: function(){
-    if (!App.testMode && stringUtils.compareVersions(App.get('currentStackVersionNumber'), "2.0") === -1) {
-      var tabs = [
-        Em.Object.create({
-          label:Em.I18n.t('apps.dagCharts.popup.dag'),
-          active:'active',
-          content:'App.MainAppsItemDagView'
-        }),
-        Em.Object.create({
-          label:Em.I18n.t('apps.dagCharts.popup.tasks'),
-          active:'',
-          content:'App.MainAppsItemBarView'
-        })];
-      this.set('menuTabs', tabs);
-      this.set('activeTab', tabs[0]);
-    } else {
-      var tabs = [
-        Em.Object.create({
-          label:Em.I18n.t('apps.dagCharts.popup.dag'),
-          active:'active',
-          content:'App.MainAppsItemAppView'
-        })];
-      this.set('menuTabs', tabs);
-      this.set('activeTab', tabs[0]);
-    }
+    var tabs = this.get('menuTabs');
+    tabs[0].set('active', 'active');
+    tabs[1].set('active', '');
+    this.set('activeTab', tabs[0]);
   },
   containerView: Em.ContainerView.extend({
     onchange:function(){

ambari-web/app/views/main/apps_view.js

@@ -100,7 +100,7 @@ App.MainAppsView = Em.View.extend({
     class: "sorting",
     widthClass: "",
     content: null,
-    defaultColumn: 9,
+    defaultColumn: 8,
 
     didInsertElement: function () {
       this.set("widthClass", "col" + this.get('content.index'));
@@ -157,14 +157,6 @@ App.MainAppsView = Em.View.extend({
     valueBinding: "controller.filterObject.sSearch_1",
     fieldType: 'input-small'
   }),
-  /**
-   * Filter-field for tags.
-   * Based on <code>filters</code> library
-   */
-  tagFilterView: filters.createTextView({
-    valueBinding: "controller.filterObject.tagSearch",
-    fieldType: 'input-super-mini'
-  }),
   /**
    * Filter-field for type.
    * Based on <code>filters</code> library
@@ -172,7 +164,7 @@ App.MainAppsView = Em.View.extend({
   typeFilterView: filters.createSelectView({
     fieldType: 'input-small',
     valueBinding: "controller.filterObject.runType",
-    content: ['Any', 'Pig', 'Hive', 'MapReduce', 'Yarn']
+    content: ['Any', 'Pig', 'Hive', 'MapReduce']
   }),
 
   /**
@@ -221,6 +213,22 @@ App.MainAppsView = Em.View.extend({
     fieldType: 'input-super-mini',
     valueBinding: "controller.filterObject.jobs"
   }),
+  /**
+   * Filter-field for Input.
+   * Based on <code>filters</code> library
+   */
+  inputFilterView: filters.createTextView({
+    fieldType: 'input-super-mini',
+    valueBinding: "controller.filterObject.input"
+  }),
+  /**
+   * Filter-field for Output.
+   * Based on <code>filters</code> library
+   */
+  outputFilterView: filters.createTextView({
+    fieldType: 'input-super-mini',
+    valueBinding: "controller.filterObject.output"
+  }),
   /**
    * Filter-field for Duration.
    * Based on <code>filters</code> library
@@ -344,4 +352,4 @@ App.MainAppsView = Em.View.extend({
 
   })
 
-});
+});

ambari-web/vendor/styles/cubism.css

@@ -43,7 +43,7 @@
 #dag_viewer rect {
   fill: #ccc;
   stroke: #333;
-  stroke-width: 1.5px;
+  stroke-width: 1px;
 }
 
 #dag_viewer rect.finished {