redash/rd_ui/app/views/query.html

<!-- modal for archive button -->
<div class="modal fade" id="archive-confirmation-modal" tabindex="-1" role="dialog"
     aria-labelledby="archiveConfirmationModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Query Archive</h4>
      </div>
      <div class="modal-body">
        Are you sure you want to archive this query?
        <br/> All dashboard widgets created with its visualizations will be deleted.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        <button type="button" class="btn btn-danger" ng-click="archiveQuery()">Yes, archive.</button>
      </div>
    </div>
  </div>
</div>
<!-- end of modal for archive button -->

<div class="container">
  <overlay ng-if="canCreateQuery === false">
    You don't have permission to create new queries on any of the data sources available to you. You can either <a
    href="queries">browse existing queries</a>, or ask for additional permissions from your Re:dash admin.
  </overlay>
  <overlay ng-if="noDataSources && currentUser.isAdmin">
    Looks like no data sources were created yet (or none of them available to the group(s) you're member of). Please
    create one first, and then start querying.
    <br/>
    <a href="data_sources/new" class="btn btn-default">Create Data Source</a> <a href="groups" class="btn btn-default">Manage
    Group Permissions</a>
  </overlay>
  <overlay ng-if="noDataSources && !currentUser.isAdmin">
    Looks like no data sources were created yet (or none of them available to the group(s) you're member of). Please ask
    your Re:dash admin to create one first.
  </overlay>

  <alert-unsaved-changes ng-if="canEdit" is-dirty="isDirty"></alert-unsaved-changes>

  <div class="row bg-white p-10 m-b-10">
    <div class="col-sm-9">
      <h3>
        <edit-in-place editable="isQueryOwner" done="saveName" ignore-blanks="true" value="query.name"></edit-in-place>
      </h3>
      <p>
        <em>
          <edit-in-place editable="isQueryOwner"
                         done="saveDescription"
                         editor="textarea"
                         placeholder="No description"
                         ignore-blanks='false'
                         value="query.description"
                         markdown="true">
          </edit-in-place>
        </em>

      <ul class="list-inline m-t-20">
        <li>
          <span class="zmdi zmdi-account"></span>
          <span class="text-muted">Created By </span>
          <strong>{{query.user.name}}</strong>
        </li>
        <li ng-if="query.last_modified_by && query.user.id != query.last_modified_by.id">
          <span class="zmdi zmdi-account"></span>
          <span class="text-muted">Last Modified By </span>
          <strong>{{query.last_modified_by.name}}</strong>
        </li>
        <li>
          <span class="zmdi zmdi-time"></span>
          <span class="text-muted">Updated at </span>
          <strong>
            <rd-time-ago value="query.updated_at"></rd-time-ago>
          </strong>
        </li>
        <li>
          <span class="zmdi zmdi-time"></span>
          <span class="text-muted">Created at </span>
          <strong>
            <rd-time-ago value="query.created_at"></rd-time-ago>
          </strong>
        </li>
      </ul>
      </p>
    </div>
    <div class="col-sm-3 text-right">
      <h3>
        <query-source-link></query-source-link>
      </h3>
    </div>
    <div class="col-lg-12 p-5 bg-orange c-white" ng-if="query.is_archived">
      This query is archived and can't be used in dashboards, and won't appear in search results.
    </div>
  </div>

  <! -- editor -->
  <div class="container">
      <div class="row bg-white p-b-5" ng-if="sourceMode" resizable r-directions="['bottom']" r-height="300" style="min-height:100px;">

        <div class="col-md-3 schema-container hidden-sm hidden-xs" ng-show="hasSchema">
          <div ng-show="schema.length < 500" class="p-t-5 p-b-5">
            <input type="text" placeholder="Search schema..." class="form-control" ng-model="schemaFilter">
          </div>

          <div class="schema-browser">
            <div ng-repeat="table in schema | filter:schemaFilter track by table.name">
              <div class="table-name" ng-click="table.collapsed = !table.collapsed">
                <i class="fa fa-table"></i> <strong><span title="{{table.name}}">{{table.name}}</span><span
                ng-if="table.size !== undefined"> ({{table.size}})</span></strong>
              </div>
              <div collapse="table.collapsed">
                <div ng-repeat="column in table.columns track by column" style="padding-left:16px;">{{column}}</div>
              </div>
            </div>
          </div>
        </div>

        <div ng-class="editorSize" style="height:100%;">
            <div class="p-5">
              <button type="button" class="btn btn-primary btn-s" ng-disabled="queryExecuting || !canExecuteQuery()"
                      ng-click="executeQuery()">
                <span class="zmdi zmdi-play"></span> Execute
              </button>
              <query-formatter></query-formatter>

              <i class="fa fa-database"></i>
              <span class="text-muted">Data Source</span>
              <select ng-disabled="!isQueryOwner" ng-model="query.data_source_id" ng-change="updateDataSource()"
                      ng-options="ds.id as ds.name for ds in dataSources"></select>

              <div class="pull-right">
                <button class="btn btn-s btn-default" ng-click="duplicateQuery()" ng-disabled="query.id === undefined">
                  <span class="zmdi zmdi-arrow-split"></span> Fork
                </button>
                <button class="btn btn-default" ng-show="canEdit" ng-click="saveQuery()">
                  <span class="fa fa-floppy-o"> </span> Save<span
                  ng-show="isDirty">&#42;</span>
                </button>
                <div class="btn-group" role="group" dropdown>
                  <button class="btn btn-default btn-sm dropdown-toggle" dropdown-toggle>
                    <span class="zmdi zmdi-more"></span>
                  </button>
                  <ul class="dropdown-menu pull-right" dropdown-menu>
                    <li ng-if="!query.is_archived && query.id != undefined && (isQueryOwner || currentUser.hasPermission('admin'))"><a hash-link hash="archive-confirmation-modal" data-toggle="modal">Archive Query</a></li>
                    <li ng-if="query.id != undefined"><a ng-click="showApiKey()">Show API Key</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <p style="height:calc(100% - 40px);">
              <query-editor query="query" schema="schema" syntax="dataSource.syntax"
                            lock="queryFormatting"></query-editor>
            </p>
        </div>
      </div>
  </div>
  <!-- end of editor -->

  <!-- Query Details-->
  <div class="container m-b-5 p-t-5 bg-ace" ng-if="sourceMode">
  </div>
  <!-- End of Query Details-->

  <div class="tile">
    <div class="t-header bg-ace">
      <div class="pull-right">
        <button class="btn btn-sm btn-default" ng-click="executeQuery()"
                ng-disabled="queryExecuting || !canExecuteQuery()" title="Refresh Dataset"
                ng-if="!sourceMode"><span
          class="zmdi zmdi-refresh"></span></button>
        <div class="btn-group" dropdown>
          <button type="button" class="btn btn-default btn-sm dropdown-toggle"
                  ng-disabled="queryExecuting || !queryResult.getData()" aria-haspopup="true"
                  dropdown-toggle aria-expanded="false">
            Download Dataset <span class="caret"></span>
          </button>
          <ul class="dropdown-menu pull-right" dropdown-menu>
            <li>
              <a query-result-link target="_self">
                <span class="fa fa-file-o"></span> Download as CSV File
              </a>
            </li>
            <li>
              <a query-result-link file-type="xlsx" target="_self">
                <span class="fa fa-file-excel-o"></span> Download as Excel File
              </a>
            </li>
          </ul>
        </div>
      </div>
      <ul class="list-inline">
        <li>
          <!-- runtime -->
          <span class="zmdi zmdi-timer"></span>
          <span class="text-muted">Runtime </span>
          <strong ng-show="!queryExecuting">{{queryResult.getRuntime() | durationHumanize}}</strong>
          <span ng-show="queryExecuting">Running&hellip;</span>
        </li>
        <li>
          <!-- rows -->
          <span class="zmdi zmdi-format-align-justify"></span>
          <span class="text-muted">Rows </span><strong>{{queryResult.getData().length}}</strong>
        </li>
        <li>
          <!-- refresh schedule -->
          <span class="zmdi zmdi-refresh"></span>
          <span class="text-muted">Refresh Schedule</span>
          <a ng-click="openScheduleForm()">{{query.schedule | scheduleHumanize}}</a>
        </li>
        <li>
          <!-- last update -->
          <span class="zmdi zmdi-time"></span>
          <span class="text-muted">Last update </span>
          <strong>
            <rd-time-ago value="queryResult.query_result.retrieved_at"></rd-time-ago>
          </strong>
        </li>
      </ul>

    </div>
    <div class="t-body">
      <div class="row">
        <div class="col-lg-12">
          <!-- Query Execution Status -->
          <div class="alert alert-info" ng-show="queryResult.getStatus() == 'processing'">
            Executing query&hellip;
            <rd-timer timestamp="queryResult.getUpdatedAt()"></rd-timer>
            <button type="button" class="btn btn-warning btn-xs pull-right" ng-disabled="cancelling"
                    ng-click="cancelExecution()">Cancel
            </button>
          </div>
          <div class="alert alert-info" ng-show="queryResult.getStatus() == 'waiting'">
            Query in queue&hellip;
            <rd-timer timestamp="queryResult.getUpdatedAt()"></rd-timer>
            <button type="button" class="btn btn-warning btn-xs pull-right" ng-disabled="cancelling"
                    ng-click="cancelExecution()">Cancel
            </button>
          </div>
          <div class="alert alert-danger" ng-show="queryResult.getError()">Error running query: <strong>{{queryResult.getError()}}</strong>
          </div>
          <div class="row log-container" ng-show="showLog">
            <span ng-show="showLog">Log Information:</span>
            <table>
              <tbody>
              <tr ng-repeat="l in queryResult.getLog()">
                <td>{{l}}</td>
              </tr>
              </tbody>
            </table>
          </div>
          <!-- End of Query Execution Status -->

          <!-- tabs and data -->
          <div ng-if="showDataset">
            <div class="row">
              <div class="col-lg-12">
                <ul class="tab-nav">
                  <rd-tab tab-id="table" name="Table"></rd-tab>
                  <rd-tab tab-id="pivot" name="Pivot Table" ng-if="sourceMode && canEdit"></rd-tab>
                  <rd-tab tab-id="{{vis.id}}" name="{{vis.name}}" ng-if="vis.type!='TABLE'"
                          ng-repeat="vis in query.visualizations">
                          <span class="remove" ng-click="deleteVisualization($event, vis)"
                                ng-show="canEdit"> &times;</span>
                  </rd-tab>
                  <li class="rd-tab"><a ng-click="openVisualizationEditor()" ng-if="sourceMode && canEdit">&plus; New Visualization</a></li>
                </ul>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-12">
                <div ng-show="selectedTab == 'table'">
                  <filters></filters>
                  <grid-renderer query-result="queryResult" items-per-page="50"></grid-renderer>
                  <!-- the ng-repeat is a lame hack to find the table visualization... -->
                  <div class="bg-ace p-5" ng-repeat="vis in query.visualizations" ng-if="vis.type == 'TABLE'">
                    <button class="btn btn-default" ng-if="!query.isNew()" ng-click="showEmbedDialog(query, vis)"><i class="zmdi zmdi-code"></i> Embed</button>
                  </div>
                </div>
                <div ng-show="sourceMode && canEdit && selectedTab == 'pivot'">
                  <h3>
                    Pivot tables are now regular visualization, which you can create from the
                    <a ng-click="openVisualizationEditor()">"New Visualization" screen</a> and <strong>save</strong>.
                  </h3>
                </div>
                <div ng-if="selectedTab == vis.id" ng-repeat="vis in query.visualizations">
                  <visualization-renderer visualization="vis" query-result="queryResult"></visualization-renderer>
                  <div class="bg-ace p-5">
                    <button class="btn btn-default" ng-click="openVisualizationEditor(vis)" ng-if="canEdit">Edit</button>
                    <button class="btn btn-default" ng-click="showEmbedDialog(query, vis)"><i class="zmdi zmdi-code"></i> Embed</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>