github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-13 03:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): use flex instead of float in alert group header

Browse Source
This commit is contained in:
Łukasz Mierzwa
2018-10-14 10:44:57 +01:00
parent 8bc2c83de3
commit cd29ae431e
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
View File

@@ -29,11 +29,20 @@ const GroupHeader = observer(
const { collapseStore, group, silenceFormStore } = this.props;
return (
<h5 className="card-title mb-0 clearfix">
<span className="float-left">
<h5 className="card-title mb-0 d-flex flex-row">
<span className="flex-shrink-0 flex-grow-0">
<GroupMenu group={group} silenceFormStore={silenceFormStore} />
</span>
<span className="float-right">
<span className="flex-shrink-1 flex-grow-1" style={{ minWidth: 0 }}>
{Object.keys(group.labels).map(name => (
<FilteringLabel
key={name}
name={name}
value={group.labels[name]}
/>
))}
</span>
<span className="flex-shrink-0 flex-grow-0 ml-auto pl-1">
<FilteringCounterBadge
name="@state"
value="unprocessed"
@@ -50,7 +59,7 @@ const GroupHeader = observer(
counter={group.stateCount.active}
/>
<span
className="text-muted cursor-pointer badge text-nowrap text-truncate pr-0"
className="text-muted cursor-pointer badge text-nowrap text-truncate px-0"
onClick={collapseStore.toggle}
>
<TooltipWrapper title="Toggle group details">
@@ -60,15 +69,6 @@ const GroupHeader = observer(
</TooltipWrapper>
</span>
</span>
<span>
{Object.keys(group.labels).map(name => (
<FilteringLabel
key={name}
name={name}
value={group.labels[name]}
/>
))}
</span>
</h5>
);
}