jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix metric tables height and button placing

Browse source
This commit is contained in:
sylenien 2022-06-28 15:24:48 +02:00
parent 198ea005d4
commit 08f9e3965e
3 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
View file

@ -49,7 +49,7 @@ function CustomMetricTable(props: Props) {
onClick(filters);
}
return (
<div className="" style={{ height: '240px'}}>
<div className="" style={{ maxHeight: '240px'}}>
<NoContent show={data.values && data.values.length === 0} size="small">
<Table
small

7
frontend/app/components/Dashboard/Widgets/common/Table.js
View file

@ -24,6 +24,7 @@ export default class Table extends React.PureComponent {
} = this.props;
const { showAll } = this.state;
const isShowMoreButtonVisible = !isTemplate && rows.size > (small ? 3 : 5) && !showAll
return (
<div className="w-full">
<div className="flex">
@ -37,7 +38,7 @@ export default class Table extends React.PureComponent {
<div className={ cn(stl.content, "thin-scrollbar") } style={{ maxHeight: maxHeight + 'px'}}>
{ rows.take(showAll ? rows.size : (small ? 3 : 5)).map(row => (
<div
className={ cn(rowClass, stl.row, { [stl.small]: small, 'cursor-pointer' : !!onRowClick}) }
className={ cn(rowClass, stl.row, { [stl.bottomBorder]: isShowMoreButtonVisible }, { [stl.small]: small, 'cursor-pointer' : !!onRowClick}) }
key={ row.key }
onClick={onRowClick ? (e) => onRowClick(e, row) : () => null}
>
@ -51,8 +52,8 @@ export default class Table extends React.PureComponent {
</div>
)) }
</div>
{ !isTemplate && rows.size > (small ? 3 : 5) && !showAll &&
<div className="w-full flex justify-center mt-3">
{isShowMoreButtonVisible &&
<div className="w-full flex justify-center mt-2">
<Button
onClick={ this.onLoadMoreClick }
variant="text-primary"

5
frontend/app/components/Dashboard/Widgets/common/table.module.css
View file

@ -22,7 +22,6 @@
.row {
display: flex;
border-bottom: 1px solid #EFEFEF;
align-items: center;
min-height: 54px;
font-size: 13px;
@ -37,3 +36,7 @@
background-color: $gray-lightest;
}
}
.bottomBorder {
border-bottom: 1px solid #EFEFEF;
}