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

problems: more work on styles

Browse Source
This commit is contained in:
Alexander Zobnin
2018-12-26 12:49:27 +03:00
parent b448c4117d
commit 5fd9630163
4 changed files with 81 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -116,14 +116,14 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
return <div className="event-timeline" ref={this.setRootRef} />; return <div className="event-timeline" ref={this.setRootRef} />;
} }
const { timeRange, eventPointSize, eventRegionHeight, problemColor, okColor } = this.props; const { timeRange, eventPointSize, eventRegionHeight } = this.props;
const events = this.sortEvents(); const events = this.sortEvents();
const boxWidth = this.state.width + eventPointSize; const boxWidth = this.state.width + eventPointSize;
const boxHeight = eventPointSize * 2; const boxHeight = Math.round(eventPointSize * 2.5);
const width = boxWidth - eventPointSize; const width = boxWidth - eventPointSize;
const padding = Math.round(eventPointSize / 2); const padding = Math.round(eventPointSize / 2);
const pointsYpos = eventRegionHeight / 2; const pointsYpos = eventRegionHeight / 2;
const timelineYpos = Math.round(boxHeight / 2); const timelineYpos = Math.round(boxHeight / 2 - eventPointSize / 2);
return ( return (
<div className="event-timeline" ref={this.setRootRef} style={{ transform: `translate(${-padding}px, 0)`}}> <div className="event-timeline" ref={this.setRootRef} style={{ transform: `translate(${-padding}px, 0)`}}>
@@ -144,8 +144,6 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
timeRange={timeRange} timeRange={timeRange}
width={width} width={width}
height={eventRegionHeight} height={eventRegionHeight}
okColor={okColor}
problemColor={problemColor}
highlightedRegion={this.state.highlightedRegion} highlightedRegion={this.state.highlightedRegion}
/> />
</g> </g>
@@ -155,8 +153,6 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
timeRange={timeRange} timeRange={timeRange}
width={width} width={width}
pointSize={eventPointSize} pointSize={eventPointSize}
okColor={okColor}
problemColor={problemColor}
onPointHighlight={this.handlePointHighlight} onPointHighlight={this.handlePointHighlight}
onPointUnHighlight={this.handlePointUnHighlight} onPointUnHighlight={this.handlePointUnHighlight}
/> />
@@ -227,18 +223,27 @@ class TimelineInfoContainer extends PureComponent<TimelineInfoContainerProps> {
const ts = moment(Number(event.clock) * 1000); const ts = moment(Number(event.clock) * 1000);
const tsFormatted = ts.format('HH:mm:ss'); const tsFormatted = ts.format('HH:mm:ss');
infoItems = [ infoItems = [
<span key="ts" className="event-timestamp">{tsFormatted}</span> <span key="ts" className="event-timestamp">
<span className="event-timestamp-label">Time:&nbsp;</span>
<span className="event-timestamp-value">{tsFormatted}</span>
</span>
]; ];
} }
if (eventInfo && eventInfo.duration) { if (eventInfo && eventInfo.duration) {
const duration = eventInfo.duration; const duration = eventInfo.duration;
const durationFormatted = moment.utc(duration).format('HH:mm:ss'); const durationFormatted = moment.utc(duration).format('HH:mm:ss');
durationItem = <span key="duration" className="event-timestamp">duration: {durationFormatted}</span>; durationItem = (
<span key="duration" className="event-timestamp">
<span className="event-timestamp-label">Duration:&nbsp;</span>
<span className="event-timestamp-value">{durationFormatted}</span>
</span>
);
} }
const containerStyle: React.CSSProperties = { const containerStyle: React.CSSProperties = { left };
opacity: show ? 1 : 0, if (!show) {
left, containerStyle.opacity = 0;
}; }
return ( return (
<div className={className} style={containerStyle}> <div className={className} style={containerStyle}>
<div> <div>
@@ -257,8 +262,8 @@ interface TimelineRegionsProps {
timeRange: GFTimeRange; timeRange: GFTimeRange;
width: number; width: number;
height: number; height: number;
okColor: string; okColor?: string;
problemColor: string; problemColor?: string;
highlightedRegion?: number | null; highlightedRegion?: number | null;
} }
@@ -268,7 +273,7 @@ class TimelineRegions extends PureComponent<TimelineRegionsProps> {
}; };
render() { render() {
const { events, timeRange, width, height, okColor, problemColor, highlightedRegion } = this.props; const { events, timeRange, width, height, highlightedRegion } = this.props;
const { timeFrom, timeTo } = timeRange; const { timeFrom, timeTo } = timeRange;
const range = timeTo - timeFrom; const range = timeTo - timeFrom;
@@ -277,15 +282,14 @@ class TimelineRegions extends PureComponent<TimelineRegionsProps> {
const firstTs = events.length ? Number(events[0].clock) : timeTo; const firstTs = events.length ? Number(events[0].clock) : timeTo;
const duration = (firstTs - timeFrom) / range; const duration = (firstTs - timeFrom) / range;
const regionWidth = Math.round(duration * width); const regionWidth = Math.round(duration * width);
const firstEventColor = events[0].value !== '1' ? problemColor : okColor;
const highlighted = highlightedRegion === 0; const highlighted = highlightedRegion === 0;
const className = `problem-event-region ${highlighted ? 'highlighted' : ''}`; const valueClass = `problem-event--${events[0].value !== '1' ? 'problem' : 'ok'}`;
const className = `problem-event-region ${valueClass} ${highlighted ? 'highlighted' : ''}`;
const firstEventAttributes = { const firstEventAttributes = {
x: 0, x: 0,
y: 0, y: 0,
width: regionWidth, width: regionWidth,
height: height, height: height,
fill: firstEventColor,
}; };
firstItem = ( firstItem = (
<rect key='0' className={className} {...firstEventAttributes}></rect> <rect key='0' className={className} {...firstEventAttributes}></rect>
@@ -298,15 +302,14 @@ class TimelineRegions extends PureComponent<TimelineRegionsProps> {
const duration = (nextTs - ts) / range; const duration = (nextTs - ts) / range;
const regionWidth = Math.round(duration * width); const regionWidth = Math.round(duration * width);
const posLeft = Math.round((ts - timeFrom) / range * width); const posLeft = Math.round((ts - timeFrom) / range * width);
const eventColor = event.value === '1' ? problemColor : okColor;
const highlighted = highlightedRegion && highlightedRegion - 1 === index; const highlighted = highlightedRegion && highlightedRegion - 1 === index;
const className = `problem-event-region ${highlighted ? 'highlighted' : ''}`; const valueClass = `problem-event--${event.value === '1' ? 'problem' : 'ok'}`;
const className = `problem-event-region ${valueClass} ${highlighted ? 'highlighted' : ''}`;
const attributes = { const attributes = {
x: posLeft, x: posLeft,
y: 0, y: 0,
width: regionWidth, width: regionWidth,
height: height, height: height,
fill: eventColor,
}; };
return ( return (
@@ -326,8 +329,8 @@ interface TimelinePointsProps {
timeRange: GFTimeRange; timeRange: GFTimeRange;
width: number; width: number;
pointSize: number; pointSize: number;
okColor: string; okColor?: string;
problemColor: string; problemColor?: string;
highlightRegion?: boolean; highlightRegion?: boolean;
onPointHighlight?: (index: number, secondIndex?: number) => void; onPointHighlight?: (index: number, secondIndex?: number) => void;
onPointUnHighlight?: () => void; onPointUnHighlight?: () => void;
@@ -407,23 +410,22 @@ class TimelinePoints extends PureComponent<TimelinePointsProps, TimelinePointsSt
} }
render() { render() {
const { events, timeRange, width, pointSize, okColor, problemColor } = this.props; const { events, timeRange, width, pointSize } = this.props;
const { timeFrom, timeTo } = timeRange; const { timeFrom, timeTo } = timeRange;
const range = timeTo - timeFrom; const range = timeTo - timeFrom;
const pointR = pointSize / 2; const pointR = pointSize / 2;
const eventsItems = events.map((event, i) => { const eventsItems = events.map((event, i) => {
const ts = Number(event.clock); const ts = Number(event.clock);
const posLeft = Math.round((ts - timeFrom) / range * width - pointR); const posLeft = Math.round((ts - timeFrom) / range * width - pointR);
const eventColor = event.value === '1' ? problemColor : okColor; const className = `problem-event-item problem-event--${event.value === '1' ? 'problem' : 'ok'}`;
const highlighted = this.state.highlighted.indexOf(i) !== -1; const highlighted = this.state.highlighted.indexOf(i) !== -1;
return ( return (
<TimelinePoint <TimelinePoint
key={event.eventid} key={event.eventid}
className="problem-event-item" className={className}
x={posLeft} x={posLeft}
r={pointR} r={pointR}
color={eventColor}
highlighted={highlighted} highlighted={highlighted}
onPointHighlight={this.highlightPoint(i)} onPointHighlight={this.highlightPoint(i)}
onPointUnHighlight={this.unHighlightPoint(i)} onPointUnHighlight={this.unHighlightPoint(i)}
@@ -440,7 +442,7 @@ class TimelinePoints extends PureComponent<TimelinePointsProps, TimelinePointsSt
interface TimelinePointProps { interface TimelinePointProps {
x: number; x: number;
r: number; r: number;
color: string; color?: string;
highlighted?: boolean; highlighted?: boolean;
className?: string; className?: string;
onPointHighlight?: () => void; onPointHighlight?: () => void;
@@ -477,7 +479,7 @@ class TimelinePoint extends PureComponent<TimelinePointProps, TimelinePointState
} }
render() { render() {
const { x, color } = this.props; const { x } = this.props;
const r = this.state.highlighted ? Math.round(this.props.r * HIGHLIGHTED_POINT_SIZE) : this.props.r; const r = this.state.highlighted ? Math.round(this.props.r * HIGHLIGHTED_POINT_SIZE) : this.props.r;
const cx = x + this.props.r; const cx = x + this.props.r;
const rInner = Math.round(r * INNER_POINT_SIZE); const rInner = Math.round(r * INNER_POINT_SIZE);
@@ -488,8 +490,8 @@ class TimelinePoint extends PureComponent<TimelinePointProps, TimelinePointState
filter="url(#dropShadow)" filter="url(#dropShadow)"
onMouseOver={this.handleMouseOver} onMouseOver={this.handleMouseOver}
onMouseLeave={this.handleMouseLeave}> onMouseLeave={this.handleMouseLeave}>
<circle cx={0} cy={0} r={r} fill={color} className="point-border" /> <circle cx={0} cy={0} r={r} className="point-border" />
<circle cx={0} cy={0} r={rInner} fill="#000000" className="point-core" /> <circle cx={0} cy={0} r={rInner} className="point-core" />
</g> </g>
); );
} }

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

@@ -394,8 +394,8 @@
.event-timeline { .event-timeline {
position: relative; position: relative;
margin-bottom: 0.6rem; margin: 0.6rem 0;
padding-top: 2rem; padding-top: 2.6rem;
// margin-top: auto; // margin-top: auto;
.timeline-info-container { .timeline-info-container {
@@ -403,29 +403,34 @@
top: 0; top: 0;
left: 0; left: 0;
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
// border: 1px solid $text-muted; // opacity: 0.8;
// border-radius: 2px;
display: block;
.event-timestamp { .event-timestamp {
font-weight: 500; font-weight: 500;
color: $text-muted;
.event-timestamp-label {
color: $text-muted;
}
.event-timestamp-value {
float: right;
}
} }
} }
// svg.event-timeline-canvas {
// // height: 40px;
// g.event-timeline-group {
// // height: 40px;
// // transform: translate(0px, 14px);
// }
// }
.problem-event-region { .problem-event-region {
// transition: all 0.2s ease-out; // transition: all 0.2s ease-out;
// opacity: 0.7; // opacity: 0.7;
&.problem-event {
&--ok {
fill: $problem-event-ok-color;
}
&--problem {
fill: $problem-event-problem-color;
}
}
&:hover, &:hover,
&.highlighted { &.highlighted {
// opacity: 1; // opacity: 1;
@@ -439,6 +444,19 @@
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
} }
&.problem-event {
&--ok .point-border {
fill: $problem-event-ok-color;
}
&--problem .point-border {
fill: $problem-event-problem-color;
}
}
.point-core {
fill: $problem-event-core;
}
&:hover, &:hover,
&.highlighted { &.highlighted {
circle.point-border { circle.point-border {
@@ -447,7 +465,7 @@
filter: url(#glowShadow); filter: url(#glowShadow);
} }
.point-core { .point-core {
fill: $problem-event-highlighted; fill: $problem-event-core-highlighted;
} }
} }
} }

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

@@ -2,6 +2,7 @@ $regex: #d69e2e;
$zbx-tag-color: $gray-5; $zbx-tag-color: $gray-5;
$zbx-text-highlighted: $white; $zbx-text-highlighted: $white;
$zbx-text-color-disabled: $gray-1;
$action-button-color: $blue-dark; $action-button-color: $blue-dark;
$action-button-text-color: $gray-4; $action-button-text-color: $gray-4;
$problems-border-color: $dark-1; $problems-border-color: $dark-1;
@@ -14,6 +15,11 @@ $problem-statusbar-muted: $dark-3;
$problem-statusbar-fired: $orange; $problem-statusbar-fired: $orange;
$problem-statusbar-glow: 0px 0px 10px rgba($problem-statusbar-fired, 0.1); $problem-statusbar-glow: 0px 0px 10px rgba($problem-statusbar-fired, 0.1);
$problem-event-highlighted: $white; $problem-event-highlighted: rgba($white, 0.7);
$problem-event-core-highlighted: $white;
$problem-event-core: #000000;
$problem-event-ok-color: #38bd71;
$problem-event-problem-color: #d70000;
$problem-expander-highlighted: lighten($problems-table-stripe, 8%); $problem-expander-highlighted: lighten($problems-table-stripe, 8%);
$problem-container-shadow: rgba($gray-2, 0.2) $problem-container-shadow: rgba($gray-2, 0.2)

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

@@ -2,6 +2,7 @@ $regex: #d69e2e;
$zbx-tag-color: $gray-6; $zbx-tag-color: $gray-6;
$zbx-text-highlighted: $black; $zbx-text-highlighted: $black;
$zbx-text-color-disabled: $gray-3;
$action-button-color: #497dc0; $action-button-color: #497dc0;
$action-button-text-color: $gray-6; $action-button-text-color: $gray-6;
$problems-border-color: $dark-1; $problems-border-color: $dark-1;
@@ -15,5 +16,10 @@ $problem-statusbar-fired: #ca4c17;
$problem-statusbar-glow: inset 0px 0px 10px rgba($problem-statusbar-fired, 0.5); $problem-statusbar-glow: inset 0px 0px 10px rgba($problem-statusbar-fired, 0.5);
$problem-event-highlighted: $white; $problem-event-highlighted: $white;
$problem-event-core-highlighted: $white;
$problem-event-core: $gray-6;
$problem-event-ok-color: #2baf63;
$problem-event-problem-color: #d70000;
$problem-expander-highlighted: darken($problems-table-stripe, 20%); $problem-expander-highlighted: darken($problems-table-stripe, 20%);
$problem-container-shadow: rgba($gray-2, 0.5) $problem-container-shadow: rgba($gray-2, 0.5)