{% 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 %}