{% extends "screen/base.html" %}

{% block head_js %}
{{super()}}
<script>
    $(document).ready(function(){
    });
</script>

{%endblock%}

{% block container %}

    <div class="row-fluid">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                    在screen [&nbsp;<b>{{screen.name}}</b>&nbsp;] 中新增一个graph
                    </div>
                </div>

                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="post" action="/screen/{{screen.id}}/graph">
                     <div class="form-group">
                         <label class="control-label col-md-2" for="title">Graph标题</label>
                         <div class="col-md-8">
                             <input required type="text" class="form-control" name="title" value="{{graph and graph.title or ''}}">
                         </div>
                     </div>
                     <div class="form-group">
                         <label class="control-label col-md-2" for="hosts">Endpoints列表</label>
                         <div class="col-md-8">
                            <textarea name="hosts" rows="5" class="form-control">{{"\n".join(graph.hosts)}}</textarea>
                         </div>
                     </div>

                     <div class="form-group">
                         <label class="control-label col-md-2" for="counters">Counters列表</label>
                         <div class="col-md-8">
                             <textarea required rows="5" class="form-control" name="counters">{{"\n".join(graph.counters)}}</textarea>
                             <span class="help-block">一行一个完整的counter，比如: cpu.idle 或者<br/>
                             使用tag来筛选，比如metric=net.if.in.bytes iface=eth0 (其中metric项必须得有; metric和tag之间，tag与tag之间用空格分割)</span>
                         </div>
                     </div>

                     <div class="form-group">
                         <label class="control-label col-md-2" for="timespan">默认时间跨度</label>
                         <div class="col-md-8">
                            <select name="timespan" required class="form-control">
                                 <option value="3600" {%if graph and graph.timespan==3600%} selected {%endif%}>1小时</option>
                                 <option value="21600" {%if graph and graph.timespan==21600%} selected {%endif%}>6小时</option>
                                 <option value="43200" {%if graph and graph.timespan==43200%} selected {%endif%}>12小时</option>
                                 <option value="86400" {%if graph and graph.timespan==86400%} selected {%endif%}>1天</option>
                                 <option value="604800" {%if graph and graph.timespan==604800%} selected {%endif%}>7天</option>
                                 <option value="2592000" {%if graph and graph.timespan==2592000%} selected {%endif%}>1月</option>
                                 <option value="31536000" {%if graph and graph.timespan==31536000%} selected {%endif%}>1年</option>
                            </select>
                         </div>
                     </div>

                     <div class="form-group">
                         <label class="control-label col-md-2" for="graph_type">视角</label>
                         <div class="col-md-8">
                             <label class="radio">
                                 <input required type="radio" name="graph_type" value="h" {%if graph and graph.graph_type=="h"%}checked{%endif%}>
                                 endpoint视角
                            </label>
                             <label class="radio">
                                 <input required type="radio" name="graph_type" value="k" {%if graph and graph.graph_type=="k"%}checked{%endif%}>
                                 counter视角
                            </label>
                             <label class="radio">
                                 <input required type="radio" name="graph_type" value="a" {%if graph and graph.graph_type=="a"%}checked{%endif%}>
                                 组合视角
                            </label>
                        </div>
                     </div>

                     <div class="form-group">
                         <label class="control-label col-md-2" for="method">是否加和</label>
                         <div class="col-md-8">
                             <input type="checkbox" name="method" class="form-control" value="sum" {%if graph and graph.method.lower() == "sum"%}checked{%endif%}>
                         </div>
                     </div>
                     <div class="form-group">
                         <div class="col-md-offset-2 col-md-8">
                            <button type="submit" class="btn">添加</button>
                         </div>
                     </div>
                </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
