<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Luigi Task Visualiser</title>
        <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"/>
        <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>

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


        <style>
        .nodeCircle {
          stroke: #fff;
          stroke-width: 1.5px;
        }
        text {
            font-size:8pt;
        }

        .link {
          stroke: #999;
          stroke-opacity: .6;
        }

        svg {
            border:1px solid #DDDDDD;
            overflow: inherit;
        }

        .taskRow {
          word-break:break-all;
        }
        </style>

        <style>


          @-webkit-keyframes flash {
            0%, 50%, 100% {
              opacity: 1;
            }

            25%, 75% {
              opacity: 0.2;
            }
          }

          @keyframes flash {
            0%, 50%, 100% {
              opacity: 1;
            }

            25%, 75% {
              opacity: 0.2;
            }
          }

          .RUNNING {
            -webkit-animation-duration: 5s;
            animation-duration: 5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
          }

          .live.map {
            width: 100%;
            height: 600px;
            background: #333;
          }

          .live.map text {
            font-weight: 300;
            font-size: 14px;
          }

          .live.map .node rect {
            stroke-width: 1.5px;
            stroke: #bbb;
            fill: #666;
          }

          .live.map .status {
            height: 100%;
            width: 15px;
            display: block;
            float: left;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            margin-right: 4px;
          }

          .live.map .DONE .status {
            background-color: #7f7;
          }

          .live.map .RUNNING .status {
            background-color: #7f7;
          }

          .live.map .PENDING .status {
            background-color: #FFFF46;
          }

          .live.map .ERROR .status {
            background-color: #f77;
          }

          .live.map .FAILED .status {
            background-color: #dd4b39;
          }

          .live.map .RUNNING .queue {
            color: #f77;
          }

          .live.map .DISABLED .status {
            background-color: #aaaaaa;
          }

          .RUNNING {
            -webkit-animation-name: flash;
            animation-name: flash;
          }

          .live.map .consumers {
            margin-right: 2px;
          }

          .live.map .consumers,
          .live.map .name {
            margin-top: 4px;
          }

          .live.map .consumers:after {
            content: "x";
          }

          .live.map .queue {
            display: block;
            float: left;
            width: 130px;
            height: 20px;
            font-size: 12px;
            margin-top: 2px;
          }

          .live.map .node g div {
            width: 200px;
            height: 40px;
            color: #fff;
          }

          .live.map .node g div span.consumers {
            display: inline-block;
            width: 20px;
          }

          .live.map .edgeLabel text {
            width: 50px;
            fill: #fff;
          }

          .live.map .edgePath path {
            stroke: #999;
            stroke-width: 1.5px;
            fill: #999;
          }

          td.details-control {
            cursor: pointer;
          }

          span.status-icon {
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
            border-bottom-left-radius: 2px;
            display: inline-block;
            height: 24px;
            width: 24px;
            text-align: center;
            font-size: 12px;
            line-height: 24px;

          }

          #serverSide {
            float: right;
            margin: 4px;
          }

          .infoBar {
            min-height: 80px;
          }

          #taskTable_filter {
            margin-top: 9px;
          }

          #loadTaskForm input {
            width: 20em;
          }

        </style>

        <script type="text/template" name="actionsTemplate">
            <div class="span2">
                <a href="#{{encodedTaskId}}" 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}}
                {{#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}}
            </div>
        </script>
        <script type="text/template" name="rowDetailsTemplate">
          <table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
          {{#error}}
            <tr>
              <td>Exception:</td>
              <td class="error-trace"></td>
            </tr>
          {{ /error }}
          </table>
        </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>
              <div class="modal-footer">
                <button type="button" class="btn btn-info refresh"><i class="fa fa-refresh"></i> Refresh</button>
                <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="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?
                  </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>
            {{#workers}}
            {{#num_pending}}
            <div class="box">
            {{/num_pending}}
            {{^num_pending}}
            <div class="box box-solid box-default">
            {{/num_pending}}
                <div class="box-header with-border">
                    <h3 class="box-title">{{name}}</h3>
                    <div class="box-tools pull-right">
                      {{#num_pending}}
                      <div class="button-tooltip" data-toggle="tooltip" title="Disable Worker">
                        <button type="button" class="btn btn-danger btn-disable-worker" data-toggle="modal" data-target="#disableWorkerModal" data-worker="{{name}}">
                          <i class="fa fa-fire-extinguisher"></i>
                        </button>
                      </div>
                      {{/num_pending}}
                    </div>
                </div>
                <div class="box-body">
                    Started: {{start_time}}<br>
                    Last Checkin: {{active}}<br>
                    Root Task: <a href="#{{{encoded_first_task}}}">{{first_task_display_name}}</a><br>
                    Running: {{num_running}}<br>
                    Pending: {{num_pending}}<br>
                    Unique Pending: {{num_uniques}}<br>

                    {{#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="#{{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>
            {{/workers}}
        </script>

        <script type="text/template" name="resourceTemplate">
        {{#resources}}
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">{{name}}</h3>
                {{#num_consumer}}
                <div class="box-tools pull-right">
                    <i class="fa fa-navicon" data-toggle="collapse" data-target="#collapse-{{name}}" aria-expanded="false" aria-controls="collapse-{{name}}"></i>
                </div><!-- /.box-tools -->
                {{/num_consumer}}
            </div><!-- /.box-header -->
            <div class="box-body">
                <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" id="collapse-{{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="#{{taskId}}" 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 href="#" data-tab="taskList">Task List</a></li>
                                <li><a href="#g" data-tab="dependencyGraph">Dependency Graph</a></li>
                                <li><a href="#w" data-tab="workerList">Workers</a></li>
                                <li><a href="#r" data-tab="resourceList">Resources</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
            <div class="main-sidebar">
                <div class="sidebar">
                </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='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 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 class="btn-group" id="toggleVisButtons" data-toggle="buttons">
                            <label class="btn btn-default active">
                                <input type="radio" name="D3" value="d3"/> D3
                            </label>
                            <label class="btn btn-default">
                                <input type="radio" name="SVG" 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>
