diff options
| author | Yusaku Sako <yusaku@apache.org> | 2012-12-09 14:51:22 +0000 |
|---|---|---|
| committer | Yusaku Sako <yusaku@apache.org> | 2012-12-09 14:51:22 +0000 |
| commit | 856f382c42a6dc8efcce1b2524d74b93c3d53869 (patch) | |
| tree | 81ad0880869ed914e35f5e6d986d3581780a6300 /ambari-web | |
| parent | c357ac4960385fd55240887a6b9b8c0f76d35672 (diff) | |
AMBARI-1041. Additional metrics need to be added to Heatmap UI. (Srimanth Gunturi via yusaku)
git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/branches/AMBARI-666@1418988 13f79535-47bb-0310-9956-ffa450edef68
Diffstat (limited to 'ambari-web')
22 files changed, 789 insertions, 44 deletions
diff --git a/ambari-web/app/assets/licenses/NOTICE.txt b/ambari-web/app/assets/licenses/NOTICE.txt index 0606a2933a..7a464dc1c4 100644 --- a/ambari-web/app/assets/licenses/NOTICE.txt +++ b/ambari-web/app/assets/licenses/NOTICE.txt @@ -36,4 +36,7 @@ This product incudes Rickshaw 1.1.2 (http://code.shutterstock.com/rickshaw/ - MI Copyright (C) 2011 by Shutterstock Images, LLC This product includes Timeago (http://timeago.yarp.com/ - MIT License) -Copyright (c) 2008-2012, Ryan McGeary (ryan -[at]- mcgeary [*dot*] org)
\ No newline at end of file +Copyright (c) 2008-2012, Ryan McGeary (ryan -[at]- mcgeary [*dot*] org) + +This product includes Spin.js (http://fgnass.github.com/spin.js/ - MIT license) +Copyright (c) 2011 Felix Gnass [fgnass at neteye dot de]
\ No newline at end of file diff --git a/ambari-web/app/controllers.js b/ambari-web/app/controllers.js index 3f998e0a05..10ad66383b 100644 --- a/ambari-web/app/controllers.js +++ b/ambari-web/app/controllers.js @@ -48,6 +48,16 @@ require('controllers/main/charts/heatmap_metrics/heatmap_metric'); require('controllers/main/charts/heatmap_metrics/heatmap_metric_processrun'); require('controllers/main/charts/heatmap_metrics/heatmap_metric_diskspaceused'); require('controllers/main/charts/heatmap_metrics/heatmap_metric_memoryused'); +require('controllers/main/charts/heatmap_metrics/heatmap_metric_dfs'); +require('controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_bytesread'); +require('controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_byteswritten'); +require('controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_gctime'); +require('controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_memHeapUsed'); +require('controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce'); +require('controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_gctime'); +require('controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_mapsRunning'); +require('controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_reducesRunning'); +require('controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_memHeapUsed'); require('controllers/main/charts/heatmap'); require('controllers/main/charts/horizon_chart'); require('controllers/main/rack'); diff --git a/ambari-web/app/controllers/main/charts/heatmap.js b/ambari-web/app/controllers/main/charts/heatmap.js index c10ee90781..f14fb3f254 100644 --- a/ambari-web/app/controllers/main/charts/heatmap.js +++ b/ambari-web/app/controllers/main/charts/heatmap.js @@ -20,11 +20,31 @@ var App = require('app'); App.MainChartsHeatmapController = Em.Controller.extend({ name: 'mainChartsHeatmapController', cluster: App.Cluster.find(1), - allMetrics: [ Em.Object.create({ - label: Em.I18n.t('charts.heatmap.category.host'), - category: 'host', - items: [ App.MainChartHeatmapDiskSpaceUsedMetric.create(), App.MainChartHeatmapMemoryUsedMetric.create() /*, App.MainChartHeatmapProcessRunMetric.create()*/ ] - }) ], + allMetrics: [ + Em.Object.create({ + label: Em.I18n.t('charts.heatmap.category.host'), + category: 'host', + items: [ App.MainChartHeatmapDiskSpaceUsedMetric.create(), + App.MainChartHeatmapMemoryUsedMetric.create() + /*, App.MainChartHeatmapProcessRunMetric.create()*/ ] + }), + Em.Object.create({ + label: Em.I18n.t('charts.heatmap.category.hdfs'), + category: 'hdfs', + items: [ App.MainChartHeatmapDFSBytesReadMetric.create(), + App.MainChartHeatmapDFSBytesWrittenMetric.create(), + App.MainChartHeatmapDFSGCTimeMillisMetric.create(), + App.MainChartHeatmapDFSMemHeapUsedMetric.create() ] + }), + Em.Object.create({ + label: Em.I18n.t('charts.heatmap.category.mapreduce'), + category: 'mapreduce', + items: [ App.MainChartHeatmapMapreduceMapsRunningMetric.create(), + App.MainChartHeatmapMapreduceReducesRunningMetric.create(), + App.MainChartHeatmapMapreduceGCTimeMillisMetric.create(), + App.MainChartHeatmapMapreduceMemHeapUsedMetric.create() ] + }) + ], selectedMetric: null, /** diff --git a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric.js b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric.js index 9c904214a9..4ada21ee18 100644 --- a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric.js +++ b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric.js @@ -58,6 +58,12 @@ App.MainChartHeatmapMetric = Em.Object.extend({ * {String} */ units: '', + + /** + * Indicates whether this metric is currently loading data from the server. + * {Boolean} + */ + loading: false, /** * Provides following information about slots in an array of objects. @@ -114,6 +120,12 @@ App.MainChartHeatmapMetric = Em.Object.extend({ * definition label being '0% - 10%'. */ slotDefinitionLabelSuffix: '', + + /** + * URL template from which metrics will be gotten for all hosts. + * The {metricName} param will be replaced by the 'defaultMetric' value. + */ + metricUrlTemplate: "/clusters/{clusterName}/hosts?fields={metricName}", /** * URL from which data for this metric can be gotten from. This should be @@ -123,7 +135,7 @@ App.MainChartHeatmapMetric = Em.Object.extend({ var clusterName = App.router.get('clusterController.clusterName'); var fixedMetricName = this.get('defaultMetric'); fixedMetricName = fixedMetricName.replace(/\./g, "/"); - return App.formatUrl(App.apiPrefix + "/clusters/{clusterName}/hosts?fields={metricName}", { + return App.formatUrl(App.apiPrefix + this.get('metricUrlTemplate'), { clusterName: App.router.get('clusterController.clusterName'), metricName: fixedMetricName }, "/data/cluster_metrics/cpu_1hr.json"); @@ -186,12 +198,17 @@ App.MainChartHeatmapMetric = Em.Object.extend({ * 'hostnameToSlotObject' has key as hostname, and the slot index as value. */ refreshHostSlots: function () { + this.set('loading', true); jQuery.ajax({ url: this.get('metricUrl'), dataType: 'json', + error: jQuery.proxy(function (xhr, textStatus, error) { + this.set('loading', false); + }, this), success: jQuery.proxy(function (data) { var hostToValueMap = this.metricMapper(data); this.set('hostToValueMap', hostToValueMap); + this.set('loading', false); }, this) }); }.observes('slotDefinitions'), diff --git a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_dfs.js b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_dfs.js new file mode 100644 index 0000000000..92f78e6be9 --- /dev/null +++ b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_dfs.js @@ -0,0 +1,59 @@ +/** + * 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'); + +/** + * Base class for any HDFS metric. + */ +App.MainChartHeatmapDFSMetrics = App.MainChartHeatmapMetric.extend({ + metricUrlTemplate: "/clusters/{clusterName}/services/HDFS/components/DATANODE?fields=host_components/{metricName}", + + /** + * Custom mapper for DFS metrics + */ + metricMapper: function (json) { + var hostToValueMap = {}; + var metricName = this.get('defaultMetric'); + if (json.host_components) { + var props = metricName.split('.'); + transformValueFunction = this.get('transformValue'); + json.host_components.forEach(function (hc) { + var value = hc; + props.forEach(function (prop) { + value = value[prop]; + }); + + if (transformValueFunction) { + value = transformValueFunction(value); + } + + var hostName = hc.HostRoles.host_name; + hostToValueMap[hostName] = value; + }); + } + return hostToValueMap; + }, + + /** + * Utility function which allows extending classes to transform the value + * assigned to a host. + * + * @type Function + */ + tranformValue: null +});
\ No newline at end of file diff --git a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_bytesread.js b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_bytesread.js new file mode 100644 index 0000000000..901184e578 --- /dev/null +++ b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_bytesread.js @@ -0,0 +1,32 @@ +/** + * 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.MainChartHeatmapDFSBytesReadMetric = App.MainChartHeatmapDFSMetrics.extend({ + name: 'Bytes Read', + maximumValue: 1024, // 1GB + defaultMetric: 'metrics.dfs.datanode.bytes_read', + units: 'MB', + slotDefinitionLabelSuffix: 'MB', + transformValue: function (value) { + return value / (1 << 6); // bytes divided by 1MB. + } +});
\ No newline at end of file diff --git a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_byteswritten.js b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_byteswritten.js new file mode 100644 index 0000000000..94200f5260 --- /dev/null +++ b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_byteswritten.js @@ -0,0 +1,32 @@ +/** + * 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.MainChartHeatmapDFSBytesWrittenMetric = App.MainChartHeatmapDFSMetrics.extend({ + name: 'Bytes Written', + maximumValue: 1024, // 1GB + defaultMetric: 'metrics.dfs.datanode.bytes_written', + units: 'MB', + slotDefinitionLabelSuffix: 'MB', + transformValue: function (value) { + return value / (1 << 6); // bytes divided by 1MB. + } +});
\ No newline at end of file diff --git a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_gctime.js b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_gctime.js new file mode 100644 index 0000000000..754c2ee953 --- /dev/null +++ b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_gctime.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.MainChartHeatmapDFSGCTimeMillisMetric = App.MainChartHeatmapDFSMetrics.extend({ + name: 'Garbage Collection Time', + maximumValue: 10000, + defaultMetric: 'metrics.jvm.gcTimeMillis', + units: ' ms', + slotDefinitionLabelSuffix: ' ms' +});
\ No newline at end of file diff --git a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_memHeapUsed.js b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_memHeapUsed.js new file mode 100644 index 0000000000..0ced10e960 --- /dev/null +++ b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_dfs_memHeapUsed.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.MainChartHeatmapDFSMemHeapUsedMetric = App.MainChartHeatmapDFSMetrics.extend({ + name: 'JVM Heap Memory Used', + maximumValue: 512, + defaultMetric: 'metrics.jvm.memHeapUsedM', + units: 'MB', + slotDefinitionLabelSuffix: 'MB' +});
\ No newline at end of file diff --git a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_diskspaceused.js b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_diskspaceused.js index 3ff7a7ff13..f0ef3a327f 100644 --- a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_diskspaceused.js +++ b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_diskspaceused.js @@ -18,15 +18,6 @@ var App = require('app'); /** - * Base class for any heatmap metric. - * - * This class basically provides the following for each heatmap metric. - * <ul> - * <li> Provides number of slots in which temperature can fall. - * <li> Maintains the maximum value so as to scale slot ranges. - * <li> Gets JSON data from server and maps response for all hosts into above - * slots. - * </ul> * */ App.MainChartHeatmapDiskSpaceUsedMetric = App.MainChartHeatmapMetric.extend({ @@ -45,11 +36,11 @@ App.MainChartHeatmapDiskSpaceUsedMetric = App.MainChartHeatmapMetric.extend({ props.forEach(function (prop) { value = value[prop]; }); - + var total = value.disk_total; var free = value.disk_free; - value = (((total-free)*100)/total).toFixed(1); - + value = (((total - free) * 100) / total).toFixed(1); + var hostName = item.Hosts.host_name; hostToValueMap[hostName] = value; }); diff --git a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce.js b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce.js new file mode 100644 index 0000000000..0586515561 --- /dev/null +++ b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce.js @@ -0,0 +1,59 @@ +/** + * 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'); + +/** + * Base class for any MapReduce metric. + */ +App.MainChartHeatmapMapreduceMetrics = App.MainChartHeatmapMetric.extend({ + metricUrlTemplate: "/clusters/{clusterName}/services/MAPREDUCE/components/TASKTRACKER?fields=host_components/{metricName}", + + /** + * Custom mapper for DFS metrics + */ + metricMapper: function (json) { + var hostToValueMap = {}; + var metricName = this.get('defaultMetric'); + if (json.host_components) { + var props = metricName.split('.'); + transformValueFunction = this.get('transformValue'); + json.host_components.forEach(function (hc) { + var value = hc; + props.forEach(function (prop) { + value = value[prop]; + }); + + if (transformValueFunction) { + value = transformValueFunction(value); + } + + var hostName = hc.HostRoles.host_name; + hostToValueMap[hostName] = value; + }); + } + return hostToValueMap; + }, + + /** + * Utility function which allows extending classes to transform the value + * assigned to a host. + * + * @type Function + */ + tranformValue: null +});
\ No newline at end of file diff --git a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_gctime.js b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_gctime.js new file mode 100644 index 0000000000..4a030c21b2 --- /dev/null +++ b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_gctime.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.MainChartHeatmapMapreduceGCTimeMillisMetric = App.MainChartHeatmapDFSMetrics.extend({ + name: 'Garbage Collection Time', + maximumValue: 10000, + defaultMetric: 'metrics.jvm.gcTimeMillis', + units: ' ms', + slotDefinitionLabelSuffix: ' ms' +});
\ No newline at end of file diff --git a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_mapsRunning.js b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_mapsRunning.js new file mode 100644 index 0000000000..5c9b0e9698 --- /dev/null +++ b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_mapsRunning.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.MainChartHeatmapMapreduceMapsRunningMetric = App.MainChartHeatmapDFSMetrics.extend({ + name: 'Maps Running', + maximumValue: 100, + defaultMetric: 'metrics.mapred.tasktracker.maps_running', + units: ' maps', + slotDefinitionLabelSuffix: ' Maps' +});
\ No newline at end of file diff --git a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_memHeapUsed.js b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_memHeapUsed.js new file mode 100644 index 0000000000..5d51e11164 --- /dev/null +++ b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_memHeapUsed.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.MainChartHeatmapMapreduceMemHeapUsedMetric = App.MainChartHeatmapDFSMetrics.extend({ + name: 'JVM Heap Memory Used', + maximumValue: 512, + defaultMetric: 'metrics.jvm.memHeapUsedM', + units: 'MB', + slotDefinitionLabelSuffix: 'MB' +});
\ No newline at end of file diff --git a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_reducesRunning.js b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_reducesRunning.js new file mode 100644 index 0000000000..73dd243007 --- /dev/null +++ b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric_mapreduce_reducesRunning.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.MainChartHeatmapMapreduceReducesRunningMetric = App.MainChartHeatmapDFSMetrics.extend({ + name: 'Reduces Running', + maximumValue: 100, + defaultMetric: 'metrics.mapred.tasktracker.reduces_running', + units: ' reduces', + slotDefinitionLabelSuffix: ' Reduces' +});
\ No newline at end of file diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index 6cb6f30c96..2253b58453 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -266,9 +266,11 @@ Em.I18n.translations = { 'charts.horizon.chart.attributes.io':'I/O', 'charts.heatmap.category.host':'Host', - 'charts.heatmap.item.host.memory':'Memory Free', + 'charts.heatmap.item.host.memory':'Memory Used', 'charts.heatmap.item.host.disk':'Disk Space Used', 'charts.heatmap.item.host.process':'Total Running Processes', + 'charts.heatmap.category.hdfs':'HDFS', + 'charts.heatmap.category.mapreduce': 'MapReduce', 'metric.default':'combined', 'metric.cpu':'cpu', diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 2951b351c4..4a7c0b7f4e 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -1493,6 +1493,9 @@ ul.filter { /*Start Heatmap*/ .heatmap { + #heatmap-metric-title{ + margin-left: 23px; + } .rack.rack-5-2 { .hosts { height: 86px; diff --git a/ambari-web/app/templates/main/charts/heatmap.hbs b/ambari-web/app/templates/main/charts/heatmap.hbs index 6e08350efd..54ba8c6c80 100644 --- a/ambari-web/app/templates/main/charts/heatmap.hbs +++ b/ambari-web/app/templates/main/charts/heatmap.hbs @@ -60,7 +60,9 @@ {{/if}} </div> <div class="span10"> - <h4>{{controller.selectedMetric.name}}</h4> + <h4 id="heatmap-metric-loading"> + <span id="heatmap-metric-title">{{controller.selectedMetric.name}}</span> + </h4> <div class="row-fluid"> {{#each rack in controller.cluster.racks}} <div {{bindAttr class="controller.rackClass"}}> diff --git a/ambari-web/app/views/main/charts/heatmap.js b/ambari-web/app/views/main/charts/heatmap.js index eea87092ad..a25ad4960f 100644 --- a/ambari-web/app/views/main/charts/heatmap.js +++ b/ambari-web/app/views/main/charts/heatmap.js @@ -1,29 +1,51 @@ /** - * 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 - * + * 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. + * 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.MainChartsHeatmapView = Em.View.extend({ - templateName: require('templates/main/charts/heatmap'), - didInsertElement: function(){ - this._super(); - // set default metric - this.set('controller.selectedMetric', this.get('controller.allMetrics')[0].get('items')[0]); - $("#heatmapDetailsBlock").hide(); + templateName: require('templates/main/charts/heatmap'), + spinner: null, + didInsertElement: function () { + this._super(); + // set default metric + this.set('controller.selectedMetric', this.get('controller.allMetrics')[0].get('items')[0]); + $("#heatmapDetailsBlock").hide(); + }, + showLoading: function () { + if (this.get('controller.selectedMetric.loading')) { + var e = document.getElementById("heatmap-metric-loading"); + if (e) { + var spinOpts = { + lines: 9, + length: 4, + width: 2, + radius: 3, + top: '0', + left: '0' + }; + this.set('spinner', new Spinner(spinOpts).spin(e)); + } + } else { + var spinner = this.get('spinner'); + if (spinner) { + spinner.stop(); + } + this.set('spinner', null); } + }.observes('controller.selectedMetric.loading') });
\ No newline at end of file diff --git a/ambari-web/config.coffee b/ambari-web/config.coffee index 8b1ef877de..2b7350cff0 100644 --- a/ambari-web/config.coffee +++ b/ambari-web/config.coffee @@ -54,7 +54,8 @@ exports.config = 'vendor/scripts/jquery.dataTables.js', 'vendor/scripts/jquery.timeago.js', 'vendor/scripts/workflow_visualization.js', - 'vendor/scripts/rickshaw.js' + 'vendor/scripts/rickshaw.js', + 'vendor/scripts/spin.js' ] stylesheets: diff --git a/ambari-web/vendor/scripts/spin.js b/ambari-web/vendor/scripts/spin.js new file mode 100644 index 0000000000..434d76a687 --- /dev/null +++ b/ambari-web/vendor/scripts/spin.js @@ -0,0 +1,320 @@ +//fgnass.github.com/spin.js#v1.2.7 +!function(window, document, undefined) { + + /** + * Copyright (c) 2011 Felix Gnass [fgnass at neteye dot de] + * Licensed under the MIT license + */ + + var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */ + , animations = {} /* Animation rules keyed by their name */ + , useCssAnimations + + /** + * Utility function to create elements. If no tag name is given, + * a DIV is created. Optionally properties can be passed. + */ + function createEl(tag, prop) { + var el = document.createElement(tag || 'div') + , n + + for(n in prop) el[n] = prop[n] + return el + } + + /** + * Appends children and returns the parent. + */ + function ins(parent /* child1, child2, ...*/) { + for (var i=1, n=arguments.length; i<n; i++) + parent.appendChild(arguments[i]) + + return parent + } + + /** + * Insert a new stylesheet to hold the @keyframe or VML rules. + */ + var sheet = function() { + var el = createEl('style', {type : 'text/css'}) + ins(document.getElementsByTagName('head')[0], el) + return el.sheet || el.styleSheet + }() + + /** + * Creates an opacity keyframe animation rule and returns its name. + * Since most mobile Webkits have timing issues with animation-delay, + * we create separate rules for each line/segment. + */ + function addAnimation(alpha, trail, i, lines) { + var name = ['opacity', trail, ~~(alpha*100), i, lines].join('-') + , start = 0.01 + i/lines*100 + , z = Math.max(1 - (1-alpha) / trail * (100-start), alpha) + , prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase() + , pre = prefix && '-'+prefix+'-' || '' + + if (!animations[name]) { + sheet.insertRule( + '@' + pre + 'keyframes ' + name + '{' + + '0%{opacity:' + z + '}' + + start + '%{opacity:' + alpha + '}' + + (start+0.01) + '%{opacity:1}' + + (start+trail) % 100 + '%{opacity:' + alpha + '}' + + '100%{opacity:' + z + '}' + + '}', sheet.cssRules.length) + + animations[name] = 1 + } + return name + } + + /** + * Tries various vendor prefixes and returns the first supported property. + **/ + function vendor(el, prop) { + var s = el.style + , pp + , i + + if(s[prop] !== undefined) return prop + prop = prop.charAt(0).toUpperCase() + prop.slice(1) + for(i=0; i<prefixes.length; i++) { + pp = prefixes[i]+prop + if(s[pp] !== undefined) return pp + } + } + + /** + * Sets multiple style properties at once. + */ + function css(el, prop) { + for (var n in prop) + el.style[vendor(el, n)||n] = prop[n] + + return el + } + + /** + * Fills in default values. + */ + function merge(obj) { + for (var i=1; i < arguments.length; i++) { + var def = arguments[i] + for (var n in def) + if (obj[n] === undefined) obj[n] = def[n] + } + return obj + } + + /** + * Returns the absolute page-offset of the given element. + */ + function pos(el) { + var o = { x:el.offsetLeft, y:el.offsetTop } + while((el = el.offsetParent)) + o.x+=el.offsetLeft, o.y+=el.offsetTop + + return o + } + + var defaults = { + lines: 12, // The number of lines to draw + length: 7, // The length of each line + width: 5, // The line thickness + radius: 10, // The radius of the inner circle + rotate: 0, // Rotation offset + corners: 1, // Roundness (0..1) + color: '#000', // #rgb or #rrggbb + speed: 1, // Rounds per second + trail: 100, // Afterglow percentage + opacity: 1/4, // Opacity of the lines + fps: 20, // Frames per second when using setTimeout() + zIndex: 2e9, // Use a high z-index by default + className: 'spinner', // CSS class to assign to the element + top: 'auto', // center vertically + left: 'auto', // center horizontally + position: 'relative' // element position + } + + /** The constructor */ + var Spinner = function Spinner(o) { + if (!this.spin) return new Spinner(o) + this.opts = merge(o || {}, Spinner.defaults, defaults) + } + + Spinner.defaults = {} + + merge(Spinner.prototype, { + spin: function(target) { + this.stop() + var self = this + , o = self.opts + , el = self.el = css(createEl(0, {className: o.className}), {position: o.position, width: 0, zIndex: o.zIndex}) + , mid = o.radius+o.length+o.width + , ep // element position + , tp // target position + + if (target) { + target.insertBefore(el, target.firstChild||null) + tp = pos(target) + ep = pos(el) + css(el, { + left: (o.left == 'auto' ? tp.x-ep.x + (target.offsetWidth >> 1) : parseInt(o.left, 10) + mid) + 'px', + top: (o.top == 'auto' ? tp.y-ep.y + (target.offsetHeight >> 1) : parseInt(o.top, 10) + mid) + 'px' + }) + } + + el.setAttribute('aria-role', 'progressbar') + self.lines(el, self.opts) + + if (!useCssAnimations) { + // No CSS animation support, use setTimeout() instead + var i = 0 + , fps = o.fps + , f = fps/o.speed + , ostep = (1-o.opacity) / (f*o.trail / 100) + , astep = f/o.lines + + ;(function anim() { + i++; + for (var s=o.lines; s; s--) { + var alpha = Math.max(1-(i+s*astep)%f * ostep, o.opacity) + self.opacity(el, o.lines-s, alpha, o) + } + self.timeout = self.el && setTimeout(anim, ~~(1000/fps)) + })() + } + return self + }, + + stop: function() { + var el = this.el + if (el) { + clearTimeout(this.timeout) + if (el.parentNode) el.parentNode.removeChild(el) + this.el = undefined + } + return this + }, + + lines: function(el, o) { + var i = 0 + , seg + + function fill(color, shadow) { + return css(createEl(), { + position: 'absolute', + width: (o.length+o.width) + 'px', + height: o.width + 'px', + background: color, + boxShadow: shadow, + transformOrigin: 'left', + transform: 'rotate(' + ~~(360/o.lines*i+o.rotate) + 'deg) translate(' + o.radius+'px' +',0)', + borderRadius: (o.corners * o.width>>1) + 'px' + }) + } + + for (; i < o.lines; i++) { + seg = css(createEl(), { + position: 'absolute', + top: 1+~(o.width/2) + 'px', + transform: o.hwaccel ? 'translate3d(0,0,0)' : '', + opacity: o.opacity, + animation: useCssAnimations && addAnimation(o.opacity, o.trail, i, o.lines) + ' ' + 1/o.speed + 's linear infinite' + }) + + if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'})) + + ins(el, ins(seg, fill(o.color, '0 0 1px rgba(0,0,0,.1)'))) + } + return el + }, + + opacity: function(el, i, val) { + if (i < el.childNodes.length) el.childNodes[i].style.opacity = val + } + + }) + + ///////////////////////////////////////////////////////////////////////// + // VML rendering for IE + ///////////////////////////////////////////////////////////////////////// + + /** + * Check and init VML support + */ + ;(function() { + + function vml(tag, attr) { + return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr) + } + + var s = css(createEl('group'), {behavior: 'url(#default#VML)'}) + + if (!vendor(s, 'transform') && s.adj) { + + // VML support detected. Insert CSS rule ... + sheet.addRule('.spin-vml', 'behavior:url(#default#VML)') + + Spinner.prototype.lines = function(el, o) { + var r = o.length+o.width + , s = 2*r + + function grp() { + return css( + vml('group', { + coordsize: s + ' ' + s, + coordorigin: -r + ' ' + -r + }), + { width: s, height: s } + ) + } + + var margin = -(o.width+o.length)*2 + 'px' + , g = css(grp(), {position: 'absolute', top: margin, left: margin}) + , i + + function seg(i, dx, filter) { + ins(g, + ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}), + ins(css(vml('roundrect', {arcsize: o.corners}), { + width: r, + height: o.width, + left: o.radius, + top: -o.width>>1, + filter: filter + }), + vml('fill', {color: o.color, opacity: o.opacity}), + vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change + ) + ) + ) + } + + if (o.shadow) + for (i = 1; i <= o.lines; i++) + seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)') + + for (i = 1; i <= o.lines; i++) seg(i) + return ins(el, g) + } + + Spinner.prototype.opacity = function(el, i, val, o) { + var c = el.firstChild + o = o.shadow && o.lines || 0 + if (c && i+o < c.childNodes.length) { + c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild + if (c) c.opacity = val + } + } + } + else + useCssAnimations = vendor(s, 'animation') + })() + + if (typeof define == 'function' && define.amd) + define(function() { return Spinner }) + else + window.Spinner = Spinner + +}(window, document); diff --git a/ambari-web/vendor/scripts/spin.min.js b/ambari-web/vendor/scripts/spin.min.js deleted file mode 100644 index 942980c82a..0000000000 --- a/ambari-web/vendor/scripts/spin.min.js +++ /dev/null @@ -1,2 +0,0 @@ -//fgnass.github.com/spin.js#v1.2.7 -!function(e,t,n){function o(e,n){var r=t.createElement(e||"div"),i;for(i in n)r[i]=n[i];return r}function u(e){for(var t=1,n=arguments.length;t<n;t++)e.appendChild(arguments[t]);return e}function f(e,t,n,r){var o=["opacity",t,~~(e*100),n,r].join("-"),u=.01+n/r*100,f=Math.max(1-(1-e)/t*(100-u),e),l=s.substring(0,s.indexOf("Animation")).toLowerCase(),c=l&&"-"+l+"-"||"";return i[o]||(a.insertRule("@"+c+"keyframes "+o+"{"+"0%{opacity:"+f+"}"+u+"%{opacity:"+e+"}"+(u+.01)+"%{opacity:1}"+(u+t)%100+"%{opacity:"+e+"}"+"100%{opacity:"+f+"}"+"}",a.cssRules.length),i[o]=1),o}function l(e,t){var i=e.style,s,o;if(i[t]!==n)return t;t=t.charAt(0).toUpperCase()+t.slice(1);for(o=0;o<r.length;o++){s=r[o]+t;if(i[s]!==n)return s}}function c(e,t){for(var n in t)e.style[l(e,n)||n]=t[n];return e}function h(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)e[i]===n&&(e[i]=r[i])}return e}function p(e){var t={x:e.offsetLeft,y:e.offsetTop};while(e=e.offsetParent)t.x+=e.offsetLeft,t.y+=e.offsetTop;return t}var r=["webkit","Moz","ms","O"],i={},s,a=function(){var e=o("style",{type:"text/css"});return u(t.getElementsByTagName("head")[0],e),e.sheet||e.styleSheet}(),d={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",speed:1,trail:100,opacity:.25,fps:20,zIndex:2e9,className:"spinner",top:"auto",left:"auto",position:"relative"},v=function m(e){if(!this.spin)return new m(e);this.opts=h(e||{},m.defaults,d)};v.defaults={},h(v.prototype,{spin:function(e){this.stop();var t=this,n=t.opts,r=t.el=c(o(0,{className:n.className}),{position:n.position,width:0,zIndex:n.zIndex}),i=n.radius+n.length+n.width,u,a;e&&(e.insertBefore(r,e.firstChild||null),a=p(e),u=p(r),c(r,{left:(n.left=="auto"?a.x-u.x+(e.offsetWidth>>1):parseInt(n.left,10)+i)+"px",top:(n.top=="auto"?a.y-u.y+(e.offsetHeight>>1):parseInt(n.top,10)+i)+"px"})),r.setAttribute("aria-role","progressbar"),t.lines(r,t.opts);if(!s){var f=0,l=n.fps,h=l/n.speed,d=(1-n.opacity)/(h*n.trail/100),v=h/n.lines;(function m(){f++;for(var e=n.lines;e;e--){var i=Math.max(1-(f+e*v)%h*d,n.opacity);t.opacity(r,n.lines-e,i,n)}t.timeout=t.el&&setTimeout(m,~~(1e3/l))})()}return t},stop:function(){var e=this.el;return e&&(clearTimeout(this.timeout),e.parentNode&&e.parentNode.removeChild(e),this.el=n),this},lines:function(e,t){function i(e,r){return c(o(),{position:"absolute",width:t.length+t.width+"px",height:t.width+"px",background:e,boxShadow:r,transformOrigin:"left",transform:"rotate("+~~(360/t.lines*n+t.rotate)+"deg) translate("+t.radius+"px"+",0)",borderRadius:(t.corners*t.width>>1)+"px"})}var n=0,r;for(;n<t.lines;n++)r=c(o(),{position:"absolute",top:1+~(t.width/2)+"px",transform:t.hwaccel?"translate3d(0,0,0)":"",opacity:t.opacity,animation:s&&f(t.opacity,t.trail,n,t.lines)+" "+1/t.speed+"s linear infinite"}),t.shadow&&u(r,c(i("#000","0 0 4px #000"),{top:"2px"})),u(e,u(r,i(t.color,"0 0 1px rgba(0,0,0,.1)")));return e},opacity:function(e,t,n){t<e.childNodes.length&&(e.childNodes[t].style.opacity=n)}}),function(){function e(e,t){return o("<"+e+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',t)}var t=c(o("group"),{behavior:"url(#default#VML)"});!l(t,"transform")&&t.adj?(a.addRule(".spin-vml","behavior:url(#default#VML)"),v.prototype.lines=function(t,n){function s(){return c(e("group",{coordsize:i+" "+i,coordorigin:-r+" "+ -r}),{width:i,height:i})}function l(t,i,o){u(a,u(c(s(),{rotation:360/n.lines*t+"deg",left:~~i}),u(c(e("roundrect",{arcsize:n.corners}),{width:r,height:n.width,left:n.radius,top:-n.width>>1,filter:o}),e("fill",{color:n.color,opacity:n.opacity}),e("stroke",{opacity:0}))))}var r=n.length+n.width,i=2*r,o=-(n.width+n.length)*2+"px",a=c(s(),{position:"absolute",top:o,left:o}),f;if(n.shadow)for(f=1;f<=n.lines;f++)l(f,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(f=1;f<=n.lines;f++)l(f);return u(t,a)},v.prototype.opacity=function(e,t,n,r){var i=e.firstChild;r=r.shadow&&r.lines||0,i&&t+r<i.childNodes.length&&(i=i.childNodes[t+r],i=i&&i.firstChild,i=i&&i.firstChild,i&&(i.opacity=n))}):s=l(t,"animation")}(),typeof define=="function"&&define.amd?define(function(){return v}):e.Spinner=v}(window,document);
\ No newline at end of file |