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 class="filter">
              <input id="filterinput" placeholder="Filter By">
            </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
      class="wh-clickable-icon fa {{if dataset.isFavorite 'fa-heart'}} {{unless dataset.isFavorite 'fa-heart-o'}}"
      {{action "favorites" dataset}}
      >
      </i>
    </script>

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

    <script type="text/x-handlebars" id="components/dataset-watch">
      <i
        class="wh-clickable-icon fa {{if dataset.watchId 'fa-eye-slash'}} {{unless dataset.watchId '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
        class="fa {{if metric.watchId 'fa-eye-slash'}} {{unless metric.watchId '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 model.data.datasets as |dataset|}}
                  <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>owner:</span>
                            {{#each dataset.owners as |owner|}}
                              <p style="display:inline" title={{owner.name}}>{{ owner.userName }} </p>
                            {{/each}}
                          </div>
                          {{/if}}
                          {{#if dataset.formatedModified}}
                          <div class="col-xs-12">
                            <span>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" id="components/ember-selector">
      <select id="ember-selector" class="form-control">
        {{#each renderValues as |value|}}
          {{#if value.isSelected}}
            <option value="{{value.value}}" selected>
              {{value.value}}
            </option>
          {{else}}
            <option value="{{value.value}}">
              {{value.value}}
            </option>
          {{/if}}
        {{/each}}
      </select>
    </script>

    <script type="text/x-handlebars" id="components/dataset-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"
                class="btn {{if isTable 'btn-primary'}} {{unless isTable 'btn-default'}}"
                {{action "setView" "tabular"}}>
                View As Tabular
              </button>
              <button
                type="button"
                class="btn {{if isJSON 'btn-primary'}} {{unless isJSON '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 schemas as |schema|}}
            <tr 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=dataset.id fieldId=schema.id}}{{/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" id="components/dataset-property">
      {{#if hasProperty}}
        <div>
          {{#each properties as |item|}}
            <div class="prop-row group">
              <div class="prop-label">{{item.key}}:</div>
              {{#if item.isSelectController}}
                <div class="prop-value-query">{{item.value}}</div>
              {{else}}
                <div class="prop-value">{{item.value}}</div>
              {{/if}}
            </div>
          {{/each}}
        </div>
      {{else}}
        <p>Property is not available</p>
      {{/if}}
    </script>

<script type="text/x-handlebars" id="components/dataset-owner-list">
  {{#if owners}}
    <header>
      Owners:
      <ul>
        {{#each owners as |owner|}}
          <li>
            {{#if owner.email}}
              <a title="Email {{owner.name}} about {{datasetName}}"
                 href="mailto:{{owner.email}}?subject=RE: Dataset {{datasetName}}">
                {{owner.name}}
              </a>
            {{else}}
              {{owner.name}}
            {{/if}}
          </li>
        {{/each}}
      </ul>
      {{#if ownersEmailList}}
        <span>
          <a title="Email all dataset owners" href="mailto: {{ownersEmailList}}">Ask a question?</a>
        </span>
      {{/if}}
    </header>
  {{else}}
    No known owners for this dataset
  {{/if}}
</script>

    <script type="text/x-handlebars" id="components/dataset-author">
      <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 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-2">Full Name</th>
            <th class="col-xs-1">Owner ID Type</th>
            <th class="col-xs-1">Owner Source</th>
            <th class="col-xs-2">Owner Type</th>
            <th class="col-xs-2">Owner Sub Type</th>
            <th class="col-xs-1">Confirmed</th>
            <th class="col-xs-1"></th>
          </tr>
        </thead>
        <tbody data-attribute="owner-table">
          {{#each owners as |owner|}}
          <tr>
            <td>{{input class="userEntity" value=owner.userName}}</td>
            <td>{{owner.name}}</td>
            <td>{{owner.idType}}</td>
            <td>{{owner.source}}</td>
            <td>
              {{#ember-selector values=ownerTypes selected=owner.type}}
              {{/ember-selector}}
            </td>
            <td>
              {{input value=owner.subType}}
            </td>
            <td>
              {{#if owner.confirmedBy}}
                <i class="fa fa-check-square-o" title="Owner confirmed by {{owner.confirmedBy}}" {{action "confirmOwner" owner false}}>
                </i>
              {{else}}
                <i class="fa fa-square-o" title="Please confirmed" {{action "confirmOwner" owner true}}>
                </i>
              {{/if}}
            </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" id="components/dataset-sample">
      {{#if hasSamples}}
        {{#if isPinot}}
          <table id="pinotsampletreegrid" class="tree table table-bordered dataset-detail-table">
            <thead>
              <tr class="results-header">
                {{#each columns as |column|}}
                  <th class="col-xs-2">{{column}}</th>
                {{/each}}
              </tr>
            </thead>
            <tbody>
              {{#each samples as |sample|}}
                <tr>
                  {{#each sample as |r|}}
                    <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" id="components/dataset-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 impacts as |impact|}}
            <tr>
              <td>{{impact.level}}</td>
              <td>
                {{#if impact.isValidDataset}}
                  <a 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" 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" 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" 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" 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>
        {{dataset-owner-list owners=owners datasetName=model.name}}
        {{#if hasinstances}}
          <div class="row">
            <span class="col-xs-1">Instances:</span>
            <div class="btn-toolbar col-xs-11" role="toolbar">
              {{#each instances as |instance index|}}
                <div class="btn-group" role="group">
                  {{#if index}}
                    <button type="button" data-value="{{ instance.dbCode }}" class="btn btn-default instance-btn" {{action "updateInstance" instance}}>
                      {{ instance.dbCode }}
                    </button>
                  {{else}}
                    <button type="button" data-value="{{ instance.dbCode }}" class="btn btn-primary instance-btn" {{action "updateInstance" instance}}>
                      {{ instance.dbCode }}
                    </button>
                  {{/if}}
                </div>
              {{/each}}
            </div>
          </div>
        {{/if}}
        {{#if hasversions}}
          <div class="row">
            <span class="col-xs-1">Versions:</span>
            <div class="btn-toolbar col-xs-11" role="toolbar">
              {{#each versions as |version index|}}
                <div class="btn-group" role="group">
                  {{#if index}}
                    <button type="button" data-value="{{ version }}" class="btn btn-default version-btn" {{action "updateVersion" version}}>
                      {{ version }}
                    </button>
                  {{else}}
                    <button type="button" data-value="{{ version }}" class="btn btn-primary version-btn" {{action "updateVersion" version}}>
                      {{ version }}
                    </button>
                  {{/if}}
                </div>
              {{/each}}
            </div>
          </div>
        {{/if}}
      </div>

      {{#if tabview}}
        <ul class="nav nav-tabs nav-justified">
          {{#unless isPinot}}
          <li id="properties">
            <a data-toggle="tab" href="#propertiestab">
              Properties
            </a>
          </li>
          {{/unless}}
          <li id="properties">
            <a data-toggle="tab" href="#commentstab">
              Comments
            </a>
          </li>
          <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="Relations"
              href="#dependtab">
              Relations
            </a>
          </li>
          <li id="access">
            <a data-toggle="tab"
              title="Accessibilities"
              href="#accesstab">
              Accessibilities
            </a>
          </li>
        </ul>
        <div class="tab-content">
          {{#unless isPinot}}
            <div id="propertiestab" class="tab-pane">
              {{#dataset-property hasProperty=hasProperty properties=properties}}
              {{/dataset-property}}
            </div>
          {{/unless}}
          <div id="commentstab" class="tab-pane">
            {{#dataset-comments dataset=this}}
            {{/dataset-comments}}
          </div>
          <div id="schematab" class="tab-pane active">
            {{#dataset-schema hasSchemas=hasSchemas isTable=isTable isJSON=isJSON schemas=schemas dataset=model}}
            {{/dataset-schema}}
          </div>
          <div id="ownertab" class="tab-pane">
            {{dataset-author owners=owners
                             ownerTypes=ownerTypes
                             showMsg=showMsg
                             alertType=alertType
                             ownerMessage=ownerMessage
                             parentController=this}}
          </div>
          {{#unless isSFDC}}
            <div id="sampletab" class="tab-pane">
              {{#dataset-sample hasSamples=hasSamples isPinot=isPinot columns=columns samples=samples}}
              {{/dataset-sample}}
            </div>
          {{/unless}}
          <div id="impacttab" class="tab-pane">
            {{#dataset-impact hasImpacts=hasImpacts impacts=impacts}}
            {{/dataset-impact}}
          </div>
          <div id="dependtab" class="tab-pane">
            {{#dataset-relations hasDepends=hasDepends depends=depends hasReferences=hasReferences references=references}}
            {{/dataset-relations}}
          </div>
          <div id="accesstab" class="tab-pane">
            {{#dataset-access hasAccess=hasAccess accessibilities=accessibilities}}
            {{/dataset-access}}
          </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
              </a>
            </h4>
          </div>
          <div id="properties" class="panel-collapse collapse" role="tabpanel" aria-labelledby="propertiesHeading">
            <div class="panel-body">
              <div class="row">
                {{#dataset-property hasProperty=hasProperty properties=properties}}
                {{/dataset-property}}
              </div>
            </div>
          </div>
        </div>
        {{/unless}}

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="commentsHeading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion"
                href="#comments" aria-expanded="true" aria-controls="comments">
                Comments
              </a>
            </h4>
          </div>
          <div id="comments" class="panel-collapse collapse" role="tabpanel" aria-labelledby="commentsHeading">
            <div class="panel-body">
              {{#dataset-comments dataset=this}}
              {{/dataset-comments}}
            </div>
          </div>
        </div>

        <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">
              {{#dataset-schema hasSchemas=hasSchemas isTable=isTable isJSON=isJSON schemas=schemas dataset=model}}
              {{/dataset-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">
              {{dataset-author owners=owners
                               ownerTypes=ownerTypes
                               showMsg=showMsg
                               alertType=alertType
                               ownerMessage=ownerMessage
                               parentController=this}}
            </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">
              {{#dataset-sample hasSamples=hasSamples isPinot=isPinot columns=columns samples=samples}}
              {{/dataset-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">
              {{#dataset-impact hasImpacts=hasImpacts impacts=impacts}}
              {{/dataset-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">
                Relations
              </a>
            </h4>
          </div>
          <div id="dependsview" class="panel-collapse collapse" role="tabpanel" aria-labelledby="impactsHeading">
            <div class="panel-body">
              {{#dataset-relations hasDepends=hasDepends depends=depends hasReferences=hasReferences references=references}}
              {{/dataset-relations}}
            </div>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="accessHeading">
            <h4 class="panel-title">
              <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
               href="#accessview" aria-expanded="false" aria-controls="accessData">
                Accessiblities
              </a>
            </h4>
          </div>
          <div id="accessview" class="panel-collapse collapse" role="tabpanel" aria-labelledby="accessHeading">
            <div class="panel-body">
              {{#dataset-access hasAccess=hasAccess accessibilities=accessibilities}}
              {{/dataset-access}}
            </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 model.data.metrics as |metric|}}
                  <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">
      {{#metric-detail showLineage=showLineage model=model}}
      {{/metric-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"
            class="btn dropdown-toggle {{if isDatasets 'btn-primary'}} {{unless isDatasets '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"
          class="btn {{if isComments 'btn-primary'}} {{unless isComments 'btn-default'}}"
          {{action 'switchSearchToComments' keyword}}>
          Comments
        </button>
        <button
          type="button"
          class="btn {{if isFlows 'btn-primary'}} {{unless isFlows 'btn-default'}}"
          {{action 'switchSearchToFlow' keyword}}>
          Flows
        </button>
        <button
          type="button"
          class="btn {{if isJobs 'btn-primary'}} {{unless isJobs '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 model.data as |flowJob|}}
                  <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 model.data as |dataset|}}
                  <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 model.data as |flowJob|}}
                  <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 model.data as |dataset|}}
                <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 flowView}}
      <div id="flowspage" >
        <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">
                    {{#if queryParams}}
                      {{#link-to 'flowssubpage' currentName previousPage (query-params urn=queryParams)}}
                        &larr; Prev
                      {{/link-to}}
                    {{else}}
                      {{#link-to 'flowspage' previousPage}}
                        &larr; Prev
                      {{/link-to}}
                    {{/if}}
                  </li>
                {{/unless}}
                <li>
                  {{ model.data.count }} flows - page {{ model.data.page }} of {{ model.data.totalPages }}
                </li>
                {{#unless last}}
                  <li class="next">
                    {{#if queryParams}}
                      {{#link-to 'flowssubpage' currentName nextPage (query-params urn=queryParams)}}
                        Next &rarr;
                      {{/link-to}}
                    {{else}}
                      {{#link-to 'flowspage' nextPage}}
                        Next &rarr;
                      {{/link-to}}
                    {{/if}}
                  </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 model.data.flows as |flow|}}
                  <tr>
                    <td class="wrap-all-word">{{ flow.path }}</td>
                    <td class="dataset-info wrap-all-word">
                      {{#link-to 'pagedflow' flow.appCode flow.id 1 (query-params urn=flow.group)}}
                        {{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>
      {{else}}
      <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="flow" 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 class="fa {{if urnWatched 'fa-eye-slash'}} {{unless urnWatched 'fa-eye'}}"></i>
                    <span class="hidden-sm hidden-xs">
                      {{#if urnWatched}}
                        Unwatch
                      {{else}}
                        Watch
                      {{/if}}
                    </span>
                  </li>
                  <li>
                    <a target="_blank" 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 (query-params urn=urn)}}
                      &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 (query-params urn=urn)}}
                      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 model.data.jobs as |job|}}
                  <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 (query-params urn=job.refFlowGroup)}}
                          {{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-2.6.2/ember-template-compiler.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("vendors/ember-2.6.2/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/main.js")" type="text/javascript"></script>
  }