From c41728486bcf79c678e803c74ec81ff159a6b6ea Mon Sep 17 00:00:00 2001 From: Sunil G Date: Fri, 3 Nov 2017 11:45:50 +0530 Subject: [PATCH] YARN-7392. Render cluster information on new YARN web ui. Contributed by Vasudevan Skm. --- .../main/webapp/app/helpers/date-formatter.js | 29 +++++++++++++++ .../src/main/webapp/app/helpers/lower.js | 27 ++++++++++++++ .../main/webapp/app/initializers/jquery.js | 35 ++++++++++++++++++ .../main/webapp/app/models/cluster-info.js | 7 ++-- .../src/main/webapp/app/routes/application.js | 13 +++++-- .../src/main/webapp/app/styles/app.css | 36 +++++++++++++++++++ .../main/webapp/app/templates/application.hbs | 13 +++++-- .../tests/unit/helpers/date-formatter-test.js | 28 +++++++++++++++ .../webapp/tests/unit/helpers/lower-test.js | 28 +++++++++++++++ .../hadoop-yarn-ui/src/main/webapp/yarn.lock | 12 +++++++ 10 files changed, 222 insertions(+), 6 deletions(-) create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/helpers/date-formatter.js create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/helpers/lower.js create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/initializers/jquery.js create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/helpers/date-formatter-test.js create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/helpers/lower-test.js diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/helpers/date-formatter.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/helpers/date-formatter.js new file mode 100644 index 00000000000..17834e4df9c --- /dev/null +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/helpers/date-formatter.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. + */ + +import Ember from 'ember'; + +import Converter from 'yarn-ui/utils/converter'; + +export function dateFormatter(params) { + const [timestamp, dateOnly] = params; + + return dateOnly ? Converter.timeStampToDateOnly(timestamp) : Converter.timeStampToDate(timestamp); +} + +export default Ember.Helper.helper(dateFormatter); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/helpers/lower.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/helpers/lower.js new file mode 100644 index 00000000000..e51990545d3 --- /dev/null +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/helpers/lower.js @@ -0,0 +1,27 @@ +/** + * 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. + */ + + +import Ember from 'ember'; + +export function lower(params) { + const string = params[0]; + return string.toLowerCase(); +} + +export default Ember.Helper.helper(lower); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/initializers/jquery.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/initializers/jquery.js new file mode 100644 index 00000000000..9633cbcdedd --- /dev/null +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/initializers/jquery.js @@ -0,0 +1,35 @@ +/** + * 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. + */ + +import Ember from 'ember'; + +export function initialize(/* application */) { + Ember.$(document).tooltip({ + tooltipClass: 'generic-tooltip', + selector: ".yarn-tooltip" + }); + + Ember.$.ajaxSetup({ + cache: false + }); +} + +export default { + name: 'jquery', + initialize +}; diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/cluster-info.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/cluster-info.js index 332fdf3113c..c1a095a7740 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/cluster-info.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/cluster-info.js @@ -27,5 +27,8 @@ export default DS.Model.extend({ resourceManagerBuildVersion: DS.attr('string'), hadoopVersion: DS.attr('string'), hadoopBuildVersion: DS.attr('string'), - hadoopVersionBuiltOn: DS.attr('string') -}); \ No newline at end of file + hadoopVersionBuiltOn: DS.attr('string'), + getYARNBuildHash: function() { + return this.get("hadoopVersion") + " from " + this.get("resourceManagerBuildVersion").split(" ")[2]; + }.property("yarnHash") +}); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/application.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/application.js index 1fd11e66fb5..33a741a443c 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/application.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/application.js @@ -17,8 +17,13 @@ */ import Ember from 'ember'; +import AbstractRoute from './abstract'; + +export default AbstractRoute.extend({ + model() { + return this.store.findAll('ClusterInfo', {reload: true}); + }, -export default Ember.Route.extend({ actions: { /** * Base error handler for the application. @@ -35,5 +40,9 @@ export default Ember.Route.extend({ this.intermediateTransitionTo('/error'); } } - } + }, + + unloadAll: function() { + this.store.unloadAll('ClusterInfo'); + }, }); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css index f48c1868060..9682e86f0bb 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css @@ -418,3 +418,39 @@ div.attempt-info-panel table > tbody > tr > td:last-of-type { width: 14px; display: inline-block; } + +.yarn-cluster-status i { + display: inline-block; + width: 12px; + height: 12px; + border-radius: 10px; + border: 1px solid; + margin: 3px; + vertical-align: bottom; +} + +.yarn-cluster-status i.started { + border-color: #43b135; + background-color: #60cea5; +} +.yarn-cluster-status i.stopped { + border-color: #b04b4e; + background-color: #ef6162; +} +.yarn-cluster-status i.inited{ + border-color: #1c95c0; + background-color: #26bbf0; +} +.yarn-cluster-status i.notinited { + border-color: #dca41b; + background-color: #ffbc0b; +} +.yarn-cluster-info { + display: flex; + margin-left: auto +} + +.yarn-ui-footer { + display: flex; + padding: 10px 25px; +} diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/application.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/application.hbs index 1ac53bf5e7b..0d87de63d49 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/application.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/application.hbs @@ -80,8 +80,8 @@
-
-
+
+
Licensed under the Apache License, Version 2.0. @@ -91,4 +91,13 @@ {{/if}}
+
+
+ v{{model.firstObject.hadoopVersion}} + + + +
Started at {{date-formatter model.firstObject.startedOn}}
+
+
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/helpers/date-formatter-test.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/helpers/date-formatter-test.js new file mode 100644 index 00000000000..27232817793 --- /dev/null +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/helpers/date-formatter-test.js @@ -0,0 +1,28 @@ +/** + * 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. + */ + +import { dateFormatter } from '../../../helpers/date-formatter'; +import { module, test } from 'qunit'; + +module('Unit | Helper | date formatter'); + +// Replace this with your real tests. +test('it works', function(assert) { + let result = dateFormatter(42); + assert.ok(result); +}); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/helpers/lower-test.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/helpers/lower-test.js new file mode 100644 index 00000000000..044a9626d0d --- /dev/null +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/helpers/lower-test.js @@ -0,0 +1,28 @@ +/** + * 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. + */ + +import { lower } from '../../../helpers/lower'; +import { module, test } from 'qunit'; + +module('Unit | Helper | lower'); + +// Replace this with your real tests. +test('it works', function(assert) { + let result = lower(42); + assert.ok(result); +}); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/yarn.lock b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/yarn.lock index 948feb948ef..c63daea4c4e 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/yarn.lock +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/yarn.lock @@ -1730,6 +1730,14 @@ ember-export-application-global@1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/ember-export-application-global/-/ember-export-application-global-1.0.5.tgz#73bd641b19e3474190f717c9b504617511506bea" +ember-lodash@0.0.10: + version "0.0.10" + resolved "https://registry.yarnpkg.com/ember-lodash/-/ember-lodash-0.0.10.tgz#edf132aa54a983a87543a093615df03892c9a15c" + dependencies: + broccoli-merge-trees "^1.1.1" + ember-cli-babel "^5.1.5" + lodash-es "^3.10.0" + ember-qunit@^0.4.18: version "0.4.24" resolved "https://registry.yarnpkg.com/ember-qunit/-/ember-qunit-0.4.24.tgz#b54cf6688c442d07eacea47c3285879cdd7c2163" @@ -2945,6 +2953,10 @@ lockfile@~1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/lockfile/-/lockfile-1.0.3.tgz#2638fc39a0331e9cac1a04b71799931c9c50df79" +lodash-es@^3.10.0: + version "3.10.1" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-3.10.1.tgz#a1c85d9829c9009004339dc3846dbabb46cf4e19" + lodash-node@^2.4.1: version "2.4.1" resolved "https://registry.yarnpkg.com/lodash-node/-/lodash-node-2.4.1.tgz#ea82f7b100c733d1a42af76801e506105e2a80ec"