<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Luigi Task Visualiser</title>
        <link href="css/luigi.css" rel="stylesheet">
        <script src="lib/jquery-1.10.0.min.js"></script>
        <link href="lib/bootstrap3/css/bootstrap.min.css" rel="stylesheet">
        <link href="lib/bootstrap3/css/bootstrap-theme.min.css" rel="stylesheet">
        <script src="lib/bootstrap3/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="css/tipsy.css">
        <link href="lib/AdminLTE/css/AdminLTE.min.css" rel="stylesheet"/>
        <link href="css/font-awesome.min.css" rel="stylesheet"/>
        <link href="lib/AdminLTE/css/skin-green-light.min.css" rel="stylesheet"/>
        <link href="lib/datatables/css/jquery.dataTables.min.css" rel="stylesheet"/>
        <link href="lib/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
        <script src="lib/d3/d3.min.js" charset="utf-8"></script>
        <script src="lib/d3/dagre-d3.min.js"></script>
        <script src="lib/mustache.js"></script>
        <script src="js/luigi.js"></script>
        <script src="js/graph.js"></script>
        <script src="js/visualiserApp.js"></script>
        <script src="js/tipsy.js"></script>
        <script src="lib/jquery.slimscroll.min.js"></script>
        <script src="lib/AdminLTE/js/app.min.js"></script>
        <script src="lib/datatables/js/jquery.dataTables.min.js"></script>
        <script src="lib/URI/1.18.2/URI.js"></script>
        <script src="lib/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script type="text/template" name="actionsTemplate">
            <div class="span2">
                <a href="#tab=graph&taskId={{encodedTaskId}}&hideDone=1" class="btn btn-info btn-xs" title="View graph" data-toggle="tooltip"><i class="fa fa-sitemap"></i></a>
                {{#error}}<button class="btn btn-danger btn-xs showError" title="Show error" data-toggle="tooltip"><i class="fa fa-bug"></i></button>{{/error}}
                {{#error}}<button class="btn btn-warning btn-xs forgiveFailures" title="Forgive failures" data-toggle="tooltip"><i class="fa fa-ambulance"></i></button>{{/error}}
                {{#re_enable}}<button class="btn btn-danger btn-xs showError" title="Show error" data-toggle="tooltip"><i class="fa fa-bug"></i></button>{{/re_enable}}
                {{#re_enable}}<a class="btn btn-warning btn-xs re-enable-button" title="Re-enable" data-toggle="tooltip" data-task-id="{{taskId}}">Re-enable</a>{{/re_enable}}
                {{#trackingUrl}}<a target="_blank" href="{{trackingUrl}}" class="btn btn-primary btn-xs" title="Track Progress" data-toggle="tooltip"><i class="fa fa-eye"></i></a>{{/trackingUrl}}
                {{#statusMessage}}<button class="btn btn-primary btn-xs statusMessage" title="Status message" data-toggle="tooltip" data-task-id="{{taskId}}" data-display-name={{displayName}}><i class="fa fa-comment"></i></button>{{/statusMessage}}
                {{^statusMessage}}
                  {{#progressPercentage}}<button class="btn btn-primary btn-xs statusMessage" title="Status message" data-toggle="tooltip" data-task-id="{{taskId}}" data-display-name={{displayName}}><i class="fa fa-comment"></i></button>
                  {{/progressPercentage}}
                {{/statusMessage}}
            </div>
        </script>
        <script type="text/template" name="errorTemplate">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Traceback for {{displayName}}</h4>
              </div>
              <div class="modal-body">
                <pre class="pre-scrollable">{{error}}</pre>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </script>
        <script type="text/template" name="statusMessageTemplate">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Status message for {{displayName}}</h4>
              </div>
              <div class="modal-body">
                <pre class="pre-scrollable">{{statusMessage}}</pre>
                <div class="progress">
                  <div class="progress-bar" role="progressbar" aria-valuenow="{{progressPercentage}}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
                  {{progressPercentage}}%
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </script>
        <script type="text/template" name="workerTemplate">
            <div class="modal fade" id="setWorkersModal" tabindex="-1" role="dialog" aria-labelledby="setWorkersLabel">
              <div class="modal-dialog" role="document">
                <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" id="setWorkersLabel">Set workers</h4>
                  </div>
                  <div class="modal-body">
                    <form>
                      <div class="form-group">
                        <label for="setWorkersInput">New number of workers:</label>
                        <input type="text" class="form-control" id="setWorkersInput" placeholder="positive number">
                      </div>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" id="setWorkersButton" data-dismiss="modal" class="btn btn-primary">Set</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal fade" id="disableWorkerModal" tabindex="-1" role="dialog" aria-labelledby="disableWorkerLabel">
              <div class="modal-dialog" role="document">
                <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" id="disiableWorkerLabel">Disable worker?</h4>
                  </div>
                  <div class="modal-body">
                    Are you sure you want to disable this worker?
                    <p>
                        A disabled worker will finish its existing tasks but not start new ones.
                    </p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" id="disableWorkerButton" data-dismiss="modal" class="btn btn-danger">Disable Worker</button>
                  </div>
                </div>
              </div>
            </div>
            {{#workerList}}
            {{#is_disabled}}
            <div class="box box-solid box-default">
            {{/is_disabled}}
            {{^is_disabled}}
            <div class="box">
            {{/is_disabled}}
                <div class="box-header with-border">
                    <h3 class="box-title">{{name}}</h3>
                    <div class="box-tools pull-right">
                      {{#num_unread_rpc_messages}}
                      <span class="label-unread-worker-messages">{{num_unread_rpc_messages}} unread message(s)</span>
                      {{/num_unread_rpc_messages}}
                      {{^is_disabled}}
                      {{#workers}}
                      <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-default dropdown-toggle btn-set-workers" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Workers: <span id="label-n-workers" data-worker="{{name}}">{{workers}}</span> <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#" id="btn-increment-workers" data-worker="{{name}}">
                            <i class="glyphicon glyphicon-plus"></i> Add 1 worker
                          </a></li>
                          <li><a href="#" id="btn-decrement-workers" data-worker="{{name}}">
                            <i class="glyphicon glyphicon-minus"></i> Remove 1 worker
                          </a></li>
                          <li><a href="#" id="btn-set-workers" data-toggle="modal" data-target="#setWorkersModal" data-worker="{{name}}">
                            <i class="glyphicon glyphicon-pencil"></i> Set workers ...
                          </a></li>
                        </ul>
                      </div>
                      {{/workers}}
                      <div class="button-tooltip" data-toggle="tooltip" title="Disable Worker">
                        <button type="button" class="btn btn-sm btn-danger btn-disable-worker" data-toggle="modal" data-target="#disableWorkerModal" data-worker="{{name}}">
                          <i class="fa fa-fire-extinguisher"></i>
                        </button>
                      </div>
                      {{/is_disabled}}
                    </div>
                </div>
                <div class="box-body">
                    Started: {{start_time}}<br>
                    Last Checkin: {{active}}<br>
                    Root Task: <a href="#tab=graph&taskId={{{encoded_first_task}}}&hideDone=1">{{first_task_display_name}}</a><br>
                    Running: {{num_running}}<br>
                    Pending: {{num_pending}}<br>
                    Unique Pending: {{num_uniques}}<br>
                    {{#is_disabled}}
                    This worker is <b>disabled</b>. It will not start new tasks.<br>
                    {{/is_disabled}}

                    {{#num_running}}
                    <hr>
                    <table class="table table-striped worker-table">
                      <thead>
                        <th>Name</th>
                        <th>Priority</th>
                        <th>Resources</th>
                        <th>Time</th>
                        <th>Actions</th>
                      </thead>
                      <tbody>
                      {{#tasks}}
                      <tr>
                        <td>{{displayName}}</td>
                        <td>{{priority}}</td>
                        <td>{{resources}}</td>
                        <td>{{displayTime}}</td>
                        <td><a href="#tab=graph&taskId={{encodedTaskId}}" class="btn btn-info btn-xs" title="View graph" data-toggle="tooltip" data-action="drawGraph"><i class="fa fa-sitemap"/></a>
                          {{#trackingUrl}}<a target="_blank" href="{{trackingUrl}}" class="btn btn-primary btn-xs" title="Track Progress" data-toggle="tooltip"><i class="fa fa-eye"></i></a>{{/trackingUrl}}
                          {{#statusMessage}}<button class="btn btn-primary btn-xs statusMessage" title="Status message" data-toggle="tooltip" data-task-id="{{taskId}}" data-display-name="{{displayName}}"><i class="fa fa-comment"></i></button>{{/statusMessage}}
                        </td>
                      </tr>
                      {{/tasks}}
                      {{/num_running}}
                      </tbody>
                    </table>
                </div>
            </div>
            {{/workerList}}
        </script>

        <script type="text/template" name="resourceTemplate">
        <div class="modal fade" id="setResourcesModal" tabindex="-1" role="dialog" aria-labelledby="setResourcesLabel">
          <div class="modal-dialog" role="document">
            <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" id="setResourcesLabel">Set resources</h4>
              </div>
              <div class="modal-body">
                <form>
                  <div class="form-group">
                    <label for="setResourcesInput">New number of resources:</label>
                    <input type="text" class="form-control" id="setResourcesInput" placeholder="non-negative integer">
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" id="setResourcesButton" data-dismiss="modal" class="btn btn-primary">Set</button>
              </div>
            </div>
          </div>
        </div>
        {{#resources}}
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">{{name}}</h3>
                <div class="box-tools pull-right">
                    <div class="btn-group">
                      <button type="button" class="btn btn-sm btn-default dropdown-toggle btn-set-resources" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Change resources
                      </button>
                      <ul class="dropdown-menu">
                        <li><a href="#" class="btn-increment-resources" data-resource="{{name}}">
                          <i class="glyphicon glyphicon-plus"></i> Add 1 resource
                        </a></li>
                        <li><a href="#" class="btn-decrement-resources" data-resource="{{name}}">
                          <i class="glyphicon glyphicon-minus"></i> Remove 1 resource
                        </a></li>
                        <li><a href="#" class="btn-set-resources" data-toggle="modal" data-target="#setResourcesModal" data-resource="{{name}}">
                          <i class="glyphicon glyphicon-pencil"></i> Set resources ...
                        </a></li>
                      </ul>
                    </div>
                    {{#num_consumer}}
                    <i class="fa fa-navicon resources-collapse" data-target="#collapse-{{name}}"></i>
                    {{/num_consumer}}
                </div><!-- /.box-tools -->
            </div><!-- /.box-header -->
            <div class="box-body" id="{{name}}-resource-box">
                <div class="progress">
                    <div class="progress-bar progress-bar-{{bar_type}}" style="width: {{percent_used}}%">
                        <b>{{num_used}}/{{num_total}}</b>
                    </div>
                </div>

                {{#num_consumer}}
                <div class="collapse resource-box" id="collapse-{{name}}" data-resource="{{name}}">
                    <table class="table table-striped worker-table">
                        <thead>
                            <th>Name</th>
                            <th>Priority</th>
                            <th>Time</th>
                            <th>Actions</th>
                        </thead>
                        <tbody>
                            {{#tasks}}
                            <tr>
                                <td>{{displayName}}</td>
                                <td>{{priority}}</td>
                                <td>{{displayTime}}</td>
                                <td><a href="#tab=graph&taskId={{taskId}}&hideDone=1" class="btn btn-info btn-xs" title="View graph" data-toggle="tooltip" data-action="drawGraph"><i class="fa fa-sitemap"/></a></td>
                            </tr>
                            {{/tasks}}
                        </tbody>
                    </table>
                </div>
                {{/num_consumer}}
            </div><!-- /.box-body -->
        </div><!-- /.box -->
        {{/resources}}
        </script>

        <script type="text/template" name="sidebarTemplate">
            <ul class="sidebar-menu">
                <li class="header">TASK FAMILIES</li>
                {{#tasks}}
                <li data-task="{{name}}"><a href="#"><span class="badge">{{count}}</span> {{name}}</a>
                </li>
                {{/tasks}}
            </ul>
        </script>

        <script type="text/template" name="warningsTemplate">
           <div class="callout callout-danger">
            <p>
              Too many {{#missingCategories}} <strong>{{name}}</strong>, {{/missingCategories}}  tasks to display.
            </p>
            <p>
              Task family counts only include displayed tasks.  Use <strong>Filter on Server</strong> to constrain search.
            </p>
          </div>
        </script>

        <script type="text/template" name="currentFilterTemplate">
          <div class="callout callout-info">
            Displaying {{#catNames}}<strong>{{ name }}</strong>, {{/catNames}} tasks
            {{#taskFamily}}of family <strong>{{taskFamily}}</strong>{{/taskFamily}} {{#tableFilter}}filtered by <strong>"{{tableFilter}}"</strong>{{/tableFilter}}.
          </div>
        </script>

    </head>
    <body class="skin-green-light fixed">
        <div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        </div>
        <div class="modal fade" id="statusMessageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        </div>

        <div class="wrapper">
            <div class="main-header">
                <a class="logo" href="#">Luigi Task Status</a>
                <nav class="navbar navbar-static-top">
                    <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                        <span class="sr-only">Toggle navigation</span>
                    </a>
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="collapse navbar-collapse">
                            <ul class="nav navbar-nav">
                                <li><a class="js-nav-link" href="#tab=tasks" data-tab="taskList">Task List</a></li>
                                <li><a class="js-nav-link" href="#tab=graph" data-tab="dependencyGraph">Dependency Graph</a></li>
                                <li><a class="js-nav-link" href="#tab=workers" data-tab="workerList">Workers</a></li>
                                <li><a class="js-nav-link" href="#tab=resource" data-tab="resourceList">Resources</a></li>
                            </ul>
                            <form class="navbar-form navbar-right" id="pause-form">
                            </form>
                        </div>
                    </div>
                </nav>
            </div>
            <div class="main-sidebar">
                <div class="sidebar" id="familySidebar">
                </div>
            </div>


        <div class="content-wrapper">
          <div class="content">

        <div class="tab-content">
            <section id="taskList" class="container-fluid tab-pane active">
                <div class="row">
                  <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box status-info" data-color='yellow' data-category='PENDING' id="PENDING_info">
                      <span class="info-box-icon bg-yellow"><i class="fa fa-spinner fa-pulse"></i></span>
                      <div class="info-box-content">
                        <span class="info-box-text">Pending Tasks</span>
                        <span class="info-box-number">?</span>
                      </div><!-- /.info-box-content -->
                    </div><!-- /.info-box -->
                  </div>

                  <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box status-info" data-color='aqua' data-category='RUNNING' id="RUNNING_info">
                      <span class="info-box-icon bg-aqua"><i class="fa fa-spinner fa-pulse"></i></span>
                      <div class="info-box-content">
                        <span class="info-box-text">Running Tasks</span>
                        <span class="info-box-number">?</span>
                      </div><!-- /.info-box-content -->
                    </div><!-- /.info-box -->
                  </div>

                  <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box status-info" data-color='purple' data-category='BATCH_RUNNING' id="BATCH_RUNNING_info">
                      <span class="info-box-icon bg-purple"><i class="fa fa-spinner fa-pulse"></i></span>
                      <div class="info-box-content">
                        <span class="info-box-text">Batch Running Tasks</span>
                        <span class="info-box-number">?</span>
                      </div><!-- /.info-box-content -->
                    </div><!-- /.info-box -->
                  </div>

                  <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box status-info" data-color='green' data-category='DONE' id="DONE_info">
                      <span class="info-box-icon bg-green"><i class="fa fa-spinner fa-pulse"></i></span>
                      <div class="info-box-content">
                        <span class="info-box-text">Done Tasks</span>
                        <span class="info-box-number">?</span>
                      </div><!-- /.info-box-content -->
                    </div><!-- /.info-box -->
                  </div>

                  <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box status-info" data-color='red' data-category='FAILED' id="FAILED_info">
                      <span class="info-box-icon bg-red"><i class="fa fa-spinner fa-pulse"></i></span>
                      <div class="info-box-content">
                        <span class="info-box-text">Failed Tasks</span>
                        <span class="info-box-number">?</span>
                      </div><!-- /.info-box-content -->
                    </div><!-- /.info-box -->
                  </div>

                  <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box status-info" data-color='maroon' data-category='UPSTREAM_FAILED' id="UPSTREAM_FAILED_info">
                      <span class="info-box-icon bg-maroon"><i class="fa fa-spinner fa-pulse"></i></span>
                      <div class="info-box-content">
                        <span class="info-box-text">Upstream Failure</span>
                        <span class="info-box-number">?</span>
                      </div><!-- /.info-box-content -->
                    </div><!-- /.info-box -->
                  </div>

                  <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box status-info" data-color='gray' data-category='DISABLED' id="DISABLED_info">
                      <span class="info-box-icon bg-gray"><i class="fa fa-spinner fa-pulse"></i></span>
                      <div class="info-box-content">
                        <span class="info-box-text">Disabled Tasks</span>
                        <span class="info-box-number">?</span>
                      </div><!-- /.info-box-content -->
                    </div><!-- /.info-box -->
                  </div>

                  <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box status-info" data-color='gray' data-category='UPSTREAM_DISABLED' id="UPSTREAM_DISABLED_info">
                      <span class="info-box-icon bg-gray"><i class="fa fa-spinner fa-pulse"></i></span>
                      <div class="info-box-content">
                        <span class="info-box-text">Upstream Disabled</span>
                        <span class="info-box-number">?</span>
                      </div><!-- /.info-box-content -->
                    </div><!-- /.info-box -->
                  </div>

                </div>
                <div class="container-fluid infoBar">
                  <div id="currentFilter" class="col-md-6 col-sm-12 col-xs-12"></div>
                  <div id="warnings" class="col-md-6 col-sm-12 col-xs-12"></div>
                </div>
                <div class="col-md-8 col-md-offset-2">
                    <div id="checkboxes"></div>
                </div>

                <table id="taskTable" class="table table-striped">
                  <thead>
                    <th><!-- Category --></th>
                    <th>Name</th>
                    <th>Details</th>
                    <th>Priority</th>
                    <th>Time</th>
                    <th>Actions</th>
                  </thead>
                </table>


            </section>
            <section id="dependencyGraph" class="tab-pane">
              <div class="container-fluid">
                    <div class="form-group col-md-6 col-sm-4">
                      <form class="form-inline" id="loadTaskForm">
                        <input id="js-task-id" type="text" class="search-query form-control" placeholder="TaskId">
                        <button type="submit" class="btn btn-default form-control">Show task details</button>
                      </form>
                    </div>
                    <form class="form-inline" id="visForm">
                      <div class="form-group col-md-3">
                        <label class="btn btn-default" for="invertCheckbox">Show Upstream Dependencies
                            <input type="checkbox" id="invertCheckbox"/>
                        </label>
                        <label class="btn btn-default" for="hideDoneCheckbox">Hide Done
                            <input type="checkbox" id="hideDoneCheckbox"/>
                        </label>
                      </div>
                      <div class="form-group col-md-3">
                        <label>Visualisation Type</label>
                        <div id="toggleVisButtons" class="btn-group" data-toggle="buttons">
                            <label class="btn btn-default">
                                <input type="radio" name="vis-type" value="d3"/> D3
                            </label>
                            <label class="btn btn-default">
                                <input type="radio" name="vis-type" value="svg"/> SVG
                            </label>
                        </div>
                       </div>
                    </form>
                </div>

                <div id="searchError">
                </div>
                <div id="graphContainer" class="container-fluid">
                    <h4 id="dependencyTitle"></h4>
                    <h5>Dependency Graph</h5>
                    <div id="graphPlaceholder"></div>
                </div>
            </section>
            <section id="workerList" class="container-fluid tab-pane active">
            </section>
            <section id="resourceList" class="tab-pane">
            </section>
        </div> <!-- /.tab-content -->
        </div> <!-- /.content -->
        </div> <!-- /.content-wrapper -->

        </div> <!-- /.wrapper -->


        <script>
            visualiserApp(new LuigiAPI("../../api"));
        </script>
    </body>
</html>
