Fix full text search at containers page

Containers page uses the standard Magic Search filtering, however its
full text search option doesn't work.
This patch makes the filtering work properly with full text search.

Closes-Bug: #1902610

Change-Id: Ie784d187c89eba1a2673ecafd72e903115a264d3
(cherry picked from commit 40acf5b75c1a889e767cec32fff24456e3e245d0)

1 files changed, 73 insertions, 67 deletions

diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/containers/containers.html b/openstack_dashboard/dashboards/project/static/dashboard/project/containers/containers.html
index 329f11419..34194763a 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/containers/containers.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/containers/containers.html
@@ -13,76 +13,82 @@
       <div class="col-xs-12">
         <hz-magic-search-context filter-facets="cc.filterFacets">
           <hz-magic-search-bar></hz-magic-search-bar>
-        </hz-magic-search-context>
-        <uib-accordion class="hz-container-accordion" ng-if="cc.model.containers.length > 0">
-          <div uib-accordion-group ng-repeat="container in cc.model.containers"
-                           ng-class="{'panel-primary': container.name === cc.model.container.name}"
-                           class="panel-default"
-                           ng-click="cc.selectContainer(container)">
-            <uib-accordion-heading>
-             <div ng-click="cc.selectContainer(container)">
-              <span class="hz-container-title truncate"
-                    uib-tooltip="{$ container.name $}"
-                    uib-tooltip-placement="top"
-                    uib-tooltip-popup-delay="1000"
-                    uib-tooltip-trigger="mouseenter">
-                {$ container.name $}
-              </span>
-              <span uib-tooltip="{$ 'Delete Container' | translate $}"
-                    uib-tooltip-placement="top"
-                    uib-tooltip-trigger="mouseenter"
-                    class="fa fa-trash hz-container-delete-icon"
-                    ng-if="container.name === cc.model.container.name"
-                    ng-click="cc.deleteContainer(container)"></span>
-              </div>
-            </uib-accordion-heading>
 
-            <div ng-if="!container.is_fetched" class="horizon-loading-bar container-pending-bar">
-              <div class="progress progress-striped active">
-                <div class="progress-bar"></div>
+          <uib-accordion
+                  st-magic-search
+                  st-table="cc.model.containers"
+                  class="hz-container-accordion"
+                  ng-if="cc.model.containers.length > 0">
+            <div uib-accordion-group ng-repeat="container in cc.model.containers"
+                             ng-class="{'panel-primary': container.name === cc.model.container.name}"
+                             class="panel-default"
+                             ng-click="cc.selectContainer(container)">
+              <uib-accordion-heading>
+                <div ng-click="cc.selectContainer(container)">
+                  <span class="hz-container-title truncate"
+                        uib-tooltip="{$ container.name $}"
+                        uib-tooltip-placement="top"
+                        uib-tooltip-popup-delay="1000"
+                        uib-tooltip-trigger="mouseenter">
+                    {$ container.name $}
+                  </span>
+                  <span uib-tooltip="{$ 'Delete Container' | translate $}"
+                        uib-tooltip-placement="top"
+                        uib-tooltip-trigger="mouseenter"
+                        class="fa fa-trash hz-container-delete-icon"
+                        ng-if="container.name === cc.model.container.name"
+                        ng-click="cc.deleteContainer(container)">
+                  </span>
+                </div>
+              </uib-accordion-heading>
+
+              <div ng-if="!container.is_fetched" class="horizon-loading-bar container-pending-bar">
+                <div class="progress progress-striped active">
+                  <div class="progress-bar"></div>
+                </div>
               </div>
+              <ul ng-if="container.is_fetched" class="hz-object-detail list-unstyled">
+                <li class="hz-object-count row">
+                  <span class="hz-object-label col-lg-7 col-md-12" translate>Object Count</span>
+                  <span class="hz-object-val col-lg-5 col-md-12">{$ container.count $}</span>
+                </li>
+                <li class="hz-object-size row">
+                  <span class="hz-object-label col-lg-7 col-md-12" translate>Size</span>
+                  <span class="hz-object-val col-lg-5 col-md-12">{$ container.bytes | bytes $}</span>
+                </li>
+                <li class="hz-object-timestamp row">
+                  <span class="hz-object-label col-lg-7 col-md-12" translate>Date Created</span>
+                  <span class="hz-object-val col-lg-5 col-md-12">{$ container.timestamp | date $}</span>
+                </li>
+                <li ng-if="container.storage_policy.display_name" class="hz-object-policy row">
+                  <span class="hz-object-label col-lg-7 col-md-12" translate>Storage Policy</span>
+                  <span class="hz-object-val col-lg-5 col-md-12">{$ container.storage_policy.display_name $}</span>
+                  <span class="hz-object-val col-lg-offset-7 col-lg-5 col-md-12">({$ container.storage_policy.name $})</span>
+                </li>
+                <li ng-if="!container.storage_policy.display_name" class="hz-object-policy row">
+                  <span class="hz-object-label col-lg-7 col-md-12" translate>Storage Policy</span>
+                  <span class="hz-object-val col-lg-5 col-md-12">{$ container.storage_policy.name $}</span>
+                </li>
+                <li class="hz-object-link row">
+                  <div class="themable-checkbox col-lg-7 col-md-12">
+                    <input type="checkbox" id="id_access" ng-model="container.is_public"
+                           ng-if="container.name === cc.model.container.name"
+                           ng-click="cc.toggleAccess(container)">
+                    <label class="hz-object-label" for="id_access" translate>Public Access</label>
+                  </div>
+                  <span class="hz-object-val col-lg-5 col-md-12">
+                    <a href="{$ container.public_url $}" target="_blank"
+                       ng-show="container.public_url" translate>Link</a>
+                    <span ng-hide="container.public_url" translate>Disabled</span>
+                  </span>
+                </li>
+              </ul>
             </div>
-            <ul ng-if="container.is_fetched" class="hz-object-detail list-unstyled">
-              <li class="hz-object-count row">
-                <span class="hz-object-label col-lg-7 col-md-12" translate>Object Count</span>
-                <span class="hz-object-val col-lg-5 col-md-12">{$ container.count $}</span>
-              </li>
-              <li class="hz-object-size row">
-                <span class="hz-object-label col-lg-7 col-md-12" translate>Size</span>
-                <span class="hz-object-val col-lg-5 col-md-12">{$ container.bytes | bytes $}</span>
-              </li>
-              <li class="hz-object-timestamp row">
-                <span class="hz-object-label col-lg-7 col-md-12" translate>Date Created</span>
-                <span class="hz-object-val col-lg-5 col-md-12">{$ container.timestamp | date $}</span>
-              </li>
-              <li ng-if="container.storage_policy.display_name" class="hz-object-policy row">
-                <span class="hz-object-label col-lg-7 col-md-12" translate>Storage Policy</span>
-                <span class="hz-object-val col-lg-5 col-md-12">{$ container.storage_policy.display_name $}</span>
-                <span class="hz-object-val col-lg-offset-7 col-lg-5 col-md-12">({$ container.storage_policy.name $})</span>
-              </li>
-              <li ng-if="!container.storage_policy.display_name" class="hz-object-policy row">
-                <span class="hz-object-label col-lg-7 col-md-12" translate>Storage Policy</span>
-                <span class="hz-object-val col-lg-5 col-md-12">{$ container.storage_policy.name $}</span>
-              </li>
-              <li class="hz-object-link row">
-                <div class="themable-checkbox col-lg-7 col-md-12">
-                  <input type="checkbox" id="id_access" ng-model="container.is_public"
-                         ng-if="container.name === cc.model.container.name"
-                         ng-click="cc.toggleAccess(container)">
-                  <label class="hz-object-label" for="id_access" translate>Public Access</label>
-                </div>
-                <span class="hz-object-val col-lg-5 col-md-12">
-                  <a href="{$ container.public_url $}" target="_blank"
-                     ng-show="container.public_url" translate>Link</a>
-                  <span ng-hide="container.public_url" translate>Disabled</span>
-                </span>
-              </li>
-            </ul>
-          </div uib-accordion-group>
-        </uib-accordion>
-        <div class="col-xs-12" ng-if="cc.model.containers.length == 0">
-          <p><translate>No items to display.</translate></p>
-        </div>
+          </uib-accordion>
+          <div class="col-xs-12" ng-if="cc.model.containers.length == 0">
+            <p><translate>No items to display.</translate></p>
+          </div>
+        </hz-magic-search-context>
       </div>
     </div>
   </div>