[AMBARI-22844] Install wizard mpack/service filter on selection screen

ambari-web/app/assets/test/tests.js

@@ -137,6 +137,10 @@ var files = [
   'test/controllers/wizard_test',
   'test/controllers/wizard/configureDownload_test',
   'test/controllers/wizard/selectMpacks_test',
+  'test/controllers/wizard/downloadMpacks_test',
+  'test/controllers/wizard/customProductRepos_test',
+  'test/controllers/wizard/verifyProducts_test',
+  'test/controllers/wizard/wizardStep_test',
   'test/controllers/wizard/step0_test',
   'test/controllers/wizard/step1_test',
   'test/controllers/wizard/step2_test',
@@ -390,6 +394,8 @@ var files = [
   'test/views/wizard/step3/hostWarningPopupBody_view_test',
   'test/views/wizard/step3/hostWarningPopupFooter_view_test',
   'test/views/wizard/configureDownload_view_test',
+  'test/views/wizard/customMpackRepos_view_test',
+  'test/views/wizard/customProductRepos_view_test',
   'test/views/wizard/step0_view_test',
   'test/views/wizard/step1_view_test',
   'test/views/wizard/step2_view_test',

ambari-web/app/controllers/wizard/downloadMpacks_controller.js

@@ -64,7 +64,6 @@ App.WizardDownloadMpacksController = App.WizardStepController.extend({
   },
 
   downloadMpackSuccess: function (data, opt, params) {
-    console.dir("Mpack " + params.name + " download completed with success code " + data.status);
     this.get('mpacks').findProperty('name', params.name).set('succeeded', true);
     this.get('mpacks').findProperty('name', params.name).set('failed', false);
     this.get('mpacks').findProperty('name', params.name).set('inProgress', false);
@@ -74,7 +73,6 @@ App.WizardDownloadMpacksController = App.WizardStepController.extend({
     if(request.status == 409) {
       this.downloadMpackSuccess(request, opt, params);
     } else {
-      console.dir("Mpack " + params.name + " download failed with error code " + request.status);
       this.get('mpacks').findProperty('name', params.name).set('succeeded', false);
       this.get('mpacks').findProperty('name', params.name).set('failed', true);
       this.get('mpacks').findProperty('name', params.name).set('inProgress', false);

ambari-web/app/controllers/wizard/selectMpacks_controller.js

@@ -27,6 +27,14 @@ App.WizardSelectMpacksController = App.WizardStepController.extend({
 
   noRecommendationAvailable: false,
 
+  filterMpacksText: "",
+
+  filterServicesText: "",
+
+  filterMpacksPlaceholder: Em.I18n.t('installer.selectMpacks.filterMpacks'),
+
+  filterServicesPlaceholder: Em.I18n.t('installer.selectMpacks.filterServices'),
+
   loadRegistry: function () {
     return App.ajax.send({
       name: 'registry.all',
@@ -43,6 +51,15 @@ App.WizardSelectMpacksController = App.WizardStepController.extend({
             name: mpack.RegistryMpackInfo.mpack_name,
             displayName: mpack.RegistryMpackInfo.mpack_display_name,
             description: mpack.RegistryMpackInfo.mpack_description,
+            //this is the text that will be used to filter this mpack in the UI
+            //at this point, this is just the text that comes from this mpack
+            //but additional text will be appended to form the final filterOn value
+            //from the mpack's services, specifically the service name
+            filterOn: (
+              (mpack.RegistryMpackInfo.mpack_name || "") + " "
+              + (mpack.RegistryMpackInfo.mpack_display_name || "") + " "
+              + (mpack.RegistryMpackInfo.mpack_description || "")
+            ).toLowerCase(),
             logoUrl: mpack.RegistryMpackInfo.mpack_logo_url,
             versions: mpack.versions ? mpack.versions.map((version, index) => {
               return Em.Object.create({
@@ -93,10 +110,19 @@ App.WizardSelectMpacksController = App.WizardStepController.extend({
 
     const uniqueServices = {};
     mpackServiceVersions.forEach(service => {
+      //append service name to filterOn of the containing mpack
+      const mpackFilterOn = service.get('mpackVersion.mpack.filterOn');
+      service.set('mpackVersion.mpack.filterOn', ((mpackFilterOn) + " " + (service.name || "")).toLowerCase());
+
       uniqueServices[service.name] = Em.Object.create({
         name: service.name,
         displayName: service.displayName,
         description: service.description,
+        filterOn: (
+          (service.name || "") + " "
+          + (service.description || "") + " "
+          + (service.get('mpackVersion.mpack.displayName') || "" )
+        ).toLowerCase(),
         displayedVersion: function () {
           return this.get('versions').filterProperty('displayed')[0];
         }.property('[email protected]')
@@ -495,6 +521,44 @@ App.WizardSelectMpacksController = App.WizardStepController.extend({
     this.get('wizardController').setStepUnsaved('selectMpacks');
   },
 
+  filteredMpacks: function () {
+    const mpacks = this.get('content.mpacks');
+    const filterText = this.get('filterMpacksText').toLowerCase();
+
+    if (filterText.length > 2) {
+      const filteredMpacks = mpacks.filter(mpack => {
+        return mpack.get('filterOn').indexOf(filterText) > -1;
+      });
+
+      return filteredMpacks;
+    }
+
+    return mpacks;
+  }.property('content.mpacks', 'filterMpacksText'),
+
+  clearFilterMpacks: function () {
+    this.set('filterMpacksText', "");
+  },
+
+  filteredServices: function () {
+    const services = this.get('content.mpackServices');
+    const filterText = this.get('filterServicesText').toLowerCase();
+
+    if (filterText.length > 2) {
+      const filteredServices = services.filter(service => {
+        return service.get('filterOn').indexOf(filterText) > -1;
+      });
+
+      return filteredServices;
+    }
+
+    return services;
+  }.property('content.mpackServices', 'filterServicesText'),
+
+  clearFilterServices: function () {
+    this.set('filterServicesText', "");
+  },
+
   /**
    * Onclick handler for <code>Next</code> button.
    * Disable 'Next' button while it is already under process. (using Router's property 'nextBtnClickInProgress')

ambari-web/app/controllers/wizard/verifyProducts_controller.js

@@ -91,7 +91,7 @@ App.WizardVerifyProductsController = App.WizardStepController.extend({
    */
   setRepoState: function (repo, state) {
     switch (state) {
-      case this.get('VERIFYREPO_INPROGRESS:'):
+      case this.get('VERIFYREPO_INPROGRESS'):
         repo.set('succeeded', false);
         repo.set('failed', false);
         repo.set('inProgress', true);

ambari-web/app/messages.js

@@ -638,6 +638,8 @@ Em.I18n.translations = {
   'installer.selectMpacks.advancedModeMessage': 'If you go back to use case selection, all current selections will be removed. Continue?',
   'installer.selectMpacks.basicModeHelp': 'This step lets you choose the use case(s) that fit your needs and the management packs that fulfill those use cases will be selected for you; however, if you would rather choose individual management packs and/or services directly, click this button. Be aware that if you return to use case selection mode, any selections you have made will be removed.',
   'installer.selectMpacks.advancedModeHelp': 'By clicking this button, you can return to use case selection mode. However, any existing selections will be removed.',
+  'installer.selectMpacks.filterMpacks': 'Search management packs',
+  'installer.selectMpacks.filterServices': 'Search services',
 
   'installer.configureDownload.header': 'Configure Download',
   'installer.configureDownload.body.title': 'Choose download method',

ambari-web/app/styles/application.less

@@ -2885,15 +2885,9 @@ td .no-data {
   }
 }
 
-.input-group.url-input {
-  width: 100%;
-
-  .input-group-btn {
-    width: 1%;
-
-    .revert-button {
-      padding: 0 10px;
-    }
+.input-group-btn {
+  .icon-button-addon {
+    padding: 0 10px;
   }
 }
 

ambari-web/app/styles/widgets.less

@@ -493,7 +493,3 @@
   background-color: rgba(211, 237, 247, 0.39);
   padding: 10px 5px 0 10px;
 }
-
-.input-group-btn {
-  width: auto;
-}

ambari-web/app/styles/wizard.less

@@ -1023,4 +1023,8 @@
 .dropdown-menu input[type="checkbox"]:checked + label:after,
 .table input[type="checkbox"]:checked + label:after {
   line-height: 2;
+}
+
+.filter-input {
+  margin: 15px;
 }

ambari-web/app/templates/wizard/customMpackRepos.hbs

@@ -41,10 +41,10 @@
               <a target="_blank" {{bindAttr href="mpack.publicUrl"}}><i class="icon icon-external-link"></i></a>
             </td>
             <td class="col-sm-6">
-              <div class="input-group url-input required">
+              <div class="input-group required">
                 {{view Em.TextField class="form-control" valueBinding="mpack.downloadUrl"}} 
                 <span class="input-group-btn">
-                  <button type="button" class="btn btn-default revert-button" {{bindAttr title="view.revertButtonTooltip" value="mpack.id"}} {{action revertUrl target="view"}}><i class="icon icon-rotate-left"></i></button>
+                  <button type="button" class="btn btn-default icon-button-addon" {{bindAttr title="view.revertButtonTooltip" value="mpack.id"}} {{action revertUrl target="view"}}><i class="icon icon-rotate-left"></i></button>
                 </span>
               </div>
             </td>

ambari-web/app/templates/wizard/customProductRepos.hbs

@@ -77,10 +77,10 @@
                       <a target="_blank" {{bindAttr href="repo.publicUrl"}}><i class="icon icon-external-link"></i></a>
                     </td>
                     <td class="col-sm-7">
-                      <div class="input-group url-input required">
+                      <div class="input-group required">
                         {{view Em.TextField class="form-control" valueBinding="repo.downloadUrl"}}
                         <span class="input-group-btn">
-                          <button type="button" class="btn btn-default revert-button" {{bindAttr title="view.revertButtonTooltip" value="repo.id" }} {{action revertUrl target="view" }}>
+                          <button type="button" class="btn btn-default icon-button-addon" {{bindAttr title="view.revertButtonTooltip" value="repo.id" }} {{action revertUrl target="view" }}>
                             <i class="icon icon-rotate-left"></i>
                           </button>
                         </span>

ambari-web/app/templates/wizard/selectMpacks.hbs

@@ -54,9 +54,15 @@
       <div class="panel-body tab-content flex-fill">
         {{#if controller.content.advancedMode}}
         <div role="tabpanel" class="tab-pane active" id="mpacks">
+          <div class="input-group filter-input">
+            {{view Em.TextField class="form-control" valueBinding="controller.filterMpacksText" placeholderBinding="controller.filterMpacksPlaceholder"}}
+            <span class="input-group-btn">
+              <button class="btn btn-default icon-button-addon" type="button" {{action clearFilterMpacks target="controller"}}><span class="icon icon-rotate-left"></span></button>
+            </span>
+          </div>
           <div class="options-list">
-            {{#if controller.content.mpacks}}
-            {{#each mpack in controller.content.mpacks}}
+            {{#if controller.filteredMpacks}}
+            {{#each mpack in controller.filteredMpacks}}
             {{view App.WizardMpackView mpackBinding="mpack"}}
             {{/each}}
             {{else}}
@@ -65,9 +71,15 @@
           </div>
         </div>
         <div role="tabpanel" class="tab-pane" id="services">
+          <div class="input-group filter-input">
+            {{view Em.TextField class="form-control" valueBinding="controller.filterServicesText" placeholderBinding="controller.filterServicesPlaceholder"}}
+            <span class="input-group-btn">
+              <button class="btn btn-default icon-button-addon" type="button" {{action clearFilterServices target="controller"}}><span class="icon icon-rotate-left"></span></button>
+            </span>
+          </div>
           <div class="options-list">
-            {{#if controller.content.mpackServices}} 
-            {{#each service in controller.content.mpackServices}}
+            {{#if controller.filteredServices}} 
+            {{#each service in controller.filteredServices}}
             {{view App.WizardServiceView serviceBinding="service"}}
             {{/each}}
             {{else}}

ambari-web/app/templates/wizard/verifyProducts.hbs

@@ -24,7 +24,7 @@
       {{#if App.router.nextBtnClickInProgress}}
       {{view App.SpinnerView}}
       {{else}}
-      <p class="step-description">{{t installer.customProductRepos.body.description}}</p>
+      <p class="step-description">{{t installer.verifyProducts.body.description}}</p>
         <table class="table table-hover">
           <thead>
             <tr>

ambari-web/test/controllers/installer_test.js

@@ -1334,4 +1334,51 @@ describe('App.InstallerController', function () {
       expect(installerController.getStepSavedState('step0')).to.be.false;
     });
   });
+
+  describe('#hasErrors', function () {
+    before(function () {
+      installerController.addError("There is an error.");
+    });
+
+    it('Should return true if there are errors.', function () {
+      var hasErrors = installerController.get('hasErrors');
+
+      expect(hasErrors).to.be.true;
+    });
+
+    it('Should return false if there are no errors.', function () {
+      installerController.clearErrors();
+      var hasErrors = installerController.get('hasErrors');
+
+      expect(hasErrors).to.be.false;
+    });
+  });
+
+  describe('#getStepController', function () {
+    var wizardStep0Controller = {};
+    var wizardStep1Controller = {};
+    var wizardStep2Controller = {};
+
+    before(function () {
+      installerController.set('steps', [
+        "step0",
+        "step1",
+        "step2"
+      ]);
+
+      App.router.set('wizardStep0Controller', wizardStep0Controller);
+      App.router.set('wizardStep1Controller', wizardStep1Controller);
+      App.router.set('wizardStep2Controller', wizardStep2Controller);
+    });
+
+    it('Should return controller for the step number provided.', function () {
+      var stepController = installerController.getStepController(2);
+      expect(stepController).to.equal(wizardStep2Controller);
+    });
+
+    it('Should return controller for the step name provided.', function () {
+      var stepController = installerController.getStepController("step1");
+      expect(stepController).to.equal(wizardStep1Controller);
+    });
+  });
 });

ambari-web/test/controllers/wizard/customProductRepos_test.js

@@ -0,0 +1,80 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var App = require('app');
+var controller = App.WizardCustomProductReposController.create({
+  operatingSystems: [
+    Em.Object.create({
+      type: 'alpha',
+      selected: true
+    }),
+    Em.Object.create({
+      type: 'bravo',
+      selected: false
+    })
+  ],
+  mpacks: [
+    {
+      operatingSystems: [
+        Em.Object.create({
+          type: 'charlie',
+          repos: [
+            Em.Object.create({
+              id: 0,
+              expected: true
+            }),
+            Em.Object.create({
+              id: 1,
+              expected: false
+            })
+          ]
+        })
+      ]
+    }
+  ]
+});
+
+describe('App.WizardCustomProductReposController', function () {
+  describe('#isOsSelected', function () {
+    it('Correctly reports whether an OS is selected', function () {
+      expect(controller.isOsSelected('alpha')).to.be.true;
+      expect(controller.isOsSelected('bravo')).to.be.false;
+      expect(controller.isOsSelected('charle')).to.be.false;
+    });
+  });  
+
+  describe('#anySelectedOs', function () {
+    it('Correctly reports whether any OS is selected', function () {
+      controller.get('operatingSystems')[0].set('selected', false);
+      expect(controller.get('anySelectedOs')).to.be.false;
+
+      controller.get('operatingSystems')[0].set('selected', true);
+      expect(controller.get('anySelectedOs')).to.be.true;
+    });
+  });  
+
+  describe('#findRepoById', function () {
+    //cannot be tested because the code under test uses for..of loops, so left it pending for now
+    it('Returns the repo with the given id');
+    //here's the test for when we can test it:
+    //function () {
+    //  var actual = controller.findRepoById(0);
+    //  expect(actual.get('expected')).to.be.true;
+    //} 
+  });  
+});