From bcacb7824e29eac03123acdaadb7c102a53ee999 Mon Sep 17 00:00:00 2001 From: Vasudevan Srinivasan Krishnamoorthy Date: Mon, 6 Nov 2017 16:27:47 +0530 Subject: [PATCH] Squashed commit of the following: commit b126a4c8e86b8832885cbbce49c3f460081750e7 Author: Vasudevan Srinivasan Krishnamoorthy Date: Mon Nov 6 16:25:51 2017 +0530 Adds filters to the Services page commit b767e95b72bd46252d9d282d079ff711be74a07f Author: Vasudevan Srinivasan Krishnamoorthy Date: Mon Nov 6 15:09:23 2017 +0530 Adds filters to applications page --- .../webapp/app/controllers/app-table-columns.js | 30 +++++++--- .../main/webapp/app/controllers/yarn-apps/apps.js | 5 +- .../main/webapp/app/controllers/yarn-services.js | 4 +- .../src/main/webapp/app/styles/app.css | 56 +++++++++++++++++ .../src/main/webapp/app/templates/yarn-apps.hbs | 64 +------------------- .../main/webapp/app/templates/yarn-services.hbs | 70 +++------------------- .../hadoop-yarn-ui/src/main/webapp/bower.json | 3 +- .../src/main/webapp/config/environment.js | 1 - .../src/main/webapp/ember-cli-build.js | 1 + .../hadoop-yarn-ui/src/main/webapp/jsconfig.json | 10 +++- .../hadoop-yarn-ui/src/main/webapp/package.json | 2 +- .../hadoop-yarn-ui/src/main/webapp/yarn.lock | 6 +- 12 files changed, 110 insertions(+), 142 deletions(-) diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/app-table-columns.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/app-table-columns.js index 8a34f1a2715..bd3e4e48895 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/app-table-columns.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/app-table-columns.js @@ -34,7 +34,8 @@ export default Ember.Controller.extend({ headerTitle: 'Application ID', contentPath: 'id', cellComponentName: 'em-table-linked-cell', - minWidth: "250px", + minWidth: "280px", + facetType: null, getCellContent: function(row) { return { displayText: row.id, @@ -45,30 +46,33 @@ export default Ember.Controller.extend({ id: 'appType', headerTitle: 'Application Type', contentPath: 'applicationType', + facetType: null, }, { id: 'appName', headerTitle: 'Application Name', contentPath: 'appName', + facetType: null, }, { id: 'appUsr', headerTitle: 'User', contentPath: 'user', minWidth: "50px" }, { + id: 'state', + headerTitle: 'Status', + contentPath: 'state', + cellComponentName: 'em-table-status-cell', + minWidth: "50px" + }, { id: 'queue', headerTitle: 'Queue', contentPath: 'queue', }, { - id: 'state', - headerTitle: 'State', - contentPath: 'state', - cellComponentName: 'em-table-status-cell', - minWidth: "50px" - }, { id: 'progress', headerTitle: 'Progress', contentPath: 'progress', cellComponentName: 'em-table-progress-cell', + facetType: null, cellDefinition: { valueMax: 100 } @@ -76,10 +80,12 @@ export default Ember.Controller.extend({ id: 'stTime', headerTitle: 'Start Time', contentPath: 'startTime', + facetType: null, }, { id: 'elTime', headerTitle: 'Elapsed Time', contentPath: 'elapsedTime', + facetType: null, cellDefinition: { type: "duration" } @@ -87,6 +93,7 @@ export default Ember.Controller.extend({ id: 'finishTime', headerTitle: 'Finished Time', contentPath: 'validatedFinishedTs', + facetType: null, observePath: true }, { id: 'priority', @@ -108,6 +115,7 @@ export default Ember.Controller.extend({ headerTitle: 'Service Name', contentPath: 'appName', minWidth: "200px", + facetType: null, cellComponentName: 'em-table-linked-cell', getCellContent: function(row) { return { @@ -119,10 +127,11 @@ export default Ember.Controller.extend({ id: 'appId', headerTitle: 'Application ID', contentPath: 'id', + facetType: null, minWidth: "250px" }, { id: 'state', - headerTitle: 'State', + headerTitle: 'Status', contentPath: 'state', cellComponentName: 'em-table-status-cell', minWidth: "50px" @@ -130,11 +139,13 @@ export default Ember.Controller.extend({ id: 'cluster', headerTitle: '%Cluster', contentPath: 'clusterUsagePercentage', + facetType: null, observePath: true }, { id: 'elTime', headerTitle: 'Elapsed Time', contentPath: 'elapsedTime', + facetType: null, cellDefinition: { type: "duration" }, @@ -143,6 +154,7 @@ export default Ember.Controller.extend({ id: 'appUsr', headerTitle: 'User', contentPath: 'user', + facetType: null, minWidth: "50px" }, { id: 'queue', @@ -152,10 +164,12 @@ export default Ember.Controller.extend({ id: 'stTime', headerTitle: 'Started Time', contentPath: 'startTime', + facetType: null, }, { id: 'finishTime', headerTitle: 'Finished Time', contentPath: 'validatedFinishedTs', + facetType: null, observePath: true }); return ColumnDef.make(colums); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-apps/apps.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-apps/apps.js index fffaf17b05b..bfd62995b4a 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-apps/apps.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-apps/apps.js @@ -22,7 +22,10 @@ import AppTableController from '../app-table-columns'; export default AppTableController.extend({ queryParams: ['searchText', 'sortColumnId', 'sortOrder', 'pageNum', 'rowCount'], - tableDefinition: TableDefinition.create(), + tableDefinition: TableDefinition.create({ + enableFaceting: true, + rowCount: 25 + }), searchText: Ember.computed.alias('tableDefinition.searchText'), sortColumnId: Ember.computed.alias('tableDefinition.sortColumnId'), sortOrder: Ember.computed.alias('tableDefinition.sortOrder'), diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-services.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-services.js index a2c80f72a9d..e0ee4a5ea2e 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-services.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-services.js @@ -24,7 +24,9 @@ export default AppTableController.extend({ queryParams: ['searchText', 'sortColumnId', 'sortOrder', 'pageNum', 'rowCount'], tableDefinition: TableDefinition.create({ sortColumnId: 'stTime', - sortOrder: 'desc' + sortOrder: 'desc', + rowCount: 25, + enableFaceting: true }), searchText: Ember.computed.alias('tableDefinition.searchText'), sortColumnId: Ember.computed.alias('tableDefinition.sortColumnId'), 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 9682e86f0bb..37d23b89f03 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 @@ -454,3 +454,59 @@ div.attempt-info-panel table > tbody > tr > td:last-of-type { display: flex; padding: 10px 25px; } + +.yarn-applications-container .table-panel-left .em-table-facet-panel { + width: 240px; + margin-right: 15px; + padding: 0 0 15px 0; + background: none; + border: none; + border-radius: 0; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel .field-list > li .em-table-facet-panel-values{ + margin-top: 0px; + margin-bottom: 10px; + background: #fff; + border: 1px solid #dcdcdc; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel .field-name { + background-color: #f0f0f0; + border-bottom: 1px solid #dcdcdc; + padding: 10px 15px; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel .all-button { + right: 5px !important; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel .field-name::before { + margin-right: 5px; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel .value-list { + padding: 0 10px; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel .filter-box { + padding: 5px; + margin: 5px 0; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel .more-less { + padding: 5px 0; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel .field-list { + padding-top: 0px; +} + +.yarn-applications-container .em-table .table-column .table-header-cell { + padding: 7.5px 0 7.5px 7.5px; +} + +.yarn-applications-container .ember-view.table-cell { + padding: 10px 15px; + height: auto; +} \ No newline at end of file diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-apps.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-apps.hbs index 00701d90798..ccadb7c6e91 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-apps.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-apps.hbs @@ -18,68 +18,8 @@ {{breadcrumb-bar breadcrumbs=breadcrumbs}} -
+
- -
-
-
- Applications -
-
- -
-
-
- -
- {{#if model.clusterMetrics}} -
-
-
-
- Finished Apps -
-
- {{donut-chart data=model.clusterMetrics.firstObject.getFinishedAppsDataForDonutChart - showLabels=true - parentId="finishedapps-donut-chart" - ratio=0.6 - maxHeight=350 - colorTargets="good warn error" - }} -
-
-
- -
-
-
- Running Apps -
-
- {{donut-chart data=model.clusterMetrics.firstObject.getRunningAppsDataForDonutChart - showLabels=true - parentId="runningapps-donut-chart" - ratio=0.6 - maxHeight=350 - colorTargets="warn good" - }} -
-
-
-
- {{/if}} - -
- {{outlet}} -
-
+ {{outlet}}
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-services.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-services.hbs index 04788beecc8..28dc3550cc4 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-services.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-services.hbs @@ -19,67 +19,11 @@ {{breadcrumb-bar breadcrumbs=breadcrumbs}} -
-
- -
-
-
- Services -
-
- -
-
-
- -
-
-
-
-
- Finished Services -
-
- {{donut-chart data=getFinishedServicesDataForDonutChart - showLabels=true - parentId="finishedapps-donut-chart" - ratio=0.6 - maxHeight=350 - colorTargets="good warn error" - }} -
-
-
- -
-
-
- Running Services -
-
- {{donut-chart data=getRunningServicesDataForDonutChart - showLabels=true - parentId="runningapps-donut-chart" - ratio=0.6 - maxHeight=350 - colorTargets="warn good" - }} -
-
-
-
- {{#if model.apps}} - {{em-table columns=serviceColumns rows=model.apps definition=tableDefinition}} - {{else}} -

Could not find any services from this cluster

- {{/if}} -
-
+
+ + {{#if model.apps}} + {{em-table columns=serviceColumns rows=model.apps definition=tableDefinition}} + {{else}} +

Could not find any services from this cluster

+ {{/if}}
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/bower.json b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/bower.json index e1ab943fc18..11fae3ea960 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/bower.json +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/bower.json @@ -21,6 +21,7 @@ "spin.js": "~2.3.2", "momentjs": "~2.10.6", "select2": "4.0.0", - "snippet-ss": "~1.11.0" + "snippet-ss": "~1.11.0", + "alasql": "^0.4.3" } } diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/config/environment.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/config/environment.js index 3c478bee775..3ff3c02984a 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/config/environment.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/config/environment.js @@ -38,7 +38,6 @@ module.exports = function(environment) { 'connect-src': "* 'self'", 'child-src': "'self' 'unsafe-inline'", 'style-src': "'self' 'unsafe-inline'", - 'script-src': "'self' 'unsafe-inline'" } }; diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/ember-cli-build.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/ember-cli-build.js index 4799f9286f0..6af45fc9c35 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/ember-cli-build.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/ember-cli-build.js @@ -49,6 +49,7 @@ module.exports = function(defaults) { app.import('bower_components/bootstrap/dist/css/bootstrap.css'); app.import('bower_components/bootstrap/dist/css/bootstrap-theme.css'); app.import('bower_components/bootstrap/dist/js/bootstrap.min.js'); + app.import('bower_components/alasql/dist/alasql.js'); // Use `app.import` to add additional libraries to the generated // output files. diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/jsconfig.json b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/jsconfig.json index 875bb90cd69..c892e33be36 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/jsconfig.json +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/jsconfig.json @@ -2,5 +2,13 @@ "compilerOptions": { "target": "ES6", "module": "commonjs" - } + }, + "exclude": [ + "node_modules", + "dist", + "bower_components", + "jspm_packages", + "tmp", + "temp" + ] } diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/package.json b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/package.json index 2830be371c9..9b2c1e48987 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/package.json +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/package.json @@ -56,6 +56,6 @@ }, "dependencies": { "em-helpers": "^0.8.0", - "em-table": "^0.7.0" + "em-table": "0.11.3" } } 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 c63daea4c4e..dc45d7e5815 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 @@ -1402,9 +1402,9 @@ em-helpers@^0.8.0: optionalDependencies: phantomjs-prebuilt "2.1.13" -em-table@^0.7.0: - version "0.7.2" - resolved "https://registry.yarnpkg.com/em-table/-/em-table-0.7.2.tgz#867ff734701df9765f2505e02acd74768edb0f71" +em-table@0.11.3: + version "0.11.3" + resolved "https://registry.yarnpkg.com/em-table/-/em-table-0.11.3.tgz#20e605cc3814214e644199399a2383cee8d23eeb" dependencies: ember-cli-htmlbars "^1.0.1" ember-cli-less "^1.4.0" -- 2.13.5 (Apple Git-94)