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

problems panel: styles tweaks

Browse Source
This commit is contained in:
Alexander Zobnin
2018-12-24 20:03:26 +03:00
parent e21c13d295
commit bb6abb2e9e
4 changed files with 57 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/panel-triggers/components/ProblemTimeline.tsx
View File

@@ -5,7 +5,7 @@ import { GFTimeRange, ZBXEvent } from 'panel-triggers/types';
const DEFAULT_OK_COLOR = 'rgb(56, 189, 113)'; const DEFAULT_OK_COLOR = 'rgb(56, 189, 113)';
const DEFAULT_PROBLEM_COLOR = 'rgb(215, 0, 0)'; const DEFAULT_PROBLEM_COLOR = 'rgb(215, 0, 0)';
const EVENT_POINT_SIZE = 20; const EVENT_POINT_SIZE = 16;
const INNER_POINT_SIZE = 0.6; const INNER_POINT_SIZE = 0.6;
const HIGHLIGHTED_POINT_SIZE = 1.1; const HIGHLIGHTED_POINT_SIZE = 1.1;
const EVENT_REGION_HEIGHT = Math.round(EVENT_POINT_SIZE * 0.6); const EVENT_REGION_HEIGHT = Math.round(EVENT_POINT_SIZE * 0.6);
@@ -118,7 +118,7 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
const { timeRange, eventPointSize, eventRegionHeight, problemColor, okColor } = this.props; const { timeRange, eventPointSize, eventRegionHeight, problemColor, okColor } = this.props;
const events = this.sortEvents(); const events = this.sortEvents();
const boxWidth = this.state.width; const boxWidth = this.state.width + eventPointSize;
const boxHeight = eventPointSize * 2; const boxHeight = eventPointSize * 2;
const width = boxWidth - eventPointSize; const width = boxWidth - eventPointSize;
const padding = Math.round(eventPointSize / 2); const padding = Math.round(eventPointSize / 2);
@@ -126,7 +126,7 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
const timelineYpos = Math.round(boxHeight / 2); const timelineYpos = Math.round(boxHeight / 2);
return ( return (
<div className="event-timeline" ref={this.setRootRef}> <div className="event-timeline" ref={this.setRootRef} style={{ transform: `translate(${-padding}px, 0)`}}>
<TimelineInfoContainer className="timeline-info-container" <TimelineInfoContainer className="timeline-info-container"
event={this.state.highlightedEvent} event={this.state.highlightedEvent}
eventInfo={this.state.eventInfo} eventInfo={this.state.eventInfo}

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

@@ -18,7 +18,7 @@
.rt-tr-group { .rt-tr-group {
flex: 0 0 auto; flex: 0 0 auto;
border-bottom: solid 1px $problems-border-color; border-bottom: solid 1px $problems-border-color;
border-left: solid 2px rgba(0, 0, 0, 0); border-left: solid 2px transparent;
&:last-child { &:last-child {
border-bottom: solid 1px $problems-border-color; border-bottom: solid 1px $problems-border-color;
@@ -26,6 +26,19 @@
&:hover { &:hover {
border-left: solid 2px rgba($blue, 0.5); border-left: solid 2px rgba($blue, 0.5);
.rt-tr.-even {
margin-left: 0;
background: $problems-table-row-hovered;
.rt-td:first-child {
margin-left: 0;
}
}
.problem-details-container {
border-left-color: rgba($blue, 0.5);
}
} }
.rt-tr { .rt-tr {
@@ -34,14 +47,16 @@
} }
&:hover { &:hover {
background: lighten($problems-table-stripe, 2%); background: $problems-table-row-hovered;
box-shadow: 0px 0px 5px rgba($blue, 0.5); box-shadow: 0px 0px 5px rgba($blue, 0.5);
z-index: 1; z-index: 1;
} }
&.-even { &.-even {
background: lighten($problems-table-stripe, 1%); background: $problems-table-stripe;
&:hover {
background: lighten($problems-table-stripe, 4%); margin-left: -2px;
.rt-td:first-child {
margin-left: 2px;
} }
} }
} }
@@ -93,6 +108,8 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0.45em 0 0.45em 1.1em; padding: 0.45em 0 0.45em 1.1em;
color: $white;
font-weight: 500;
} }
} }
@@ -124,7 +141,7 @@
} }
&.custom-expander:hover { &.custom-expander:hover {
// background-position: right top; // background-position: right top;
background-color: lighten($problems-table-stripe, 8%); background-color: $problem-expander-highlighted;
i { i {
color: $blue; color: $blue;
} }
@@ -160,12 +177,17 @@
display: flex; display: flex;
background-color: $problem-details-background; background-color: $problem-details-background;
border: 1px solid $problems-border-color; border: 1px solid $problems-border-color;
border-left: 2px solid $problem-details-background;
margin-left: -2px;
border-bottom-width: 0px; border-bottom-width: 0px;
max-height: 0; max-height: 0;
opacity: 0; opacity: 0;
overflow: hidden; overflow: hidden;
transition: all 0.3s ease-out; // transition: all 0.3s ease-out;
transition-duration: 0.3s;
transition-timing-function: ease-out;
transition-property: opacity, max-height;
&.show { &.show {
max-height: 20rem; max-height: 20rem;
@@ -245,10 +267,10 @@
} }
} }
&.fired { &.fired {
box-shadow: 0px 0px 10px rgba($orange, 0.1); box-shadow: 0px 0px 10px rgba($problem-statusbar-fired, 0.1);
.fa-icon-container { .fa-icon-container {
color: $orange; color: $problem-statusbar-fired;
text-shadow: 0px 0px 10px rgba($orange, 0.5); text-shadow: 0px 0px 10px rgba($problem-statusbar-fired, 0.5);
// animation: fade-in 1s ease-out; // animation: fade-in 1s ease-out;
} }
} }
@@ -269,6 +291,10 @@
border: 1px solid darken($action-button-color, 6%); border: 1px solid darken($action-button-color, 6%);
border-radius: 1px; border-radius: 1px;
span {
color: $action-button-text-color;
}
&:hover { &:hover {
background-color: darken($action-button-color, 4%); background-color: darken($action-button-color, 4%);
} }
@@ -286,8 +312,8 @@
} }
.problem-ack-container { .problem-ack-container {
padding: 0.8rem 0; padding: 1.2rem 0;
border-top: 2px solid $dark-4; // border-top: 2px solid $dark-4;
overflow: auto; overflow: auto;
} }
@@ -343,7 +369,7 @@
.event-timeline { .event-timeline {
position: relative; position: relative;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
padding-top: 1.6rem; padding-top: 2rem;
// margin-top: auto; // margin-top: auto;
.timeline-info-container { .timeline-info-container {
@@ -377,7 +403,7 @@
&:hover, &:hover,
&.highlighted { &.highlighted {
// opacity: 1; // opacity: 1;
stroke: $zbx-text-highlighted; stroke: $problem-event-highlighted;
filter: url(#glowShadow); filter: url(#glowShadow);
} }
} }
@@ -390,12 +416,12 @@
&:hover, &:hover,
&.highlighted { &.highlighted {
circle.point-border { circle.point-border {
stroke: $zbx-text-highlighted; stroke: $problem-event-highlighted;
stroke-width: 1; stroke-width: 1;
filter: url(#glowShadow); filter: url(#glowShadow);
} }
.point-core { .point-core {
fill: $zbx-text-highlighted; fill: $problem-event-highlighted;
} }
} }
} }

7
src/sass/_variables.dark.scss
View File

@@ -2,9 +2,14 @@ $regex: #d69e2e;
$zbx-tag-color: $gray-5; $zbx-tag-color: $gray-5;
$zbx-text-highlighted: $white; $zbx-text-highlighted: $white;
$action-button-color: $blue-dark;
$action-button-text-color: $gray-4;
$problems-border-color: $dark-1; $problems-border-color: $dark-1;
$problems-table-stripe: $dark-3; $problems-table-stripe: $dark-3;
$problems-table-row-hovered: darken($problems-table-stripe, 2%);
$problem-details-background: $dark-3; $problem-details-background: $dark-3;
$problem-statusbar-background: $dark-2; $problem-statusbar-background: $dark-2;
$problem-statusbar-muted: $dark-3; $problem-statusbar-muted: $dark-3;
$action-button-color: #103e66; $problem-statusbar-fired: $orange;
$problem-event-highlighted: $white;
$problem-expander-highlighted: lighten($problems-table-stripe, 8%);

7
src/sass/_variables.light.scss
View File

@@ -2,9 +2,14 @@ $regex: #d69e2e;
$zbx-tag-color: $gray-6; $zbx-tag-color: $gray-6;
$zbx-text-highlighted: $black; $zbx-text-highlighted: $black;
$action-button-color: #497dc0;
$action-button-text-color: $gray-6;
$problems-border-color: $dark-1; $problems-border-color: $dark-1;
$problems-table-stripe: $gray-6; $problems-table-stripe: $gray-6;
$problems-table-row-hovered: $gray-4;
$problem-details-background: $gray-6; $problem-details-background: $gray-6;
$problem-statusbar-background: $gray-4; $problem-statusbar-background: $gray-4;
$problem-statusbar-muted: $gray-5; $problem-statusbar-muted: $gray-5;
$action-button-color: #103e66; $problem-statusbar-fired: #ca4c17;
$problem-event-highlighted: $white;
$problem-expander-highlighted: darken($problems-table-stripe, 20%);