AMBARI-21177. Ambari 3.0: Outstanding dashboard issues. (Ishan via Jaimin)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/3b575fb9 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/3b575fb9 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/3b575fb9 Branch: refs/heads/branch-feature-AMBARI-20859 Commit: 3b575fb917a559ffcbde3bb6ae114c71aa9f2b4f Parents: acb2f98 Author: Jaimin Jetly <jai...@hortonworks.com> Authored: Wed Jun 7 10:01:31 2017 -0700 Committer: Jaimin Jetly <jai...@hortonworks.com> Committed: Wed Jun 7 10:01:31 2017 -0700 ---------------------------------------------------------------------- ambari-web/app/config.js | 3 +- ambari-web/app/messages.js | 4 +- ambari-web/app/styles/application.less | 11 ++ ambari-web/app/styles/bootstrap_overrides.less | 49 ++++++++ ambari-web/app/styles/dashboard.less | 115 ++++++++++++------- .../templates/common/export_metrics_menu.hbs | 16 ++- ambari-web/app/templates/main/dashboard.hbs | 2 +- .../main/dashboard/widgets/cluster_metrics.hbs | 12 +- .../main/dashboard/widgets/hbase_links.hbs | 15 ++- .../main/dashboard/widgets/hdfs_links.hbs | 17 ++- .../main/dashboard/widgets/pie_chart.hbs | 21 ++-- .../main/dashboard/widgets/simple_text.hbs | 21 ++-- .../templates/main/dashboard/widgets/uptime.hbs | 16 ++- .../main/dashboard/widgets/yarn_links.hbs | 18 +-- ambari-web/app/views/common/chart/pie.js | 10 +- .../dashboard/widgets/cluster_metrics_widget.js | 3 - .../main/dashboard/widgets/pie_chart_widget.js | 23 ++-- 17 files changed, 241 insertions(+), 115 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/config.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/config.js b/ambari-web/app/config.js index de4b52a..e7190be 100644 --- a/ambari-web/app/config.js +++ b/ambari-web/app/config.js @@ -55,7 +55,8 @@ App.isManagedMySQLForHiveEnabled = false; App.isStormMetricsSupported = true; App.healthStatusRed = '#EF6162'; App.healthStatusGreen = '#1EB475'; -App.healthStatusOrange = '#E98A41'; +App.healthStatusOrange = '#E98A40'; +App.widgetContentColor = '#666666'; App.inactivityRemainTime = 60; // in seconds App.enableLogger = true; App.stackVersionsAvailable = true; http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index 02a54f7..6f317a3 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -313,8 +313,8 @@ Em.I18n.translations = { 'common.testing': 'Testing', 'common.noData': 'No Data', 'common.export': 'Export', - 'common.csv': 'CSV', - 'common.json': 'JSON', + 'common.csv': 'Save as CSV', + 'common.json': 'Save as JSON', 'common.timestamp': 'Timestamp', 'common.timezone': 'Timezone', 'common.loading.eclipses': 'Loading...', http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 71a9183..8ae11b5 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -2691,3 +2691,14 @@ a.abort-icon:hover { } } +.ellipsis-menu:after { + content: '\2807'; + color: #999999; + font-size: 22px; +} + +.button-border { + padding: 0px; + border: none; + background: none; +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/styles/bootstrap_overrides.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/bootstrap_overrides.less b/ambari-web/app/styles/bootstrap_overrides.less index aabf6f2..0960a52 100644 --- a/ambari-web/app/styles/bootstrap_overrides.less +++ b/ambari-web/app/styles/bootstrap_overrides.less @@ -374,6 +374,55 @@ select.form-control { } } + +@media (min-width: 1500px) { + + .row { + *zoom: 1; + } + + .row:before, + .row:after { + line-height: 0; + } + + .row:after { + clear: both; + } + + .navbar-fixed-top .container, + .navbar-fixed-bottom .container { + width: 1300px; + } + + .main-container { + width: 1340px; + } + + .contribview .main-container { + width: auto; + } + + .contribview .navbar .main-container { + width: 1340px; + margin: 0 auto; + } + + .thumbnails { + margin-left: -30px; + } + + .thumbnails > li { + margin-left: 30px; + } + + .row .thumbnails { + margin-left: 0; + margin-right: 0; + } +} + + .wizard .wizard-body { padding: 0 !important; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/styles/dashboard.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/dashboard.less b/ambari-web/app/styles/dashboard.less index 53e55b1..913fc35 100644 --- a/ambari-web/app/styles/dashboard.less +++ b/ambari-web/app/styles/dashboard.less @@ -19,6 +19,20 @@ @import 'common.less'; #dashboard-widgets-container{ + .tabs-left { + float: left; + } + .btn-toolbar { + float: right; + padding-top: 5px; + margin-bottom: 20px; + } + .dashboard-widgets-box { + clear: both; + display: inline-block; + padding: 10px; + background-color: #ececec; + } #widgets-options-menu { .add-widgets-text .dropdown-menu { overflow: auto; @@ -46,23 +60,41 @@ } .span2p4 { float: left; - width: 19.60%; - *width: 19.60%; + width: 22.70%; + *width: 22.70%; } .thumbnails > div { - margin: 0 3px 3px 0; - height: 163px; + margin: 10px; + height: 160px; } .thumbnails li { - height: 160px; + height: 157px; width: 100%; margin: 3px 3px 0 0; + border-radius: 2px; + -webkit-box-shadow: 0px 1px 1px 0px rgba(51, 51, 51, 0.15); + -moz-box-shadow: 0px 1px 1px 0px rgba(51, 51, 51, 0.15); + box-shadow: 0px 1px 1px 0px rgba(51, 51, 51, 0.15); } .img-thumbnail .corner-icon { - display: none; position: relative; - padding: 7px 0; + color: #999999; + font-size: 14px; + padding: 10px 15px 20px 15px; + float: right; + ul { + top: inherit; + margin-left: 20px; + } + li{ + padding: 2.5px 0 2.5px 5px; + height: auto; + box-shadow: none; + } + li:hover { + background-color: #f5f5f5; + } .glyphicon-remove-sign{ color: #000; text-shadow: #fff 0 0 15px; @@ -82,10 +114,11 @@ } } .img-thumbnail .hidden-info-general{ - color: #555; + background-color: #ffffff; + opacity: 0.9; + color: #666666; font-size: 12px; - font-weight: bold; - text-align: center; + text-align: left; text-decoration: none; display: none; position: relative; @@ -110,16 +143,16 @@ } } .img-thumbnail .caption { - padding: 7px 5px; - color: #555; - font-weight:bold; - font-size: 12px; + padding: 10px 15px 20px 15px ; + color: #666666; + font-size: 14px; text-align: left; position: relative; + float: left; } .img-thumbnail .widget-content{ text-align: center; - font-size: 35px; + font-size: 30px; padding-top: 40px; //svg position: relative; .disabled-hdfs-link { @@ -139,10 +172,9 @@ } .img-thumbnail .widget-content-isNA{ // for pie chart n\a text-align: center; - font-size: 35px; - color: #D6DDDF; + font-size: 30px; + color: #999999; padding-top: 70px; - font-weight: bold; position: relative; } .img-thumbnail{ @@ -165,8 +197,7 @@ display: block; } .caption{ - margin-left: -14.5px; - z-index: 7; + z-index: 9; } .slots-caption{ margin-left: -13px; @@ -178,7 +209,7 @@ z-index: 5; } .widget-content, .widget-content-isNA { - .content-mx(-104px); + .content-mx(-114px); } .uptime-content{ top: -116px; @@ -228,19 +259,18 @@ text-decoration: none; z-index: 9; } - .caption { - margin-left: -14.5px; - } } } .links .img-thumbnail{ li{ height:24px; + box-shadow: none; } .link-button{ - float: right; margin-top: 5px; + padding-left: 15px; + font-size: 12px; .disabled-hdfs-quick-link { pointer-events: none; color: #808080; @@ -256,12 +286,11 @@ text-align: center; font-size: 11px; color: #555; - padding-top: 40px; + padding: 40px 0 0 15px; table{ vertical-position: center; - text-align: center; - margin-left:auto; - margin-right:auto; + text-align: left; + font-size: 12px; } td{ padding-top: 2px; @@ -275,9 +304,6 @@ text-decoration: none; z-index: 9; } - .caption{ - margin-left: -14.5px; - } } .img-thumbnail .widget-content .svg { position: relative; @@ -286,7 +312,6 @@ .widget-cn(@color) { color: @color; padding-top: 70px; - font-weight: bold; } .is-red{ .widget-content { @@ -300,16 +325,24 @@ } .is-green { .widget-content { - .widget-cn(@health-status-green); + .widget-cn(#666666); } } .is-na { position: relative; .widget-content { - .widget-cn(#D6DDDF); + .widget-cn(#999999); text-shadow: none; } } + .corner-icon:hover { + .ellipsis-menu::after { + color: #666666; + } + ul { + display:block; + } + } } } @@ -320,23 +353,19 @@ #dashboard-widgets { .span2p4 { float: left; - width: 19.47%; - *width: 19.47%; - } - .thumbnails > div { - margin-right: 5px; + width: 22.3%; + *width: 22.3%; } .img-thumbnail { - .caption, .hidden-info-two-line, .hidden-info-three-line { + .caption { font-size: 14px; } - .hidden-info-five-line, .hidden-info-six-line { + .hidden-info-two-line, .hidden-info-three-line, .hidden-info-five-line, .hidden-info-six-line { font-size: 12px; } } .links .img-thumbnail { .widget-content { - font-weight: bold; font-size: 12px; } } http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/templates/common/export_metrics_menu.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/export_metrics_menu.hbs b/ambari-web/app/templates/common/export_metrics_menu.hbs index c48065a..0d4ead9 100644 --- a/ambari-web/app/templates/common/export_metrics_menu.hbs +++ b/ambari-web/app/templates/common/export_metrics_menu.hbs @@ -16,7 +16,17 @@ * limitations under the License. }} -<ul class="export-graph-list pull-right dropdown-menu"> - <li><a {{action exportGraphData view.parentView.exportToCSVArgument target="view.parentView"}}>{{t common.csv}}</a></li> - <li><a {{action exportGraphData target="view.parentView"}}>{{t common.json}}</a></li> +<ul class="dropdown-menu"> + <li><button {{action exportGraphData view.parentView.exportToCSVArgument target="view.parentView"}} + class="button-border"> + <i class="icon-file-text"></i> {{t common.csv}}</button> + </li> + <li><button {{action exportGraphData target="view.parentView"}} + class="button-border"> + <i class="icon-file-text-alt"></i> {{t common.json}}</button> + </li> + <li><button {{action deleteWidget target="view.parentView"}} href="#" + class="button-border"> + <i class="icon-trash"></i> {{t common.delete}}</button> + </li> </ul> http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/templates/main/dashboard.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard.hbs b/ambari-web/app/templates/main/dashboard.hbs index 4b174cc..0226626 100644 --- a/ambari-web/app/templates/main/dashboard.hbs +++ b/ambari-web/app/templates/main/dashboard.hbs @@ -18,7 +18,7 @@ <div class="row"> <div class="summary-width col-md-12" id="dashboard-widgets-container"> - <ul class="nav nav-tabs background-text"> + <ul class="nav nav-tabs background-text tabs-left"> {{#each category in view.categories}} {{#view view.NavItemView itemBinding="category.name" }} <a href="#" {{action "goToDashboardView" category.url}} >{{category.label}}</a> http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/templates/main/dashboard/widgets/cluster_metrics.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/widgets/cluster_metrics.hbs b/ambari-web/app/templates/main/dashboard/widgets/cluster_metrics.hbs index f22b9f7..18f2201 100644 --- a/ambari-web/app/templates/main/dashboard/widgets/cluster_metrics.hbs +++ b/ambari-web/app/templates/main/dashboard/widgets/cluster_metrics.hbs @@ -19,16 +19,14 @@ <div class="cluster-metrics"> <ul class="list-unstyled"> <li class="img-thumbnail row"> - <a {{bindAttr class=":corner-icon :col-md-1 view.parentView.isMoving:hidden"}} href="#" {{action deleteWidget target="view"}}> - <i class="glyphicon-remove-sign glyphicon glyphicon-large"></i> - </a> <div class="caption col-md-10">{{view.title}}</div> + <div class="corner-icon col-md-1"> + <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#" + {{action toggleFormatsList target="view"}}></button> + {{view view.exportMetricsMenuView}} + </div> {{#if view.isDataLoaded}} {{#if view.childViews.lastObject.hasData}} - <a {{bindAttr class="view.isExportButtonHidden:hidden :corner-icon :col-md-1"}} href="#" {{action toggleFormatsList target="view"}}> - <i class="glyphicon glyphicon-save"></i> - </a> - {{view view.exportMetricsMenuView}} {{/if}} {{/if}} http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/templates/main/dashboard/widgets/hbase_links.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/widgets/hbase_links.hbs b/ambari-web/app/templates/main/dashboard/widgets/hbase_links.hbs index e96ed23..0ee9af2 100644 --- a/ambari-web/app/templates/main/dashboard/widgets/hbase_links.hbs +++ b/ambari-web/app/templates/main/dashboard/widgets/hbase_links.hbs @@ -19,10 +19,17 @@ <div class="links"> <ul class="list-unstyled"> <li class="img-thumbnail row"> - <a {{bindAttr class=":corner-icon :col-md-1 view.parentView.isMoving:hidden"}} - href="#" {{action deleteWidget target="view"}}><i class="glyphicon-remove-sign glyphicon glyphicon-large"></i></a> <div class="caption col-md-10"> {{view.title}}</div> + <div class="corner-icon col-md-1"> + <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"></button> + <ul class="dropdown-menu"> + <li><button type="button" href="#" class="button-border" + {{action deleteWidget target="view"}}> + <i class="icon-trash"></i> {{t common.delete}}</button> + </li> + </ul> + </div> {{#if view.isDataLoaded}} <div class="widget-content"> <table> @@ -60,10 +67,10 @@ {{#if view.model.quickLinks.length}} {{#view App.QuickLinksView contentBinding="view.model"}} <div class="btn-group"> - <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" href="#"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#"> {{t common.more}} <span class="caret"></span> - </button> + </a> <ul class="dropdown-menu"> {{#if view.isLoaded}} {{#if view.quickLinksArray}} http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/templates/main/dashboard/widgets/hdfs_links.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/widgets/hdfs_links.hbs b/ambari-web/app/templates/main/dashboard/widgets/hdfs_links.hbs index 2feb1b0..8790ac1 100644 --- a/ambari-web/app/templates/main/dashboard/widgets/hdfs_links.hbs +++ b/ambari-web/app/templates/main/dashboard/widgets/hdfs_links.hbs @@ -19,11 +19,16 @@ <div class="links"> <ul class="list-unstyled"> <li class="img-thumbnail row"> - <a {{bindAttr class=":corner-icon :col-md-1 view.parentView.isMoving:hidden"}} href="#" {{action deleteWidget target="view"}}> - <i class="glyphicon-remove-sign glyphicon glyphicon-large"></i> - </a> <div class="caption col-md-10"> {{view.title}}</div> - + <div class="corner-icon col-md-1"> + <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"></button> + <ul class="dropdown-menu"> + <li><button type="button" href="#" class="button-border" + {{action deleteWidget target="view"}}> + <i class="icon-trash"></i> {{t common.delete}}</button> + </li> + </ul> + </div> <div class="widget-content" > {{#if view.isHAEnabled }} <table> @@ -81,10 +86,10 @@ {{#if view.model.quickLinks.length}} {{#view App.QuickLinksView contentBinding="view.model"}} <div class="btn-group"> - <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#"> {{t common.more}} <span class="caret"></span> - </button> + </a> <ul class="dropdown-menu"> {{#if view.isLoaded}} {{#if view.quickLinksArray}} http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/templates/main/dashboard/widgets/pie_chart.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/widgets/pie_chart.hbs b/ambari-web/app/templates/main/dashboard/widgets/pie_chart.hbs index d13ddb4..a383a8b 100644 --- a/ambari-web/app/templates/main/dashboard/widgets/pie_chart.hbs +++ b/ambari-web/app/templates/main/dashboard/widgets/pie_chart.hbs @@ -19,17 +19,22 @@ <div class="has-hidden-info"> <ul class="list-unstyled"> <li class="img-thumbnail row"> - <a {{bindAttr class=":corner-icon :col-md-1 view.parentView.isMoving:hidden"}} - href="#" {{action deleteWidget target="view"}}> - <i class="glyphicon-remove-sign glyphicon glyphicon-large"></i> - </a> <div class="caption col-md-10">{{view.title}}</div> + <div class="corner-icon col-md-1"> + <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"></button> + <ul class="dropdown-menu"> + <li><button type="button" href="#" class="button-border" + {{action editWidget target="view"}}> + <i class="icon-pencil"></i> {{t common.edit}}</button> + </li> + <li><button type="button" href="#" class="button-border" + {{action deleteWidget target="view"}}> + <i class="icon-trash"></i> {{t common.delete}}</button> + </li> + </ul> + </div> {{#if view.isDataLoaded}} - <a class="corner-icon col-md-1" href="#" {{action editWidget target="view"}}> - <i class="glyphicon glyphicon-edit"></i> - </a> - <div {{bindAttr class=":hidden-info-general view.hiddenInfoClass" }}> <table align="center"> {{#each line in view.hiddenInfo}} http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs b/ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs index f10ca19..606fef2 100644 --- a/ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs +++ b/ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs @@ -19,17 +19,22 @@ <div class="has-hidden-info"> <ul class="list-unstyled"> <li class="img-thumbnail row"> - <a {{bindAttr class=":corner-icon :col-md-1 view.parentView.isMoving:hidden"}} - href="#" {{action deleteWidget target="view"}}> - <i class="glyphicon-remove-sign glyphicon glyphicon-large"></i> - </a> <div class="caption col-md-10"> {{view.title}}</div> + <div class="corner-icon col-md-1"> + <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"></button> + <ul class="dropdown-menu"> + <li><button type="button" href="#" class="button-border" + {{action editWidget target="view"}}> + <i class="icon-pencil"></i> {{t common.edit}}</button> + </li> + <li><button type="button" href="#" class="button-border" + {{action deleteWidget target="view"}}> + <i class="icon-trash"></i> {{t common.delete}}</button> + </li> + </ul> + </div> {{#if view.isDataLoaded}} - <a class="corner-icon col-md-1" href="#" {{action editWidget target="view"}}> - <i class="glyphicon glyphicon-edit"></i> - </a> - <div {{bindAttr class=":hidden-info-general view.hiddenInfoClass" }}> <table align="center"> {{#each line in view.hiddenInfo}} http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/templates/main/dashboard/widgets/uptime.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/widgets/uptime.hbs b/ambari-web/app/templates/main/dashboard/widgets/uptime.hbs index 5a66ba5..befc9da 100644 --- a/ambari-web/app/templates/main/dashboard/widgets/uptime.hbs +++ b/ambari-web/app/templates/main/dashboard/widgets/uptime.hbs @@ -19,12 +19,16 @@ <div class="has-hidden-info"> <ul class="list-unstyled"> <li class="img-thumbnail row"> - <a {{bindAttr class=":corner-icon :col-md-1 view.parentView.isMoving:hidden"}} - href="#" {{action deleteWidget target="view"}}> - <i class="glyphicon-remove-sign glyphicon glyphicon-large"></i> - </a> - - <div class="caption col-md-11"> {{view.title}} </div> + <div class="caption col-md-10"> {{view.title}} </div> + <div class="corner-icon col-md-1"> + <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"></button> + <ul class="dropdown-menu"> + <li><button type="button" href="#" class="button-border" + {{action deleteWidget target="view"}}> + <i class="icon-trash"></i> {{t common.delete}}</button> + </li> + </ul> + </div> {{#if view.isDataLoaded}} <div {{bindAttr class=":hidden-info-general view.hiddenInfoClass"}}> <table align="center"> http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/templates/main/dashboard/widgets/yarn_links.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/widgets/yarn_links.hbs b/ambari-web/app/templates/main/dashboard/widgets/yarn_links.hbs index a8612f7..2700a19 100644 --- a/ambari-web/app/templates/main/dashboard/widgets/yarn_links.hbs +++ b/ambari-web/app/templates/main/dashboard/widgets/yarn_links.hbs @@ -19,12 +19,16 @@ <div class="links"> <ul class="list-unstyled"> <li class="img-thumbnail row"> - <a {{bindAttr class=":corner-icon :col-md-1 view.parentView.isMoving:hidden"}} - href="#" {{action deleteWidget target="view"}}> - <i class="glyphicon-remove-sign glyphicon glyphicon-large"></i> - </a> - <div class="caption col-md-10"> {{view.title}}</div> + <div class="corner-icon col-md-1"> + <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"></button> + <ul class="dropdown-menu"> + <li><button type="button" href="#" class="button-border" + {{action deleteWidget target="view"}}> + <i class="icon-trash"></i> {{t common.delete}}</button> + </li> + </ul> + </div> {{#if view.isDataLoaded}} <div class="widget-content"> <table> @@ -48,10 +52,10 @@ {{#if view.model.quickLinks.length}} {{#view App.QuickLinksView contentBinding="view.model"}} <div class="btn-group"> - <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" href="#"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#"> {{t common.more}} <span class="caret"></span> - </button> + </a> <ul class="dropdown-menu"> {{#if view.isLoaded}} {{#if view.quickLinksArray}} http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/views/common/chart/pie.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/chart/pie.js b/ambari-web/app/views/common/chart/pie.js index ce9bda4..f4c402a 100644 --- a/ambari-web/app/views/common/chart/pie.js +++ b/ambari-web/app/views/common/chart/pie.js @@ -19,13 +19,13 @@ var App = require('app'); App.ChartPieView = Em.View.extend({ - w:90, - h:90, + w:100, + h:100, data:[300, 500], id:null, palette: new Rickshaw.Color.Palette({ scheme: 'munin'}), stroke: 'black', - strokeWidth: 2, + strokeWidth: 1, donut:d3.layout.pie().sort(null), existCenterText: false, centerTextColor: 'black', @@ -69,8 +69,8 @@ App.ChartPieView = Em.View.extend({ .append("svg:text") .style('fill', thisChart.get('centerTextColor')) .attr("stroke", thisChart.get('centerTextColor')) - .attr("font-size", 17) - .attr("transform", "translate(" + thisChart.get('w') / 2 + "," + ((thisChart.get('h') / 2) + 3) + ")") + .attr("font-size", 24) + .attr("transform", "translate(" + thisChart.get('w') / 2 + "," + ((thisChart.get('h') / 2) + 8) + ")") .attr("text-anchor", "middle") .text(function(d) { return thisChart.get('data')[0] + '%'; http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/views/main/dashboard/widgets/cluster_metrics_widget.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/dashboard/widgets/cluster_metrics_widget.js b/ambari-web/app/views/main/dashboard/widgets/cluster_metrics_widget.js index 384a898..fbf6d21 100644 --- a/ambari-web/app/views/main/dashboard/widgets/cluster_metrics_widget.js +++ b/ambari-web/app/views/main/dashboard/widgets/cluster_metrics_widget.js @@ -28,9 +28,6 @@ App.ClusterMetricsDashboardWidgetView = App.DashboardWidgetView.extend(App.Expor didInsertElement: function () { var self = this; - this.$().on('mouseleave', function () { - self.set('isExportMenuHidden', true); - }); App.tooltip(this.$('.corner-icon > .glyphicon-save'), { title: Em.I18n.t('common.export') }); http://git-wip-us.apache.org/repos/asf/ambari/blob/3b575fb9/ambari-web/app/views/main/dashboard/widgets/pie_chart_widget.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/dashboard/widgets/pie_chart_widget.js b/ambari-web/app/views/main/dashboard/widgets/pie_chart_widget.js index 5dd85d1..34809b8 100644 --- a/ambari-web/app/views/main/dashboard/widgets/pie_chart_widget.js +++ b/ambari-web/app/views/main/dashboard/widgets/pie_chart_widget.js @@ -84,10 +84,10 @@ App.PieChartDashboardWidgetView = App.DashboardWidgetView.extend({ content: App.ChartPieView.extend({ model: null, //data bind here id: Em.computed.alias('parentView.widgetHtmlId'), // html id - stroke: '#D6DDDF', //light grey + stroke: 'transparent', thresholdMin: null, //bind from parent thresholdMax: null, - innerR: 25, + innerR: 40, existCenterText: true, centerTextColor: Em.computed.alias('contentColor'), @@ -111,20 +111,21 @@ App.PieChartDashboardWidgetView = App.DashboardWidgetView.extend({ var thresholdMax = parseFloat(this.get('thresholdMax')); if (used <= thresholdMin) { this.set('palette', new Rickshaw.Color.Palette({ - scheme: ['#FFFFFF', App.healthStatusGreen].reverse() + scheme: ['#DDDDDD', App.healthStatusGreen].reverse() })); - return App.healthStatusGreen; } - if (used <= thresholdMax) { + else if (used <= thresholdMax) { this.set('palette', new Rickshaw.Color.Palette({ - scheme: ['#FFFFFF', App.healthStatusOrange].reverse() + scheme: ['#DDDDDD', App.healthStatusOrange].reverse() })); - return App.healthStatusOrange; } - this.set('palette', new Rickshaw.Color.Palette({ - scheme: ['#FFFFFF', App.healthStatusRed].reverse() - })); - return App.healthStatusRed; + else { + this.set('palette', new Rickshaw.Color.Palette({ + scheme: ['#DDDDDD', App.healthStatusRed].reverse() + })); + } + return App.widgetContentColor; + }.property('data', 'thresholdMin', 'thresholdMax'), // refresh text and color when data in model changed