mgr/dashboard: add placeholder for filters to datatable

As (e.g.) the configuration option documentation has dropdown menus
with pre-defined filters we need a placeholder for them in the
datatable.

Signed-off-by: Tatjana Dehler <tdehler@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index d9b68758d060332a2781054715dcb93fcac62567..b3840744f0d394b3f060b58a3285f71a34f42f7a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -3,7 +3,7 @@
   Failed to load data.
 </cd-error-panel>
 <div class="dataTables_wrapper">
-  <div class="dataTables_header clearfix"
+  <div class="dataTables_header clearfix form-inline"
        *ngIf="toolHeader">
     <!-- actions -->
     <div class="oadatatableactions">
@@ -11,6 +11,10 @@
     </div>
     <!-- end actions -->
 
+    <!-- filters -->
+    <ng-content select=".table-filters"></ng-content>
+    <!-- end filters -->
+
     <!-- search -->
     <div class="input-group">
       <span class="input-group-addon">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
index 05584f5bfe719649f0f0c620a76949021f2d0000..6ee3997ebf8e4dabdb6d72e14677e853f12fde94 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
@@ -58,6 +58,14 @@
   .oadatatableactions {
     display: inline-block;
   }
+  ::ng-deep .table-filters {
+    float: right;
+    border-left: 1px solid $color-table-seperator-border;
+    padding-left: 8px;
+  }
+  ::ng-deep .table-filters label {
+    margin-right: 4px;
+  }
   .form-group {
     padding-left: 8px;
   }
@@ -65,6 +73,7 @@
     float: right;
     border-left: 1px solid $color-table-input-border;
     padding-left: 8px;
+    padding-right: 8px;
     width: 40%;
     max-width: 250px;
     .form-control {