Skip to content

Commit

Permalink
HZN-852: Separated Styles and neutralized trend chart layout
Browse files Browse the repository at this point in the history 
Change styling to a neutral layout. The color "green" is often interpreted as "OK" in monitoring. The charts itself
don't have any logic for such a thing. The hard coded CSS styling in JSP pages is broken out into SCSS files and use as
most possible the color variables from SCSS property files. I did also minor layout fixes for spacings, font size and
possitioning of the chart widgets.

The new chart styling is also easier to be used in Horizon/Meridian releases and don't require changes in the layout and
can be used in both products without forking the stylesheets.
  • Loading branch information
@indigo423 @christianpape
indigo423 authored and christianpape committed Sep 15, 2016
1 parent f64d3ee commit dd2d42f
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 112 deletions.
100 changes: 50 additions & 50 deletions opennms-base-assembly/src/main/filtered/etc/trend-configuration.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,25 @@

<trend-definition name="nodes">
<title>Nodes</title>
<subtitle>w/ Outages</subtitle>
<subtitle>with Outages</subtitle>
<visible>true</visible>
<icon>glyphicon-fire</icon>
<trend-attributes>
<trend-attribute key="sparkWidth" value="100%"/>
<trend-attribute key="sparkHeight" value="35"/>
<trend-attribute key="sparkChartRangeMin" value="0"/>
<trend-attribute key="sparkLineColor" value="white"/>
<trend-attribute key="sparkLineColor" value="#8f5902"/>
<trend-attribute key="sparkLineWidth" value="1.5"/>
<trend-attribute key="sparkFillColor" value="#88BB55"/>
<trend-attribute key="sparkSpotColor" value="white"/>
<trend-attribute key="sparkMinSpotColor" value="white"/>
<trend-attribute key="sparkMaxSpotColor" value="white"/>
<trend-attribute key="sparkFillColor" value="#e9b96e"/>
<trend-attribute key="sparkSpotColor" value="#8f5902"/>
<trend-attribute key="sparkMinSpotColor" value="#8f5902"/>
<trend-attribute key="sparkMaxSpotColor" value="#8f5902"/>
<trend-attribute key="sparkSpotRadius" value="3"/>
<trend-attribute key="sparkHighlightSpotColor" value="white"/>
<trend-attribute key="sparkHighlightLineColor" value="white"/>
<trend-attribute key="sparkHighlightSpotColor" value="#8f5902"/>
<trend-attribute key="sparkHighlightLineColor" value="#8f5902"/>
</trend-attributes>
<descriptionLink>outage/list.htm?outtype=current</descriptionLink>
<description>${intValue[23]} NODES WITH OUTAGE(S)</description>
<description>${intValue[23]} Nodes with Outage(s)</description>
<query>
<![CDATA[
select (
Expand All @@ -44,7 +44,7 @@
<trend-attribute key="sparkSliceColors" value="[#CC0000,#FF3300,#FF9900,#FFCC00,#999900,#336600,#999]"/>
</trend-attributes>
<descriptionLink>alarm/list.htm</descriptionLink>
<description>SEE ALARMS PAGE</description>
<description>Go to Alarms Page</description>
<query>
<![CDATA[
select (
Expand All @@ -64,13 +64,13 @@
<trend-attributes>
<trend-attribute key="sparkWidth" value="100%"/>
<trend-attribute key="sparkType" value="bar"/>
<trend-attribute key="sparkBarColor" value="white"/>
<trend-attribute key="sparkBarColor" value="#8f5902"/>
<trend-attribute key="sparkHeight" value="35"/>
<trend-attribute key="sparkBarWidth" value="3"/>
<trend-attribute key="sparkBarSpacing" value="2"/>
</trend-attributes>
<descriptionLink>alarm/list.htm</descriptionLink>
<description>${intValue[23]} NEW ALARM(S)</description>
<description>${intValue[23]} New Alarm(s)</description>
<query>
<![CDATA[
select (
Expand All @@ -84,25 +84,25 @@

<trend-definition name="alarms-total">
<title>Alarms</title>
<subtitle>UnACKed</subtitle>
<subtitle>Unacknowledged</subtitle>
<visible>true</visible>
<icon>glyphicon-bell</icon>
<trend-attributes>
<trend-attribute key="sparkWidth" value="100%"/>
<trend-attribute key="sparkHeight" value="35"/>
<trend-attribute key="sparkHeight" value="40"/>
<trend-attribute key="sparkChartRangeMin" value="0"/>
<trend-attribute key="sparkLineColor" value="white"/>
<trend-attribute key="sparkLineColor" value="#8f5902"/>
<trend-attribute key="sparkLineWidth" value="1.5"/>
<trend-attribute key="sparkFillColor" value="#88BB55"/>
<trend-attribute key="sparkSpotColor" value="white"/>
<trend-attribute key="sparkMinSpotColor" value="white"/>
<trend-attribute key="sparkMaxSpotColor" value="white"/>
<trend-attribute key="sparkFillColor" value="#e9b96e"/>
<trend-attribute key="sparkSpotColor" value="#8f5902"/>
<trend-attribute key="sparkMinSpotColor" value="#8f5902"/>
<trend-attribute key="sparkMaxSpotColor" value="#8f5902"/>
<trend-attribute key="sparkSpotRadius" value="3"/>
<trend-attribute key="sparkHighlightSpotColor" value="white"/>
<trend-attribute key="sparkHighlightLineColor" value="white"/>
<trend-attribute key="sparkHighlightSpotColor" value="#8f5902"/>
<trend-attribute key="sparkHighlightLineColor" value="#8f5902"/>
</trend-attributes>
<descriptionLink>alarm/list.htm</descriptionLink>
<description>${intValue[23]} UNACKNOWLEDGED ALARM(S)</description>
<description>${intValue[23]} Unacknowledged Alarm(s)</description>
<query>
<![CDATA[
select (
Expand All @@ -122,13 +122,13 @@
<trend-attributes>
<trend-attribute key="sparkWidth" value="100%"/>
<trend-attribute key="sparkType" value="bar"/>
<trend-attribute key="sparkBarColor" value="white"/>
<trend-attribute key="sparkHeight" value="35"/>
<trend-attribute key="sparkBarColor" value="#8f5902"/>
<trend-attribute key="sparkHeight" value="40"/>
<trend-attribute key="sparkBarWidth" value="3"/>
<trend-attribute key="sparkBarSpacing" value="2"/>
</trend-attributes>
<descriptionLink>outage/list.htm?outtype=both</descriptionLink>
<description>${intValue[23]} NEW OUTAGE(S)</description>
<description>${intValue[23]} New Outage(s)</description>
<query>
<![CDATA[
select (
Expand All @@ -147,20 +147,20 @@
<icon>glyphicon-exclamation-sign</icon>
<trend-attributes>
<trend-attribute key="sparkWidth" value="100%"/>
<trend-attribute key="sparkHeight" value="35"/>
<trend-attribute key="sparkHeight" value="40"/>
<trend-attribute key="sparkChartRangeMin" value="0"/>
<trend-attribute key="sparkLineColor" value="white"/>
<trend-attribute key="sparkLineColor" value="#8f5902"/>
<trend-attribute key="sparkLineWidth" value="1.5"/>
<trend-attribute key="sparkFillColor" value="#88BB55"/>
<trend-attribute key="sparkSpotColor" value="white"/>
<trend-attribute key="sparkMinSpotColor" value="white"/>
<trend-attribute key="sparkMaxSpotColor" value="white"/>
<trend-attribute key="sparkFillColor" value="#e9b96e"/>
<trend-attribute key="sparkSpotColor" value="#8f5902"/>
<trend-attribute key="sparkMinSpotColor" value="#8f5902"/>
<trend-attribute key="sparkMaxSpotColor" value="#8f5902"/>
<trend-attribute key="sparkSpotRadius" value="3"/>
<trend-attribute key="sparkHighlightSpotColor" value="white"/>
<trend-attribute key="sparkHighlightLineColor" value="white"/>
<trend-attribute key="sparkHighlightSpotColor" value="#8f5902"/>
<trend-attribute key="sparkHighlightLineColor" value="#8f5902"/>
</trend-attributes>
<descriptionLink>outage/list.htm?outtype=current</descriptionLink>
<description>${intValue[23]} CURRENT OUTAGE(S)</description>
<description>${intValue[23]} Current Outage(s)</description>
<query>
<![CDATA[
select (
Expand All @@ -173,20 +173,20 @@
</trend-definition>

<trend-definition name="bsm-new">
<title>BS Problems</title>
<subtitle>Occurence</subtitle>
<title>Business Services</title>
<subtitle>Problem Occurence</subtitle>
<visible>true</visible>
<icon>glyphicon-tasks</icon>
<trend-attributes>
<trend-attribute key="sparkWidth" value="100%"/>
<trend-attribute key="sparkType" value="bar"/>
<trend-attribute key="sparkBarColor" value="white"/>
<trend-attribute key="sparkHeight" value="35"/>
<trend-attribute key="sparkBarColor" value="#8f5902"/>
<trend-attribute key="sparkHeight" value="40"/>
<trend-attribute key="sparkBarWidth" value="3"/>
<trend-attribute key="sparkBarSpacing" value="2"/>
</trend-attributes>
<descriptionLink>topology?szl=1amp;layout=Hierarchy+Layout&amp;provider=Business+Services</descriptionLink>
<description>${intValue[23]} NEW PROBLEM(S)</description>
<description>${intValue[23]} New Problem(s)</description>
<query>
<![CDATA[
select (
Expand All @@ -199,26 +199,26 @@
</trend-definition>

<trend-definition name="bsm-total">
<title>BS Problems</title>
<subtitle>Current</subtitle>
<title>Business Services</title>
<subtitle>Current Problems</subtitle>
<visible>true</visible>
<icon>glyphicon-tasks</icon>
<trend-attributes>
<trend-attribute key="sparkWidth" value="100%"/>
<trend-attribute key="sparkHeight" value="35"/>
<trend-attribute key="sparkHeight" value="40"/>
<trend-attribute key="sparkChartRangeMin" value="0"/>
<trend-attribute key="sparkLineColor" value="white"/>
<trend-attribute key="sparkLineColor" value="#8f5902"/>
<trend-attribute key="sparkLineWidth" value="1.5"/>
<trend-attribute key="sparkFillColor" value="#88BB55"/>
<trend-attribute key="sparkSpotColor" value="white"/>
<trend-attribute key="sparkMinSpotColor" value="white"/>
<trend-attribute key="sparkMaxSpotColor" value="white"/>
<trend-attribute key="sparkFillColor" value="#e9b96e"/>
<trend-attribute key="sparkSpotColor" value="#8f5902"/>
<trend-attribute key="sparkMinSpotColor" value="#8f5902"/>
<trend-attribute key="sparkMaxSpotColor" value="#8f5902"/>
<trend-attribute key="sparkSpotRadius" value="3"/>
<trend-attribute key="sparkHighlightSpotColor" value="white"/>
<trend-attribute key="sparkHighlightLineColor" value="white"/>
<trend-attribute key="sparkHighlightSpotColor" value="#8f5902"/>
<trend-attribute key="sparkHighlightLineColor" value="#8f5902"/>
</trend-attributes>
<descriptionLink>topology?szl=1amp;layout=Hierarchy+Layout&amp;provider=Business+Services</descriptionLink>
<description>${intValue[23]} CURRENT PROBLEM(S)</description>
<description>${intValue[23]} Current Problem(s)</description>
<query>
<![CDATA[
select (
Expand Down
66 changes: 66 additions & 0 deletions opennms-webapp/src/main/scss/opennms-trendline.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
/*
* Styling properties for Trend Charts
*/

@import "properties.scss";


.alert-box .row {
margin-left: 5px !important;
margin-right: -5px !important;
}

/* defines the grid layout trend chart page */

.row.gutter-10 {
padding-top: 5px;
padding-bottom: 0px;
}

.gutter-10 > [class^="col-"], .gutter-10 > [class^=" col-"] {
padding-left: 0px;
padding-right: 5px;
}

.alert-box.panel-body {
background-color: $color_alto_approx;
}

/* Background color for trend charts */

.alert-trend {
background-color: $white;
border-color: $color_tundora_approx;
height: 90px;
color: $color_tundora_approx;
margin-bottom: 10px;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
}

.alert-trend h1 .glyphicon {
font-size: 1em;
padding-right: 10px;
}

.alert-trend .alert-link {
color: $color_tundora_approx;
}

.alert-trend a {
color: $color_suva_gray_approx;
}

.alert-trend table {
margin-bottom: 15px;
}

.alert {
padding: 10px !important;
}

.jqstooltip {
width: auto !important;
height: auto !important;
}
16 changes: 1 addition & 15 deletions opennms-webapp/src/main/webapp/WEB-INF/jsp/trend/trend-box.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,20 +36,6 @@
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<style type="text/css">
.row.gutter-10 {
margin-right: -5px;
margin-left: -5px;
}
.gutter-10 > [class^="col-"], .gutter-10 > [class^=" col-"] {
padding-right: 5px;
padding-left: 5px;
}
</style>

<%
int columns = 2;
Expand All @@ -64,7 +50,7 @@
<div class="panel-heading">
<h3 class="panel-title">Trend</h3>
</div>
<div class="panel-body">
<div class="alert-box panel-body">
<div class="row gutter-10">
<c:forEach var="trendDefinition" items="${trendDefinitions}">
<div class="col-xs-<%= colClass %>">
Expand Down
37 changes: 4 additions & 33 deletions opennms-webapp/src/main/webapp/WEB-INF/jsp/trend/trend.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,42 +32,15 @@
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<style type="text/css">
.alert-trend {
background-color: #4c9d29;
border-color: #4c9d29;
height: 90px;
color: white;
margin-bottom: 5px;
}
.alert-trend hr {
border-top-color: white;
}
.alert-trend .alert-link {
color: white;
}
.alert-trend a {
color: white;
}
.jqstooltip {
width: auto !important;
height: auto !important;
}
</style>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/opennms-trendline.css" />

<div class="alert alert-trend" role="alert">
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<table width="100%" border="0">
<tr>
<td width="1%">
<h1 style="margin:0;"><span class="glyphicon ${trendDefinition.icon}" aria-hidden="true"></span></h1>
</td>
<td style="white-space: nowrap; padding-left:5px; padding-right:5px;">
<td style="white-space: nowrap;">
<h3 style="margin:0;">${trendDefinition.title}</h3><h4 style="margin:0;">${trendDefinition.subtitle}</h4>
</td>
<td width="50%" align="right">
Expand All @@ -84,7 +57,7 @@
</td>
</tr>
</table>
<hr style="margin-top:5px;margin-bottom:5px;"/>

<c:choose>
<c:when test="${trendDefinition.descriptionLink!=''}">
<a href="${trendDefinition.descriptionLink}">${trendDefinition.description}</a>
Expand All @@ -101,5 +74,3 @@
});
</script>



Loading

0 comments on commit dd2d42f

Please sign in to comment.