Misthios/grafana-zabbix
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix problem details layout, fixes #1252

Browse Source
This commit is contained in:
Alexander Zobnin
2021-08-03 13:57:26 +03:00
parent 12c4089a50
commit 201d6cb19a
2 changed files with 113 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/panel-triggers/components/Problems/ProblemDetails.tsx
View File

@@ -102,25 +102,16 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
return (
<div className={`problem-details-container ${displayClass}`}>
<div className="problem-details">
<div className="problem-details-row">
<div className="problem-value-container">
<div className="problem-age">
<FAIcon icon="clock-o" />
<span>{age}</span>
</div>
{problem.items && <ProblemItems items={problem.items} />}
</div>
<div className="problem-details-head">
<div className="problem-actions-left">
<ExploreButton problem={problem} panelId={this.props.panelId} />
</div>
<ProblemStatusBar problem={problem} alerts={alerts} className={compactStatusBar && 'compact'} />
{problem.showAckButton &&
<div className="problem-actions">
<ModalController>
{({ showModal, hideModal }) => (
<ExecScriptButton
className="navbar-button navbar-button--settings"
className="problem-action-button"
onClick={() => {
showModal(ExecScriptModal, {
getScripts: this.getScripts,
@@ -134,7 +125,7 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
<ModalController>
{({ showModal, hideModal }) => (
<AckButton
className="navbar-button navbar-button--settings"
className="problem-action-button"
onClick={() => {
showModal(AckModal, {
canClose: problem.manual_close === '1',
@@ -148,6 +139,18 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
</ModalController>
</div>
}
<ProblemStatusBar problem={problem} alerts={alerts} className={compactStatusBar && 'compact'} />
</div>
<div className="problem-details-body">
<div className="problem-details">
<div className="problem-details-row">
<div className="problem-value-container">
<div className="problem-age">
<FAIcon icon="clock-o" />
<span>{age}</span>
</div>
{problem.items && <ProblemItems items={problem.items} />}
</div>
</div>
{problem.comments &&
<div className="problem-description-row">
@@ -204,6 +207,7 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
{problem.hosts && <ProblemHosts hosts={problem.hosts} className="problem-details-right-item" />}
</div>
</div>
</div>
);
}
}

22
src/sass/_panel-problems.scss
View File

@@ -215,6 +215,7 @@
.problem-details-container {
display: flex;
flex-direction: column;
padding-top: 4px;
background-color: $problem-details-background;
border-bottom-width: 0px;
@@ -227,7 +228,7 @@
transition-property: opacity, max-height;
&.show {
max-height: 20rem;
max-height: 23rem;
opacity: 1;
box-shadow: inset -3px 3px 10px $problem-container-shadow;
}
@@ -244,6 +245,15 @@
}
}
.problem-details-head {
display: flex;
padding: 0.5rem 1rem 0.5rem 1.2rem;
}
.problem-details-body {
display: flex;
}
.problem-details {
position: relative;
flex: 10 1 auto;
@@ -256,7 +266,8 @@
.problem-description {
position: relative;
height: 4.5rem;
max-height: 4.5rem;
min-height: 3rem;
overflow: hidden;
&:after {
@@ -358,7 +369,11 @@
.problem-actions {
display: flex;
margin-left: 1.6rem;
margin-right: 1.6rem;
}
.problem-action-button {
margin-right: 0.2rem;
}
.problem-actions-left {
@@ -376,6 +391,7 @@
}
.problem-ack-container {
max-height: 8rem;
margin-top: 0.6rem;
margin-left: -0.6rem;
padding: 1.2rem 0.6rem;