datahub/web/app/views/index.scala.html

@(user: String, csrfToken: String)
  @main(user, csrfToken) {
    <div>
      <div id="mainSplitter">
        <div id="tabSplitter">
          <div class="btn-group" role="group" aria-label="Toggle List/Tree View">
            <button id="listviewbtn" type="button" class="btn btn-primary">List View</button>
            <button id="treeviewbtn" type="button" class="btn btn-default">Tree View</button>
          </div>
          <ul id="menutabs" style="display:none" class="nav nav-tabs category-header">
            <li>
              <a data-toggle="tab" href="#filtertab">Datasets</a>
            </li>
            <li><a data-toggle="tab" href="#flowtab">Flows</a></li>
          </ul>
          <div class="tab-content">
            <div>
              <input id="filterinput" placeholder="Filter By" style="width:100%;">
            </div>
            <div id="filtertab" class="tab-pane">
              <div id="datasetlist" class="list-group"></div>
              <div id="tree2" data-source="ajax" class="sampletree" style="display: none;"></div>
            </div>
            <div id="flowtab" class="tab-pane">
              <div id="flowlist" class="list-group"></div>
              <div id="tree3" data-source="ajax" class="sampletree" style="display: none;"></div>
            </div>
          </div>
        </div>
        <div id="contentSplitter">
        </div>
      </div>
    </div>

    <div class="modal" tabindex="-1" role="dialog" aria-labelledby="convertTableModal" id="convertTableModal">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h3>Convert a CSV table to markdown table</h3>
          </div>
          <div class="modal-body">
            <textarea style="width: 100%; height: 200px;" id="tsv-input"></textarea>
            <label><input type="checkbox" id="has-headers"> Use first line as headers</label>
            <select id="delimiter-marker">
              <option value="tab">Tab Separated</option>
              <option value=",">Comma Separated</option>
              <option value=";">Semicolon Separated</option>
            </select>
            <hr>
            <textarea style="width: 100%; height: 200px;" id="table-output" readonly=""></textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">
              Cancel
            </button>
            <button type="button" class="btn btn-default" id="submitConvertForm">
              Insert
            </button>
          </div>
        </div>
      </div>
    </div>

    <script type="text/x-handlebars" id="components/dataset-favorite">
      <i
      {{bind-attr class=":wh-clickable-icon :fa dataset.isFavorite:fa-heart:fa-heart-o"}}
      {{action "favorites" dataset}}
      >
      </i>
    </script>

    <script type="text/x-handlebars" id="components/dataset-owner">
      <i
        {{bind-attr class=":wh-clickable-icon :fa dataset.isOwned:fa-bookmark:fa-bookmark-o"}}
        {{action "owned" dataset}}
      >
      </i>
    </script>

    <script type="text/x-handlebars" id="components/dataset-watch">
      <i
        {{bind-attr class=":wh-clickable-icon :fa dataset.watchId:fa-eye-slash:fa-eye"}}
        {{action "watch" dataset}}
      >
      </i>
      {{#if showText}}
        {{#if dataset.watchId}}
          Unwatch
        {{else}}
          Watch
        {{/if}}
      {{/if}}
    </script>

    <script type="text/x-handlebars" id="components/metric-watch">
      <i
        {{bind-attr class=":fa metric.watchId:fa-eye-slash:fa-eye"}}
        {{action "watch" metric}}
      >
      </i>
      {{#if showText}}
        {{#if metric.watchId}}
          Unwatch
        {{else}}
          Watch
        {{/if}}
      {{/if}}
    </script>

    <script type="text/x-handlebars" id="datasets">
      <div id="pagedDatasets">
        <div class="row">
          <div class="col-xs-12">
            {{#unless detailview}}
            <div class="well well-sm">
              <div class="row">
                <div class="col-xs-11">
                  <ul class="breadcrumbs">
                    {{#each breadcrumbs as |crumb|}}
                      <li>
                        <a
                          title="{{crumb.title}}"
                          href="#/datasets/{{crumb.urn}}"
                        >
                          {{crumb.title}}
                        </a>
                      </li>
                    {{/each}}
                  </ul>
                </div>
              </div>
            </div>
            <div class="search-pagination">
              <ul class="pager">
                {{#unless first}}
                  <li class="previous">
                    {{#if urn}}
                      {{#link-to 'subpage' currentName previousPage (query-params urn=urn)}}
                        &larr; Prev
                      {{/link-to}}
                    {{else}}
                      {{#link-to 'page' previousPage}}
                        &larr; Prev
                      {{/link-to}}
                    {{/if}}
                  </li>
                {{/unless}}
                <li>
                  {{ model.data.count }} datasets - page {{ model.data.page }} of {{ model.data.totalPages }}
                </li>
                {{#unless last}}
                  <li class="next">
                    {{#if urn}}
                      {{#link-to 'subpage' currentName nextPage (query-params urn=urn)}}
                        Next &rarr;
                      {{/link-to}}
                    {{else}}
                      {{#link-to 'page' nextPage}}
                        Next &rarr;
                      {{/link-to}}
                    {{/if}}
                  </li>
                {{/unless}}
              </ul>
            </div>
            {{/unless}}
            {{#unless detailview}}
            <table
              class="table table-bordered search-results"
              style="word-break: break-all;">
              <tbody>
                {{#each dataset in model.data.datasets}}
                  <tr>
                    <td>
                      <div class="row">
                        <div class="col-md-8">
                          <div class="col-xs-12">
                            {{#link-to 'dataset' dataset}}
                              {{ dataset.name }}
                            {{/link-to}}
                          </div>
                          {{#if dataset.owners}}
                          <div class="col-xs-12">
                            <span class="prop-label">owner:</span>
                            {{#each owner in dataset.owners}}
                              <p style="display:inline" title={{owner.name}}>{{ owner.userName }} </p>
                            {{/each}}
                          </div>
                          {{/if}}
                          {{#if dataset.formatedModified}}
                          <div class="col-xs-12">
                            <span class="prop-label">last modified:</span>
                            {{ dataset.formatedModified }}
                          </div>
                          {{/if}}
                        </div>
                        <div class="col-md-4 text-right">
                          <ul class="datasetTableLinks">
                            <li
                              class="text-center no-link"
                            >
                              <span class="source">
                                {{ dataset.source }}
                              </span>
                            </li>
                            <li class="text-center" title="ownership">
                              {{#dataset-owner dataset=dataset action="owned"}}
                              {{/dataset-owner}}
                            </li>
                            <li class="text-center" title="favorite">
                              {{#dataset-favorite dataset=dataset action="didFavorite"}}
                              {{/dataset-favorite}}
                            </li>
                            <li class="text-center" title="watch">
                              {{#dataset-watch dataset=dataset getDatasets='getDatasets'}}
                              {{/dataset-watch}}
                            </li>
                            <li class="text-center">
                              <a
                                href="/lineage/dataset/{{dataset.id}}"
                                title="lineage for {{dataset.name}}"
                              >
                                <i class="fa fa-sitemap"></i>
                              </a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </td>
                  </tr>
                {{/each}}
              </tbody>
            </table>
            {{/unless}}
          </div>
          <div class="col-xs-12">
            {{outlet}}
          </div>
        </div>
      </div>
    </script>

    <script type="text/x-handlebars" data-template-name="schema">
      {{#if hasSchemas}}
        <div class="row" style="margin-top: 5px; margin-bottom: 5px;">
          <div class="col-xs-12">
            <div
              class="btn-group"
              role="group"
              aria-label="Toggle Tabular/JSON Schema View">
              <button
                type="button"
                {{bind-attr class=":btn isTable:btn-primary:btn-default"}}
                {{action "setView" "table"}}>
                View As Tabular
              </button>
              <button
                type="button"
                {{bind-attr class=":btn isJSON:btn-primary:btn-default"}}
                {{action "setView" "json"}}>
                View As JSON
              </button>
            </div>
          </div>
        </div>
        <table id="json-table" class="columntreegrid tree table table-bordered dataset-detail-table">
          <thead>
            <tr class="results-header">
              <th style="min-width: 200px;" class="col-xs-2">Column</th>
              <th class="col-xs-1">Data Type</th>
              <th title="Is nullable" style="width:15px;">N</th>
              <th title="Is indexed" style="width:15px;">I</th>
              <th title="Is partitioned" style="width:15px;">P</th>
              <th title="Is distributed" style="width:15px;">D</th>
              <th class="col-xs-7"> Default Comments</th>
              <th title="Comment Count" style="width:15px;">
                <i class="fa fa-comments" title="Comment Count"></i>
              </th>
            </tr>
          </thead>
          <tbody>
            {{#each schema in schemas}}
            <tr {{bind-attr class="schema.treeGridClass"}}>
              <td>{{schema.fieldName}}</td>
              <td>{{schema.dataType}}</td>
              <td title="Is nullable" class="text-center">
                {{#if schema.nullable}}
                  <i class="glyphicon glyphicon-ok"></i>
                {{/if}}
              </td>
              <td title="Is indexed" class="text-center">
                {{#if schema.indexed}}
                  <i class="glyphicon glyphicon-ok"></i>
                {{/if}}
              </td>
              <td title="Is partitioned" class="text-center">
                {{#if schema.partitioned}}
                  <i class="glyphicon glyphicon-ok"></i>
                {{/if}}
              </td>
              <td title="Is distributed" class="text-center">
                {{#if schema.distributed}}
                  <i class="glyphicon glyphicon-ok"></i>
                {{/if}}
              </td>
              <td class="commentsArea">
                <div class="commentsArea">
                  {{#schema-comment schema=schema datasetId=this.model.id fieldId=schema.id getSchema="getSchema"}}{{/schema-comment}}
                  {{schema.commentHtml}}
                </div>
              </td>
              <td class="text-center">
                {{schema.commentCount}}
              </td>
            </tr>
            {{/each}}
          </tbody>
        </table>
        <div id="json-viewer" style="display:none;"></div>
      {{else}}
        <div id="json-viewer"></div>
      {{/if}}
    </script>

    <script type="text/x-handlebars" data-template-name="property">
      {{#if hasProperty}}
        <div>
          {{#each item in properties}}
            <div>
              <span class="prop-label">{{item.key}}:</span>
              <span>{{item.value}}</span>
            </div>
          {{/each}}
        </div>
      {{else}}
        <p>Property is not available</p>
      {{/if}}
    </script>

    <script type="text/x-handlebars" data-template-name="owner">
      <div class="row" style="margin-top: 5px; margin-bottom: 5px;">
        <div class="col-xs-12">
          <div class="btn-group" role="group">
            <button id="addownerbtn" type="button" class="btn btn-default" {{action "addOwner" owners}}>
              <i class="fa fa-plus" title="add an owner">
              </i>
            </button>
            <button type="button" class="btn btn-default" {{action "updateOwners" owners}}>
              <i class="fa fa-save" title="save the change">
              </i>
            </button>
          </div>
          {{#if showMsg}}
            <div {{bind-attr class=":alert alertType"}} role="alert">{{ownerMessage}}</div>
          {{/if}}
        </div>
      </div>

      <table class="table table-striped" style="word-break: break-all;">
        <thead>
          <tr>
            <th class="col-xs-2">User Name</th>
            <th class="col-xs-3">Full Name</th>
            <th class="col-xs-1">Is Group</th>
            <th class="col-xs-2">Owner Type</th>
            <th class="col-xs-2">Owner Sub Type</th>
            <th class="col-xs-1"></th>
          </tr>
        </thead>
        <tbody id = "sortedownertable">
          {{#each owner in owners}}
          <tr>
            <td>{{input class="userEntity" value=owner.userName}}</td>
            <td>{{owner.name}}</td>
            <td>
              {{input type="checkbox" name="isGroup" checked=owner.isGroup disabled=true}}
            </td>
            <td>
              {{view "select" content=ownerTypes classNames="ownertypeselector" value=owner.type}}
            </td>
            <td>
              {{input value=owner.subType}}
            </td>
            <td>
              <i class="fa fa-trash" title="remove this owner" {{action "removeOwner" owners owner}}>
              </i>
            </td>
          </tr>
          {{/each}}
        </tbody>
      </table>
    </script>

    <script type="text/x-handlebars" data-template-name="sample">
      {{#if hasSamples}}
        {{#if isPinot}}
          <table id="pinotsampletreegrid" class="tree table table-bordered dataset-detail-table">
            <thead>
              <tr class="results-header">
                {{#each column in columns}}
                  <th class="col-xs-2">{{column}}</th>
                {{/each}}
              </tr>
            </thead>
            <tbody>
              {{#each sample in samples}}
                <tr>
                  {{#each r in sample}}
                    <td class="wrap-all-word">{{r}}</td>
                  {{/each}}
                </tr>
              {{/each}}
            </tbody>
          </table>
        {{else}}
          <div id="datasetSampleData-json-human" class="table-responsive"></div>
        {{/if}}
      {{else}}
        <p>Sample data is not available</p>
      {{/if}}
    </script>

    <script type="text/x-handlebars" data-template-name="impact">
      {{#if hasImpacts}}
        <table id="impactAnalysisTable" class="tree table table-bordered dataset-detail-table">
          <thead>
            <tr class="results-header">
              <th class="span2">Level</th>
              <th class="span2">Dataset</th>
              <th>URN</th>
            </tr>
          </thead>
          <tbody>
          {{#each impact in impacts}}
            <tr>
              <td>{{impact.level}}</td>
              <td>
                {{#if impact.isValidDataset}}
                  <a {{bind-attr href=impact.datasetUrl}}>
                    {{impact.name}}
                  </a>
                {{else}}
                  {{impact.name}}
                {{/if}}
              </td>
              <td>{{impact.urn}}</td>
            </tr>
            {{/each}}
          </tbody>
        </table>
      {{else}}
        <p>Impact analysis is not available</p>
      {{/if}}
    </script>

    <script type="text/x-handlebars" data-template-name="depend">
      {{#if hasDepends}}
        <table id="depends-table" class="columntreegrid tree table table-bordered dataset-detail-table">
          <thead>
            <tr class="results-header">
              <th class="span2">Dataset</th>
              <th class="span1">Object Type</th>
              <th class="span1">Object Sub Type</th>
              <th class="span2">Level</th>
            </tr>
          </thead>
          <tbody>
            {{#each depend in depends}}
            <tr {{bind-attr class="depend.treeGridClass"}}>
              <td>
                {{#if depend.isValidDataset}}
                  <a {{bind-attr href=depend.datasetLink}}>
                    {{depend.objectName}}
                  </a>
                {{else}}
                  {{depend.objectName}}
                {{/if}}
              </td>
              <td>{{depend.objectType}}</td>
              <td>{{depend.objectSubType}}</td>
              <td>{{depend.level}}</td>
            </tr>
            {{/each}}
          </tbody>
        </table>
      {{else}}
        <p>Depends view is not available</p>
      {{/if}}
    </script>

    <script type="text/x-handlebars" data-template-name="detail">
      <div id="metric" class="container-fluid">
        <div class="row-fluid">
          <div class="col-xs-6">
            <h3>{{ model.name }}</h3>
          </div>
          <div class="col-xs-6 text-right">
            <ul class="datasetDetailsLinks">
              <li>
                <i class="fa fa-share-alt"></i>
                <span class="hidden-sm hidden-xs">
                  Share
                </span>
              </li>
              <li>
                {{#metric-watch metric=model showText=true getMetrics='getMetrics'}}
                {{/metric-watch}}
              </li>
              {{#if showLineage}}
              <li>
                <a target="_blank" {{bind-attr href=lineageUrl}}>
                  <i class="fa fa-sitemap"></i>
                  <span class="hidden-sm hidden-xs">
                    View Lineage
                  </span>
                </a>
              </li>
              {{/if}}
            </ul>
          </div>
          <div class="col-xs-12">
            Metric Description:
            <a
              href="#"
              data-name="description"
              data-pk="{{model.id}}"
              class="xeditable"
              data-type="text"
              data-placement="right"
              data-title="Enter description"
              data-emptytext="Please Input"
              data-placeholder="Please Input"
            >
              {{model.description}}
            </a>
          </div>
        </div>
        <table class="tree table table-bordered">
          <tbody>
            <tr class="result">
              <td class="span2" style="min-width:200px;">Dashboard Name</td>
              <td>
                <a
                  href="#"
                  data-name="dashboardName"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter dashboard name"
                  data-defaultValue="Please Input"
                  data-emptytext="Please Input"
                  data-value="{{model.dashboardName}}"
                >
                  {{model.dashboardName}}
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Category</td>
              <td>
                <a
                  href="#"
                  data-name="category"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter metric category"
                  data-placement="right"
                  data-emptytext="Please Input"
                >
                  {{model.category}}
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Group</td>
              <td>
                <a
                  href="#"
                  data-name="group"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter group"
                  data-placement="right"
                  data-emptytext="Please Input"
                >
                  {{model.group}}
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Type</td>
              <td>
                <a
                  href="#"
                  data-name="refIDType"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter Type"
                  data-placement="right"
                  data-emptytext="Please Input"
                  {{bind-attr data-value=model.refIDType}}
                >
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Grain</td>
              <td>
                <a
                  href="#"
                  data-name="grain"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter grain"
                  data-placement="right"
                  data-emptytext="Please Input"
                >
                  {{model.grain}}
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Formula</td>
              <td>
                {{ace-editor content=model.formula itemId=model.id savePath="/api/v1/metrics/{id}/update" saveParam="formula"}}
              </td>
            </tr>
            <tr class="result">
              <td>Metric Display Factor</td>
              <td>
                <a
                  href="#"
                  data-name="displayFactory"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter display factor"
                  data-placement="right"
                  data-emptytext="Please Input"
                >
                  {{model.displayFactory}}
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Display Factor Sym</td>
              <td>
                <a
                  href="#"
                  data-name="displayFactorSym"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter display factor symbol"
                  data-placement="right"
                  data-emptytext="Please Input"
                >
                  {{model.displayFactorSym}}
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Sub Category</td>
              <td>
                <a
                  href="#"
                  data-name="subCategory"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter sub category"
                  data-placement="right"
                  data-emptytext="Please Input"
                >
                  {{model.subCategory}}
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Source</td>
              <td>
                <a
                  href="#"
                  data-name="source"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter source"
                  data-placement="right"
                  data-emptytext="Please Input"
                  {{bind-attr data-value=model.source}}
                >
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Source Type</td>
              <td>
                <a
                  href="#"
                  data-name="sourceType"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter source type"
                  data-placement="right"
                  data-emptytext="Please Input"
                  {{bind-attr data-value=model.sourceType}}
                >
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </script>

    <script type="text/x-handlebars" id="dataset">
      <div id="dataset" >
        <div class="well well-sm">
          <div class="row">
            <div class="col-xs-11">
              <ul class="breadcrumbs">
                {{#each breadcrumbs as |crumb|}}
                  <li>
                    <a title="{{crumb.title}}" href="#/datasets/{{crumb.urn}}">
                      {{crumb.title}}
                    </a>
                  </li>
                {{/each}}
              </ul>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-5">
            <h3>{{ model.name }}</h3>
          </div>
          <div class="col-xs-7 text-right">
            <ul class="datasetDetailsLinks">
              <li>
                {{#dataset-favorite dataset=model action="didFavorite"}}
                {{/dataset-favorite}}
                <span class="hidden-sm hidden-xs">
                  {{#if model.isFavorite}}
                    Unfavorite
                  {{else}}
                    Favorite
                  {{/if}}
                </span>
              </li>
              {{#if model.hdfsBrowserLink}}
              <li>
                <a target="_blank" {{bind-attr href=model.hdfsBrowserLink}}
                  title="View on HDFS">
                  <i class="fa fa-database"></i>
                  <span class="hidden-sm hidden-xs">
                    HDFS
                  </span>
                </a>
              </li>
              {{/if}}
              <li>
                <a target="_blank" {{bind-attr href=lineageUrl}}
                  title="View Lineage">
                  <i class="fa fa-sitemap"></i>
                  <span class="hidden-sm hidden-xs">
                    Lineage
                  </span>
                </a>
              </li>
              {{#if model.hasSchemaHistory}}
                <li>
                  <a target="_blank" {{bind-attr href=schemaHistoryUrl}}
                    title="View Schema History">
                    <i class="fa fa-history"></i>
                    <span class="hidden-sm hidden-xs">
                      Schema History
                    </span>
                  </a>
                </li>
              {{/if}}
              <li>
                {{#dataset-watch dataset=model getDatasets="getDataset"}}
                {{/dataset-watch}}
                <span class="hidden-xs hidden-sm">
                  {{#if model.isWatched}}
                    Unwatch
                  {{else}}
                    Watch
                  {{/if}}
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      {{#if tabview}}
        <ul class="nav nav-tabs nav-justified">
          {{#unless isPinot}}
          <li id="properties">
            <a
              data-toggle="tab"
              href="#propertiestab"
            >
              Properties & Comments
            </a>
          </li>
          {{/unless}}
          <li id="schemas" class="active"><a data-toggle="tab" href="#schematab">Schema</a></li>
          <li id="ownership"><a data-toggle="tab" href="#ownertab">Ownership</a></li>
          {{#unless isSFDC}}
            <li id="samples"><a data-toggle="tab" href="#sampletab">Sample Data</a></li>
          {{/unless}}
          <li id="impacts">
            <a data-toggle="tab"
              title="Down Stream Impact Analysis"
              href="#impacttab">
              Downstream
            </a>
          </li>
          <li id="depends">
            <a data-toggle="tab"
              title="Depend On"
              href="#dependtab">
              Depend On
            </a>
          </li>
        </ul>
        <div class="tab-content">
          {{#unless isPinot}}
            <div id="propertiestab" class="tab-pane">
              <div class="row">
                <div class="col-xs-4">
                  {{view "property"}}
                </div>
                <div class="col-xs-8">
                  {{#dataset-comments dataset=this}}
                  {{/dataset-comments}}
                </div>
              </div>
            </div>
          {{/unless}}
          <div id="schematab" class="tab-pane active">
            {{view "schema"}}
          </div>
          <div id="ownertab" class="tab-pane">
            {{view "owner"}}
          </div>
          {{#unless isSFDC}}
            <div id="sampletab" class="tab-pane">
              {{view "sample"}}
            </div>
          {{/unless}}
          <div id="impacttab" class="tab-pane">
            {{view "impact"}}
          </div>
          <div id="dependtab" class="tab-pane">
            {{view "depend"}}
          </div>
        </div>
      {{else}}
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        {{#unless isPinot}}
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="propertiesHeading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion"
                href="#properties" aria-expanded="true" aria-controls="properties">
                Properties & Comments
              </a>
            </h4>
          </div>
          <div id="properties" class="panel-collapse collapse" role="tabpanel" aria-labelledby="propertiesHeading">
            <div class="panel-body">
              <div class="row">
                <div class="col-xs-4">
                  {{view "property"}}
                </div>
                <div class="col-xs-8">
                  {{#dataset-comments dataset=this}}
                  {{/dataset-comments}}
                </div>
              </div>
            </div>
          </div>
        </div>
        {{/unless}}

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="schemaHeading">
            <h4 class="panel-title">
              <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
               href="#schema" aria-expanded="false" aria-controls="schema">
                Schema
              </a>
            </h4>
          </div>
          <div id="schema" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="schemaHeading">
            <div class="panel-body">
              {{view "schema"}}
            </div>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="ownershipHeading">
            <h4 class="panel-title">
              <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
                href="#ownership" aria-expanded="false" aria-controls="ownership">
                Ownership
              </a>
            </h4>
          </div>
          <div id="ownership" class="panel-collapse collapse" role="tabpanel" aria-labelledby="ownershipHeading">
            <div class="panel-body">
              {{view "owner"}}
            </div>
          </div>
        </div>

        {{#unless isSFDC}}
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="sampleHeading">
            <h4 class="panel-title">
              <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
               href="#sampleData" aria-expanded="false" aria-controls="sampleData">
                Sample Data
              </a>
            </h4>
          </div>
          <div id="sampleData" class="panel-collapse collapse" role="tabpanel" aria-labelledby="sampleHeading">
            <div class="panel-body">
              {{view "sample"}}
            </div>
          </div>
        </div>
        {{/unless}}

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="impactsHeading">
            <h4 class="panel-title">
              <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
               href="#impactAnalysis" title="Down Stream Impact Analysis"
               aria-expanded="false" aria-controls="sampleData">
                Downstream
              </a>
            </h4>
          </div>
          <div id="impactAnalysis" class="panel-collapse collapse" role="tabpanel" aria-labelledby="impactsHeading">
            <div class="panel-body">
              {{view "impact"}}
            </div>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="dependsHeading">
            <h4 class="panel-title">
              <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
               href="#dependsview" aria-expanded="false" aria-controls="sampleData">
                Depends On
              </a>
            </h4>
          </div>
          <div id="dependsview" class="panel-collapse collapse" role="tabpanel" aria-labelledby="impactsHeading">
            <div class="panel-body">
              {{view "depend"}}
            </div>
          </div>
        </div>
      </div>
      {{/if}}
    </script>

    <script type="text/x-handlebars" id="metrics">
      <div id="pagedMetrics">
        <div class="row">
          <div class="col-xs-12">
            {{#unless detailview}}
            <div class="search-pagination">
              <ul class="pager">
                {{#unless first}}
                  <li class="previous">
                    {{#if group}}
                      {{#link-to 'metricnamesubpage' dashboard group previousPage}}
                        &larr; Prev
                      {{/link-to}}
                    {{else}}
                      {{#if dashboard}}
                      {{#link-to 'metricnamepage' dashboard previousPage}}
                        &larr; Prev
                      {{/link-to}}
                      {{else}}
                      {{#link-to 'metricspage' previousPage}}
                        &larr; Prev
                      {{/link-to}}
                      {{/if}}
                    {{/if}}
                  </li>
                {{/unless}}
                <li>
                  {{ model.data.count }} metrics - page {{ model.data.page }} of {{ model.data.totalPages }}
                </li>
                {{#unless last}}
                  <li class="next">
                    {{#if group}}
                      {{#link-to 'metricnamesubpage' dashboard group nextPage}}
                        Next &rarr;
                      {{/link-to}}
                    {{else}}
                      {{#if dashboard}}
                      {{#link-to 'metricnamepage' dashboard nextPage}}
                        Next &rarr;
                      {{/link-to}}
                      {{else}}
                      {{#link-to 'metricspage' nextPage}}
                        Next &rarr;
                      {{/link-to}}
                      {{/if}}
                    {{/if}}
                  </li>
                {{/unless}}
              </ul>
            </div>
            {{/unless}}
            {{#unless detailview}}
            <div class="well well-sm">
              <div class="row">
                <div class="col-xs-11">
                  <ul class="breadcrumbs">
                    {{#each breadcrumbs as |crumb|}}
                      <li>
                        <a title="{{crumb.title}}" href="#/metrics/{{crumb.urn}}">
                          {{crumb.title}}
                        </a>
                      </li>
                    {{/each}}
                  </ul>
                </div>
              </div>
            </div>

            <table class="table table-bordered search-results">
              <tbody>
                {{#each metric in model.data.metrics}}
                  <tr>
                    <td class="dataset-info">
                      <div class="row">
                        <div class="col-xs-8">
                          {{#link-to 'metric' metric}}
                            {{metric.name}}
                          {{/link-to}} <br />
                          {{ metric.group }} - {{ metric.dashboardName }} <br />
                          {{ metric.description }}
                        </div>
                        <div class="col-xs-4 text-right">
                          <ul class="datasetTableLinks">
                            <li
                              class="text-center"
                            >
                              {{#metric-watch metric=metric getMetrics='getMetrics'}}
                              {{/metric-watch}}
                            </li>
                            <li
                              class="text-center"
                            >
                              <a
                                href="/lineage/metric/{{metric.id}}"
                                title="{{metric.name}}"
                              >
                                <i class="fa fa-sitemap"></i>
                              </a>
                            </li>
                          </ul>

                        </div>
                      </div>
                    </td>
                  </tr>
                {{/each}}
              </tbody>
            </table>
            {{/unless}}
          </div>
          <div class="col-xs-12">
            {{outlet}}
          </div>
        </div>
      </div>
    </script>

    <script type="text/x-handlebars" id="metric">
      {{view "detail"}}
    </script>

    <script type="text/x-handlebars" id="search">
      <div class="btn-group" role="group">
        <p style="display:inline;float:left;margin-right:5px;margin-top:6px;"><b>Filter By:</b></p>
        <div class="btn-group" role="group">
          <button
            type="button"
            {{bind-attr class=":btn :dropdown-toggle isDatasets:btn-primary:btn-default"}}
            data-toggle="dropdown"
            aria-expanded="false">
            {{datasetTitle}}
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li>
            {{#link-to 'search' (query-params category="Datasets" source="all" page=1)}}
                All
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Datasets" source="HDFS" page=1)}}
                HDFS
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Datasets" source="Oracle" page=1)}}
                Oracle
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Datasets" source="Teradata" page=1)}}
                Teradata
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Datasets" source="Espresso" page=1)}}
                Espresso
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Datasets" source="Salesforce" page=1)}}
                Salesforce
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Datasets" source="Kafka" page=1)}}
                Kafka
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Datasets" source="Pinot" page=1)}}
                Pinot
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Datasets" source="Hive" page=1)}}
                Hive
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Datasets" source="External" page=1)}}
                External
            {{/link-to}}
            </li>
          </ul>
        </div>
        <button
          type="button"
          {{bind-attr class=":btn isComments:btn-primary:btn-default"}}
          {{action 'switchSearchToComments' keyword}}>
          Comments
        </button>
        <button
          type="button"
          {{bind-attr class=":btn isFlows:btn-primary:btn-default"}}
          {{action 'switchSearchToFlow' keyword}}>
          Flows
        </button>
        <button
          type="button"
          {{bind-attr class=":btn isJobs:btn-primary:btn-default"}}
          {{action 'switchSearchToJob' keyword}}>
          Jobs
        </button>
      </div>

      <div id="pagedSearchResults">
        <div class="row">
          <div class="col-xs-12">
            {{#if model.count}}
              <div class="search-pagination">
                <ul class="pager">
                  {{#unless first}}
                    <li class="previous">
                          {{#link-to 'search' (query-params categroy=category source=source page=previousPage)}}
                            &larr; Prev
                          {{/link-to}}
                    </li>
                  {{/unless}}
                  <li>
                    {{ model.count }} results - page {{ model.page }} of {{ model.totalPages }}
                  </li>
                  {{#unless last}}
                    <li class="next">
                          {{#link-to 'search' (query-params categroy=category source=source page=nextPage)}}
                            Next &rarr;
                          {{/link-to}}
                    </li>
                  {{/unless}}
                </ul>
              </div>
            {{/if}}
            {{#if loading}}
              <div class="row">
                <div class="col-xs-12 text-center">
                  <i
                    class="fa fa-spinner spinning fa-4x"
                  ></i>
                </div>
              </div>
            {{/if}}
            {{#if model.count}}
              {{#if model.isFlowJob}}
              <table id="searchresults" class="search-results searchtable">
                <tbody>
                  {{#each flowJob in model.data}}
                  <tr class="result">
                    <td class="col-xs-12">
                      <div class="dataset-name">
                        <td class="dataset-info">
                          <i class="fa fa-random"></i>
                          <a href="{{flowJob.link}}">
                            {{flowJob.displayName}}
                          </a>
                        </td>
                        <p>
                          {{{ flowJob.path }}}
                        </p>
                        <p>source: {{{ flowJob.appCode }}}</p>
                        <div class="schematext" style="margin-top:5px;margin-bottom: 10px;">
                          {{{ flowJob.schema }}}
                        </div>
                      </div>
                    </td>
                  </tr>
                  {{/each}}
                </tbody>
              </table>
              {{else}}
              <table id="searchresults" class="search-results searchtable">
                <tbody>
                  {{#each dataset in model.data}}
                  <tr class="result">
                    <td class="col-xs-12">
                      <div class="dataset-name">
                        <td class="dataset-info">
                        {{#if isMetric}}
                          <i class="fa fa-plus-square-o"></i>
                          {{#link-to 'metric' dataset}}
                            {{{dataset.name}}}
                          {{/link-to}}
                        {{else}}
                          <i class="fa fa-database"></i>
                          {{#link-to 'dataset' dataset}}
                            {{{dataset.name}}}
                          {{/link-to}}
                        {{/if}}
                        </td>
                        <p>
                          {{{ dataset.urn }}}
                        </p>
                        {{#if dataset.source}}
                          <p>source: {{{ dataset.source }}}</p>
                        {{else}}
                          <p>source: Metric</p>
                        {{/if}}
                        <div class="schematext" style="margin-top:5px;margin-bottom: 10px;">
                          {{{ dataset.schema }}}
                        </div>
                      </div>
                    </td>
                  </tr>
                  {{/each}}
                </tbody>
              </table>
              {{/if}}
            {{else}}
              {{#if showNoResult}}
                <h4>No items found</h4>
              {{/if}}
            {{/if}}
          </div>
          <div class="col-xs-12">
            {{outlet}}
          </div>
        </div>
      </div>
    </script>

    <script type="text/x-handlebars" id="advsearch">
      <div id="pagedSearchResults">
        <div class="row">
          <div class="col-xs-12">
            {{#if model.count}}
            <div class="search-pagination">
              <ul class="pager">
                {{#unless first}}
                  <li class="previous">
                    {{#link-to 'advsearch' (query-params page=previousPage)}}
                      &larr; Prev
                    {{/link-to}}
                  </li>
                {{/unless}}
                <li>
                  {{ model.count }} results - page {{ model.page }} of {{ model.totalPages }}
                </li>
                {{#unless last}}
                  <li class="next">
                    {{#link-to 'advsearch' (query-params page=nextPage)}}
                      Next &rarr;
                    {{/link-to}}
                  </li>
                {{/unless}}
              </ul>
            </div>
            {{/if}}
            {{#if loading}}
              <div class="row">
                <div class="col-xs-12 text-center">
                  <i
                    class="fa fa-spinner spinning fa-4x"
                  ></i>
                </div>
              </div>
            {{/if}}
            {{#if model.count}}
            {{#if model.isFlowJob}}
              <table id="searchresults" class="search-results searchtable">
                <tbody>
                  {{#each flowJob in model.data}}
                  <tr class="result">
                    <td class="col-xs-12">
                      <div class="dataset-name">
                        <td class="dataset-info">
                          <i class="fa fa-random"></i>
                          <a href="{{flowJob.link}}">
                            {{flowJob.displayName}}
                          </a>
                        </td>
                        <p>
                          {{{ flowJob.path }}}
                        </p>
                        <p>source: {{{ flowJob.appCode }}}</p>
                        <div class="schematext" style="margin-top:5px;margin-bottom: 10px;">
                          {{{ flowJob.schema }}}
                        </div>
                      </div>
                    </td>
                  </tr>
                  {{/each}}
                </tbody>
              </table>
            {{else}}
            <table id="searchresults" class="search-results searchtable">
              <tbody>
                {{#each dataset in model.data}}
                <tr class="result">
                  <td class="col-xs-12">
                    <div class="dataset-name">
                      <td class="dataset-info">
                        <i class="fa fa-database"></i>
                        {{#link-to 'dataset' dataset}}
                          {{{dataset.name}}}
                        {{/link-to}}
                      </td>
                      <p>{{{ dataset.urn }}}</p>
                      <p>source: {{{ dataset.source }}}</p>
                      <div class="schematext" style="margin-top:5px;margin-bottom: 10px;">
                        {{{ dataset.schema }}}
                      </div>
                    </div>
                  </td>
                </tr>
                {{/each}}
              </tbody>
            </table>
            {{/if}}
            {{else}}
            {{#if showNoResult}}
            <h4>No items found</h4>
            {{/if}}
            {{/if}}
          </div>
          <div class="col-xs-12">
            {{outlet}}
          </div>
        </div>
      </div>
    </script>

    <script type="text/x-handlebars" id="flows">
      {{#if projectView}}
      <div id="pagedProjects" >
        <div class="row">
          <div class="col-xs-12">
            <div class="well well-sm">
              <div class="row">
                <div class="col-xs-11">
                  <ul class="breadcrumbs">
                    {{#each breadcrumbs as |crumb|}}
                      <li>
                        <a title="{{crumb.title}}" href="#/flows/{{crumb.urn}}">
                          {{crumb.title}}
                        </a>
                      </li>
                    {{/each}}
                  </ul>
                </div>
              </div>
            </div>
            <div class="search-pagination">
              <ul class="pager">
                {{#unless first}}
                  <li class="previous">
                    {{#link-to 'pagedapplication' previousPage}}
                      &larr; Prev
                    {{/link-to}}
                  </li>
                {{/unless}}
                <li>
                  {{ model.data.count }} projects - page {{ model.data.page }} of {{ model.data.totalPages }}
                </li>
                {{#unless last}}
                  <li class="next">
                    {{#link-to 'pagedapplication' nextPage}}
                      Next &rarr;
                    {{/link-to}}
                  </li>
                {{/unless}}
              </ul>
            </div>
            <table class="table table-bordered search-results">
              <thead>
                <tr class="results-header">
                  <th class="col-xs-3">Project Name</th>
                  <th class="col-xs-3">Flow Count</th>
                </tr>
              </thead>
              <tbody>
                {{#each project in model.data.projects}}
                  <tr>
                    <td class="dataset-info">
                      {{#link-to 'pagedproject' project.appCode project.name 1}}
                        {{project.name}}
                      {{/link-to}}
                    </td>
                    <td>{{ project.flowCount }}</td>
                  </tr>
                {{/each}}
              </tbody>
            </table>
          </div>
          <div class="col-xs-12">
            {{outlet}}
          </div>
        </div>
      </div>
      {{/if}}
      {{#if flowView}}
      <div id="pagedFlows" >
        <div class="row">
          <div class="col-xs-12">
            <div class="well well-sm">
              <div class="row">
                <div class="col-xs-11">
                  <ul class="breadcrumbs">
                    {{#each breadcrumbs as |crumb|}}
                      <li>
                        <a title="{{crumb.title}}" href="#/flows/{{crumb.urn}}">
                          {{crumb.title}}
                        </a>
                      </li>
                    {{/each}}
                  </ul>
                </div>
              </div>
            </div>
            <div class="search-pagination">
              <ul class="pager">
                {{#unless first}}
                  <li class="previous">
                    {{#link-to 'pagedproject' previousPage}}
                      &larr; Prev
                    {{/link-to}}
                  </li>
                {{/unless}}
                <li>
                  {{ model.data.count }} flows - page {{ model.data.page }} of {{ model.data.totalPages }}
                </li>
                {{#unless last}}
                  <li class="next">
                    {{#link-to 'pagedproject' nextPage}}
                      Next &rarr;
                    {{/link-to}}
                  </li>
                {{/unless}}
              </ul>
            </div>
            <table class="table table-bordered search-results">
              <thead>
                <tr class="results-header">
                  <th class="col-xs-3">Flow Path</th>
                  <th class="col-xs-2">Flow Name</th>
                  <th class="col-xs-1">Flow Level</th>
                  <th class="col-xs-1">Job Count</th>
                  <th class="col-xs-2">Created Time</th>
                  <th class="col-xs-2">Modified Time</th>
                </tr>
              </thead>
              <tbody>
                {{#each flow in model.data.flows}}
                  <tr>
                    <td class="wrap-all-word">{{ flow.path }}</td>
                    <td class="dataset-info wrap-all-word">
                      {{#link-to 'pagedflow' flow.id 1}}
                        {{flow.name}}
                      {{/link-to}}
                    </td>
                    <td>{{ flow.level }}</td>
                    <td>{{ flow.jobCount }}</td>
                    <td>{{ flow.created }}</td>
                    <td>{{ flow.modified }}</td>
                  </tr>
                {{/each}}
              </tbody>
            </table>
          </div>
          <div class="col-xs-12">
            {{outlet}}
          </div>
        </div>
      </div>
      {{/if}}
      {{#if jobView}}
      <div id="pagedJobs" >
        <div class="row">
          <div class="col-xs-12">
            {{outlet}}
          </div>
        </div>
      </div>
      {{/if}}
    </script>

    <script type="text/x-handlebars" id="pagedflow">
      <div id="pagedJobs" class="container-fluid">
        <div class="row-fluid">
          <div class="span9">
            <div class="well well-sm">
              <div class="row">
                <div class="col-xs-11">
                  <ul class="breadcrumbs">
                    {{#each breadcrumbs as |crumb|}}
                      <li>
                        <a title="{{crumb.title}}" href="#/flows/{{crumb.urn}}">
                          {{crumb.title}}
                        </a>
                      </li>
                    {{/each}}
                  </ul>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-7">
                <h3> {{ model.data.flow }}</h3>
              </div>
              <div class="col-xs-5 text-right">
                <ul class="datasetDetailsLinks">
                  <li {{action 'watchUrn' urn}}>
                    <i {{bind-attr class=":fa urnWatched:fa-eye-slash:fa-eye"}}></i>
                    <span class="hidden-sm hidden-xs">
                      {{#if urnWatched}}
                        Unwatch
                      {{else}}
                        Watch
                      {{/if}}
                    </span>
                  </li>
                  <li>
                    <a target="_blank" {{bind-attr href=lineageUrl}}>
                      <i class="fa fa-sitemap"></i>
                      <span class="hidden-sm hidden-xs">
                        View Lineage
                      </span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="search-pagination">
              <ul class="pager">
                {{#unless first}}
                  <li class="previous">
                    {{#link-to 'pagedflow' previousPage}}
                      &larr; Prev
                    {{/link-to}}
                  </li>
                {{/unless}}
                <li>
                  {{ model.data.count }} jobs - page {{ model.data.page }} of {{ model.data.totalPages }}
                </li>
                {{#unless last}}
                  <li class="next">
                    {{#link-to 'pagedflow' nextPage}}
                      Next &rarr;
                    {{/link-to}}
                  </li>
                {{/unless}}
              </ul>
            </div>
            <table class="table table-bordered search-results">
              <thead>
                <tr class="results-header">
                  <th class="span3">Job Path</th>
                  <th class="span2">Job Name</th>
                  <th class="span1">Job Type</th>
                  <th class="span3">Created Time</th>
                  <th class="span3">Modified Time</th>
                </tr>
              </thead>
              <tbody>
                {{#each job in model.data.jobs}}
                  <tr>
                    <td class="wrap-all-word">{{ job.path }}</td>
                    <td class="dataset-info wrap-all-word">
                      {{#if job.refFlowId}}
                        {{#link-to 'pagedflow' job.refFlowId 1}}
                          {{job.name}}
                        {{/link-to}}
                      {{else}}
                        {{job.name}}
                      {{/if}}
                    </td>
                    <td>{{ job.type }}</td>
                    <td>{{ job.created }}</td>
                    <td>{{ job.modified }}</td>
                  </tr>
                {{/each}}
              </tbody>
            </table>
          </div>
          <div class="span9">
            {{outlet}}
          </div>
        </div>
      </div>
    </script>
    <script type="text/x-handlebars" data-template-name="components/ace-editor">
      <pre id='{{random}}_editor' class="editor-wrapper"></pre>
      <div class="row">
        <div class="col-xs-6 col-xs-offset-6 pull-right text-right">
          <button
            type="button"
            class="btn btn-primary"
            {{action "save"}}
          >
            Update
          </button>
        </div>
      </div>
    </script>
    <script src="@routes.Assets.at("vendors/ember-1.12.0/ember-template-compiler.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("vendors/ember-1.12.0/ember.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/search.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/tree.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/routers/router.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/routers/search.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/routers/advancedSearch.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/routers/datasets.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/routers/flows.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/controllers/search.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/controllers/advancedSearch.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/controllers/datasets.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/controllers/flows.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/components/components.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/components/schema-comment.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/components/editor.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/views/views.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/main.js")" type="text/javascript"></script>
  }