AMBARI-8015 Dashboard: add a widget for YARN links (similar to the HDFS Links) (rpidva via jaoki)

ambari-web/app/messages.js

@@ -2003,6 +2003,7 @@ Em.I18n.translations = {
   'dashboard.widgets.ResourceManagerUptime': 'ResourceManager Uptime',
   'dashboard.widgets.NodeManagersLive': 'NodeManagers Live',
   'dashboard.widgets.YARNMemory': 'YARN Memory',
+  'dashboard.widgets.YARNLinks': 'YARN Links',
 
   'dashboard': {
     'widgets': {

ambari-web/app/templates/main/dashboard/widgets/yarn_links.hbs

@@ -0,0 +1,84 @@
+{{!
+* 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 class="links">
+  <ul>
+    <li class="thumbnail row">
+      <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}}
+        href="#" {{action deleteWidget target="view"}}>
+        <i class="icon-remove-sign icon-large"></i>
+      </a>
+
+      <div class="caption span10"> {{view.title}}</div>
+
+      <div class="widget-content">
+        <table>
+          <!-- Resource Manager-->
+          <tr>
+            <td>
+              <a href="#" {{action showDetails view.model.resourceManager.host}}> {{t dashboard.services.yarn.resourceManager}}</a>
+            </td>
+          </tr>
+
+          <!-- Node Manages-->
+          <tr>
+            <td>
+              <a href="#" {{action filterHosts view.component}}> {{view.model.nodeManagersTotal}} {{t dashboard.services.yarn.nodeManagers}}</a>
+            </td>
+          </tr>
+        </table>
+      </div>
+
+      <div class="link-button">
+        {{#if view.model.quickLinks.length}}
+          {{#view App.QuickViewLinks contentBinding="view.model"}}
+            <div class="btn-group">
+              <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
+                {{t common.more}}
+                <span class="caret"></span>
+              </a>
+              <ul class="dropdown-menu">
+                {{#if view.isLoaded}}
+                  {{#if view.quickLinksArray}}
+                    <!--there are multiple masters eg, HBase multiple masters or HDFS HA enabled-->
+                    {{#each quickLinks in view.quickLinksArray}}
+                      <li class="dropdown-submenu">
+                        <a href="javascript:void(null)">{{quickLinks.publicHostNameLabel}} &nbsp;</a>
+                        <ul class="dropdown-menu">
+                          {{#each quickLinks}}
+                            <li><a {{bindAttr href="url"}} {{bindAttr target="view.linkTarget"}}>{{label}}</a></li>
+                          {{/each}}
+                        </ul>
+                      </li>
+                    {{/each}}
+                  {{else}}
+                    {{#each view.quickLinks}}
+                      <li><a {{bindAttr href="url"}} {{bindAttr target="view.linkTarget"}}>{{label}}</a></li>
+                    {{/each}}
+                  {{/if}}
+                {{else}}
+                  <div class="spinner"></div>
+                {{/if}}
+              </ul>
+            </div>
+          {{/view}}
+        {{/if}}
+      </div>
+    </li>
+  </ul>
+</div>

ambari-web/app/views.js

@@ -143,6 +143,7 @@ require('views/main/dashboard/widgets/metrics_load');
 require('views/main/dashboard/widgets/namenode_uptime');
 require('views/main/dashboard/widgets/jobtracker_uptime');
 require('views/main/dashboard/widgets/hdfs_links');
+require('views/main/dashboard/widgets/yarn_links');
 require('views/main/dashboard/widgets/mapreduce_links');
 require('views/main/dashboard/widgets/hbase_links');
 require('views/main/dashboard/widgets/hbase_master_heap');

ambari-web/app/views/main/dashboard/widgets.js

@@ -138,7 +138,7 @@ App.MainDashboardWidgetsView = Em.View.extend(App.UserPref, App.LocalStorage, {
       '18', '1', '6', '5', '9',
       '3', '7', '15', '16', '20',
       '19', '21', '23',
-      '24', '25', '26', '27',// all yarn
+      '24', '25', '26', '27', '30',// all yarn
       '28', // storm
       '29' // flume
     ]; // all in order
@@ -172,7 +172,7 @@ App.MainDashboardWidgetsView = Em.View.extend(App.UserPref, App.LocalStorage, {
       hiddenFull = [];
     }
     if (this.get('yarn_model') == null) {
-      var yarn = ['24', '25', '26', '27'];
+      var yarn = ['24', '25', '26', '27', '30'];
       yarn.forEach ( function (item) {
         visibleFull = visibleFull.without(item);
       }, this);
@@ -434,7 +434,7 @@ App.MainDashboardWidgetsView = Em.View.extend(App.UserPref, App.LocalStorage, {
       }
     }
     if (this.get('yarn_model') != null) {
-      var yarn = ['24', '25', '26', '27'];
+      var yarn = ['24', '25', '26', '27', '30'];
       var flag = self.containsWidget(toDelete, yarn[0]);
       if (flag) {
         yarn.forEach ( function (item) {
@@ -521,7 +521,8 @@ App.MainDashboardWidgetsView = Em.View.extend(App.UserPref, App.LocalStorage, {
       '26': App.NodeManagersLiveView,
       '27': App.YARNMemoryPieChartView,
       '28': App.SuperVisorUpView,
-      '29': App.FlumeAgentUpView
+      '29': App.FlumeAgentUpView,
+      '30': App.YARNLinksView
     }, id);
   },
 
@@ -539,7 +540,7 @@ App.MainDashboardWidgetsView = Em.View.extend(App.UserPref, App.LocalStorage, {
     hidden: [],
     threshold: {1: [80, 90], 2: [85, 95], 3: [90, 95], 4: [80, 90], 5: [1000, 3000], 6: [70, 90], 7: [90, 95], 8: [50, 75], 9: [30000, 120000],
       10: [], 11: [], 12: [], 13: [], 14: [], 15: [], 16: [], 17: [], 18: [], 19: [], 20: [70, 90], 21: [10, 19.2], 22: [3, 10], 23: [],
-      24: [70, 90], 25: [], 26: [50, 75], 27: [50, 75], 28: [85, 95], 29: [85, 95]} // id:[thresh1, thresh2]
+      24: [70, 90], 25: [], 26: [50, 75], 27: [50, 75], 28: [85, 95], 29: [85, 95], 30:[]} // id:[thresh1, thresh2]
   }),
 
   /**

ambari-web/app/views/main/dashboard/widgets/yarn_links.js

@@ -0,0 +1,29 @@
+/**
+ * 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.YARNLinksView = App.LinkDashboardWidgetView.extend({
+  templateName: require('templates/main/dashboard/widgets/yarn_links'),
+  title: Em.I18n.t('dashboard.widgets.YARNLinks'),
+  id: '30',
+
+  model_type: 'yarn',
+
+  componentName : 'NODEMANAGER'
+});