<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dashboard - pyspider</title>
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <meta name="description" content="pyspider dashboard">
    <meta name="author" content="binux">
    <link href="{{ url_for('cdn', path='twitter-bootstrap/3.1.1/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('cdn', path='x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css') }}" rel="stylesheet">
    <link href="{{ url_for('cdn', path='sortable/0.6.0/css/sortable-theme-bootstrap.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='index.min.css') }}" rel="stylesheet">

    <script src="{{ url_for('cdn', path='jquery/1.11.0/jquery.min.js') }}"></script>
  </head>

  <body>
    <header>
      <div id="need-set-status-alert" class="alert alert-danger alert-dismissible" style="display:none;" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        Project is not started, please set status to RUNNING or DEBUG.
      </div>
      <h1>pyspider dashboard</h1>
      <table class="table queue-info">
        <tr>
          <th>scheduler</th>
          <td class="queue_value" title="scheduler2fetcher">???</td>
          <th>fetcher</th>
          <td class="queue_value" title="fetcher2processor">???</td>
          <th>processor</th>
          <td class="queue_value" title="processor2result">???</td>
          <th>result_worker</th>
        </tr>
        <tr>
          <td style="border-width: 0px 1px;"></td>
          <td colspan=3></td>
          <td style="border-width: 0px 1px;"></td>
          <td colspan=2 style="border-width: 0px;"></td>
        </tr>
        <tr>
          <td style="border-width: 0px 0px 1px 1px"></td>
          <td colspan=3 style="border-width: 1px 0px;">
            <span class="queue_value" title="newtask_queue">???</span>
            + <span class="queue_value" title="status_queue">???</span>
          </td>
          <td style="border-width: 0px 1px 1px 0px;"></td>
          <td colspan=2 style="border-width: 0px;"></td>
        </tr>
      </table>
    </header>
    <section>
      <div class="global-btn clearfix">
        <div class="create-btn-div">
          <button class="project-create btn btn-default btn-primary" data-toggle="modal" data-target="#create-project-modal">Create</button>
        </div>

        <div class="active-btn-div">
          {% if config.scheduler_rpc is not none %}
            <a class="btn btn-default btn-info" href='/tasks' target=_blank>Recent Active Tasks</a>
          {% endif %}
        </div>

        <div class="modal fade" id="create-project-modal">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Create New Project</h4>
              </div>
              <form class="form-horizontal" method="POST">
                <div class="modal-body">
                  <div class="form-group">
                    <label class="col-sm-3 control-label" for="project-name">Project Name</label>
                    <div class="col-sm-9">
                      <input class="form-control" type="text" name="project-name" autocomplete="off">
                      <span class="help-block" style="display: none;">[a-zA-Z0-9_]+</span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label" for="start-urls">Start URL(s)</label>
                    <div class="col-sm-9">
                      <input class="form-control" type="text" name="start-urls">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label" for="script-mode">Mode</label>
                    <div class="col-sm-9">
                      <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-default active">
                          <input type="radio" name="script-mode" id="mode-script" autocomplete="off" value="script" checked> Script
                        </label>
                        <label class="btn btn-default">
                          <input type="radio" name="script-mode" id="mode-slime" autocomplete="off" value="slime"> Slime
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary">Create</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <table class="table sortable-theme-bootstrap projects">
        <thead>
          <tr>
            <th>group</th>
            <th>project name</th>
            <th>status</th>
            <th data-type="num">rate/burst</th>
            <th data-type="num">avg time</th>
            <th class="project-progress" data-type="num">&nbsp;<span>progress</span></th>
            <th data-type="num">&nbsp;</th>
            <th data-type="num">&nbsp;</th>
            <th data-type="num">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
            <th data-type="num">actions</th>
          </tr>
        </thead>
        <tbody>
        {% raw %}
          <tr v-cloak v-for="project in projects" data-name="{{* project.name }}">
            <td class="project-group"><span>{{ project.group }}</span></td>
            <td class="project-name"><a href="/debug/{{* project.name }}">{{* project.name }}</a></td>
            <td class="project-status">
              <span class="status-{{ project.paused ? 'PAUSED' : project.status }}" :data-value="project.paused ? 'PAUSED' : project.status">
                {{ project.paused ? 'PAUSED' : project.status }}
              </span>
            </td>
            <td class="project-rate" :data-value="project.rate"><span>{{ project.rate }}/{{ project.burst }}</span></td>
            <td class="project-time" :data-value="project.time.fetch_time + project.time.process_time">
              <span v-show="project.time.fetch_time">{{ (project.time.fetch_time * 1000).toFixed(1) }}+{{ (project.time.process_time * 1000).toFixed(2) }}</span>
            </td>
            <td v-for="type in '5m,1h,1d,all'.split(',')"
                class="project-progress progress-{{* type }}"
                :title="project.progress[type].title"
                :data-value="project.progress[type].task">
              <div class="progress">
                <div class="progress-text">{{* type }}<span v-show="project.progress[type].task">: {{ project.progress[type].task }}</span></div>
                <div class="progress-bar progress-pending"
                     :style="{ width: project.progress[type].pending/project.progress[type].task*100 + '%' }"></div>
                <div class="progress-bar progress-bar-success progress-success"
                     :style="{ width: project.progress[type].success/project.progress[type].task*100 + '%' }"></div>
                <div class="progress-bar progress-bar-warning progress-retry"
                     :style="{ width: project.progress[type].retry/project.progress[type].task*100 + '%' }"></div>
                <div class="progress-bar progress-bar-danger progress-failed"
                     :style="{ width: project.progress[type].failed/project.progress[type].task*100 + '%' }"
                ></div>
              </div>
            </td>
            {% endraw %}

            {% raw %}
            <td class="project-actions" data-value="{{ project.updatetime }}">
              {% endraw %}
              # if config.scheduler_rpc is not none:
              {% raw %}
              <button class="project-run btn btn-default btn-xs" @click="project_run(project, $event)">Run</button>
              <a class="btn btn-default btn-xs" href="/tasks?project={{ project.name }}" target=_blank>Active Tasks</a>
              {% endraw %}
              # endif
              # if config.resultdb:
              {% raw %}
              <a class="btn btn-default btn-xs" href="/results?project={{ project.name }}" target=_blank>Results</a>
              {% endraw %}
              # endif
            </td>
          </tr>
        </tbody>
      </table>
    </section>
    <script>
      // json projects data for vue
      var projects = {{ projects | tojson | safe }};
    </script>
    <script src="{{ url_for('cdn', path='twitter-bootstrap/3.1.1/js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('cdn', path='x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js') }}"></script>
    <script src="{{ url_for('cdn', path='sortable/0.6.0/js/sortable.min.js') }}"></script>
    <script src="{{ url_for('cdn', path='vue/1.0.26/vue.min.js') }}"></script>
    <script src="{{ url_for('static', filename='index.min.js') }}"></script>
  </body>
</html>
<!-- vim: set et sw=2 ts=2 sts=2 ff=unix fenc=utf8 syntax=htmldjango: -->

