Merge pull request #35270 from callithea/wip-45232-octopus

octopus: mgr/dashboard: Show table details inside the datatable

Reviewed-by: Alfonso Martínez <almartin@redhat.com>
Reviewed-by: Kiefer Chang <kiefer.chang@suse.com>
Reviewed-by: Sebastian Krah <skrah@suse.com>
Reviewed-by: Stephan Müller <smueller@suse.com>

diff --cc src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
Simple merge

diff --cc src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
index 9dccecba61f66e541cd8c32d118ee90b5a5af34b,08f407b357c1c1eee475875a5d9815a4b5b5f6f2..4a5f9ae8a6267a2c6f08618c3d83bf378716348e
--- 1/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
--- 2/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
@@@ -1,5 -1,12 +1,12 @@@
 -@import 'styles';
 +@import 'defaults.scss';
  
+ @mixin row-details-icon {
+   font-family: 'ForkAwesome', sans-serif;
+   font-size: 1rem;
+   color: $gray-900;
+   line-height: 1;
+ }
+ 
  .dataTables_wrapper {
    margin-bottom: 25px;
    .separator {
@@@ -229,8 -243,30 +237,28 @@@
          }
        }
      }
+     .datatable-row-detail {
+       padding: 20px;
+       border-bottom: 2px solid $color-table-header-border;
+     }
+     .expand-collapse-icon {
+       display: block;
+       height: 100%;
+       text-align: center;
+       &:hover {
+         text-decoration: none;
+       }
+     }
+     .expand-collapse-icon-right:before {
+       @include row-details-icon;
+       content: '\f105';
+     }
+     .expand-collapse-icon-down:before {
+       @include row-details-icon;
+       content: '\f107';
+     }
    }
    .datatable-footer {
 -    @extend .p-2;
 -
      .selected-count,
      .page-count {
        font-style: italic;