ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jonathanhur...@apache.org
Subject [26/44] git commit: AMBARI-7509. Slider View: Create Slider App wizard should have entries for multiple new features. (onechiporenko)
Date Fri, 26 Sep 2014 16:48:41 GMT
AMBARI-7509. Slider View: Create Slider App wizard should have entries for multiple new features. (onechiporenko)


Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/9074f835
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/9074f835
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/9074f835

Branch: refs/heads/branch-alerts-dev
Commit: 9074f835744eb16c43b2702971c7849f7fdcead8
Parents: 88e940c
Author: Oleg Nechiporenko <onechiporenko@apache.org>
Authored: Fri Sep 26 13:09:08 2014 +0300
Committer: Oleg Nechiporenko <onechiporenko@apache.org>
Committed: Fri Sep 26 13:09:08 2014 +0300

----------------------------------------------------------------------
 .../createAppWizard/step1_controller.js         |  52 +-
 .../createAppWizard/step2_controller.js         |  31 +-
 .../ui/app/routes/create_app_wizard.js          |  19 +
 .../src/main/resources/ui/app/styles/app.less   | 276 ++++++
 .../resources/ui/app/styles/application.less    | 978 +------------------
 .../resources/ui/app/styles/apps-table.less     | 320 ++++++
 .../main/resources/ui/app/styles/common.less    | 102 ++
 .../resources/ui/app/styles/old-bootstrap.less  | 164 ++++
 .../main/resources/ui/app/styles/wizard.less    | 205 ++++
 .../ui/app/templates/createAppWizard/step1.hbs  | 156 ++-
 .../ui/app/templates/createAppWizard/step2.hbs  |  23 +-
 .../src/main/resources/ui/app/translations.js   |  17 +-
 .../ui/app/views/createAppWizard/step1_view.js  |  47 +-
 .../ui/app/views/createAppWizard/step2_view.js  |  15 +-
 14 files changed, 1329 insertions(+), 1076 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/9074f835/contrib/views/slider/src/main/resources/ui/app/controllers/createAppWizard/step1_controller.js
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/controllers/createAppWizard/step1_controller.js b/contrib/views/slider/src/main/resources/ui/app/controllers/createAppWizard/step1_controller.js
index 3829503..7802f3a 100644
--- a/contrib/views/slider/src/main/resources/ui/app/controllers/createAppWizard/step1_controller.js
+++ b/contrib/views/slider/src/main/resources/ui/app/controllers/createAppWizard/step1_controller.js
@@ -29,12 +29,6 @@ App.CreateAppWizardStep1Controller = Ember.Controller.extend({
   newApp: null,
 
   /**
-   * Name for new App
-   * @type {String}
-   */
-  newAppName: '',
-
-  /**
    * List of available types for App
    * @type {Array}
    */
@@ -62,10 +56,7 @@ App.CreateAppWizardStep1Controller = Ember.Controller.extend({
    * Define if there are existing App types
    * @type {Boolean}
    */
-  isAppTypesError: function(){
-    return !this.get('availableTypes.content.length');
-  }.property('availableTypes.content.length'),
-
+  isAppTypesError: Em.computed.equal('availableTypes.content.length', 0),
   /**
    * Define description depending on selected App type
    * @type {string}
@@ -77,32 +68,36 @@ App.CreateAppWizardStep1Controller = Ember.Controller.extend({
 
   /**
    * Define if submit button is disabled
-   * <code>newAppName</code> should pass validation and be not empty
+   * <code>newApp.name</code> should pass validation and be not empty
    * @type {bool}
    */
   isSubmitDisabled: function () {
-    return !this.get('newAppName') || this.get('isNameError') || this.get('isAppTypesError');
-  }.property('newAppName', 'isNameError', 'isAppTypesError'),
-
-  /**
-   * Load all required data for step
-   * @method loadStep
-   */
-  loadStep: function () {
-    this.initializeNewApp();
-    this.loadAvailableTypes();
-  },
+    return !this.get('newApp.name') || this.get('isNameError') || this.get('isAppTypesError');
+  }.property('newApp.name', 'isNameError', 'isAppTypesError'),
 
   /**
    * Initialize new App and set it to <code>newApp</code>
    * @method initializeNewApp
    */
   initializeNewApp: function () {
-    var newApp = Ember.Object.create({
-      name: '',
-      appType: null,
-      configs: {}
+    var app = this.get('appWizardController.newApp'),
+      properties = Em.A(['name', 'includeFilePatterns', 'excludeFilePatterns', 'frequency', 'queueName', 'specialLabel', 'selectedYarnLabel']),
+      newApp = Ember.Object.create({
+        appType: null,
+        configs: {}
+      });
+
+    properties.forEach(function(p) {
+      newApp.set(p, '');
     });
+    newApp.set('selectedYarnLabel', 0);
+
+    if (app) {
+      properties.forEach(function(p) {
+        newApp.set(p, app.get(p));
+      });
+    }
+
     this.set('newApp', newApp);
   },
 
@@ -121,7 +116,7 @@ App.CreateAppWizardStep1Controller = Ember.Controller.extend({
    * @return {Boolean}
    */
   nameValidator: function () {
-    var newAppName = this.get('newAppName');
+    var newAppName = this.get('newApp.name');
     if (newAppName) {
       // new App name should consist only of letters, numbers, '-', '_' and first character should be a letter
       if (!/^[A-Za-z][A-Za-z0-9_\-]*$/.test(newAppName)) {
@@ -138,7 +133,7 @@ App.CreateAppWizardStep1Controller = Ember.Controller.extend({
     }
     this.set('isNameError', false);
     return true;
-  }.observes('newAppName'),
+  }.observes('newApp.name'),
 
   /**
    * Save new application data to wizard controller
@@ -147,7 +142,6 @@ App.CreateAppWizardStep1Controller = Ember.Controller.extend({
   saveApp: function () {
     var newApp = this.get('newApp');
     newApp.set('appType', this.get('selectedType'));
-    newApp.set('name', this.get('newAppName'));
     newApp.set('configs', this.get('selectedType.configs'));
     newApp.set('predefinedConfigNames', Em.keys(this.get('selectedType.configs')));
     this.set('appWizardController.newApp', newApp);

http://git-wip-us.apache.org/repos/asf/ambari/blob/9074f835/contrib/views/slider/src/main/resources/ui/app/controllers/createAppWizard/step2_controller.js
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/controllers/createAppWizard/step2_controller.js b/contrib/views/slider/src/main/resources/ui/app/controllers/createAppWizard/step2_controller.js
index c1ff3fe..55f0451 100644
--- a/contrib/views/slider/src/main/resources/ui/app/controllers/createAppWizard/step2_controller.js
+++ b/contrib/views/slider/src/main/resources/ui/app/controllers/createAppWizard/step2_controller.js
@@ -24,7 +24,8 @@ App.CreateAppWizardStep2Controller = Ember.ArrayController.extend({
 
   /**
    * List of app type components
-   * @type {App.SliderAppTypeComponent}
+   * @type {Em.Object[]}
+   * @see <code>loadTypeComponents</code> for information about elements type
    */
   content: [],
 
@@ -53,17 +54,7 @@ App.CreateAppWizardStep2Controller = Ember.ArrayController.extend({
    * <code>isError</code> should be true
    * @type {bool}
    */
-  isSubmitDisabled: function () {
-    return this.get('isError');
-  }.property('isError'),
-
-  /**
-   * Load all required data for step
-   * @method loadStep
-   */
-  loadStep: function () {
-    this.initializeNewApp();
-  },
+  isSubmitDisabled: Em.computed.alias('isError'),
 
   /**
    * Initialize new App to use it scope of controller
@@ -76,15 +67,25 @@ App.CreateAppWizardStep2Controller = Ember.ArrayController.extend({
   },
 
   /**
+   * @type {Em.Object}
+   */
+  typeComponent: Em.Object.extend({
+    yarnLabelChecked: false,
+    yarnLabelNotChecked: Em.computed.not('yarnLabelChecked'),
+    yarnLabel: ''
+  }),
+
+  /**
    * Fill <code>content</code> with objects created from <code>App.SliderAppTypeComponent</code>
    * @method loadTypeComponents
    */
   loadTypeComponents: function () {
-    var content = [];
-    var allTypeComponents = this.get('newApp.appType.components');
+    var content = [],
+        component = this.get('typeComponent'),
+        allTypeComponents = this.get('newApp.appType.components');
     if (allTypeComponents && allTypeComponents.get('length')) {
       allTypeComponents.forEach(function (typeComponent) {
-        content.push(Ember.Object.create({
+        content.push(component.create({
           displayName: typeComponent.get('displayName'),
           name: typeComponent.get('name'),
           priority: typeComponent.get('priority'),

http://git-wip-us.apache.org/repos/asf/ambari/blob/9074f835/contrib/views/slider/src/main/resources/ui/app/routes/create_app_wizard.js
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/routes/create_app_wizard.js b/contrib/views/slider/src/main/resources/ui/app/routes/create_app_wizard.js
index 1392067..de1f52d 100644
--- a/contrib/views/slider/src/main/resources/ui/app/routes/create_app_wizard.js
+++ b/contrib/views/slider/src/main/resources/ui/app/routes/create_app_wizard.js
@@ -33,3 +33,22 @@ App.CreateAppWizardRoute = Ember.Route.extend({
     }
   }
 });
+
+App.CreateAppWizardStep1Route = Em.Route.extend({
+
+  setupController: function(controller, model) {
+    controller.set('model', model);
+    controller.initializeNewApp();
+    controller.loadAvailableTypes();
+  }
+
+});
+
+App.CreateAppWizardStep2Route = Em.Route.extend({
+
+  setupController: function(controller, model) {
+    controller.set('model', model);
+    controller.initializeNewApp();
+  }
+
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/9074f835/contrib/views/slider/src/main/resources/ui/app/styles/app.less
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/styles/app.less b/contrib/views/slider/src/main/resources/ui/app/styles/app.less
new file mode 100644
index 0000000..0773ce5
--- /dev/null
+++ b/contrib/views/slider/src/main/resources/ui/app/styles/app.less
@@ -0,0 +1,276 @@
+/**
+ * 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-once 'common.less';
+
+.app-page {
+  .wrap-tabs {
+    margin-top: 30px;
+  }
+  .quick-links-wrapper {
+    .nav-pills.move {
+      float: right;
+      width:135px;
+      &>li {
+        position: absolute;
+      }
+    }
+    .dropdown-submenu {
+      &> a:after {
+        border-left-color: #333;
+      }
+    }
+    .nav li.dropdown.open {
+      .dropdown-toggle{
+        color: #005580;
+        background-color: #eeeeee;
+        border-color: #eeeeee;
+        -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+        -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+      }
+      a:hover .caret {
+        border-top-color: #005580;
+        border-bottom-color: #005580;
+      }
+      .caret {
+        border-top-color: #005580;
+        border-bottom-color: #005580;
+      }
+    }
+  }
+}
+
+.app_summary {
+  padding-left: 0;
+  table {
+    &.no-borders {
+      td {
+        border-width: 0;
+      }
+    }
+    td:nth-child(2) span{
+      word-break: break-all;
+    }
+  }
+  .panel-heading {
+    font-weight: 700;
+  }
+  .panel-summary {
+    min-height: 400px;
+    td:first-child {
+      text-align: right;
+    }
+  }
+  .panel-components {
+    .status {
+      display: inline-block;
+      width: 25px;
+    }
+    .icon-ok-sign {
+      color: #5ab400;
+    }
+    .icon-warning-sign {
+      color: #ff0000;
+    }
+    .panel-body{
+      /*max-height: 400px;
+      overflow-x: auto;*/
+    }
+  }
+  .panel-link {
+    margin-top: -5px;
+    margin-right: -7px;
+  }
+}
+
+.chart-container {
+  cursor: default;
+
+  position: relative;
+  margin: 20px 15px 0px 15px;
+
+  .chart {
+    position: relative;
+    z-index: 1;
+  }
+  .chart-y-axis {
+    position: absolute;
+    top: 0;
+    bottom: 0px;
+    width: 100px;
+    z-index: 2;
+    margin-top: 15px;
+  }
+  .chart-x-axis {
+    position: absolute;
+    top: 180px;
+    left: 35%;
+    width: 30%;
+    z-index: 2;
+  }
+  .x_tick {
+    margin-top: 5px;
+    .title {
+      padding: 0 2px 0 2px;
+      opacity: 1 !important;
+      top: 148px;
+    }
+  }
+  svg {
+    g {
+      g:nth-child(1) {
+        display: none;
+      }
+    }
+  }
+  text {
+    font-weight: 700;
+    opacity: 1 !important;
+  }
+  .chart-legend {
+    font-family: 'Courier New';
+    position: absolute;
+    top: 180px;
+    z-index: 3;
+  }
+  .rickshaw_legend {
+    background-color: #999 !important;
+    li:hover {
+      background-color: #999 !important;
+    }
+  }
+  .rickshaw_legend:empty {
+    padding: 0;
+  }
+  .rickshaw_graph {
+    .x_tick {
+      .title {
+        bottom: -6px;
+        opacity: 0.75;
+      }
+    }
+  }
+  .chart-overlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    z-index: 5;
+  }
+  .chart-title {
+    text-align: center;
+    margin-top: 20px;
+  }
+}
+
+.app_configs {
+  a.accordion-toggle {
+    display: block;
+  }
+  .panel-heading{
+    .icon{
+      width: 24px;
+    }
+  }
+  .row {
+    .table-row();
+    textarea {
+      height: 200px;
+      padding-left: 5px;
+      padding-right: 5px;
+      resize: none;
+    }
+    textarea[disabled] {
+      cursor: not-allowed;
+      background-color: #eeeeee;
+    }
+    input[disabled] {
+      cursor: not-allowed;
+      background-color: #eeeeee;
+    }
+    .property-name {
+      word-wrap: break-word;
+    }
+  }
+}
+
+.app-alerts {
+  overflow-y: auto;
+  ul {
+    padding-left: 0;
+    margin-bottom: 0;
+  }
+  li {
+    border-bottom: 1px solid #eee;
+    list-style: none;
+    padding: 5px;
+    background-position: 14px 9px;
+    background-repeat: no-repeat;
+    .date-time {
+      float: right;
+    }
+    p {
+      margin-bottom: 2px;
+    }
+    .container-fluid {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+    .title {
+      font-weight: normal;
+      font-size: 13px;
+    }
+    .row-fluid [class*="span"] {
+      min-height: 0px;
+    }
+    .date-time {
+      color: #999;
+      font-style: italic;
+      font-size: small;
+      text-align: right;
+    }
+    .message {
+      font-size: 12px;
+      color: #777;
+      word-break: break-all;
+      padding-right: 15px;
+    }
+    .serviceLink {
+      padding-left: 7px;
+    }
+  }
+  .icon-ok {
+    color: #5AB400;
+  }
+  .icon-remove {
+    color: #FF4B4B;
+  }
+  .icon-warning-sign {
+    color: #FDB82F;
+  }
+  .icon-question-sign {
+    color: #999;
+  }
+}
+
+.flex-popup {
+  .row {
+    .table-row();
+  }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/9074f835/contrib/views/slider/src/main/resources/ui/app/styles/application.less
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/styles/application.less b/contrib/views/slider/src/main/resources/ui/app/styles/application.less
index 901682c..71b537e 100644
--- a/contrib/views/slider/src/main/resources/ui/app/styles/application.less
+++ b/contrib/views/slider/src/main/resources/ui/app/styles/application.less
@@ -16,976 +16,8 @@
  * limitations under the License.
  */
 
-.table-row() {
-  margin: 10px 0;
-}
-
-html {
-  overflow-y: scroll;
-}
-.icon-minus-sign {
-  color: #FF4B4B;
-}
-.tooltip {
-  z-index: 1500;
-}
-.popover {
-  max-width: 800px;
-  &.bottom {
-    left: 5px;
-  }
-}
-
-.slider-name-popover {
-  max-width: 600px !important;
-  .row {
-    .table-row();
-  }
-}
-
-a {
-  cursor: pointer;
-}
-
-select {
-  background-color: #ffffff;
-  border: 1px solid #cccccc;
-  color: #555555;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-
-.well {
-  border-radius: 0px;
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-
-.nav-pills {
-  &>li {
-    &> a {
-      border-radius: 0px;
-      -webkit-border-radius: 0px;
-      -moz-border-radius: 0px;
-    }
-    &.active {
-      &> a, &> a:hover, &> a:focus {
-        background-color: #666666;
-
-      }
-    }
-  }
-}
-
-.slider-header {
-  overflow: hidden;
-  .box-header {
-    padding-top: 20px;
-  }
-}
-
-#slider-apps-table  {
-
-  #slider-table {
-    border-bottom: 1px solid #ddd;
-    border-left: 1px solid #ddd;
-    border-right: 1px solid #ddd;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    font-size: 13px\9;
-    table-layout: fixed;
-
-    th {
-      width: 17.5%!important;
-    }
-
-    select {
-      height: 23px;
-      margin-bottom: 10px;
-      font-size: 75%;
-    }
-
-    .label-row {
-      font-size: 0.9em;
-      th {
-        padding: 4px;
-        border-bottom: none !important;
-      }
-      .active-sort {
-        color: #555555;
-        text-decoration: none;
-        background-color: #e5e5e5;
-        -webkit-box-shadow: inset 0 5px 8px rgba(0, 0, 0, 0.100);
-        -moz-box-shadow: inset 0 5px 8px rgba(0, 0, 0, 0.100);
-        box-shadow: inset 0 5px 8px rgba(0, 0, 0, 0.100);
-      }
-    }
-
-    #filter-row {
-      th {
-        padding: 0 0 0 4px;
-      }
-      .active-filter {
-        color: #555555;
-        text-decoration: none;
-        background-color: #e5e5e5;
-        -webkit-box-shadow: inset 0 -5px 8px rgba(0, 0, 0, 0.05);
-        -moz-box-shadow: inset 0 -5px 8px rgba(0, 0, 0, 0.05);
-        box-shadow: inset 0 -5px 8px rgba(0, 0, 0, 0.05);
-      }
-      input {
-        font-size: 12px;
-        height: 24px;
-        margin-bottom: 10px;
-      }
-      .filter-btn {
-        color: #999999;
-        font-size: 12px;
-        line-height: 14px;
-        padding-left: 6px;
-        text-align: left;
-        width: 100px;
-        .icon-filter {
-          color: #999999;
-        }
-      }
-    }
-    thead {
-      background: none repeat scroll 0 0 #F8F8F8;
-      border-top: 1px solid #ddd;
-    }
-  }
-  .page-bar {
-    border: 1px solid #E4E4E4;
-    color: #7B7B7B;
-    text-align: right;
-    font-size: 12px;
-    label {
-      font-size: 12px;
-      font-weight: normal;
-    }
-    div {
-      display: inline-block;
-      margin:0 10px;
-    }
-    .filtered-hosts-info, .selected-hosts-info {
-      float: left;
-      text-align: left;
-      margin-top: 8px;
-      margin-left: 17px;
-    }
-    .items-on-page {
-      label {
-        display:inline;
-      }
-      select {
-        margin-bottom: 4px;
-        margin-top: 4px;
-        width:70px;
-        font-size: 12px;
-        height: 27px;
-        padding: 4px 6px;
-      }
-    }
-    .paging_two_button {
-      a.paginate_disabled_next, a.paginate_disabled_previous {
-        color: gray;
-        &:hover {
-          color: gray;
-          text-decoration: none;
-          cursor: default;
-        }
-      }
-
-      a.paginate_next, a.paginate_previous {
-        &:hover {
-          text-decoration: none;
-          cursor: pointer;
-        }
-      }
-      a {
-        padding:0 5px;
-      }
-    }
-  }
-  .box-header {
-    margin-left: 0;
-    .btn-group {
-      float: left;
-    }
-    .btn.decommission {
-      margin-left: 5px;
-    }
-    .btn.add-host-button {
-      margin-bottom: 10px;
-      margin-top: -5px;
-    }
-    .hosts-actions {
-      margin-right: 10px;
-    }
-    .health-status-bar {
-      font-size: 0.9em;
-      margin-left: 0;
-      color: #b4b4b4;
-      a {
-        text-decoration: none;
-      }
-      .category-item:hover {
-        cursor: pointer;
-        a {
-          color: #ffffff;
-        }
-      }
-      .active {
-        a {
-          color: #ffffff;
-        }
-        background-color: #888888;
-        border-color: #888888;
-        -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25);
-        -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25);
-        box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25);
-      }
-      .category-item.active:hover {
-        a {
-          color: #ffffff;
-        }
-      }
-    }
-  }
-
-  .filter-input-width{
-    width:68%;
-    font-weight: normal;
-  }
-  .table {
-
-    thead {
-      tr {
-        th {
-          border-bottom: none;
-        }
-      }
-    }
-
-    table-layout: fixed;
-    th {
-      border-top: none;
-    }
-    th, td {
-      padding-left: 4px;
-      padding-right: 4px;
-      border-left-width: 0;
-    }
-    input[type="checkbox"] {
-      margin: -2px 0 0 0;
-    }
-
-    .sorting_asc {
-      background: url(data:image/png;base64,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) no-repeat right 50
 %;
-    }
-    .sorting_desc {
-      background: url(data:image/png;base64,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) no-repeat right 50%;
-    }
-    .sorting {
-      background: url(data:image/png;base64,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) no-repeat right 50%;
-    }
-    div.view-wrapper {
-      input[type="checkbox"], .btn-group {
-        margin-bottom: 9px;
-      }
-    }
-
-    a.ui-icon-circle-close {
-      float: right;
-      opacity: 0.2;
-      padding: 1px 0;
-      position: relative;
-      right: 0px;
-      margin-top: 3px;
-      z-index: 10;
-      &:hover {
-        opacity: 0.7;
-      }
-    }
-    .notActive {
-      a.ui-icon-circle-close {
-        visibility: hidden;
-      }
-    }
-  }
-
-  .open-group > .dropdown-menu {
-    display: block;
-  }
-  .nav-pills li.disabled {
-    display: block;
-    margin: 2px 0;
-    padding: 8px 12px;
-    line-height: 14px;
-  }
-  .box-footer .footer-pagination {
-    float: right;
-    .nav {
-      margin-bottom: 0;
-    }
-    .dropdown {
-      margin-top: 3px;
-    }
-    .dropdown {
-      margin-top: 3px;
-    }
-    .dropdown select {
-      width: 60px;
-    }
-    .page-listing a {
-      line-height: 0;
-      border: none;
-      margin: 0 10px 0 0;
-      cursor: pointer;
-      color: #0088CC;
-      padding: 8px 0;
-      float: left;
-      text-decoration: underline;
-    }
-    .page-listing a:hover {
-      text-decoration: none;
-    }
-    .page-listing {
-      width: 100px;
-      .table {
-        th.name {
-          width: 300px;
-          a.filter-label {
-            width: 57px;
-            display: block;
-            float: left;
-          }
-        }
-      }
-    }
-  }
-  .host-components-expander {
-    .icon-caret-right, .icon-caret-down {
-      vertical-align: middle;
-      margin-right: 5px;
-      margin-bottom: 2px;
-      text-decoration: none;
-    }
-  }
-  .host-components {
-    display: none;
-    padding-left: 13px;
-  }
-  .sort-wrapper .column-name {
-    cursor: pointer;
-    padding-right: 18px;
-  }
-  .table-bordered  {
-    border-left:1px solid #dddddd;
-  }
-}
-
-#createAppWizard {
-  width: 80%;
-  margin: 0 0 auto;
-  left: 10%;
-  .wizard-nav {
-    padding-left: 0px;
-  }
-  h5 {
-    font-weight: bold;
-  }
-  .slider-modal-body {
-    height: 90%;
-    max-height: 90%;
-    .wizard-content{
-      min-height: 95%;
-      padding-bottom: 49px;
-      background-color: #ffffff;
-    }
-    .container-fluid {
-      height: 100%;
-      .row {
-        height: 100%;
-      }
-      .btn-area {
-        position: absolute;
-        right: 19px;
-        bottom: 19px;
-        left: 19px;
-      }
-    }
-  }
-  .next-btn {
-    margin-left: 5px;
-  }
-  .type-select {
-    width: 90%;
-    min-height: 250px;
-  }
-  #app-name-input {
-    margin-left: 10px;
-  }
-  #configs-text-area {
-    margin-bottom: 10px;
-    height: 225px;
-  }
-  #step4 {
-    ul {
-      list-style: none;
-    }
-    pre {
-      margin-left: 30px;
-      max-height: 124px;
-    }
-  }
-  #step2 {
-    .table-container {
-      max-height: 248px;
-      border: 1px solid #e3e3e3;
-      padding: 5px;
-      border-radius: 4px;
-      overflow: hidden;
-      .components-table {
-        width: 100%;
-        border-spacing: 10px;
-        border-collapse: separate;
-        input{
-          width: 124px;
-        }
-      }
-      margin-bottom: 30px;
-    }
-  }
-  #step1 {
-    .app-types-alert {
-      margin-top: 20px;
-    }
-  }
-  .app-wiz-configs {
-    .accordion-toggle {
-      display: block;
-    }
-    .panel-heading{
-      .icon{
-        width: 23px;
-      }
-    }
-  }
-}
-
-.app-page {
-  .wrap-tabs {
-    margin-top: 30px;
-  }
-  .quick-links-wrapper {
-    .nav-pills.move {
-      float: right;
-      width:135px;
-      &>li {
-        position: absolute;
-      }
-    }
-    .dropdown-submenu {
-      &> a:after {
-        border-left-color: #333;
-      }
-    }
-    .nav li.dropdown.open {
-      .dropdown-toggle{
-        color: #005580;
-        background-color: #eeeeee;
-        border-color: #eeeeee;
-        -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-        -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-      }
-      a:hover .caret {
-        border-top-color: #005580;
-        border-bottom-color: #005580;
-      }
-      .caret {
-        border-top-color: #005580;
-        border-bottom-color: #005580;
-      }
-    }
-  }
-}
-
-.slider-modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  z-index: 1050;
-  width: 560px;
-  margin: -250px 0 0 -280px;
-  overflow: auto;
-  background-color: #ffffff;
-  border: 1px solid #999;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  *border: 1px solid #999;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
-  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding-box;
-  background-clip: padding-box;
-}
-
-.slider-modal.fade {
-  top: -25%;
-  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-  -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-  -o-transition: opacity 0.3s linear, top 0.3s ease-out;
-  transition: opacity 0.3s linear, top 0.3s ease-out;
-}
-
-.slider-modal.fade.in {
-  top: 50%;
-}
-
-.slider-modal-header {
-  padding: 9px 15px;
-  border-bottom: 1px solid #eee;
-}
-
-.slider-modal-header .close {
-  margin-top: 2px;
-}
-
-.slider-modal-header h3 {
-  margin: 0;
-  line-height: 30px;
-}
-
-.slider-modal-body {
-  max-height: 400px;
-  padding: 15px;
-  overflow-y: auto;
-}
-
-.slider-modal-form {
-  margin-bottom: 0;
-}
-
-.slider-modal-footer {
-  padding: 14px 15px 15px;
-  margin-bottom: 0;
-  text-align: right;
-  background-color: #f5f5f5;
-  border-top: 1px solid #ddd;
-  -webkit-border-radius: 0 0 6px 6px;
-  -moz-border-radius: 0 0 6px 6px;
-  border-radius: 0 0 6px 6px;
-  *zoom: 1;
-  -webkit-box-shadow: inset 0 1px 0 #ffffff;
-  -moz-box-shadow: inset 0 1px 0 #ffffff;
-  box-shadow: inset 0 1px 0 #ffffff;
-}
-
-.slider-modal-footer:before,
-.slider-modal-footer:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.modal-footer:after {
-  clear: both;
-}
-
-.slider-modal-footer .btn + .btn {
-  margin-bottom: 0;
-  margin-left: 5px;
-}
-
-.slider-modal-footer .btn-group .btn + .btn {
-  margin-left: -1px;
-}
-
-
-.modal {
-  overflow-y: hidden;
-}
-.modal-backdrop {
-  opacity: 0.8;
-}
-.modal-backdrop.in {
-  opacity:0;
-}
-
-/**
- * App Summary Page
- */
-.app_summary {
-  padding-left: 0;
-  table {
-    &.no-borders {
-      td {
-        border-width: 0;
-      }
-    }
-    td:nth-child(2) span{
-      word-break: break-all;
-    }
-  }
-  .panel-heading {
-    font-weight: 700;
-  }
-  .panel-summary {
-    min-height: 400px;
-    td:first-child {
-      text-align: right;
-    }
-  }
-  .panel-components {
-    .status {
-      display: inline-block;
-      width: 25px;
-    }
-    .icon-ok-sign {
-      color: #5ab400;
-    }
-    .icon-warning-sign {
-      color: #ff0000;
-    }
-    .panel-body{
-      /*max-height: 400px;
-      overflow-x: auto;*/
-    }
-  }
-  .panel-link {
-    margin-top: -5px;
-    margin-right: -7px;
-  }
-}
-
-.chart-container {
-  cursor: default;
-
-  position: relative;
-  margin: 20px 15px 0px 15px;
-
-  .chart {
-    position: relative;
-    z-index: 1;
-  }
-  .chart-y-axis {
-    position: absolute;
-    top: 0;
-    bottom: 0px;
-    width: 100px;
-    z-index: 2;
-    margin-top: 15px;
-  }
-  .chart-x-axis {
-    position: absolute;
-    top: 180px;
-    left: 35%;
-    width: 30%;
-    z-index: 2;
-  }
-  .x_tick {
-    margin-top: 5px;
-    .title {
-      padding: 0 2px 0 2px;
-      opacity: 1 !important;
-      top: 148px;
-    }
-  }
-  svg {
-    g {
-      g:nth-child(1) {
-        display: none;
-      }
-    }
-  }
-  text {
-    font-weight: 700;
-    opacity: 1 !important;
-  }
-  .chart-legend {
-    font-family: 'Courier New';
-    position: absolute;
-    top: 180px;
-    z-index: 3;
-  }
-  .rickshaw_legend {
-    background-color: #999 !important;
-    li:hover {
-      background-color: #999 !important;
-    }
-  }
-  .rickshaw_legend:empty {
-    padding: 0;
-  }
-  .rickshaw_graph {
-    .x_tick {
-      .title {
-        bottom: -6px;
-        opacity: 0.75;
-      }
-    }
-  }
-  .chart-overlay {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    z-index: 5;
-  }
-  .chart-title {
-    text-align: center;
-    margin-top: 20px;
-  }
-}
-
-.app_configs {
-  a.accordion-toggle {
-    display: block;
-  }
-  .panel-heading{
-    .icon{
-      width: 24px;
-    }
-  }
-  .row {
-    .table-row();
-    textarea {
-      height: 200px;
-      padding-left: 5px;
-      padding-right: 5px;
-      resize: none;
-    }
-    textarea[disabled] {
-      cursor: not-allowed;
-      background-color: #eeeeee;
-    }
-    input[disabled] {
-      cursor: not-allowed;
-      background-color: #eeeeee;
-    }
-    .property-name {
-      word-wrap: break-word;
-    }
-  }
-}
-
-.app-alerts {
-  overflow-y: auto;
-  ul {
-    padding-left: 0;
-    margin-bottom: 0;
-  }
-  li {
-    border-bottom: 1px solid #eee;
-    list-style: none;
-    padding: 5px;
-    background-position: 14px 9px;
-    background-repeat: no-repeat;
-    .date-time {
-      float: right;
-    }
-    p {
-      margin-bottom: 2px;
-    }
-    .container-fluid {
-      padding-left: 10px;
-      padding-right: 10px;
-    }
-    .title {
-      font-weight: normal;
-      font-size: 13px;
-    }
-    .row-fluid [class*="span"] {
-      min-height: 0px;
-    }
-    .date-time {
-      color: #999;
-      font-style: italic;
-      font-size: small;
-      text-align: right;
-    }
-    .message {
-      font-size: 12px;
-      color: #777;
-      word-break: break-all;
-      padding-right: 15px;
-    }
-    .serviceLink {
-      padding-left: 7px;
-    }
-  }
-  .icon-ok {
-    color: #5AB400;
-  }
-  .icon-remove {
-    color: #FF4B4B;
-  }
-  .icon-warning-sign {
-    color: #FDB82F;
-  }
-  .icon-question-sign {
-    color: #999;
-  }
-}
-
-.flex-popup {
-  .row {
-    .table-row();
-  }
-}
-
-.btn-area {
-  .btn{
-    display: inline-block;
-    padding: 4px 14px;
-    margin-bottom: 0;
-    font-size: 14px;
-    line-height: 20px;
-    color: #333333;
-    text-align: center;
-    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-    vertical-align: middle;
-    cursor: pointer;
-    background-color: #f5f5f5;
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
-    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
-    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
-    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
-    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
-    background-repeat: repeat-x;
-    border: 1px solid #bbbbbb;
-    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
-    border-bottom-color: #a2a2a2;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
-    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  }
-  .btn:hover {
-    color: #333333;
-    text-decoration: none;
-    background-color: #e6e6e6;
-    background-position: 0 -15px;
-    -webkit-transition: background-position 0.1s linear;
-    -moz-transition: background-position 0.1s linear;
-    -o-transition: background-position 0.1s linear;
-    transition: background-position 0.1s linear;
-  }
-  .btn.active, .btn:active {
-    background-color: #e6e6e6;
-    background-color: #d9d9d9 \9;
-    background-image: none;
-    outline: 0;
-    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-  }
-  .btn-success {
-    color: #ffffff;
-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-    background-color: #5bb75b;
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
-    background-image: -webkit-linear-gradient(top, #62c462, #51a351);
-    background-image: -o-linear-gradient(top, #62c462, #51a351);
-    background-image: linear-gradient(to bottom, #62c462, #51a351);
-    background-image: -moz-linear-gradient(top, #62c462, #51a351);
-    background-repeat: repeat-x;
-    border-color: #51a351 #51a351 #387038;
-    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
-    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
-  }
-  .btn.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
-    color: #ffffff;
-    background-color: #51a351;
-  }
-}
-
-.modal-header {
-  padding: 9px 15px;
-  border-bottom: 1px solid #eee;
-}
-.modal-title {
-  line-height: 30px;
-  font-size: 24px;
-  font-family: inherit;
-  font-weight: bold;
-  color: inherit;
-  text-rendering: optimizelegibility;
-}
-.modal-body{
-  padding: 15px;
-}
-.modal-footer {
-  margin-top: 0px;
-  padding: 14px 15px 15px;
-  margin-bottom: 0;
-  text-align: right;
-  background-color: #f5f5f5;
-  border-top: 1px solid #ddd;
-  -webkit-border-radius: 0 0 6px 6px;
-  -moz-border-radius: 0 0 6px 6px;
-  border-radius: 0 0 6px 6px;
-  -webkit-box-shadow: inset 0 1px 0 #ffffff;
-  -moz-box-shadow: inset 0 1px 0 #ffffff;
-  box-shadow: inset 0 1px 0 #ffffff;
-
-  .btn-area();
-
-}
-.slider-app-title {
-  font-style: italic;
-  cursor: pointer;
-}
-
-.api-error {
-  max-height: 403px;
-  word-wrap: break-word;
-  overflow: auto;
-}
-
-.dropdown-submenu {
-  position:relative;
-}
-.dropdown-submenu>.dropdown-menu {
-  top:0;
-  left:-100%;
-  margin-top:-6px;
-  margin-left:-1px;
-  -webkit-border-radius:6px 0 6px 6px;
-  -moz-border-radius:6px 0 6px 6px;
-  border-radius:6px 0 6px 6px;
-}
-.dropdown-submenu:hover>.dropdown-menu {
-  display:block;
-}
-.dropdown-submenu>a:before {
-  display:block;
-  content:" ";
-  float:left;
-  width:0;
-  height:0;
-  border-color:transparent;
-  border-style:solid;
-  border-width:5px 5px 5px 0px;
-  border-right-color:#cccccc;
-  margin-top:5px;
-  margin-left:-10px;
-}
-.dropdown-submenu:hover>a:after {
-  border-left-color:#ffffff;
-}
\ No newline at end of file
+@import 'common.less';
+@import 'old-bootstrap.less';
+@import 'wizard.less';
+@import 'apps-table.less';
+@import 'app.less';

http://git-wip-us.apache.org/repos/asf/ambari/blob/9074f835/contrib/views/slider/src/main/resources/ui/app/styles/apps-table.less
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/styles/apps-table.less b/contrib/views/slider/src/main/resources/ui/app/styles/apps-table.less
new file mode 100644
index 0000000..928cf1f
--- /dev/null
+++ b/contrib/views/slider/src/main/resources/ui/app/styles/apps-table.less
@@ -0,0 +1,320 @@
+/**
+ * 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.
+ */
+
+
+#slider-apps-table  {
+
+  #slider-table {
+    border-bottom: 1px solid #ddd;
+    border-left: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    font-size: 13px\9;
+    table-layout: fixed;
+
+    th {
+      width: 17.5%!important;
+    }
+
+    select {
+      height: 23px;
+      margin-bottom: 10px;
+      font-size: 75%;
+    }
+
+    .label-row {
+      font-size: 0.9em;
+      th {
+        padding: 4px;
+        border-bottom: none !important;
+      }
+      .active-sort {
+        color: #555555;
+        text-decoration: none;
+        background-color: #e5e5e5;
+        -webkit-box-shadow: inset 0 5px 8px rgba(0, 0, 0, 0.100);
+        -moz-box-shadow: inset 0 5px 8px rgba(0, 0, 0, 0.100);
+        box-shadow: inset 0 5px 8px rgba(0, 0, 0, 0.100);
+      }
+    }
+
+    #filter-row {
+      th {
+        padding: 0 0 0 4px;
+      }
+      .active-filter {
+        color: #555555;
+        text-decoration: none;
+        background-color: #e5e5e5;
+        -webkit-box-shadow: inset 0 -5px 8px rgba(0, 0, 0, 0.05);
+        -moz-box-shadow: inset 0 -5px 8px rgba(0, 0, 0, 0.05);
+        box-shadow: inset 0 -5px 8px rgba(0, 0, 0, 0.05);
+      }
+      input {
+        font-size: 12px;
+        height: 24px;
+        margin-bottom: 10px;
+      }
+      .filter-btn {
+        color: #999999;
+        font-size: 12px;
+        line-height: 14px;
+        padding-left: 6px;
+        text-align: left;
+        width: 100px;
+        .icon-filter {
+          color: #999999;
+        }
+      }
+    }
+    thead {
+      background: none repeat scroll 0 0 #F8F8F8;
+      border-top: 1px solid #ddd;
+    }
+  }
+  .page-bar {
+    border: 1px solid #E4E4E4;
+    color: #7B7B7B;
+    text-align: right;
+    font-size: 12px;
+    label {
+      font-size: 12px;
+      font-weight: normal;
+    }
+    div {
+      display: inline-block;
+      margin:0 10px;
+    }
+    .filtered-hosts-info, .selected-hosts-info {
+      float: left;
+      text-align: left;
+      margin-top: 8px;
+      margin-left: 17px;
+    }
+    .items-on-page {
+      label {
+        display:inline;
+      }
+      select {
+        margin-bottom: 4px;
+        margin-top: 4px;
+        width:70px;
+        font-size: 12px;
+        height: 27px;
+        padding: 4px 6px;
+      }
+    }
+    .paging_two_button {
+      a.paginate_disabled_next, a.paginate_disabled_previous {
+        color: gray;
+        &:hover {
+          color: gray;
+          text-decoration: none;
+          cursor: default;
+        }
+      }
+
+      a.paginate_next, a.paginate_previous {
+        &:hover {
+          text-decoration: none;
+          cursor: pointer;
+        }
+      }
+      a {
+        padding:0 5px;
+      }
+    }
+  }
+  .box-header {
+    margin-left: 0;
+    .btn-group {
+      float: left;
+    }
+    .btn.decommission {
+      margin-left: 5px;
+    }
+    .btn.add-host-button {
+      margin-bottom: 10px;
+      margin-top: -5px;
+    }
+    .hosts-actions {
+      margin-right: 10px;
+    }
+    .health-status-bar {
+      font-size: 0.9em;
+      margin-left: 0;
+      color: #b4b4b4;
+      a {
+        text-decoration: none;
+      }
+      .category-item:hover {
+        cursor: pointer;
+        a {
+          color: #ffffff;
+        }
+      }
+      .active {
+        a {
+          color: #ffffff;
+        }
+        background-color: #888888;
+        border-color: #888888;
+        -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25);
+        -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25);
+        box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25);
+      }
+      .category-item.active:hover {
+        a {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  .filter-input-width{
+    width:68%;
+    font-weight: normal;
+  }
+  .table {
+
+    thead {
+      tr {
+        th {
+          border-bottom: none;
+        }
+      }
+    }
+
+    table-layout: fixed;
+    th {
+      border-top: none;
+    }
+    th, td {
+      padding-left: 4px;
+      padding-right: 4px;
+      border-left-width: 0;
+    }
+    input[type="checkbox"] {
+      margin: -2px 0 0 0;
+    }
+
+    .sorting_asc {
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAKQWlDQ1BJQ0MgUHJvZmlsZQAASA2dlndUU9kWh8+9N73QEiIgJfQaegkg0jtIFQRRiUmAUAKGhCZ2RAVGFBEpVmRUwAFHhyJjRRQLg4Ji1wnyEFDGwVFEReXdjGsJ7601896a/cdZ39nnt9fZZ+9917oAUPyCBMJ0WAGANKFYFO7rwVwSE8vE9wIYEAEOWAHA4WZmBEf4RALU/L09mZmoSMaz9u4ugGS72yy/UCZz1v9/kSI3QyQGAApF1TY8fiYX5QKUU7PFGTL/BMr0lSkyhjEyFqEJoqwi48SvbPan5iu7yZiXJuShGlnOGbw0noy7UN6aJeGjjAShXJgl4GejfAdlvVRJmgDl9yjT0/icTAAwFJlfzOcmoWyJMkUUGe6J8gIACJTEObxyDov5OWieAHimZ+SKBIlJYqYR15hp5ejIZvrxs1P5YjErlMNN4Yh4TM/0tAyOMBeAr2+WRQElWW2ZaJHtrRzt7VnW5mj5v9nfHn5T/T3IevtV8Sbsz55BjJ5Z32zsrC+9FgD2JFqbHbO+lVUAtG0GQOXhrE/vIADyBQC03pzzHoZsXpLE4gwnC4vs7GxzAZ9rLivoN/ufgm/Kv4Y595nL7vtWO6YXP4EjSRUzZUXlpqemS0TMzAwOl89k/fcQ/+PAOWnNycMsnJ/AF/GF6FVR6JQJhIlou4U8gViQLmQKhH/V4X8YNicHGX6daxRodV8AfYU5ULhJB8hvPQBDIwMkbj96An3rWxAxCsi+vGitka9zjzJ6/uf6Hwtcim7hTEEiU+b2DI9kciWiLBmj34RswQISkAd0oAo0gS4wAixgDRyAM3AD3iAAhIBIEAOWAy5IAmlABLJBPtgACkEx2AF2g2pwANSBetAEToI2cAZcBFfADXALDIBHQAqGwUswA
 d6BaQiC8BAVokGqkBakD5lC1hAbWgh5Q0FQOBQDxUOJkBCSQPnQJqgYKoOqoUNQPfQjdBq6CF2D+qAH0CA0Bv0BfYQRmALTYQ3YALaA2bA7HAhHwsvgRHgVnAcXwNvhSrgWPg63whfhG/AALIVfwpMIQMgIA9FGWAgb8URCkFgkAREha5EipAKpRZqQDqQbuY1IkXHkAwaHoWGYGBbGGeOHWYzhYlZh1mJKMNWYY5hWTBfmNmYQM4H5gqVi1bGmWCesP3YJNhGbjS3EVmCPYFuwl7ED2GHsOxwOx8AZ4hxwfrgYXDJuNa4Etw/XjLuA68MN4SbxeLwq3hTvgg/Bc/BifCG+Cn8cfx7fjx/GvyeQCVoEa4IPIZYgJGwkVBAaCOcI/YQRwjRRgahPdCKGEHnEXGIpsY7YQbxJHCZOkxRJhiQXUiQpmbSBVElqIl0mPSa9IZPJOmRHchhZQF5PriSfIF8lD5I/UJQoJhRPShxFQtlOOUq5QHlAeUOlUg2obtRYqpi6nVpPvUR9Sn0vR5Mzl/OX48mtk6uRa5Xrl3slT5TXl3eXXy6fJ18hf0r+pvy4AlHBQMFTgaOwVqFG4bTCPYVJRZqilWKIYppiiWKD4jXFUSW8koGStxJPqUDpsNIlpSEaQtOledK4tE20Otpl2jAdRzek+9OT6cX0H+i99AllJWVb5SjlHOUa5bPKUgbCMGD4M1IZpYyTjLuMj/M05rnP48/bNq9pXv+8KZX5Km4qfJUilWaVAZWPqkxVb9UU1Z2qbapP1DBqJmphatlq+9Uuq43Pp893ns+dXzT/5PyH6rC6iXq4+mr1w+o96pMamhq+GhkaVRqXNMY1GZpumsma5ZrnNMe0aFoLtQRa5VrntV4wlZnuzFRmJbOLOaGtru2nLdE+pN2rPa1jqLNYZ6NOs84TXZIuWzdBt1y3U3dCT0svWC9fr1HvoT5Rn62fpL9Hv1t/ysDQINpgi0GbwaihiqG/YZ5ho+
 FjI6qRq9Eqo1qjO8Y4Y7ZxivE+41smsImdSZJJjclNU9jU3lRgus+0zwxr5mgmNKs1u8eisNxZWaxG1qA5wzzIfKN5m/krCz2LWIudFt0WXyztLFMt6ywfWSlZBVhttOqw+sPaxJprXWN9x4Zq42Ozzqbd5rWtqS3fdr/tfTuaXbDdFrtOu8/2DvYi+yb7MQc9h3iHvQ732HR2KLuEfdUR6+jhuM7xjOMHJ3snsdNJp9+dWc4pzg3OowsMF/AX1C0YctFx4bgccpEuZC6MX3hwodRV25XjWuv6zE3Xjed2xG3E3dg92f24+ysPSw+RR4vHlKeT5xrPC16Il69XkVevt5L3Yu9q76c+Oj6JPo0+E752vqt9L/hh/QL9dvrd89fw5/rX+08EOASsCegKpARGBFYHPgsyCRIFdQTDwQHBu4IfL9JfJFzUFgJC/EN2hTwJNQxdFfpzGC4sNKwm7Hm4VXh+eHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4+ziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD/iRPCqeVMrvRfuXflBNeTu4f7kufGK+eN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl/ygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ/KUcwR5vTkmuRuyx3J88n7fjVmNXd1Z752/ob8wTXuaw6thdauXNu5Tnddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrblyJe0fViy+KK4k8l3JLr31l9V/ndzPaE7b2l9qX7d+B2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3F
 gD2mPZI+0MqiyvUqvakfVp+qk6oEaj5rmvep7t+2d2sfb17/fbX/TAY0DxQc+HhQcvH/I91BrrUFtxWHc4azDz+ui6rq/Z39ff0TtSPGRz0eFR6XHwo911TvU1zeoN5Q2wo2SxrHjccdv/eD1Q3sTq+lQM6O5+AQ4ITnx4sf4H++eDDzZeYp9qukn/Z/2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0/m/989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66tOTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX+x+aem172296XCz/ZbjrY6+BX3n+l37L972un3ljv+dGwOLBvruLr57/17cPel93v3RB6kPXj/Mejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy//lfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0+OFvyn+tveV0auffnf7vWdiycTwa9HrmT9K3qi+OfrW9m3nZOjk03dp76anit6rvj/2gf2h+2P0x5Hp7E/4T5WfjT93fAn88ngmbWbm3/eE8/syOll+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA4klEQVQ4Ee2RPw8BQRDF3x4dCokL0SqUKqVSr/ZRruWTaEnUWgkShwji3yWCwoXQOCKCHXPq24hSmGJ3srvz5vdmga8NIhK1GhW2B8q+M+F/96DRRHE0hUEagegUEyK4VdVoqgv3fL2h3HAMQ3I+sQDLCpRdUlWNUux8prjZltXTRUIQ4X4T6HSRcRwkPxLj7r7ZHPXFSgO7A3xgwQfsncRghJKKzpPMPiBv9pBwDQmhgaTgnRU5zD7S86U3necH2CtQJIyKHkWKyXTGCrFZh4XtxxWt4x6eda9u/+U/gZ+dwBODrVwv7HA8iwAAAABJRU5ErkJggg==) no-repeat right 50
 %;
+    }
+    .sorting_desc {
+      background: url(data:image/png;base64,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) no-repeat right 50%;
+    }
+    .sorting {
+      background: url(data:image/png;base64,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) no-repeat right 50%;
+    }
+    div.view-wrapper {
+      input[type="checkbox"], .btn-group {
+        margin-bottom: 9px;
+      }
+    }
+
+    a.ui-icon-circle-close {
+      float: right;
+      opacity: 0.2;
+      padding: 1px 0;
+      position: relative;
+      right: 0px;
+      margin-top: 3px;
+      z-index: 10;
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+    .notActive {
+      a.ui-icon-circle-close {
+        visibility: hidden;
+      }
+    }
+  }
+
+  .open-group > .dropdown-menu {
+    display: block;
+  }
+  .nav-pills li.disabled {
+    display: block;
+    margin: 2px 0;
+    padding: 8px 12px;
+    line-height: 14px;
+  }
+  .box-footer .footer-pagination {
+    float: right;
+    .nav {
+      margin-bottom: 0;
+    }
+    .dropdown {
+      margin-top: 3px;
+    }
+    .dropdown {
+      margin-top: 3px;
+    }
+    .dropdown select {
+      width: 60px;
+    }
+    .page-listing a {
+      line-height: 0;
+      border: none;
+      margin: 0 10px 0 0;
+      cursor: pointer;
+      color: #0088CC;
+      padding: 8px 0;
+      float: left;
+      text-decoration: underline;
+    }
+    .page-listing a:hover {
+      text-decoration: none;
+    }
+    .page-listing {
+      width: 100px;
+      .table {
+        th.name {
+          width: 300px;
+          a.filter-label {
+            width: 57px;
+            display: block;
+            float: left;
+          }
+        }
+      }
+    }
+  }
+  .host-components-expander {
+    .icon-caret-right, .icon-caret-down {
+      vertical-align: middle;
+      margin-right: 5px;
+      margin-bottom: 2px;
+      text-decoration: none;
+    }
+  }
+  .host-components {
+    display: none;
+    padding-left: 13px;
+  }
+  .sort-wrapper .column-name {
+    cursor: pointer;
+    padding-right: 18px;
+  }
+  .table-bordered  {
+    border-left:1px solid #dddddd;
+  }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/9074f835/contrib/views/slider/src/main/resources/ui/app/styles/common.less
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/styles/common.less b/contrib/views/slider/src/main/resources/ui/app/styles/common.less
new file mode 100644
index 0000000..a61805d
--- /dev/null
+++ b/contrib/views/slider/src/main/resources/ui/app/styles/common.less
@@ -0,0 +1,102 @@
+/**
+ * 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.
+ */
+
+
+.table-row() {
+  margin: 10px 0;
+}
+
+html {
+  overflow-y: scroll;
+}
+.icon-minus-sign {
+  color: #FF4B4B;
+}
+.tooltip {
+  z-index: 1500;
+}
+.popover {
+  max-width: 800px;
+  &.bottom {
+    left: 5px;
+  }
+}
+
+.slider-name-popover {
+  max-width: 600px !important;
+  .row {
+    .table-row();
+  }
+}
+
+a {
+  cursor: pointer;
+}
+
+select {
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  color: #555555;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+
+.well {
+  border-radius: 0px;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+.nav-pills {
+  &>li {
+    &> a {
+      border-radius: 0px;
+      -webkit-border-radius: 0px;
+      -moz-border-radius: 0px;
+    }
+    &.active {
+      &> a, &> a:hover, &> a:focus {
+        background-color: #666666;
+
+      }
+    }
+  }
+}
+
+.slider-header {
+  overflow: hidden;
+  .box-header {
+    padding-top: 20px;
+  }
+}
+
+
+
+.modal {
+  overflow-y: hidden;
+}
+.modal-backdrop {
+  opacity: 0.8;
+}
+.modal-backdrop.in {
+  opacity:0;
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/9074f835/contrib/views/slider/src/main/resources/ui/app/styles/old-bootstrap.less
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/styles/old-bootstrap.less b/contrib/views/slider/src/main/resources/ui/app/styles/old-bootstrap.less
new file mode 100644
index 0000000..fde5768
--- /dev/null
+++ b/contrib/views/slider/src/main/resources/ui/app/styles/old-bootstrap.less
@@ -0,0 +1,164 @@
+/**
+ * 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.
+ */
+
+
+.btn-area {
+  .btn{
+    display: inline-block;
+    padding: 4px 14px;
+    margin-bottom: 0;
+    font-size: 14px;
+    line-height: 20px;
+    color: #333333;
+    text-align: center;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    vertical-align: middle;
+    cursor: pointer;
+    background-color: #f5f5f5;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+    background-repeat: repeat-x;
+    border: 1px solid #bbbbbb;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+    border-bottom-color: #a2a2a2;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+  .btn:hover {
+    color: #333333;
+    text-decoration: none;
+    background-color: #e6e6e6;
+    background-position: 0 -15px;
+    -webkit-transition: background-position 0.1s linear;
+    -moz-transition: background-position 0.1s linear;
+    -o-transition: background-position 0.1s linear;
+    transition: background-position 0.1s linear;
+  }
+  .btn.active, .btn:active {
+    background-color: #e6e6e6;
+    background-color: #d9d9d9 \9;
+    background-image: none;
+    outline: 0;
+    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+  .btn-success {
+    color: #ffffff;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    background-color: #5bb75b;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
+    background-image: -webkit-linear-gradient(top, #62c462, #51a351);
+    background-image: -o-linear-gradient(top, #62c462, #51a351);
+    background-image: linear-gradient(to bottom, #62c462, #51a351);
+    background-image: -moz-linear-gradient(top, #62c462, #51a351);
+    background-repeat: repeat-x;
+    border-color: #51a351 #51a351 #387038;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
+    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+  }
+  .btn.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
+    color: #ffffff;
+    background-color: #51a351;
+  }
+}
+
+.modal-header {
+  padding: 9px 15px;
+  border-bottom: 1px solid #eee;
+}
+.modal-title {
+  line-height: 30px;
+  font-size: 24px;
+  font-family: inherit;
+  font-weight: bold;
+  color: inherit;
+  text-rendering: optimizelegibility;
+}
+.modal-body{
+  padding: 15px;
+}
+.modal-footer {
+  margin-top: 0px;
+  padding: 14px 15px 15px;
+  margin-bottom: 0;
+  text-align: right;
+  background-color: #f5f5f5;
+  border-top: 1px solid #ddd;
+  -webkit-border-radius: 0 0 6px 6px;
+  -moz-border-radius: 0 0 6px 6px;
+  border-radius: 0 0 6px 6px;
+  -webkit-box-shadow: inset 0 1px 0 #ffffff;
+  -moz-box-shadow: inset 0 1px 0 #ffffff;
+  box-shadow: inset 0 1px 0 #ffffff;
+
+  .btn-area();
+
+}
+.slider-app-title {
+  font-style: italic;
+  cursor: pointer;
+}
+
+.api-error {
+  max-height: 403px;
+  word-wrap: break-word;
+  overflow: auto;
+}
+
+.dropdown-submenu {
+  position:relative;
+}
+.dropdown-submenu>.dropdown-menu {
+  top:0;
+  left:-100%;
+  margin-top:-6px;
+  margin-left:-1px;
+  -webkit-border-radius:6px 0 6px 6px;
+  -moz-border-radius:6px 0 6px 6px;
+  border-radius:6px 0 6px 6px;
+}
+.dropdown-submenu:hover>.dropdown-menu {
+  display:block;
+}
+.dropdown-submenu>a:before {
+  display:block;
+  content:" ";
+  float:left;
+  width:0;
+  height:0;
+  border-color:transparent;
+  border-style:solid;
+  border-width:5px 5px 5px 0px;
+  border-right-color:#cccccc;
+  margin-top:5px;
+  margin-left:-10px;
+}
+.dropdown-submenu:hover>a:after {
+  border-left-color:#ffffff;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/9074f835/contrib/views/slider/src/main/resources/ui/app/styles/wizard.less
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/styles/wizard.less b/contrib/views/slider/src/main/resources/ui/app/styles/wizard.less
new file mode 100644
index 0000000..c531865
--- /dev/null
+++ b/contrib/views/slider/src/main/resources/ui/app/styles/wizard.less
@@ -0,0 +1,205 @@
+/**
+ * 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-once 'common.less';
+
+#createAppWizard {
+  width: 80%;
+  margin: 0 0 auto;
+  left: 10%;
+  .wizard-nav {
+    padding-left: 0px;
+  }
+  h5 {
+    font-weight: bold;
+  }
+  .slider-modal-body {
+    height: 90%;
+    max-height: 90%;
+    .wizard-content{
+      min-height: 95%;
+      padding-bottom: 49px;
+      background-color: #ffffff;
+    }
+    .container-fluid {
+      height: 100%;
+      .row {
+        height: 100%;
+      }
+      .btn-area {
+        position: absolute;
+        right: 19px;
+        bottom: 19px;
+        left: 19px;
+      }
+    }
+  }
+  .next-btn {
+    margin-left: 5px;
+  }
+  #configs-text-area {
+    margin-bottom: 10px;
+    height: 225px;
+  }
+  #step4 {
+    ul {
+      list-style: none;
+    }
+    pre {
+      margin-left: 30px;
+      max-height: 124px;
+    }
+  }
+  #step2 {
+    .table-container {
+      max-height: 248px;
+      border: 1px solid #e3e3e3;
+      padding: 5px;
+      border-radius: 4px;
+      overflow: hidden;
+      .components-table {
+        width: 100%;
+        border-spacing: 10px;
+        border-collapse: separate;
+        input[type="text"]{
+          width: 100px;
+        }
+      }
+      margin-bottom: 30px;
+    }
+  }
+  #step1 {
+    select {
+      padding: 4px 0;
+    }
+    .row {
+      .table-row();
+    }
+    .app-types-alert {
+      margin-top: 20px;
+    }
+  }
+  .pseudo-label {
+    display: inline-block;
+  }
+  .app-wiz-configs {
+    .accordion-toggle {
+      display: block;
+    }
+    .panel-heading{
+      .icon{
+        width: 23px;
+      }
+    }
+  }
+}
+
+
+.slider-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 1050;
+  width: 560px;
+  margin: -250px 0 0 -280px;
+  overflow: auto;
+  background-color: #ffffff;
+  border: 1px solid #999;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  *border: 1px solid #999;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding-box;
+  background-clip: padding-box;
+}
+
+.slider-modal.fade {
+  top: -25%;
+  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
+  -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
+  -o-transition: opacity 0.3s linear, top 0.3s ease-out;
+  transition: opacity 0.3s linear, top 0.3s ease-out;
+}
+
+.slider-modal.fade.in {
+  top: 50%;
+}
+
+.slider-modal-header {
+  padding: 9px 15px;
+  border-bottom: 1px solid #eee;
+}
+
+.slider-modal-header .close {
+  margin-top: 2px;
+}
+
+.slider-modal-header h3 {
+  margin: 0;
+  line-height: 30px;
+}
+
+.slider-modal-body {
+  max-height: 400px;
+  padding: 15px;
+  overflow-y: auto;
+}
+
+.slider-modal-form {
+  margin-bottom: 0;
+}
+
+.slider-modal-footer {
+  padding: 14px 15px 15px;
+  margin-bottom: 0;
+  text-align: right;
+  background-color: #f5f5f5;
+  border-top: 1px solid #ddd;
+  -webkit-border-radius: 0 0 6px 6px;
+  -moz-border-radius: 0 0 6px 6px;
+  border-radius: 0 0 6px 6px;
+  *zoom: 1;
+  -webkit-box-shadow: inset 0 1px 0 #ffffff;
+  -moz-box-shadow: inset 0 1px 0 #ffffff;
+  box-shadow: inset 0 1px 0 #ffffff;
+}
+
+.slider-modal-footer:before,
+.slider-modal-footer:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.modal-footer:after {
+  clear: both;
+}
+
+.slider-modal-footer .btn + .btn {
+  margin-bottom: 0;
+  margin-left: 5px;
+}
+
+.slider-modal-footer .btn-group .btn + .btn {
+  margin-left: -1px;
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/9074f835/contrib/views/slider/src/main/resources/ui/app/templates/createAppWizard/step1.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/slider/src/main/resources/ui/app/templates/createAppWizard/step1.hbs b/contrib/views/slider/src/main/resources/ui/app/templates/createAppWizard/step1.hbs
index e8ccebb..1448760 100644
--- a/contrib/views/slider/src/main/resources/ui/app/templates/createAppWizard/step1.hbs
+++ b/contrib/views/slider/src/main/resources/ui/app/templates/createAppWizard/step1.hbs
@@ -16,34 +16,142 @@
 * limitations under the License.
 }}
 <div id="step1">
-  <h4>{{t wizard.step1.header}}</h4>
-  <div class="row">
-    <div class="col-xs-6">
-      {{view view.availableTypesSelect contentBinding="controller.availableTypes" optionLabelPath="content.displayName" multiple="true" class="type-select"}}
+  <form role="form" class="form-horizontal">
+    <!-- Available Applications -->
+    <h3>{{t wizard.step1.header}}</h3>
+    <div class="form-group row">
+      <div class="col-xs-3">
+        <label class="control-label">{{t wizard.step1.appTypes}}</label>
+      </div>
+      <div class="col-xs-7">
+        {{view
+          Em.Select
+          contentBinding="controller.availableTypes"
+          optionLabelPath="content.displayName"
+          class="form-control type-select"
+          valueBinding="controller.selectedType"
+        }}
+      </div>
     </div>
-    <div class="col-xs-6">
-      <div {{bind-attr class=":control-group controller.isNameError:error"}}>
-        <label>{{t common.name}}: {{input id="app-name-input" valueBinding="controller.newAppName"}}</label>
+    <div class="form-group row">
+      <div class="col-xs-3">
+        <label class=" control-label">{{t wizard.step1.description}}</label>
       </div>
-      {{#if controller.isNameError}}
-        <div class="alert alert-danger">
-          {{controller.nameErrorMessage}}
+      <div class="col-xs-7">
+        <span class="pseudo-label control-label">{{controller.typeDescription}}</span>
+      </div>
+    </div>
+    <div class="form-group row">
+      <div class="col-xs-3">
+        <div {{bind-attr class=":control-group controller.isNameError:error"}}>
+          <label class="control-label">{{t common.name}}</label>
         </div>
-      {{/if}}
-      <h5>{{t wizard.step1.description}}:</h5>
-      <p>
-        {{controller.typeDescription}}
-      </p>
+      </div>
+      <div class="col-xs-7">
+        {{input id="app-name-input" class="form-control" valueBinding="controller.newApp.name"}}
+      </div>
     </div>
+    {{#if controller.isNameError}}
+      <div class="row">
+        <div class="col-xs-12 alert alert-danger">
+          {{controller.nameErrorMessage}}
+        </div>
+      </div>
+    {{/if}}
     {{#if controller.isAppTypesError}}
-      <div class="col-xs-12">
-          <div class="alert alert-info app-types-alert">
-              {{t wizard.step1.noAppTypesError}}
-          </div>
+      <div class="row">
+        <div class="col-xs-12 alert alert-info app-types-alert">
+          {{t wizard.step1.noAppTypesError}}
+        </div>
       </div>
     {{/if}}
-  </div>
-  <div class="btn-area">
-    <button class="btn btn-success pull-right next-btn" {{bind-attr disabled="controller.isSubmitDisabled"}} {{action submit target="controller"}}>{{t common.next}} &rarr;</button>
-  </div>
-</div>
\ No newline at end of file
+    <!-- Available Applications end -->
+    <!-- Scheduler Options -->
+    <hr />
+    <div class="row">
+      <h3>{{t wizard.step1.schedulerOptions.label}}</h3>
+    </div>
+    <div class="row">
+      <div class="col-xs-3">
+        <label class="control-label">{{t wizard.step1.schedulerOptions.queueName}}</label>
+      </div>
+      <div class="col-xs-7">
+        {{input class="form-control" valueBinding="controller.newApp.queueName"}}
+      </div>
+    </div>
+    <!-- Scheduler Options end -->
+    <!-- YARN Labels -->
+    <hr />
+    <div class="row">
+      <h3>{{t wizard.step1.yarnLabels.label}}</h3>
+    </div>
+    <div class="row">
+      <div class="col-xs-3">
+        <label class="control-label">
+          {{view view.radioButton name="yarnLabel" selectionBinding="controller.newApp.selectedYarnLabel" value=0 class="radio-inline"}}
+          {{t wizard.step1.yarnLabels.options.anyHost}}
+        </label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-3">
+        <label class="control-label">
+          {{view view.radioButton name="yarnLabel" selectionBinding="controller.newApp.selectedYarnLabel" value=1 class="radio-inline"}}
+          {{t wizard.step1.yarnLabels.options.nonLabeledHost}}
+        </label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-3">
+        <label class="control-label">
+          {{view view.radioButton name="yarnLabel" selectionBinding="controller.newApp.selectedYarnLabel" value=2 class="radio-inline"}}
+          {{t wizard.step1.yarnLabels.options.specifyLabel}}
+        </label>
+      </div>
+      <div class="col-xs-7">
+        {{input type="text" class="form-control" disabledBinding="view.specLabelEnabled" valueBinding="controller.newApp.specialLabel"}}
+      </div>
+    </div>
+    <!-- YARN Labels end -->
+    <!-- Log Aggregation -->
+    <hr />
+    <div class="row">
+      <h3>{{t wizard.step1.logAggregation.label}}</h3>
+    </div>
+    <div class="row">
+      <div class="col-xs-3">
+        <label class="control-label">{{t wizard.step1.logAggregation.filePatterns.include}}</label>
+      </div>
+      <div class="col-xs-7">
+        {{input class="form-control" valueBinding="controller.newApp.includeFilePatterns"}}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-3">
+        <label class="control-label">{{t wizard.step1.logAggregation.filePatterns.exclude}}</label>
+      </div>
+      <div class="col-xs-7">
+        {{input class="form-control" valueBinding="controller.newApp.excludeFilePatterns"}}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-3">
+        <label class="control-label">{{t common.frequency}}</label>
+      </div>
+      <div class="col-xs-7">
+        <div class="input-group">
+          {{input class="form-control" valueBinding="controller.newApp.frequency"}}
+          <div class="input-group-addon">{{t common.minutes}}</div>
+        </div>
+      </div>
+    </div>
+    <!-- Log Aggregation end -->
+    <div class="btn-area">
+      <button
+        class="btn btn-success pull-right next-btn"
+        {{bind-attr disabled="controller.isSubmitDisabled"}}
+        {{action submit target="controller"}}>{{t common.next}} &rarr;
+      </button>
+    </div>
+  </form>
+</div>


Mime
View raw message