Bernhard.Linz/mailGraph
1
0
Fork 0
mirror of https://github.com/moudsen/mailGraph synced 2025-10-31 09:37:39 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Revised html template to be responsive. Leaving beta mode! (v1.20)

Browse Source
This commit is contained in:
Mark Oudsen
2021-03-07 22:21:38 +01:00
parent 1a82a1ac85
commit d624fa694d
2 changed files with 137 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
templates/html.template
View File

@@ -1,79 +1,129 @@
<html lang="en"><head><meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<style>
.Resolved {
background-color:#86cc89;
border:1px solid #57bd5b;
font-family:Tahoma,Geneva,Arial,sans-serif;font-size:14px;
}
.Information {
background-color:#7499ff;
border:1px solid #4673f0;
font-family:Tahoma,Geneva,Arial,sans-serif;font-size:14px;
}
.Warning {
background-color:#FFC859;
border:1px solid #E69F10;
font-family:Tahoma,Geneva,Arial,sans-serif;font-size:14px;
}
.Average {
background-color:#FFA059;
border:1px solid #e66e15;
font-family:Tahoma,Geneva,Arial,sans-serif;font-size:14px;
}
.High {
background-color:#E97659;
border:1px solid #E45959;
font-family:Tahoma,Geneva,Arial,sans-serif;font-size:14px;
}
.Disaster {
background-color:#E45959;
border:1px solid #DE1E09;
font-family:Tahoma,Geneva,Arial,sans-serif;font-size:14px;
}
body {
font-family: Arial,sans-serif;
}
.Resolved {
background-color:#86cc89;
border:1px solid #57bd5b;
}
.Information {
background-color:#7499ff;
border:1px solid #4673f0;
}
.Warning {
background-color:#FFC859;
border:1px solid #E69F10;
}
.Average {
background-color:#FFA059;
border:1px solid #e66e15;
}
.High {
background-color:#E97659;
border:1px solid #E45959;
}
.Disaster {
background-color:#E45959;
border:1px solid #DE1E09;
}
a {
text-decoration: none;
color: #010059;
}
a:link {
text-decoration: none;
color: #010059;
}
a:visited {
text-decoration: none;
color: #010059;
}
a:active {
text-decoration: none;
color: #010059;
}
.MsgBody {
width: 100%;
}
#maintable {
width: 800px;
}
@media screen and (max-width: 800px;) {
#maintable {
width: 100%;
max-width: 790px;
}
#mainimage {
-ms-interpolation-mode: bicubic;
width: 100%;
max-width: 790px;
max-height: 450px;
}
}
.links {
font-size: 9px;
}
.header {
font-size: 16px;
font-weight: bold;
}
.content {
font-size: 14px;
}
</style>
</head>
<body>
<table style="margin: 10px;border-spacing:0 15px;border-collapse: separate;">
<tr>
<td class="{{ EVENT_SEVERITY }}" style="border-radius:10px;padding: 10px 36px 10px 36px; ">
<table class="{{ EVENT_SEVERITY }}" style="border:0; text-align:left;" cellpadding="0" cellspacing="0">
<tr><td>
<p><b>EVENT INFORMATION</b></p>
Description: <b>{{ EVENT_NAME }}</b><br/>
Host: <b>{{ HOST_NAME }}</b>
<table style="margin: 5px;border-spacing:0 10px;border-collapse: separate;" align=center>
<tr>
<td class="{{ EVENT_SEVERITY }}" style="border-radius:10px;padding:5px 18px 5px 18px; ">
<table class="{{ EVENT_SEVERITY }}" style="border:0; text-align:left;" cellpadding="0" cellspacing="0">
<tr>
<td>
<p><span class="header">EVENT INFORMATION</span></p>
<span class="content">
Description: <b>{{ EVENT_NAME }}</b><br/>
Host: <b>{{ HOST_NAME }}</b>
{% if HOST_ERROR|length > 0 %}
({{ HOST_ERROR }})
({{ HOST_ERROR }})
{% endif %}
<br/>
<br/>
{% if EVENT_OPDATE|length > 0 %}
Operational data: <b>{{ EVENT_OPDATA }}</b><br/>
Operational data: <b>{{ EVENT_OPDATA }}</b><br/>
{% endif %}
Status: <b>{{ EVENT_STATUS }}</b><br/>
Severity: <b>{{ EVENT_SEVERITY }}</b><br/>
Status: <b>{{ EVENT_STATUS }}</b><br/>
Severity: <b>{{ EVENT_SEVERITY }}</b><br/>
{% if EVENT_SEVERITY == "Resolved" %}
Duration: <b>{{ EVENT_DURATION }}</b><br/>
Duration: <b>{{ EVENT_DURATION }}</b><br/>
{% endif %}
Item: <b>{{ ITEM_NAME }}</b><br/>
Previous/Last: {{ ITEM_PREVIOUSVALUE }} ==&gt; {{ ITEM_LASTVALUE }}
<p><a href="{{ EVENTDETAILS_URL }}">Event Details</a><br/></p>
</td></tr>
</table>
</td>
</tr>
Item: <b>{{ ITEM_NAME }}</b><br/>
Previous/Last: {{ ITEM_PREVIOUSVALUE }} ==&gt; {{ ITEM_LASTVALUE }}
</span>
</td>
</tr>
</table>
</td>
</tr>
{% if GRAPH_CID|length > 0 %}
<tr>
<td align="center"><img src="{{ GRAPH_CID }}" /></td>
</tr>
<tr>
<div align=justify>
<td align="center"><img id="mainimage" border=0 style="width: 100%; max-width: 790px" alt="Zabbix Graph" src="{{ GRAPH_CID }}" /></td>
</div>
</tr>
{% endif %}
</table>
<p style="font-size:10px">
Event ID: <a href="{{ EVENTDETAILS_URL }}">{{ EVENT_ID }}</a> //
Trigger ID: <a href="{{ TRIGGER_URL }}">{{ TRIGGER_ID }}</a> //
Item ID: <a href="{{ ITEM_URL }}">{{ ITEM_ID }}</a> //
Host ID: <a href="{{ HOST_URL }}">{{ HOST_ID }}</a>
<tr>
<td class="links">
<div align=center>
Event ID: <a href="{{ EVENTDETAILS_URL }}">{{ EVENT_ID }}</a> //
Trigger ID: <a href="{{ TRIGGER_URL }}">{{ TRIGGER_ID }}</a> //
Item ID: <a href="{{ ITEM_URL }}">{{ ITEM_ID }}</a> //
Host ID: <a href="{{ HOST_URL }}">{{ HOST_ID }}</a>
{% if GRAPH_ZABBIXLINK|length > 0 %}
// Graph ID: <a href="{{ GRAPH_ZABBIXLINK }}">{{ GRAPH_ID }}</a>
// Graph ID: <a href="{{ GRAPH_ZABBIXLINK }}">{{ GRAPH_ID }}</a>
{% endif %}
</p>
</div>
</td>
</tr>
</table>
</body>
</html>
</html>