Fixes : https://tracker.ceph.com/issues/72044
Signed-off-by: Abhishek Desai <abhishek.desai1@ibm.com>
(cherry picked from commit
64361708338a8cf97de7f7d4f2768c109a50c82f)
Conflicts:
src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
src/pybind/mgr/dashboard/frontend/src/styles.scss
src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
[type]="'metrics'"
uid="718Bruins"
*ngIf="permissions.grafana.read"
- grafanaStyle="two"
+ grafanaStyle="three"
>
</cd-grafana>
</ng-template>
[grafanaPath]="'ceph-filesystem-overview?var-name=' + details.name"
[type]="'metrics'"
uid="718Bruins"
- grafanaStyle="one"
+ grafanaStyle="five"
+ scrollable="no"
>
</cd-grafana>
</ng-template>
[grafanaPath]="'host-details?var-ceph_hosts=' + selectedHostname"
[type]="'metrics'"
uid="rtOg0AiWz"
- grafanaStyle="four">
+ grafanaStyle="five">
</cd-grafana>
</ng-template>
</ng-container>
[grafanaPath]="'osd-device-details?var-osd=osd.' + osd['id']"
[type]="'metrics'"
uid="CrAHE0iZz"
+ scrollable="no"
grafanaStyle="three">
</cd-grafana>
</ng-template>
[grafanaPath]="'osd-overview?'"
[type]="'metrics'"
uid="lo02I1Aiz"
- grafanaStyle="four">
+ grafanaStyle="three">
</cd-grafana>
</ng-template>
</ng-container>
[showFilterTools]="false"
[showDownloadCopyButton]="false"
defaultTab="cluster-logs"
- [scrollable]="true"></cd-logs>
+ ></cd-logs>
[showNavLinks]="false"
[showFilterTools]="false"
[showDownloadCopyButton]="false"
- defaultTab="cluster-logs"
- [scrollable]="true"></cd-logs>
+ defaultTab="cluster-logs"></cd-logs>
<ng-template #upgradeStatusTpl>
[grafanaPath]="'ceph-pools-overview?'"
[type]="'metrics'"
uid="z99hzWtmk"
- grafanaStyle="two">
+ grafanaStyle="three">
</cd-grafana>
</ng-template>
</ng-container>
<a ngbNavLink
i18n>Policies</a>
<ng-template ngbNavContent>
- <div class="table-scroller">
+ <div>
<table class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md">
<tbody>
<tr>
word-wrap: break-word;
}
-.table-scroller {
- height: 100%;
- max-height: 50vh;
- overflow: auto;
-}
-
.spacing-left {
margin-left: layout.$spacing-03;
}
[grafanaPath]="'rgw-overview?'"
[type]="'metrics'"
uid="WAkugZpiz"
- grafanaStyle="two">
+ grafanaStyle="three">
</cd-grafana>
</ng-template>
</ng-container>
</cds-tab>
<cds-tab heading="Policies"
i18n-heading>
- <div class="table-scroller">
+ <div>
<table class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md">
<tbody>
<tr>
[grafanaPath]="'smb-overview?'"
[type]="'metrics'"
uid="feem6ehrmi2o0b"
- grafanaStyle="two">
+ grafanaStyle="three">
</cd-grafana>
.container-fluid {
overflow: auto;
- padding-bottom: 100px;
padding-top: 48px;
}
class="grafana"
[ngClass]="panelStyle"
frameborder="0"
- scrolling="no"
+ [(scrolling)]="scrollable"
[title]="title"
i18n-title>
</iframe>
+@use '@carbon/layout';
+
.grafana {
height: 600px;
width: 100%;
}
.grafana_one {
- height: 400px;
+ height: layout.rem(450px);
}
.grafana_two {
height: 1160px;
}
+.grafana_five {
+ height: layout.rem(1600px);
+}
+
.timepicker {
label {
font-weight: 700;
uid: string;
@Input()
title: string;
+ @Input()
+ scrollable: string = 'yes';
constructor(private sanitizer: DomSanitizer, private settingsService: SettingsService) {
this.grafanaTimes = [
one: 'grafana_one',
two: 'grafana_two',
three: 'grafana_three',
- four: 'grafana_four'
+ four: 'grafana_four',
+ five: 'grafana_five'
};
this.datasource = this.type === 'metrics' ? 'Dashboard1' : 'Loki';
-<div class="table-scroller">
+<div>
<cd-table #table
[data]="tableData || []"
[columns]="columns"
-.table-scroller {
- height: 100%;
- max-height: 40vh;
- overflow: auto;
-}
<ng-template #rowDetailTpl
let-row="data">
- <div *ngIf="row[identifier] === expanded?.[identifier]"
- (mouseenter)="onRowDetailHover($event)"
- data-testid="datatable-row-detail">
+ @if (row[identifier] === expanded?.[identifier] && !scrollable) {
+ <div
+ (mouseenter)="onRowDetailHover($event)"
+ data-testid="datatable-row-detail">
<ng-template [ngTemplateOutlet]="rowDetail.template"></ng-template>
</div>
+ } @else if (row[identifier] === expanded?.[identifier] && scrollable) {
+ <div
+ (mouseenter)="onRowDetailHover($event)"
+ data-testid="datatable-row-detail"
+ class="scrollable-expanded-row">
+ <ng-template [ngTemplateOutlet]="rowDetail.template"></ng-template>
+ </div>
+ }
</ng-template>
<ng-template #defaultValueTpl
@use './src/styles/vendor/variables' as vv;
@use './src/styles/defaults/mixins';
+@use '@carbon/layout';
+
+$scrollbar-thumb-color: rgba(128, 128, 128, 0.3);
+$scrollbar-track-color: transparent;
@mixin row-details-icon {
color: vv.$gray-900;
::ng-deep div.cds--batch-summary {
background-color: vv.$primary;
}
+
+.scrollable-expanded-row {
+ max-height: 40vh;
+ overflow-x: hidden;
+ overflow-y: auto;
+ scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
+ scrollbar-width: thin;
+}
+
+.scrollable-expanded-row::-webkit-scrollbar {
+ height: layout.rem(6px);
+ width: layout.rem(6px);
+}
+
+.scrollable-expanded-row::-webkit-scrollbar-thumb {
+ background-color: $scrollbar-thumb-color; /* Grey with transparency */
+ border-radius: layout.rem(10px);
+}
+
+.scrollable-expanded-row::-webkit-scrollbar-track {
+ background: transparent;
+}
@Input()
theme: string;
+ /**
+ * Use to make the expandable row scrollable with max-height
+ */
+ @Input()
+ scrollable: boolean = true;
+
/**
* Should be a function to update the input data if undefined nothing will be triggered
*
projects / ceph-ci.git / commitdiff