<commit_before><!doctype html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Continuuity</title>
  <link rel="shortcut icon" type="image/x-icon" href="http://www.continuuity.com/wp-content/themes/continuuity/images/favicon.ico">

  <meta name="description" content="">
  <meta name="author" content="Continuuity, Inc.">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

  <script type="text/javascript">

    window.ENV = window.ENV || {};
    ENV.EXPERIMENTAL_CONTROL_HELPER = true

  </script>

  <script type="text/javascript" src="/core/lib/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="/third_party/bootstrap/js/bootstrap.js"></script>
  <script type="text/javascript" src="/core/lib/handlebars.js"></script>
  <script type="text/javascript" src="/core/lib/ember-1.0.0-rc.5.js"></script>
  <script type="text/javascript" src="/core/lib/jquery.timeago.js"></script>
  <script type="text/javascript" src="/core/lib/jquery.jsPlumb-1.3.6-all.js"></script>
  <script type="text/javascript" src="/core/lib/d3.v3.js"></script>
  <script type="text/javascript" src="/core/lib/string.min.js"></script>
  <script type="text/javascript" src="/core/lib/jquery.taboverride.js"></script>
  <script type="text/javascript" src="/core/lib/jquery.cookie.js"></script>
  <script type="text/javascript" src="/core/lib/require.js" data-main="main"></script>


  <script src="/core/lib/rickshaw.js"></script>
  <script src="/third_party/select2/select2.min.js"></script>

  <link rel="stylesheet" href="/third_party/rickshaw/rickshaw.min.css">
  <link rel="stylesheet" href="/third_party/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="/third_party/select2/select2.css">
  <link rel="stylesheet" href="/assets/css/main.css">

</head>
<body>
 <div id="nav">
    <a href="#" id="logo"></a>
    <a href="#" id="product-name"></a>
    <ul>
      <li class="overview"><a class="nav-link nav-dash" id="nav-overview" href="#">Overview</a></li>
      <li><a class="nav-link nav-streams" id="nav-collect" href="#/streams">Collect</a></li>
      <li><a class="nav-link nav-flows" id="nav-process" href="#/flows">Process</a></li>
      <li><a class="nav-link nav-datasets" id="nav-store" href="#/datasets">Store</a></li>
      <li><a class="nav-link nav-queries" id="nav-queries" href="#/procedures">Query</a></li>
    </ul>
  </div>

  <script type="text/x-handlebars" data-template-name="application">
    <div id="header">
      <div id="global">
      {{#if C.Env.authenticated}}
        <a href="https://accounts.continuuity.com/logout">Logout</a>
        <a href="https://accounts.continuuity.com/go-to-uservoice" target="_blank">Support</a>
        <a href="https://accounts.continuuity.com/profile" class="user-link" target="_blank">{{C.Env.user.name}}</a>
        <a href="#" class="cloud-link">{{C.Env.cluster.vpc_label}}</a>
      {{else}}
        <a href="http://support.continuuity.com/" target="_blank" id="header-support">Support</a>
        <a href="https://accounts.continuuity.com/" target="_blank" class="user-link" id="header-account">My Account</a>
      {{/if}}
      <a href="#/analyze" class="metrics-link" id="header-metrics">Metrics</a>
      </div>
      {{view C.Embed.Breadcrumb}}
    </div>
    <div id="warning"><div>Experiencing connection issues.</div></div>
    <div id="content-body">
      {{outlet}}
    </div>
    <div id="footer" style="clear: both;"><span id="copyright">COPYRIGHT &copy; 2013 CONTINUUITY INC. ALL RIGHTS RESERVED.</span><br />

    <a href="http://www.continuuity.com/terms-and-privacy" id="footer-terms" target="blank">Terms and Privacy</a>
    <span>&nbsp;·&nbsp;</span>
    <a href="http://www.continuuity.com/contact-us" id="footer-contact" target="blank">Contact</a>
    <span>&nbsp;·&nbsp;</span>
    <a href="http://support.continuuity.com/" id="footer-support" target="blank">Support</a>
    {{#if C.isLocal}}
    <span>&nbsp;·&nbsp;</span>
    <a style="text-decoration:underline;" id="footer-reset" href="#" onclick="return C.Util.reset();">Reset</a>
    {{/if}}
    </div>
    <div id="drop-hover">
      <div id="drop-border"><div id="drop-loading"></div><div id="drop-label">Drop here to deploy.</div></div>
    </div>

  </script>

  <script type="text/x-handlebars" data-template-name="Overview">
    <div id="title">
      {{view C.Embed.TimeSelector}}
      {{#unless C.isLocal}}
      <ul class="nav nav-pills pull-right" style="margin: 2px 14px;">
        <li>{{#linkTo Overview }}Reactor{{/linkTo}}</li>
        <li>{{#linkTo Resources }}Resources{{/linkTo}}</li>
      </ul>
      {{/unless}}
      <h1>Overview</h1>
    </div>

    <div id="panels">
      <div class="quarter" id="quarter1">
        <div class="panel">
          <div class="quarter-title">Collect</div>
          <div class="quarter-value"><strong><span class="value-number">{{value.collect}}</span></strong><span class="value-measure"> EPS</span></div>
          {{view C.Embed.DashChart kind="collect"}}
        </div>
      </div>
      <div class="quarter" id="quarter2">
        <div class="panel">
          <div class="quarter-title">Process</div>
          <div class="quarter-value"><strong><span class="value-number">{{value.process}}</span></strong><span class="value-measure">%</span></div>
          {{view C.Embed.DashChart kind="process"}}
        </div>
      </div>
      <div class="quarter" id="quarter3">
        <div class="panel">
          <div class="quarter-title">Store</div>
          <div class="quarter-value"><strong><span class="value-number">{{value.store.label}}</span></strong> <span class="value-measure">{{value.store.unit}}/s</span></div>
          {{view C.Embed.DashChart kind="store"}}
        </div>
      </div>
      <div class="quarter" id="quarter4">
        <div class="panel" style="margin-right: 0;">
          <div class="quarter-title">Query</div>
          <div class="quarter-value"><strong><span class="value-number">{{value.query}}</span></strong><span class="value-measure"> QPS</span></div>
          {{view C.Embed.DashChart kind="query"}}
        </div>
      </div>

      <div class="panel" style="clear: both;">
        <div class="panel-head">
          <input type="file" id="app-upload-input"/>
          {{view C.Embed.CreateButton entityType="Application"}}
          <div class="panel-title">Apps</div>
        </div>
        {{partial "apps-list"}}
      </div>
    </div>

  </script>

  <script type="text/x-handlebars" data-template-name="Resources">
    <div id="title">
      {{view C.Embed.TimeSelector}}
      <ul class="nav nav-pills pull-right" style="margin: 2px 14px;">
        <li>{{#linkTo Overview }}Reactor{{/linkTo}}</li>
        <li>{{#linkTo Resources }}Resources{{/linkTo}}</li>
      </ul>
      <h1>Resources</h1>
    </div>
    <div id="panels">
      <div class="quarter">
        <div class="panel">
          <div class="quarter-title">AppFabric</div>
          <div class="quarter-value"><strong>{{value.containers}}</strong> Containers</div>
          {{view C.Embed.DashChart kind="containers"}}
        </div>
      </div>
      <div class="quarter">
        <div class="panel">
          <div class="quarter-title">Processors</div>
          <div class="quarter-value"><strong>{{value.cores}}</strong> Cores</div>
          {{view C.Embed.DashChart kind="cores"}}
        </div>
      </div>
      <div class="quarter">
        <div class="panel">
          <div class="quarter-title">Memory</div>
          <div class="quarter-value"><strong>{{value.memory.label}}</strong>{{value.memory.unit}} / <strong>{{total.memory.label}}</strong>{{total.memory.unit}}</div>
          {{view C.Embed.DashChart kind="memory"}}
        </div>
      </div>
      <div class="quarter">
        <div class="panel" style="margin-right: 0;">
          <div class="quarter-title">DataFabric</div>
          <div class="quarter-value"><strong>{{value.storage.label}}</strong>{{value.storage.unit}} / <strong>{{total.storage.label}}</strong>{{total.storage.unit}}</div>
          {{view C.Embed.DashChart kind="storage"}}
        </div>
      </div>
      <div class="panel clearfix" style="clear: both;">
        {{partial "programs-list"}}
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="App">
    <div id="title">
      {{view C.Embed.TimeSelector}}
      <h1>{{model.name}} <span>App</span></h1>
    </div>

    <div id="info">  
      <div class="info-box" style="float: right; border: 0;padding: 0px 14px 0px 0px;">
        <div id="action-buttons" class="btn-group pull-right">
            <button class="btn dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
            </button>
            <button class="btn" style="width:64px;" {{action "promotePrompt"}}><span class="btn-drain"></span><span>Push</span></button>

            <ul class="dropdown-menu">
              <li><a href="#" {{action "delete" on="click"}}>Delete This App</a></li>
            </ul>
        </div>
      </div>
      <div class="info-box sparkline-box app-processed">{{view C.Embed.Chart metrics="/reactor/apps/{id}/process.events.processed" title="Processed"}}</div>
      <div class="info-box sparkline-box app-busyness">{{view C.Embed.Chart metrics="/reactor/apps/{id}/process.busyness" unit="percent" title="Busyness"}}</div>
      <div class="info-box app-storage" style="padding: 0;text-align: center;">
        <div class="sparkline-box-title">Storage</div>
        <div class="sparkline-box-value" style="padding-left: 0;padding-top: 19px;width: 80px;">{{model.storageLabel}}<br /><span>{{model.storageUnits}}</span></div>
      </div>
    </div>

    <div id="panels">
      <div class="panel" id="collect-panel">
        <div class="panel-head"><div class="panel-title">Collect</div></div>
        {{partial "streams-list"}}
      </div>
      <div class="panel" id="process-panel">

        <div class="panel-head">
          {{#if elements.Flow.length}}
            <div class="btn-group pull-right" style="margin-top:2px;text-align:center;width:120px;">
              <button {{action startAll "Flow" on="click"}} class="btn">Start</button>
              <img style="display: none;margin-top: 3px;" src="/assets/img/start-all-load-white.gif" />
              <button {{action stopAll "Flow" on="click"}} class="btn">Stop</button>
            </div>
          {{/if}}
          <div class="panel-title">Process</div>
        </div>
        {{partial "flows-list"}}

      </div>
      <div class="panel" id="store-panel">
        <div class="panel-head"><div class="panel-title">Store</div></div>
        {{partial "datasets-list"}}
      </div>
      <div class="panel" id ="query-panel">
        <div class="panel-head">
          {{#if elements.Procedure.length}}
            <div class="btn-group pull-right" style="margin-top:2px;text-align:center;width:120px;">
              <button {{action startAll "Procedure" on="click"}} class="btn">Start</button>
              <img style="display: none;margin-top: 3px;" src="/assets/img/start-all-load-white.gif" />
              <button {{action stopAll "Procedure" on="click"}} class="btn">Stop</button>
            </div>
          {{/if}}
          <div class="panel-title">Query</div>
        </div>
        {{partial "procedures-list"}}
      </div>
    </div>

  </script>

  <script type="text/x-handlebars" data-template-name="List">
    <div id="title">
      {{view C.Embed.TimeSelector}}
      <h1>{{title}} <span>Data</span></h1>
    </div>
    <div id="panels">
    <div class="panel">
    {{view controller.viewType}}
    </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="Stream">
    <div id="title">
      {{view C.Embed.TimeSelector}}
      <h1>{{model.name}} <span>Stream</span></h1>
    </div>
    <div id="info">
      <div class="info-box sparkline-box">{{view C.Embed.Chart title="Events In" metrics="/reactor/streams/{id}/collect.events"}}</div>
      <div class="info-box" style="padding: 0;text-align: center;">
        <div class="sparkline-box-title">Storage</div>
        <div class="sparkline-box-value" style="padding-left: 0;padding-top:19px;width: 80px;">{{model.storageLabel}}<br /><span>{{model.storageUnits}}</span></div>
      </div>
      <div class="info-box" style="padding: 0;text-align: center;">
        <div class="sparkline-box-title">Events</div>
        <div class="sparkline-box-value" style="padding-top:19px;padding-left:0;width:100px;">{{model.eventsLabel}} {{model.eventsUnits}}<br /><span>Events</span></div>
      </div>
    </div>
    <div id="panels">
      <div class="panel">
      <div class="panel-head"><div class="panel-title">Attached Flows</div></div>

        {{partial "flows-list"}}

      </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="Workflow">
    <div id="title">
      <ul class="nav nav-pills pull-right" style="margin: 2px 14px;">
        <li>{{#linkTo WorkflowStatus model}}Status{{/linkTo}}</li>
        <li>{{#linkTo Workflow.History model}}History{{/linkTo}}</li>
      </ul>
      <h1>{{model.name}} <span>Workflow</span></h1>
    </div>

    {{outlet}}

  </script>

  <script type="text/x-handlebars" data-template-name="WorkflowStatus">
    <div id="info">
      <div class="info-box">
        <div id="workflow-next-run" style="float: left">
          <div class="sparkline-box-title">Next Run</div>
          <div id="workflow-scheduled-runs">
            <div class="flow-schedule">
              <strong>{{timeToNextRun}}</strong>
            </div>
            <div class="sparkline-box-title">{{nextRunLabel}}</div>

          </div>
        </div>
      </div>
      <div class="info-box" style="float: right; border: 0;">
        <div id="action-buttons" class="btn-group pull-right">

          <button class="btn dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li style="min-width:200px; padding:4px 16px 2px;">
              Full Schedule:
              {{#each schedule}}
                <div class="sparkline-box-title">{{this}}</div>
              {{/each}}
              {{#unless schedule.length}}
                <div class="sparkline-box-title">No Runs</div>
              {{/unless}}

            </li>
          </ul>

          <button class="btn" style="width:64px;" {{bindAttr disabled="model.startDisabled"}} {{action "start" model.app model.name}}><span class="btn-start"></span><span>Start</span></button>

          <button class="btn btn-icon" {{bindAttr disabled="model.startDisabled"}} {{action "config"}} style="border-right:0px;"><span class="btn-config"></span></button>

        </div>
        <div class="flow-state"><strong>{{model.currentState}}</strong></div>
      </div>

    </div>
    <div id="panels">
      <div id="informer"></div>
      <div class="panel">
        <div id="batchviz-container">
          <div id="workflowviz" class="clearfix chart">
            {{#each elements.Actions}}
            <div class="batch-item" {{bindAttr id="divId"}} {{action loadAction this}} style="cursor: pointer;">
              <div class="batch-icon batch-map">
                <div class="info-window">
                  {{#if isRunning}}
                    <div class="window-icon running"></div>
                  {{else}}
                    <div class="window-icon"></div>
                  {{/if}}
                  <div class="batch-phase">{{name}}</div>
                </div>
              </div>
            </div>
            {{/each}}
            </div>
          </div>
        </div>
      </div>
    </div>

    {{outlet}}

  </script>

  <script type="text/x-handlebars" data-template-name="Workflow/History">

    <div id="panels">
      <div id="informer"></div>
      <div class="panel">
        <div id="object-list">
          {{#if runs.length}}
            <table class="table table-condensed">
            <thead>
              <tr><th style="width: 300px;">Started</th>
              <th>Ended</th>
              <th style="width:250px;">Result</th>
              </tr>
            </thead>
            <tbody>
            {{#each runs}}
              <tr class="run-list" {{action "loadRun" runid}}>
                <td>{{started}}<div class="flow-run-date"> {{startDate}} </div></td>
                <td>{{ended}} <div class="flow-run-date"> {{endDate}}</div></td>
                <td>{{detail}}</td>
              </tr>
            {{/each}}
            </tbody>
            </table>
          {{else}}
            <div class="object-list-empty">
            <div class="object-list-empty-content">
            <div>No History.</div>
            <span>This Workflow has not completed a run yet.</span>
            </div>
            </div>
          {{/if}}
        </div>
      </div>
    </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="Mapreduce">

    <div id="title">
      {{view C.Embed.TimeSelector}}
      <ul class="nav nav-pills pull-right" style="margin: 2px 14px;">
        <li>{{#linkTo MapreduceStatus model}}Status{{/linkTo}}</li>
        <li>{{#linkTo Mapreduce.Log model}}Log{{/linkTo}}</li>
        <li>{{#linkTo Mapreduce.History model}}History{{/linkTo}}</li>
      </ul>
      <h1>{{model.name}} <span>Mapreduce</span></h1>
    </div>

    {{outlet}}

  </script>

  <script type="text/x-handlebars" data-template-name="MapreduceStatus">
    <div id="info">
      <div class="info-box" style="float: right; border: 0;">
        <div id="action-buttons" class="btn-group pull-right">

          <button class="btn" {{bindAttr disabled="model.startPauseDisabled"}} style="width:64px;" {{action "exec"}} {{bindAttr batch-app="model.app"}} {{bindAttr batch-id="model.name"}} {{bindAttr batch-action="model.defaultAction"}}><span {{bindAttr class="model.actionIcon"}}></span><span>{{model.defaultAction}}</span></button>

          <button class="btn btn-icon" {{bindAttr disabled="model.startDisabled"}} {{action "config"}}><span class="btn-config"></span></button>

        </div>

        <div class="flow-state"><strong>{{model.currentState}}</strong></div>

      </div>
      <div class="info-box sparkline-box">{{view C.Embed.Chart metrics="/reactor/apps/{parent}/mapreduce/{id}/mappers/process.completion" title="Mapping" unit="percent"}}</div>
      <div class="info-box sparkline-box">{{view C.Embed.Chart metrics="/reactor/apps/{parent}/mapreduce/{id}/reducers/process.completion" title="Reducing" unit="percent"}}</div>

    </div>
    <div id="panels">
      <div id="informer"></div>
      <div class="panel">
        <div id="batchviz-container">
          <div id="batchviz" class="clearfix chart">
            <div class="batch-item">
              <div id="batch-map" class="batch-icon batch-map">
                <div class="info-window">
                  <div class="batch-phase">MAP</div>
                  <div class="mapper-icon"></div>
                  <div>{{model.metricData.mappersEntriesIn}} IN</div>
                  <div>{{model.metricData.mappersEntriesOut}} OUT</div>
                </div>
              </div>
              {{#if model.isRunning}}

              <progress {{bindAttr value="model.metricData.mappersCompletion" }} max="100"></progress>
              {{/if}}
            </div>
            <div class="batch-item">
              <div id="batch-reduce" class="batch-icon batch-reduce">
                <div class="info-window">
                  <div class="batch-phase">REDUCE</div>
                  <div class="reducer-icon"></div>
                  <div>{{model.metricData.reducersEntriesIn}} IN</div>
                  <div>{{model.metricData.reducersEntriesOut}} OUT</div>
                </div>
              </div>
              {{#if model.isRunning}}

              <progress {{bindAttr value="model.metricData.reducersCompletion" }} max="100"></progress>
              {{/if}}
            </div>
          </div>
        </div>
      </div>
    </div>

    {{outlet}}

  </script>

  <script type="text/x-handlebars" data-template-name="Mapreduce/History">
    <div id="panels">
      <div id="informer"></div>
      <div class="panel">
        <div id="object-list">
          {{#if runs.length}}
            <table class="table table-condensed">
            <thead>
              <tr><th style="width: 300px;">Started</th>
              <th>Ended</th>
              <th style="width:250px;">Result</th>
              </tr>
            </thead>
            <tbody>
            {{#each runs}}
              <tr class="run-list">
                <td>{{started}}<div class="flow-run-date"> {{startDate}} </div></td>
                <td>{{ended}} <div class="flow-run-date"> {{endDate}}</div></td>
                <td>{{detail}}</td>
              </tr>
            {{/each}}
            </tbody>
            </table>
          {{else}}
            <div class="object-list-empty">
            <div class="object-list-empty-content">
            <div>No History.</div>
            <span>This Mapreduce job has not completed a run yet.</span>
            </div>
            </div>
          {{/if}}
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="Flow">

    <div id="title">
      {{view C.Embed.TimeSelector}}
      <ul class="nav nav-pills pull-right" style="margin: 2px 14px;">
        <li>{{#linkTo FlowStatus model}}Status{{/linkTo}}</li>
        <li>{{#linkTo Flow.Log model}}Log{{/linkTo}}</li>
        <li>{{#linkTo Flow.History model}}History{{/linkTo}}</li>
      </ul>
      <h1>{{model.meta.name}} <span>Flow</span></h1>
    </div>

    {{outlet}}

  </script>

  <script type="text/x-handlebars" data-template-name="FlowStatus">

    <div id="info">
      <div class="info-box" style="float: right; border: 0;padding-right: 14px;padding-left: 0px;">
        <div id="action-buttons" class="btn-group pull-right">
          <button class="btn dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li style="min-width:200px; padding:4px 16px 2px;">
              {{#each model.getMeta}}
                <div><strong>{{k}}</strong>: {{v}}
              {{/each}}
            </li>
          </ul>

          <button class="btn" {{bindAttr disabled="model.stopDisabled"}} style="width:64px;" {{action "stop" model.app model.meta.name }}><span class="btn-stop"></span><span>Stop</span></button>

          <button class="btn" {{bindAttr disabled="model.startDisabled"}} style="border-right:0;width:64px;" {{action "start" model.app model.meta.name}}><span {{bindAttr class="model.actionIcon"}}></span><span>Start</span></button>

          <button class="btn btn-icon" {{bindAttr disabled="model.startDisabled"}} {{action "config"}}><span class="btn-config"></span></button>

        </div>
        <div class="flow-state"><strong>{{model.currentState}}</strong></div>
      </div>
      <div class="info-box sparkline-box">{{view C.Embed.Chart metrics="/reactor/apps/{parent}/flows/{id}/process.events.processed" title="Processed"}}</div>
      <div class="info-box sparkline-box">{{view C.Embed.Chart metrics="/reactor/apps/{parent}/flows/{id}/process.busyness" title="Busyness" unit="percent"}}</div>
    </div>

    <div id="panels">
      <div id="informer"></div>
      <div class="panel">
        <div id="flowviz-container">

          <div class="btn-group" style="float: left;">
            <button class="btn dropdown-toggle" data-toggle="dropdown" style="padding-left:14px;float: right;">
              {{flowletLabelName}} <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a {{action "setFlowletLabel" "rate"}}>Flowlet Rate</a></li>
              <li><a {{action "setFlowletLabel" "pending"}}>Flowlet Pending</a></li>
              <li><a {{action "setFlowletLabel" "aggregate"}}>Flowlet Processed</a></li>
            </ul>
          </div>

          {{view C.Embed.Visualizer viewName="visualizer"}}
        </div>
      </div>
    </div>

    {{outlet}}

  </script>

  <!-- Flowlet Status Template -->

  <script type="text/x-handlebars" data-template-name="FlowStatus/Flowlet">

    <div class="popup-modal">

      <div class="popup-container">
        <div class="popup-body">
          <div class="popup-close" {{action close on="click"}}>×</div>

          {{#if controllers.FlowStatus.model.isRunning}}
            <div class="btn-group pull-right" style="margin-top: 4px;">
              <button class="btn" {{action "addOneInstance" on="click"}}>+</button>
              <button class="btn" {{action "removeOneInstance" on="click"}}>-</button>
              <button disabled="disabled" class="btn" style="width: 160px;text-align:left;">{{model.instances}} instance{{model.plural}}</button>
            </div>
          {{/if}}

          <div class="popup-icon"></div>

          <h1 class="popup-title"> {{model.name}}</h1>
          <div id="flowlet-popup-tabs">
            <div id="flowlet-popup-inputs-tab" class="flowlet-popup-tab tab-selected"><a href="#" {{action select "inputs"}}>Inputs</a></div>
            <div id="flowlet-popup-processed-tab" class="flowlet-popup-tab"><a href="#" {{action select "processed"}}>Processed</a></div>
            <div id="flowlet-popup-outputs-tab" class="flowlet-popup-tab"><a href="#" {{action select "outputs"}}>Outputs</a></div>
            </div>
          <div id="flowlet-popup-tab-content">

            <div id="flowlet-popup-inputs" class="flowlet-popup-tab-content">

            {{#if model.inputs.length}}
              <table style="width:100%;">
                <tr>
                  <td style="height:214px;padding:0;">
                    <table style="width: 100%;">
                      <tbody>
                      {{#each model.inputs}}
                      <tr>
                        <td>
                          {{#each contrib}}
                            <div {{action navigate name on="click"}} {{bindAttr flowlet-id="name"}} class="flowlet-popup-input-contrib">{{name}}</div>
                          {{/each}}
                        </td>
                        <td class="flowlet-popup-input">
                          {{id}}
                        </td>
                        <td class="flowlet-blue">
                          {{view C.Embed.Chart grid="true" entityType="Queue" title="Inbound Tuples per Second" width="305" entityIdBinding=id metrics="/reactor/apps/{app}/flows/{flow}/flowlets/{flowlet}/queues/{id}/process.events" classNames="sparkline-flowlet-box"}}
                        </td>
                      </tr>
                      {{/each}}
                    </table>
                  </td>
                </tr>
              </table>
            {{else}}
              <div class="flowlet-popup-empty">
              There are no inputs on this flowlet.
              </div>
            {{/if}}

          </div>

          <div id="flowlet-popup-processed" class="flowlet-popup-tab-content">

            <table style="width: 100%">
              <tr>
                <td class="flowlet-blue">
                  {{view C.Embed.Chart grid="true" width="305" metrics="/reactor/apps/{app}/flows/{flow}/flowlets/{id}/process.events.processed" classNames="sparkline-flowlet-box" title="Processed"}}
                </td>
                <td class="flowlet-blue">
                  {{view C.Embed.Chart grid="true" width="305" metrics="/reactor/apps/{app}/flows/{flow}/flowlets/{id}/store.ops" classNames="sparkline-flowlet-box" title="Data Operations"}}
                </td>
              </tr>
              <tr>
                <td class="flowlet-blue">
                  {{view C.Embed.Chart grid="true" width="305" unit="percent" metrics="/reactor/apps/{app}/flows/{flow}/flowlets/{id}/process.busyness" classNames="sparkline-flowlet-box" title="Busyness"}}
                </td>
                <td class="flowlet-blue">
                  {{view C.Embed.Chart grid="true" width="305" metrics="/reactor/apps/{app}/flows/{flow}/flowlets/{id}/process.errors" classNames="sparkline-flowlet-box" title="Errors"}}
                </td>
              </tr>
            </table>

          </div>

          <div id="flowlet-popup-outputs" class="flowlet-popup-tab-content">
            {{#if model.outputs.length}}
            <table style="width:100%;">
              <tr>
                <td style="height:214px;padding:0;">
                  <table style="width:100%;">
                    <tbody>
                      {{#each model.outputs}}
                      <tr>
                      <td class="flowlet-blue">
                        {{view C.Embed.Chart grid="true" entityType="Queue" title="Outbound Tuples per Second" width="305" entityIdBinding=id metrics="/reactor/apps/{app}/flows/{flow}/flowlets/{flowlet}/queues/{id}/process.events.out" classNames="sparkline-flowlet-box"}}
                      </td>
                      <td class="flowlet-popup-input">
                      {{id}}
                      </td>
                      <td>
                      {{#each contrib}}
                      <div {{action navigate name on="click"}} {{bindAttr flowlet-id="name"}} class="flowlet-popup-input-contrib">{{name}}</div>
                      {{/each}}
                      </td>
                      </tr>
                      {{/each}}
                    </tbody>
                  </table>
                </td>
              </tr>
            </table>
            {{else}}
              <div class="flowlet-popup-empty">
              There are no outputs on this flowlet.
              </div>
            {{/if}}
          </div>
        </div>
      </div>
    </div>
  </div>

  </script>

  <!-- Stream Status Template -->

  <script type="text/x-handlebars" data-template-name="FlowStatus/Stream">

    <div class="popup-modal">
      <div class="popup-container">
        <div class="popup-body">
          <div class="popup-close" {{action close on="click"}}>×</div>

          <div class="popup-icon-stream"></div>
          <h1 class="popup-title"><a {{bindAttr href="controller.model.href"}}>{{model.name}}</a></h1>

          <table class="table" class="popup-stream-table">
            <thead>
            <th style="width: 100px;text-align: center;">Storage</th>
            <th style="width: 100px;text-align: center;">Events</th>
            <th style="width: 295px;">Events per Second</th>
            </thead>
            <tbody>
            <tr>
            <td class="app-list-count">{{model.storageLabel}}<br /><span>{{model.storageUnits}}</span></td>
            <td class="app-list-count">{{model.eventsLabel}}<br /><span>Events</span></td>
            <td style="padding-right: 0;">
            {{view C.Embed.Chart entityType="Stream" width="349" mode="singular" metrics="/reactor/streams/{id}/collect.events"}}
            </td>
            </tr>
            </tbody>
          </table>

          <div class="popup-inject-wrapper">
            {{view C.Embed.Injector placeholder="Events injected here will be consumed by all attached programs."}}
            <button class="btn" style="float: right;" {{action "inject" on="click"}}>Inject</button>
            <span class="sparkline-box-title">
            {{view Em.Checkbox checkedBinding=controller.injectOnEnter}} Inject by pressing Enter
            </span>

          </div>

        </div>
      </div>
    </div>

  </script>

  <script type="text/x-handlebars" data-template-name="Flow/Log">

    <div id="panels">
      <div class="panel" style="padding: 10px;">
        <pre id="logView" class="well query-response"></pre>
      </div>
    </div>

  </script>

  <script type="text/x-handlebars" data-template-name="Flow/History">

    <div id="panels">
      <div id="informer"></div>
      <div class="panel">
        <div id="object-list">
          {{#if runs.length}}
            <table class="table table-condensed">
            <thead>
              <tr><th style="width: 300px;">Started</th>
              <th>Ended</th>
              <th style="width:250px;">Result</th>
              </tr>
            </thead>
            <tbody>
            {{#each runs}}
              <tr class="run-list" {{action "loadRun" runid}}>
                <td>{{started}}<div class="flow-run-date"> {{startDate}} </div></td>
                <td>{{ended}} <div class="flow-run-date"> {{endDate}}</div></td>
                <td>{{detail}}</td>
              </tr>
            {{/each}}
            </tbody>
            </table>
          {{else}}
            <div class="object-list-empty">
            <div class="object-list-empty-content">
            <div>No History.</div>
            <span>This Flow has not completed a run yet.</span>
            </div>
            </div>
          {{/if}}
        </div>
      </div>
      <div class="panel">
        <div id="flowviz-container" class="flowviz-fade">
          {{view C.Embed.Visualizer viewName="visualizer"}}
        </div>
      </div>
    </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="Dataset">
    <div id="title">
      {{view C.Embed.TimeSelector}}
      <h1>{{model.name}} <span>Dataset</span></h1>
    </div>
    <div id="info">
      <div class="info-box sparkline-box">{{view C.Embed.Chart title="Write Rate" metrics="/reactor/datasets/{id}/store.writes"}}</div>
      <div class="info-box sparkline-box">{{view C.Embed.Chart title="Read Rate (All)" metrics="/reactor/datasets/{id}/store.reads"}}</div>
       <div class="info-box" style="padding: 0;text-align: center;">
        <div class="sparkline-box-title">Storage</div>
        <div class="sparkline-box-value" style="padding-left: 0;padding-top:19px;width: 80px;">{{model.storageLabel}}<br /><span>{{model.storageUnits}}</span></div>
      </div>
    </div>
    <div id="panels">

      <div class="panel">
      <div class="panel-head"><div class="panel-title">Attached Flows</div></div>

        {{partial "flows-list"}}

      </div>
  </script>

<script type="text/x-handlebars" data-template-name="Procedure">

    <div id="title">
      {{view C.Embed.TimeSelector}}
      <ul class="nav nav-pills pull-right" style="margin: 2px 14px;">
        <li>{{#linkTo ProcedureStatus model}}Status{{/linkTo}}</li>
        <li>{{#linkTo Procedure.Log model}}Log{{/linkTo}}</li>
      </ul>
      <h1>{{model.name}} <span>Procedure</span></h1><commit_msg>changes to index.html<commit_after><!doctype html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Continuuity</title>
  <link rel="shortcut icon" type="image/x-icon" href="http://www.continuuity.com/wp-content/themes/continuuity/images/favicon.ico">

  <meta name="description" content="">
  <meta name="author" content="Continuuity, Inc.">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

  <script type="text/javascript">

    window.ENV = window.ENV || {};
    ENV.EXPERIMENTAL_CONTROL_HELPER = true

  </script>

  <script type="text/javascript" src="/core/lib/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="/third_party/bootstrap/js/bootstrap.js"></script>
  <script type="text/javascript" src="/core/lib/handlebars.js"></script>
  <script type="text/javascript" src="/core/lib/ember-1.0.0-rc.5.js"></script>
  <script type="text/javascript" src="/core/lib/jquery.timeago.js"></script>
  <script type="text/javascript" src="/core/lib/jquery.jsPlumb-1.3.6-all.js"></script>
  <script type="text/javascript" src="/core/lib/d3.v3.js"></script>
  <script type="text/javascript" src="/core/lib/string.min.js"></script>
  <script type="text/javascript" src="/core/lib/jquery.taboverride.js"></script>
  <script type="text/javascript" src="/core/lib/jquery.cookie.js"></script>
  <script type="text/javascript" src="/core/lib/require.js" data-main="main"></script>


  <script src="/core/lib/rickshaw.js"></script>
  <script src="/third_party/select2/select2.min.js"></script>

  <link rel="stylesheet" href="/third_party/rickshaw/rickshaw.min.css">
  <link rel="stylesheet" href="/third_party/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="/third_party/select2/select2.css">
  <link rel="stylesheet" href="/assets/css/main.css">

</head>
<body>
 <div id="nav">
    <a href="#" id="logo"></a>
    <a href="#" id="product-name"></a>
    <ul>
      <li class="overview"><a class="nav-link nav-dash" id="nav-overview" href="#">Overview</a></li>
      <li><a class="nav-link nav-streams" id="nav-collect" href="#/streams">Collect</a></li>
      <li><a class="nav-link nav-flows" id="nav-process" href="#/flows">Process</a></li>
      <li><a class="nav-link nav-datasets" id="nav-store" href="#/datasets">Store</a></li>
      <li><a class="nav-link nav-queries" id="nav-queries" href="#/procedures">Query</a></li>
    </ul>
  </div>

  <script type="text/x-handlebars" data-template-name="application">
    <div id="header">
      <div id="global">
      {{#if C.Env.authenticated}}
        <a href="https://accounts.continuuity.com/logout">Logout</a>
        <a href="https://accounts.continuuity.com/go-to-uservoice" target="_blank">Support</a>
        <a href="https://accounts.continuuity.com/profile" class="user-link" target="_blank">{{C.Env.user.name}}</a>
        <a href="#" class="cloud-link">{{C.Env.cluster.vpc_label}}</a>
      {{else}}
        <a href="http://support.continuuity.com/" target="_blank" id="header-support">Support</a>
        <a href="https://accounts.continuuity.com/" target="_blank" class="user-link" id="header-account">My Account</a>
      {{/if}}
      <a href="#/analyze" class="metrics-link" id="header-metrics">Metrics</a>
      </div>
      {{view C.Embed.Breadcrumb}}
    </div>
    <div id="warning"><div>Experiencing connection issues.</div></div>
    <div id="content-body">
      {{outlet}}
    </div>
    <div id="footer" style="clear: both;"><span id="copyright">COPYRIGHT &copy; 2013 CONTINUUITY INC. ALL RIGHTS RESERVED.</span><br />

    <a href="http://www.continuuity.com/terms-and-privacy" id="footer-terms" target="blank">Terms and Privacy</a>
    <span>&nbsp;·&nbsp;</span>
    <a href="http://www.continuuity.com/contact-us" id="footer-contact" target="blank">Contact</a>
    <span>&nbsp;·&nbsp;</span>
    <a href="http://support.continuuity.com/" id="footer-support" target="blank">Support</a>
    {{#if C.isLocal}}
    <span>&nbsp;·&nbsp;</span>
    <a style="text-decoration:underline;" id="footer-reset" href="#" onclick="return C.Util.reset();">Reset</a>
    {{/if}}
    </div>
    <div id="drop-hover">
      <div id="drop-border"><div id="drop-loading"></div><div id="drop-label">Drop here to deploy.</div></div>
    </div>

  </script>

  <script type="text/x-handlebars" data-template-name="Overview">
    <div id="title">
      {{view C.Embed.TimeSelector}}
      {{#unless C.isLocal}}
      <ul class="nav nav-pills pull-right" style="margin: 2px 14px;">
        <li>{{#linkTo Overview }}Reactor{{/linkTo}}</li>
        <li>{{#linkTo Resources }}Resources{{/linkTo}}</li>
      </ul>
      {{/unless}}
      <h1>Overview</h1>
    </div>

    <div id="panels">
      <div class="quarter" id="quarter1">
        <div class="panel">
          <div class="quarter-title">Collect</div>
          <div class="quarter-value"><strong><span class="value-number">{{value.collect}}</span></strong><span class="value-measure"> EPS</span></div>
          {{view C.Embed.DashChart kind="collect"}}
        </div>
      </div>
      <div class="quarter" id="quarter2">
        <div class="panel">
          <div class="quarter-title">Process</div>
          <div class="quarter-value"><strong><span class="value-number">{{value.process}}</span></strong><span class="value-measure">%</span></div>
          {{view C.Embed.DashChart kind="process"}}
        </div>
      </div>
      <div class="quarter" id="quarter3">
        <div class="panel">
          <div class="quarter-title">Store</div>
          <div class="quarter-value"><strong><span class="value-number">{{value.store.label}}</span></strong> <span class="value-measure">{{value.store.unit}}/s</span></div>
          {{view C.Embed.DashChart kind="store"}}
        </div>
      </div>
      <div class="quarter" id="quarter4">
        <div class="panel" style="margin-right: 0;">
          <div class="quarter-title">Query</div>
          <div class="quarter-value"><strong><span class="value-number">{{value.query}}</span></strong><span class="value-measure"> QPS</span></div>
          {{view C.Embed.DashChart kind="query"}}
        </div>
      </div>

      <div class="panel" style="clear: both;">
        <div class="panel-head">
          <input type="file" id="app-upload-input"/>
          {{view C.Embed.CreateButton entityType="Application"}}
          <div class="panel-title">Apps</div>
        </div>
        {{partial "apps-list"}}
      </div>
    </div>

  </script>

  <script type="text/x-handlebars" data-template-name="Resources">
    <div id="title">
      {{view C.Embed.TimeSelector}}
      <ul class="nav nav-pills pull-right" style="margin: 2px 14px;">
        <li>{{#linkTo Overview }}Reactor{{/linkTo}}</li>
        <li>{{#linkTo Resources }}Resources{{/linkTo}}</li>
      </ul>
      <h1>Resources</h1>
    </div>
    <div id="panels">
      <div class="quarter">
        <div class="panel">
          <div class="quarter-title">AppFabric</div>
          <div class="quarter-value"><strong>{{value.containers}}</strong> Containers</div>
          {{view C.Embed.DashChart kind="containers"}}
        </div>
      </div>
      <div class="quarter">
        <div class="panel">
          <div class="quarter-title">Processors</div>
          <div class="quarter-value"><strong>{{value.cores}}</strong> Cores</div>
          {{view C.Embed.DashChart kind="cores"}}
        </div>
      </div>
      <div class="quarter">
        <div class="panel">
          <div class="quarter-title">Memory</div>
          <div class="quarter-value"><strong>{{value.memory.label}}</strong>{{value.memory.unit}} / <strong>{{total.memory.label}}</strong>{{total.memory.unit}}</div>
          {{view C.Embed.DashChart kind="memory"}}
        </div>
      </div>
      <div class="quarter">
        <div class="panel" style="margin-right: 0;">
          <div class="quarter-title">DataFabric</div>
          <div class="quarter-value"><strong>{{value.storage.label}}</strong>{{value.storage.unit}} / <strong>{{total.storage.label}}</strong>{{total.storage.unit}}</div>
          {{view C.Embed.DashChart kind="storage"}}
        </div>
      </div>
      <div class="panel clearfix" style="clear: both;">
        {{partial "programs-list"}}
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="App">
    <div id="title">
      {{view C.Embed.TimeSelector}}
      <h1>{{model.name}} <span>App</span></h1>
    </div>

    <div id="info">  
      <div class="info-box" style="float: right; border: 0;padding: 0px 14px 0px 0px;">
        <div id="action-buttons" class="btn-group pull-right">
            <button class="btn dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
            </button>
            <button class="btn" style="width:64px;" {{action "promotePrompt"}}><span class="btn-drain"></span><span>Push</span></button>

            <ul class="dropdown-menu">
              <li><a href="#" {{action "delete" on="click"}}>Delete This App</a></li>
            </ul>
        </div>
      </div>
      <div class="info-box sparkline-box app-processed">{{view C.Embed.Chart metrics="/reactor/apps/{id}/process.events.processed" title="Processed"}}</div>
      <div class="info-box sparkline-box app-busyness">{{view C.Embed.Chart metrics="/reactor/apps/{id}/process.busyness" unit="percent" title="Busyness"}}</div>
      <div class="info-box app-storage" style="padding: 0;text-align: center;">
        <div class="sparkline-box-title">Storage</div>
        <div class="sparkline-box-value" style="padding-left: 0;padding-top: 19px;width: 80px;">{{model.storageLabel}}<br /><span>{{model.storageUnits}}</span></div>
      </div>
    </div>

    <div id="panels">
      <div class="panel" id="collect-panel">
        <div class="panel-head"><div class="panel-title">Collect</div></div>
        {{partial "streams-list"}}
      </div>
      <div class="panel" id="process-panel">

        <div class="panel-head">
          {{#if elements.Flow.length}}
            <div class="btn-group pull-right" style="margin-top:2px;text-align:center;width:120px;">
              <button {{action startAll "Flow" on="click"}} class="btn start">Start</button>
              <img style="display: none;margin-top: 3px;" src="/assets/img/start-all-load-white.gif" />
              <button {{action stopAll "Flow" on="click"}} class="btn stop">Stop</button>
            </div>
          {{/if}}
          <div class="panel-title">Process</div>
        </div>
        {{partial "flows-list"}}

      </div>
      <div class="panel" id="store-panel">
        <div class="panel-head"><div class="panel-title">Store</div></div>
        {{partial "datasets-list"}}
      </div>
      <div class="panel" id ="query-panel">
        <div class="panel-head">
          {{#if elements.Procedure.length}}
            <div class="btn-group pull-right" style="margin-top:2px;text-align:center;width:120px;">
              <button {{action startAll "Procedure" on="click"}} class="btn start">Start</button>
              <img style="display: none;margin-top: 3px;" src="/assets/img/start-all-load-white.gif" />
              <button {{action stopAll "Procedure" on="click"}} class="btn stop">Stop</button>
            </div>
          {{/if}}
          <div class="panel-title">Query</div>
        </div>
        {{partial "procedures-list"}}
      </div>
    </div>

  </script>

  <script type="text/x-handlebars" data-template-name="List">
    <div id="title">
      {{view C.Embed.TimeSelector}}
      <h1>{{title}} <span>Data</span></h1>
    </div>
    <div id="panels">
    <div class="panel">
    {{view controller.viewType}}
    </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="Stream">
    <div id="title">
      {{view C.Embed.TimeSelector}}
      <h1>{{model.name}} <span>Stream</span></h1>
    </div>
    <div id="info">
      <div class="info-box sparkline-box">{{view C.Embed.Chart title="Events In" metrics="/reactor/streams/{id}/collect.events"}}</div>
      <div class="info-box" style="padding: 0;text-align: center;">
        <div class="sparkline-box-title">Storage</div>
        <div class="sparkline-box-value" style="padding-left: 0;padding-top:19px;width: 80px;">{{model.storageLabel}}<br /><span>{{model.storageUnits}}</span></div>
      </div>
      <div class="info-box" style="padding: 0;text-align: center;">
        <div class="sparkline-box-title">Events</div>
        <div class="sparkline-box-value" style="padding-top:19px;padding-left:0;width:100px;">{{model.eventsLabel}} {{model.eventsUnits}}<br /><span>Events</span></div>
      </div>
    </div>
    <div id="panels">
      <div class="panel">
      <div class="panel-head"><div class="panel-title">Attached Flows</div></div>

        {{partial "flows-list"}}

      </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="Workflow">
    <div id="title">
      <ul class="nav nav-pills pull-right" style="margin: 2px 14px;">
        <li>{{#linkTo WorkflowStatus model}}Status{{/linkTo}}</li>
        <li>{{#linkTo Workflow.History model}}History{{/linkTo}}</li>
      </ul>
      <h1>{{model.name}} <span>Workflow</span></h1>
    </div>

    {{outlet}}

  </script>

  <script type="text/x-handlebars" data-template-name="WorkflowStatus">
    <div id="info">
      <div class="info-box">
        <div id="workflow-next-run" style="float: left">
          <div class="sparkline-box-title">Next Run</div>
          <div id="workflow-scheduled-runs">
            <div class="flow-schedule">
              <strong>{{timeToNextRun}}</strong>
            </div>
            <div class="sparkline-box-title">{{nextRunLabel}}</div>

          </div>
        </div>
      </div>
      <div class="info-box" style="float: right; border: 0;">
        <div id="action-buttons" class="btn-group pull-right">

          <button class="btn dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li style="min-width:200px; padding:4px 16px 2px;">
              Full Schedule:
              {{#each schedule}}
                <div class="sparkline-box-title">{{this}}</div>
              {{/each}}
              {{#unless schedule.length}}
                <div class="sparkline-box-title">No Runs</div>
              {{/unless}}

            </li>
          </ul>

          <button class="btn" style="width:64px;" {{bindAttr disabled="model.startDisabled"}} {{action "start" model.app model.name}}><span class="btn-start"></span><span>Start</span></button>

          <button class="btn btn-icon" {{bindAttr disabled="model.startDisabled"}} {{action "config"}} style="border-right:0px;"><span class="btn-config"></span></button>

        </div>
        <div class="flow-state"><strong>{{model.currentState}}</strong></div>
      </div>

    </div>
    <div id="panels">
      <div id="informer"></div>
      <div class="panel">
        <div id="batchviz-container">
          <div id="workflowviz" class="clearfix chart">
            {{#each elements.Actions}}
            <div class="batch-item" {{bindAttr id="divId"}} {{action loadAction this}} style="cursor: pointer;">
              <div class="batch-icon batch-map">
                <div class="info-window">
                  {{#if isRunning}}
                    <div class="window-icon running"></div>
                  {{else}}
                    <div class="window-icon"></div>
                  {{/if}}
                  <div class="batch-phase">{{name}}</div>
                </div>
              </div>
            </div>
            {{/each}}
            </div>
          </div>
        </div>
      </div>
    </div>

    {{outlet}}

  </script>

  <script type="text/x-handlebars" data-template-name="Workflow/History">

    <div id="panels">
      <div id="informer"></div>
      <div class="panel">
        <div id="object-list">
          {{#if runs.length}}
            <table class="table table-condensed">
            <thead>
              <tr><th style="width: 300px;">Started</th>
              <th>Ended</th>
              <th style="width:250px;">Result</th>
              </tr>
            </thead>
            <tbody>
            {{#each runs}}
              <tr class="run-list" {{action "loadRun" runid}}>
                <td>{{started}}<div class="flow-run-date"> {{startDate}} </div></td>
                <td>{{ended}} <div class="flow-run-date"> {{endDate}}</div></td>
                <td>{{detail}}</td>
              </tr>
            {{/each}}
            </tbody>
            </table>
          {{else}}
            <div class="object-list-empty">
            <div class="object-list-empty-content">
            <div>No History.</div>
            <span>This Workflow has not completed a run yet.</span>
            </div>
            </div>
          {{/if}}
        </div>
      </div>
    </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="Mapreduce">

    <div id="title">
      {{view C.Embed.TimeSelector}}
      <ul class="nav nav-pills pull-right" style="margin: 2px 14px;">
        <li>{{#linkTo MapreduceStatus model}}Status{{/linkTo}}</li>
        <li>{{#linkTo Mapreduce.Log model}}Log{{/linkTo}}</li>
        <li>{{#linkTo Mapreduce.History model}}History{{/linkTo}}</li>
      </ul>
      <h1>{{model.name}} <span>Mapreduce</span></h1>
    </div>

    {{outlet}}

  </script>

  <script type="text/x-handlebars" data-template-name="MapreduceStatus">
    <div id="info">
      <div class="info-box" style="float: right; border: 0;">
        <div id="action-buttons" class="btn-group pull-right">

          <button class="btn" {{bindAttr disabled="model.startPauseDisabled"}} style="width:64px;" {{action "exec"}} {{bindAttr batch-app="model.app"}} {{bindAttr batch-id="model.name"}} {{bindAttr batch-action="model.defaultAction"}}><span {{bindAttr class="model.actionIcon"}}></span><span>{{model.defaultAction}}</span></button>

          <button class="btn btn-icon" {{bindAttr disabled="model.startDisabled"}} {{action "config"}}><span class="btn-config"></span></button>

        </div>

        <div class="flow-state"><strong>{{model.currentState}}</strong></div>

      </div>
      <div class="info-box sparkline-box">{{view C.Embed.Chart metrics="/reactor/apps/{parent}/mapreduce/{id}/mappers/process.completion" title="Mapping" unit="percent"}}</div>
      <div class="info-box sparkline-box">{{view C.Embed.Chart metrics="/reactor/apps/{parent}/mapreduce/{id}/reducers/process.completion" title="Reducing" unit="percent"}}</div>

    </div>
    <div id="panels">
      <div id="informer"></div>
      <div class="panel">
        <div id="batchviz-container">
          <div id="batchviz" class="clearfix chart">
            <div class="batch-item">
              <div id="batch-map" class="batch-icon batch-map">
                <div class="info-window">
                  <div class="batch-phase">MAP</div>
                  <div class="mapper-icon"></div>
                  <div>{{model.metricData.mappersEntriesIn}} IN</div>
                  <div>{{model.metricData.mappersEntriesOut}} OUT</div>
                </div>
              </div>
              {{#if model.isRunning}}

              <progress {{bindAttr value="model.metricData.mappersCompletion" }} max="100"></progress>
              {{/if}}
            </div>
            <div class="batch-item">
              <div id="batch-reduce" class="batch-icon batch-reduce">
                <div class="info-window">
                  <div class="batch-phase">REDUCE</div>
                  <div class="reducer-icon"></div>
                  <div>{{model.metricData.reducersEntriesIn}} IN</div>
                  <div>{{model.metricData.reducersEntriesOut}} OUT</div>
                </div>
              </div>
              {{#if model.isRunning}}

              <progress {{bindAttr value="model.metricData.reducersCompletion" }} max="100"></progress>
              {{/if}}
            </div>
          </div>
        </div>
      </div>
    </div>

    {{outlet}}

  </script>

  <script type="text/x-handlebars" data-template-name="Mapreduce/History">
    <div id="panels">
      <div id="informer"></div>
      <div class="panel">
        <div id="object-list">
          {{#if runs.length}}
            <table class="table table-condensed">
            <thead>
              <tr><th style="width: 300px;">Started</th>
              <th>Ended</th>
              <th style="width:250px;">Result</th>
              </tr>
            </thead>
            <tbody>
            {{#each runs}}
              <tr class="run-list">
                <td>{{started}}<div class="flow-run-date"> {{startDate}} </div></td>
                <td>{{ended}} <div class="flow-run-date"> {{endDate}}</div></td>
                <td>{{detail}}</td>
              </tr>
            {{/each}}
            </tbody>
            </table>
          {{else}}
            <div class="object-list-empty">
            <div class="object-list-empty-content">
            <div>No History.</div>
            <span>This Mapreduce job has not completed a run yet.</span>
            </div>
            </div>
          {{/if}}
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="Flow">

    <div id="title">
      {{view C.Embed.TimeSelector}}
      <ul class="nav nav-pills pull-right" style="margin: 2px 14px;">
        <li>{{#linkTo FlowStatus model}}Status{{/linkTo}}</li>
        <li>{{#linkTo Flow.Log model}}Log{{/linkTo}}</li>
        <li>{{#linkTo Flow.History model}}History{{/linkTo}}</li>
      </ul>
      <h1>{{model.meta.name}} <span>Flow</span></h1>
    </div>

    {{outlet}}

  </script>

  <script type="text/x-handlebars" data-template-name="FlowStatus">

    <div id="info">
      <div class="info-box" style="float: right; border: 0;padding-right: 14px;padding-left: 0px;">
        <div id="action-buttons" class="btn-group pull-right">
          <button class="btn dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li style="min-width:200px; padding:4px 16px 2px;">
              {{#each model.getMeta}}
                <div><strong>{{k}}</strong>: {{v}}
              {{/each}}
            </li>
          </ul>

          <button class="btn stop" {{bindAttr disabled="model.stopDisabled"}} style="width:64px;" {{action "stop" model.app model.meta.name }}><span class="btn-stop"></span><span>Stop</span></button>

          <button class="btn start" {{bindAttr disabled="model.startDisabled"}} style="border-right:0;width:64px;" {{action "start" model.app model.meta.name}}><span {{bindAttr class="model.actionIcon"}}></span><span>Start</span></button>

          <button class="btn btn-icon" {{bindAttr disabled="model.startDisabled"}} {{action "config"}}><span class="btn-config"></span></button>

        </div>
        <div class="flow-state"><strong>{{model.currentState}}</strong></div>
      </div>
      <div class="info-box sparkline-box app-processed">{{view C.Embed.Chart metrics="/reactor/apps/{parent}/flows/{id}/process.events.processed" title="Processed"}}</div>
      <div class="info-box sparkline-box app-busyness">{{view C.Embed.Chart metrics="/reactor/apps/{parent}/flows/{id}/process.busyness" title="Busyness" unit="percent"}}</div>
    </div>

    <div id="panels">
      <div id="informer"></div>
      <div class="panel">
        <div id="flowviz-container">

          <div class="btn-group" style="float: left;">
            <button class="btn dropdown-toggle" data-toggle="dropdown" style="padding-left:14px;float: right;">
              {{flowletLabelName}} <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a {{action "setFlowletLabel" "rate"}}>Flowlet Rate</a></li>
              <li><a {{action "setFlowletLabel" "pending"}}>Flowlet Pending</a></li>
              <li><a {{action "setFlowletLabel" "aggregate"}}>Flowlet Processed</a></li>
            </ul>
          </div>

          {{view C.Embed.Visualizer viewName="visualizer"}}
        </div>
      </div>
    </div>

    {{outlet}}

  </script>

  <!-- Flowlet Status Template -->

  <script type="text/x-handlebars" data-template-name="FlowStatus/Flowlet">

    <div class="popup-modal">

      <div class="popup-container">
        <div class="popup-body">
          <div class="popup-close" {{action close on="click"}}>×</div>

          {{#if controllers.FlowStatus.model.isRunning}}
            <div class="btn-group pull-right" style="margin-top: 4px;">
              <button class="btn" {{action "addOneInstance" on="click"}}>+</button>
              <button class="btn" {{action "removeOneInstance" on="click"}}>-</button>
              <button disabled="disabled" class="btn" style="width: 160px;text-align:left;">{{model.instances}} instance{{model.plural}}</button>
            </div>
          {{/if}}

          <div class="popup-icon"></div>

          <h1 class="popup-title"> {{model.name}}</h1>
          <div id="flowlet-popup-tabs">
            <div id="flowlet-popup-inputs-tab" class="flowlet-popup-tab tab-selected"><a href="#" {{action select "inputs"}}>Inputs</a></div>
            <div id="flowlet-popup-processed-tab" class="flowlet-popup-tab"><a href="#" {{action select "processed"}}>Processed</a></div>
            <div id="flowlet-popup-outputs-tab" class="flowlet-popup-tab"><a href="#" {{action select "outputs"}}>Outputs</a></div>
            </div>
          <div id="flowlet-popup-tab-content">

            <div id="flowlet-popup-inputs" class="flowlet-popup-tab-content">

            {{#if model.inputs.length}}
              <table style="width:100%;">
                <tr>
                  <td style="height:214px;padding:0;">
                    <table style="width: 100%;">
                      <tbody>
                      {{#each model.inputs}}
                      <tr>
                        <td>
                          {{#each contrib}}
                            <div {{action navigate name on="click"}} {{bindAttr flowlet-id="name"}} class="flowlet-popup-input-contrib">{{name}}</div>
                          {{/each}}
                        </td>
                        <td class="flowlet-popup-input">
                          {{id}}
                        </td>
                        <td class="flowlet-blue">
                          {{view C.Embed.Chart grid="true" entityType="Queue" title="Inbound Tuples per Second" width="305" entityIdBinding=id metrics="/reactor/apps/{app}/flows/{flow}/flowlets/{flowlet}/queues/{id}/process.events" classNames="sparkline-flowlet-box"}}
                        </td>
                      </tr>
                      {{/each}}
                    </table>
                  </td>
                </tr>
              </table>
            {{else}}
              <div class="flowlet-popup-empty">
              There are no inputs on this flowlet.
              </div>
            {{/if}}

          </div>

          <div id="flowlet-popup-processed" class="flowlet-popup-tab-content">

            <table style="width: 100%">
              <tr>
                <td class="flowlet-blue">
                  {{view C.Embed.Chart grid="true" width="305" metrics="/reactor/apps/{app}/flows/{flow}/flowlets/{id}/process.events.processed" classNames="sparkline-flowlet-box" title="Processed"}}
                </td>
                <td class="flowlet-blue">
                  {{view C.Embed.Chart grid="true" width="305" metrics="/reactor/apps/{app}/flows/{flow}/flowlets/{id}/store.ops" classNames="sparkline-flowlet-box" title="Data Operations"}}
                </td>
              </tr>
              <tr>
                <td class="flowlet-blue">
                  {{view C.Embed.Chart grid="true" width="305" unit="percent" metrics="/reactor/apps/{app}/flows/{flow}/flowlets/{id}/process.busyness" classNames="sparkline-flowlet-box" title="Busyness"}}
                </td>
                <td class="flowlet-blue">
                  {{view C.Embed.Chart grid="true" width="305" metrics="/reactor/apps/{app}/flows/{flow}/flowlets/{id}/process.errors" classNames="sparkline-flowlet-box" title="Errors"}}
                </td>
              </tr>
            </table>

          </div>

          <div id="flowlet-popup-outputs" class="flowlet-popup-tab-content">
            {{#if model.outputs.length}}
            <table style="width:100%;">
              <tr>
                <td style="height:214px;padding:0;">
                  <table style="width:100%;">
                    <tbody>
                      {{#each model.outputs}}
                      <tr>
                      <td class="flowlet-blue">
                        {{view C.Embed.Chart grid="true" entityType="Queue" title="Outbound Tuples per Second" width="305" entityIdBinding=id metrics="/reactor/apps/{app}/flows/{flow}/flowlets/{flowlet}/queues/{id}/process.events.out" classNames="sparkline-flowlet-box"}}
                      </td>
                      <td class="flowlet-popup-input">
                      {{id}}
                      </td>
                      <td>
                      {{#each contrib}}
                      <div {{action navigate name on="click"}} {{bindAttr flowlet-id="name"}} class="flowlet-popup-input-contrib">{{name}}</div>
                      {{/each}}
                      </td>
                      </tr>
                      {{/each}}
                    </tbody>
                  </table>
                </td>
              </tr>
            </table>
            {{else}}
              <div class="flowlet-popup-empty">
              There are no outputs on this flowlet.
              </div>
            {{/if}}
          </div>
        </div>
      </div>
    </div>
  </div>

  </script>

  <!-- Stream Status Template -->

  <script type="text/x-handlebars" data-template-name="FlowStatus/Stream">

    <div class="popup-modal">
      <div class="popup-container">
        <div class="popup-body">
          <div class="popup-close" {{action close on="click"}}>×</div>

          <div class="popup-icon-stream"></div>
          <h1 class="popup-title"><a {{bindAttr href="controller.model.href"}}>{{model.name}}</a></h1>

          <table class="table" class="popup-stream-table">
            <thead>
            <th style="width: 100px;text-align: center;">Storage</th>
            <th style="width: 100px;text-align: center;">Events</th>
            <th style="width: 295px;">Events per Second</th>
            </thead>
            <tbody>
            <tr>
            <td class="app-list-count">{{model.storageLabel}}<br /><span>{{model.storageUnits}}</span></td>
            <td class="app-list-count">{{model.eventsLabel}}<br /><span>Events</span></td>
            <td style="padding-right: 0;">
            {{view C.Embed.Chart entityType="Stream" width="349" mode="singular" metrics="/reactor/streams/{id}/collect.events"}}
            </td>
            </tr>
            </tbody>
          </table>

          <div class="popup-inject-wrapper">
            {{view C.Embed.Injector placeholder="Events injected here will be consumed by all attached programs."}}
            <button class="btn" style="float: right;" {{action "inject" on="click"}}>Inject</button>
            <span class="sparkline-box-title">
            {{view Em.Checkbox checkedBinding=controller.injectOnEnter}} Inject by pressing Enter
            </span>

          </div>

        </div>
      </div>
    </div>

  </script>

  <script type="text/x-handlebars" data-template-name="Flow/Log">

    <div id="panels">
      <div class="panel" style="padding: 10px;">
        <pre id="logView" class="well query-response"></pre>
      </div>
    </div>

  </script>

  <script type="text/x-handlebars" data-template-name="Flow/History">

    <div id="panels">
      <div id="informer"></div>
      <div class="panel">
        <div id="object-list">
          {{#if runs.length}}
            <table class="table table-condensed">
            <thead>
              <tr><th style="width: 300px;">Started</th>
              <th>Ended</th>
              <th style="width:250px;">Result</th>
              </tr>
            </thead>
            <tbody>
            {{#each runs}}
              <tr class="run-list" {{action "loadRun" runid}}>
                <td>{{started}}<div class="flow-run-date"> {{startDate}} </div></td>
                <td>{{ended}} <div class="flow-run-date"> {{endDate}}</div></td>
                <td>{{detail}}</td>
              </tr>
            {{/each}}
            </tbody>
            </table>
          {{else}}
            <div class="object-list-empty">
            <div class="object-list-empty-content">
            <div>No History.</div>
            <span>This Flow has not completed a run yet.</span>
            </div>
            </div>
          {{/if}}
        </div>
      </div>
      <div class="panel">
        <div id="flowviz-container" class="flowviz-fade">
          {{view C.Embed.Visualizer viewName="visualizer"}}
        </div>
      </div>
    </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="Dataset">
    <div id="title">
      {{view C.Embed.TimeSelector}}
      <h1>{{model.name}} <span>Dataset</span></h1>
    </div>
    <div id="info">
      <div class="info-box sparkline-box write-rate">{{view C.Embed.Chart title="Write Rate" metrics="/reactor/datasets/{id}/store.writes"}}</div>
      <div class="info-box sparkline-box read-rate">{{view C.Embed.Chart title="Read Rate (All)" metrics="/reactor/datasets/{id}/store.reads"}}</div>
       <div class="info-box app-storage" style="padding: 0;text-align: center;">
        <div class="sparkline-box-title">Storage</div>
        <div class="sparkline-box-value" style="padding-left: 0;padding-top:19px;width: 80px;">{{model.storageLabel}}<br /><span>{{model.storageUnits}}</span></div>
      </div>
    </div>
    <div id="panels">

      <div class="panel">
      <div class="panel-head"><div class="panel-title">Attached Flows</div></div>

        {{partial "flows-list"}}

      </div>
  </script>

<script type="text/x-handlebars" data-template-name="Procedure">

    <div id="title">
      {{view C.Embed.TimeSelector}}
      <ul class="nav nav-pills pull-right" style="margin: 2px 14px;">
        <li>{{#linkTo ProcedureStatus model}}Status{{/linkTo}}</li>
        <li>{{#linkTo Procedure.Log model}}Log{{/linkTo}}</li>
      </ul>
      <h1>{{model.name}} <span>Procedure</span></h1>
{'fraction_non_alphanumeric': 0.19819456642239083, 'fraction_numerical': 0.006651597391191672, 'mean_word_length': 2.3457610789980734, 'pattern_counts': {'":': 0, '<': 1983, '<?xml version=': 0, '>': 1983, 'https://': 8, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5276243', 'n_tokens_mistral': 22454, 'n_tokens_neox': 21142, 'n_words': 3696}