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

Merge pull request #561 from prymitive/header-color

Browse Source 
refactor(ui): add background color to the alert group title
This commit is contained in:
Łukasz Mierzwa
2019-03-27 22:12:58 -07:00
committed by GitHub
parent c8b48c1a77 c74d697596
commit b3d6ed079c
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}