967 lines
45 KiB
HTML
Executable File
967 lines
45 KiB
HTML
Executable File
{% extends "header.html" %}
|
|
{% block body %}
|
|
<form action="{{url_for('index')}}" id="builder" method="post" class="form-horizontal">
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h3 class="text-center">Alert Meta</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alert Name -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label for="alert_name" class="control-label">Alert Name:</label>
|
|
</div>
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#alertidModal">info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="alertidModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel">Alert Name</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>The alert name acts as both the name of the .yaml file and the id for the alert. The
|
|
alert name becomes part of what shows up in the title / subject when an alert is
|
|
triggered</p>
|
|
<p>Picking an alert name that already exists will overwrite the .yaml configuration file so
|
|
be aware of what you choose</p>
|
|
<p>The Alert name is also how this alert will show up in Victorops, Slack and Email
|
|
(Depending on what options you choose for the Alerting</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7">
|
|
<input type="text" id="alert_name" class="form-control" name="alert_name" value="{{ alert_name }}"
|
|
onkeyup="return forceLower(this);">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Check Interval -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="interval">Check Interval: </label>
|
|
</div>
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#intervalModal">info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="intervalModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="checkInterval">Check Interval</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>The check interval is how often the check will run the query (in seconds) and measure the
|
|
results</p>
|
|
<p>Anything less than 30 seconds will automatically be bumped up
|
|
to 30 seconds. This is due to the fact that metrics are collected every 30 seconds, so
|
|
checking more often than this would just result in the same values returned from the
|
|
query
|
|
as nothing would have changed yet</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-7">
|
|
<input type="number" id="interval" class="form-control" name="interval" value="{{ interval }}">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upper Critical Threshold -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="criticalUpperThreshold">Upper Critical Threshold: </label>
|
|
</div>
|
|
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#criticalUpperThresholdModal">
|
|
info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="criticalUpperThresholdModal" tabindex="-1" role="dialog"
|
|
aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="criticalUpperThresholdTitle">Critical Threshold</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>This is a Floating Point or Int that when the results back from the query exceeds this
|
|
number, a critical alert will trigger.</p>
|
|
<p>Only Critical Alerts will also trigger emails and slack alerts (if set)</p>
|
|
<p>Your query needs to be simplified down to just one or two
|
|
values per grouping (A start and end metric). The alerting system will look at all
|
|
values per grouping and check if any of the values are over the threshold to send out an
|
|
alert</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-7">
|
|
<input type="number" class="form-control" id="criticalUpperThreshold" name="critical_upper_threshold"
|
|
value="{{ critical_upper_threshold }}"
|
|
step="0.01"
|
|
onkeypress="validate(event)">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lower Critical Threshold -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="criticalLowerThreshold">Lower Critical Threshold: </label>
|
|
</div>
|
|
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#criticalLowerThresholdModal">
|
|
info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="criticalLowerThresholdModal" tabindex="-1" role="dialog"
|
|
aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="criticalLowerThresholdTitle">Lower Critical Threshold</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>This is a Floating Point or Int that when the results back from the query drops below this
|
|
number, a critical alert will trigger.</p>
|
|
<p>Only Critical Alerts will also trigger emails and slack alerts (if set)</p>
|
|
<p>Your query needs to be simplified down to just one or two
|
|
values per grouping (A start and end metric). The alerting system will look at all
|
|
values per grouping and check if any of the values are over the threshold to send out an
|
|
alert</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-7">
|
|
<input type="number" class="form-control" id="lower_criticalThreshold" name="critical_lower_threshold"
|
|
value="{{ critical_lower_threshold }}"
|
|
step="0.01"
|
|
onkeypress="validate(event)">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upper Warning Threshold -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="warningUpperThreshold">Upper Warning Threshold: </label>
|
|
</div>
|
|
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#warningUpperThresholdModal">
|
|
info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="warningUpperThresholdModal" tabindex="-1" role="dialog"
|
|
aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="warningUpperThresholdTitle">Upper Warning Threshold</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>This is a Floating Point or Int that when the results back from the query exceeds this
|
|
number, a warning alert will trigger.</p>
|
|
<p>Warnings will not trigger Email or Slack alerts (if set)</p>
|
|
<p>Your query needs to be simplified down to just one or two
|
|
values per grouping (A start and end metric). The alerting system will look at all
|
|
values per grouping and check if any of the values are over the threshold to send out an
|
|
alert</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7">
|
|
<div class="input-group">
|
|
<span class="input-group-addon">
|
|
{% if warning_upper_threshold %}
|
|
{% set warning_upper_checked='checked' %}
|
|
{% else %}
|
|
{% set warning_upper_disabled='disabled' %}
|
|
{% endif %}
|
|
<input type="checkbox" name="warning_upper" id="warning_upper" aria-label="..." onclick="dynThreshold(this);" {{
|
|
warning_upper_checked }}>
|
|
</span>
|
|
<input type="number" name="warning_upper_threshold" class="form-control" id="warning_upper_threshold"
|
|
value="{{ warning_upper_threshold }}"
|
|
aria-label="..." step="0.01" {{ warning_upper_disabled }}>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lower Warning Threshold -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="warningLowerThreshold">Lower Warning Threshold: </label>
|
|
</div>
|
|
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#warningLowerThresholdModal">
|
|
info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="warningLowerThresholdModal" tabindex="-1" role="dialog"
|
|
aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="warningLowerThresholdTitle">Lower Warning Threshold</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>This is a Floating Point or Int that when the results back from the query drops below this
|
|
number, a warning alert will trigger.</p>
|
|
<p>Warnings will not trigger Email or Slack alerts (if set)</p>
|
|
<p>Your query needs to be simplified down to just one or two
|
|
values per grouping (A start and end metric). The alerting system will look at all
|
|
values per grouping and check if any of the values are over the threshold to send out an
|
|
alert</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7">
|
|
<div class="input-group">
|
|
<span class="input-group-addon">
|
|
{% if warning_lower_threshold %}
|
|
{% set warning_lower_checked='checked' %}
|
|
{% else %}
|
|
{% set warning_lower_disabled='disabled' %}
|
|
{% endif %}
|
|
<input type="checkbox" name="warning_lower" id="warning_lower" aria-label="..." onclick="dynThreshold(this);" {{
|
|
warning_lower_checked }}>
|
|
</span>
|
|
<input type="number" name="warning_lower_threshold" class="form-control" id="warning_lower_threshold"
|
|
value="{{ warning_lower_threshold }}"
|
|
aria-label="..." step="0.01" {{ warning_lower_disabled }}>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Occurrences -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="occurrences_threshold">Frequency: </label>
|
|
</div>
|
|
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#occurrencesModal">
|
|
info
|
|
</button>
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="occurrencesModal" tabindex="-1" role="dialog"
|
|
aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="occurrencesTitle">Frequency</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>The occurrences value, when set, will determine how many times the alert has to exceed the
|
|
threshold in order for an alert to trigger.</p>
|
|
<p>This is particularly useful for metrics that can be spikey and resolve quickly,
|
|
using occurrences allows you to only be alerted when a spike is no longer spiking but
|
|
maintaining the rate over the period of time</p>
|
|
<p>This is compared once every interval, so if your alert is set to 5 minutes, with a
|
|
occurrences of 3, you'd have to have the threshold exceeded for 15 minutes before any
|
|
alerts
|
|
are sent out.</p>
|
|
<p>The occurrences value is optional, and if not enabled, the service assumes that after 1 query
|
|
exceeding the threshold is enough to trigger alerts. So in this way having an occurrences value
|
|
set
|
|
to 1 or not enabled does the same thing.</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-7">
|
|
<div class="input-group">
|
|
<span class="input-group-addon">
|
|
{% if occurrences_threshold and occurrences_threshold is number and occurrences_threshold > 1 %}
|
|
{% set occurrences_checked='checked' %}
|
|
{% else %}
|
|
{% set occurrences_disabled='disabled' %}
|
|
{% endif %}
|
|
<input type="checkbox" name="occurrences" id="occurrences" aria-label="..."
|
|
onclick="dynThreshold(this);" {{
|
|
occurrences_checked }}>
|
|
</span>
|
|
<input type="number" name="occurrences_threshold" class="form-control" id="occurrences_threshold"
|
|
value="{{ occurrences_threshold }}"
|
|
aria-label="..." step="1" min="2" {{ occurrences_disabled }} onkeyup="return forcePositive(this);">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tags -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="tags">Tags:</label>
|
|
</div>
|
|
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#tagsModal">info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="tagsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="tagsTitle">Tags</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>A comma seperated list of tags used to include in the alert subject</p>
|
|
<p>In the event of an alert, the tags will be used to look up distinctive
|
|
information and
|
|
include as part of the alert</p>
|
|
<p>For example including the dc tag in an alert means that if an alert occurs, the
|
|
alerting
|
|
system will look up the dc value from the returned query and included it as part
|
|
of the
|
|
alert subject</p>
|
|
<p>These are the same tag values used to build kiarosdb queries</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-7">
|
|
<input type="text" name="tags" id="tags" class="form-control" value="{{ tags }}" ,
|
|
onkeyup="return forceComma(this);">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h3 class="text-center">Notifications</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VictorOps Alerts -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="vo">VictorOps Alert:</label>
|
|
</div>
|
|
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#voModal">info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="voModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="voTitle">Victor Ops Alert List</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>A comma seperated list of victorops routing keys</p>
|
|
<p>In the event of an alert, the Ids listed here will recieve a victorops alert</p>
|
|
<p>If the checkbox isn't selected, when generating the .yaml config the values
|
|
listed will
|
|
be ignored</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7">
|
|
<div class="input-group">
|
|
<span class="input-group-addon">
|
|
{% if vo=="on" %}
|
|
{% set vo_checked='checked' %}
|
|
{% else %}
|
|
{% set vo_disabled='disabled' %}
|
|
{% endif %}
|
|
<input type="checkbox" name="vo" id="vo" aria-label="..." onclick="dynEnable(this);" {{ vo_checked
|
|
}}>
|
|
</span>
|
|
<input type="text" class="form-control" name="vo_list" id="vo_list" aria-label="..."
|
|
value="{{ vo_list }}" onkeyup="return forceComma(this);" {{ vo_disabled }}>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Alerts -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="email">Email Alert:</label>
|
|
</div>
|
|
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#emailModal">info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="emailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="emailTitle">Email Alert List</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>A comma seperated list of email names to send alerts to</p>
|
|
<p>In the event of an alert, the names listed here will recieve an email alert</p>
|
|
<p>The alerting system appends an @qualtrics.com to the names listed here, so there
|
|
is no
|
|
need to include the @domain as it's assumed all alerting emails would go to a
|
|
qualtrics
|
|
address</p>
|
|
<p>Also the SMTP server can only send to @qualtrics addresses anyways</p>
|
|
<p>For example sending an email to both netops and devops on an alert would be <b>devops,netops</b>
|
|
in the text box.</p>
|
|
<p>If the checkbox isn't selected, when generating the .yaml config the values
|
|
listed will
|
|
be ignored</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7">
|
|
<div class="input-group">
|
|
<span class="input-group-addon">
|
|
{% if email=="on" %}
|
|
{% set email_checked='checked' %}
|
|
{% else %}
|
|
{% set email_disabled='disabled' %}
|
|
{% endif %}
|
|
<input type="checkbox" name="email" id="email" aria-label="..." onclick="dynEnable(this);" {{
|
|
email_checked }}>
|
|
</span>
|
|
<input type="text" name="email_list" class="form-control" id="email_list"
|
|
value="{{ email_list }}"
|
|
aria-label="..." onkeyup="return forceComma(this);" {{ email_disabled }}>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slack Alert List -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="slack">Slack Alert:</label>
|
|
</div>
|
|
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#slackModal">info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="slackModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="slackTitle">Slack Alert List</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>A comma seperated list of slack names to send alerts to</p>
|
|
<p>In the event of an alert, the names listed here will recieve a slack alert from a
|
|
slackbot</p>
|
|
<p>You must include a @ for direct message alerts and # for channel alerts</p>
|
|
<p>For example, if the DevOps team wanted to get an alert in slack, the value in the
|
|
text
|
|
box would be <b>#devops</b>.
|
|
If I wanted to also include a direct message as well then the value would be
|
|
<b>#devops,@codyc</b></p>
|
|
<p>Don't troll people with your metric alerts bombing peopls slack, it's unkind</p>
|
|
<p>If the checkbox isn't selected, when generating the .yaml config the values
|
|
listed will
|
|
be ignored</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7">
|
|
<div class="input-group">
|
|
<span class="input-group-addon">
|
|
{% if slack=="on" %}
|
|
{% set slack_checked='checked' %}
|
|
{% else %}
|
|
{% set slack_disabled='disabled' %}
|
|
{% endif %}
|
|
<input type="checkbox" name="slack" id="slack" aria-label="..." onclick="dynEnable(this);" {{
|
|
slack_checked }}>
|
|
</span>
|
|
<span id="insertinputs_slack"></span>
|
|
<input type="text" name="slack_list" class="form-control" id="slack_list"
|
|
value="{{ slack_list }}"
|
|
aria-label="..." onkeyup="return forceComma(this);" {{ slack_disabled }}>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h3 class="text-center">Dashboard</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard URL -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="query">Dashboard URL:</label>
|
|
</div>
|
|
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#dashboardModal">
|
|
info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="dashboardModal" tabindex="-1" role="dialog"
|
|
aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="dashboardTitle">Dashboard URL</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Most queries are built based on some dashboard already built in grafana</p>
|
|
<p>By including the URL to that dashboard, the oncall engineer recieving the alert
|
|
will be
|
|
able to click the link in the alert and get a better picture of what this alert
|
|
is and
|
|
and how it relates to the datacenter</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-7">
|
|
<input type="text" name="url" id="url" class="form-control" value="{{ url }}">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h3 class="text-center">Kairosdb Query</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KairosDB Query -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="query">KariosDB Query:</label>
|
|
</div>
|
|
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#queryModal">info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="queryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="queryTitle">KariosDB Query</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Paste in your KariosDB Query that you have already worked out.</p>
|
|
<p>You can generate your query by going to the <a
|
|
href="http://kairosdb-metrics.service.eng.consul:8080/" target="_blank">KariosDB
|
|
UI
|
|
in eng</a></p>
|
|
<p>When generating your metric you will want to get the return values down to just 1
|
|
or 2
|
|
results per grouping. This can be done by sending the query to the MAX or MIN
|
|
aggregators (depending on your logic needs) as the last aggregator in the
|
|
query</p>
|
|
<p>You will also want to include a time offset, typically 5 minutes is used for when
|
|
to
|
|
start (as from 5 minutes ago to now). Setting the MAX aggregator to this value
|
|
is
|
|
usually typical</p>
|
|
<p>Once you have generated your query and it's returning the results you expect,
|
|
click the
|
|
<b>Show Query</b> button on the kairosDB UI and copy the results into this field
|
|
</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-7">
|
|
<textarea name="kairosdb_query" id="kairosdb_query" class="form-control" rows="12" cols="50">{{ kairosdb_query }}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h3 class="text-center">Prometheus Query</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prometheus URL -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label for="prometheus_url" class="control-label">Prometheus URL:</label>
|
|
</div>
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#prometheusurlModal">info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="prometheusurlModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel">Prometheus URL</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>URL for the prometheus server</p>
|
|
<p>Shared, production Prometheus URLs are currently:
|
|
<ul>
|
|
<li>http://big-trickster.service.eng.consul:9090</li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7">
|
|
<input type="text" id="prometheus_url" class="form-control" name="prometheus_url" value="{{ prometheus_url }}"
|
|
onkeyup="return forceLower(this);">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prometheus Query -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="query">Prometheus Query:</label>
|
|
</div>
|
|
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#prometheusQueryModal">info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="prometheusQueryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="queryTitle">Prometheus Query</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Paste in your Prometheus Query that you have already worked out.</p>
|
|
<p>You can generate your query by going to the url of your prometheus endpoint. Eng Vis plans on adding a smart router for this in the future so all instances will be exposed via a single smart proxy, but for now you'll need to know the name. </p><p><a
|
|
href="http://big-trickster.service.eng.consul:9090/graph" target="_blank">Prometheus Host Metrics
|
|
UI
|
|
in eng</a>
|
|
</p><p>
|
|
<a
|
|
href="http://big-trickster.service.eng.consul:9090/graph" target="_blank">Prometheus StatsD and other Metrics
|
|
UI
|
|
in eng</a></p>
|
|
<p>When creating a query, keep in mind a single value returned is gonna be the most
|
|
useful
|
|
, so stuff like "topk(1,yourmetrics)" are gonna be good choices. However, if
|
|
your query has multiple return values AOM will use last value.</p>
|
|
<p>So if you use a step/duration of 60 and a timspan of 300 between start
|
|
and
|
|
end you'll get back 5 values and the last will be used.
|
|
</p>
|
|
<p><a href="https://prometheus.io/docs/prometheus/latest/querying/functions/" target="_blank">Prometheus Functions</a></p>
|
|
<p>
|
|
<a href="https://prometheus.io/docs/prometheus/latest/querying/operators/" target="_blank">Prometheus Operators</a>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-7">
|
|
<textarea name="prometheus_query" id="prometheus_query" class="form-control" rows="12" cols="50">{{ prometheus_query }}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Start Time -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="start_time">Start Time: </label>
|
|
</div>
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#startTimeModal">info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="startTimeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="startTime">Start Time</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>This should be a relative time in seconds like '-600' for 10m, defaults to '-300'</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-7">
|
|
<input type="text" id="start_time" class="form-control" name="start_time" value="{{ start_time }}">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- End Time -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="end_time">End Time: </label>
|
|
</div>
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#endTimeModal">info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="endTimeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="endTime">End Time</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>This can be 'now' (default) or some relative offset like '-30' in seconds</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-7">
|
|
<input type="text" id="end_time" class="form-control" name="end_time" value="{{ end_time }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h3 class="text-center">Actions</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load Config File -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="loadFile">Load Config From File:</label>
|
|
</div>
|
|
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#loadModal">info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="loadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="loadTitle">Load Config from file</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Load a config already generated to file into the UI</p>
|
|
|
|
<p>This is handy when you need to make minor changes to a query, or add additional
|
|
alerting
|
|
values or change thresholds. Or if you are just terrified of yaml.</p>
|
|
<p>Hit the drop down to see a list of all alert configs (the names generated from
|
|
the values
|
|
used in the Alert Name field) Hit the Go and the config will load into all the
|
|
fields</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-7">
|
|
<div class="input-group">
|
|
<select name="loadFile" id="loadFile" class="form-control">
|
|
<option value="" selected></option>
|
|
{% for f in alert_list %}
|
|
<option value="{{ f }}">{{ f }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<span class="input-group-btn">
|
|
<input type="submit" name="generate" id="submitFiles" class="btn btn-primary" value="Go">
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Form -->
|
|
<div class="form-group">
|
|
<div class="col-sm-4">
|
|
<label class="control-label" for="submit">Generate YAML:</label>
|
|
</div>
|
|
<div class="col-sm-1">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#generateModal">
|
|
info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="generateModal" tabindex="-1" role="dialog"
|
|
aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="generateTitle">Generate Alert Config</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>When you are ready to take the values in the form and generate a alert config
|
|
.yaml file,
|
|
hit the button</p>
|
|
<p>This will generate a .yaml file based on the alert name. So for example if one
|
|
was to
|
|
have the value <b>mcp_errors_per_dc</b> as an alert name, the resulting file
|
|
would be
|
|
<b>mcp_errors_per_dc.yaml</b></p>
|
|
<p>This <b>will</b> overwrite a .yaml file if the alert name is the same as an
|
|
already
|
|
existing file</p>
|
|
<p>If there are any errors generating the config, the resulting page will include
|
|
the error
|
|
message and give you the ability to return back to this page with your form
|
|
saved</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7">
|
|
<input type="submit" id="submit" name='generate' class='btn btn-primary' value="generate"
|
|
class="button">
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
{% endblock %}
|