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

refactor(ui): add background color to the alert group title

Browse Source 
Right now the title and the body blends together in the UI, add background color to make it easier to show where title bar ends and where the alert body starts
This commit is contained in:
Łukasz Mierzwa
2019-03-27 14:53:35 -07:00
parent c8b48c1a77
commit c74d697596
2 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,7 +29,11 @@ const GroupHeader = observer(
const { collapseStore, group, silenceFormStore } = this.props;
return (
<h5 className="card-title mb-0 d-flex flex-row">
<h5
className={`card-header bg-light mb-0 d-flex flex-row px-2 py-1 ${
collapseStore.value ? "border-bottom-0" : ""
}`}
>
<span className="flex-shrink-0 flex-grow-0">
<GroupMenu group={group} silenceFormStore={silenceFormStore} />
</span>

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

@@ -162,18 +162,14 @@ const AlertGroup = observer(
<MountFade>
<div className="components-grid-alertgrid-alertgroup p-1">
<div className="card">
<div
className={`card-body ${
this.collapse.value ? "p-2" : "px-2 pt-2 pb-1"
}`}
>
<GroupHeader
collapseStore={this.collapse}
group={group}
silenceFormStore={silenceFormStore}
/>
{this.collapse.value ? null : (
<ul className="list-group mt-1">
<GroupHeader
collapseStore={this.collapse}
group={group}
silenceFormStore={silenceFormStore}
/>
{this.collapse.value ? null : (
<div className="card-body px-2 py-1">
<ul className="list-group">
{group.alerts
.slice(0, this.renderConfig.alertsToRender)
.map(alert => (
@@ -212,8 +208,8 @@ const AlertGroup = observer(
</li>
) : null}
</ul>
)}
</div>
</div>
)}
{this.collapse.value === false && group.alerts.length > 1 ? (
<GroupFooter
group={group}