redash/rd_ui/app/views/queryview.html

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h1>
                <span class="text-muted" ng-show="isEditing">Editing </span>
                <edit-in-place editable="isEditing" ignore-blanks='true' value="query.name"></edit-in-place>

                <span class="pull-right">
                    <button class="btn btn-success" ng-show="isEditing" ng-click="saveQuery() && toggleEdit(false)">
                        <span class="glyphicon glyphicon-floppy-disk"> </span> Save<span ng-show="dirty">&#42;</span>
                    </button>
                    <button class="btn btn-default" ng-show="!canEdit" ng-click="toggleShowQuery()">View Query</button>
                    <button class="btn btn-default" ng-show="canEdit" ng-click="toggleEdit()">
                        <span class="glyphicon glyphicon-edit"></span>
                        <span ng-show="isEditing"> Done</span>
                        <span ng-show="!isEditing"> Edit</span>
                    </button>
                    <button type="button" class="btn btn-default" ng-click="duplicateQuery()">
                        <span class="glyphicon glyphicon-share-alt"></span> Duplicate
                    </button>
                    <a class="btn btn-primary" ng-disabled="queryExecuting || !queryResult.getData()" ng-href="{{dataUri}}" download="{{dataFilename}}" target="_self"><span class="glyphicon glyphicon-cloud-download"></span> Download
                    </a>
                </span>
            </h1>
        </div>
    </div>

    <hr>

    <div class="row">
        <div ng-class="{'col-lg-6': isEditing, 'col-lg-3': !isEditing}">
            <em>
                <edit-in-place editable="isEditing" editor="textarea" placeholder="No description" ignore-blanks='false' value="query.description"></edit-in-place>
            </em>
            <hr ng-show="isEditing || query.description">

            <div ng-show="isEditing">
                <p>
                    <button type="button" class="btn btn-primary btn-xs" ng-disabled="queryExecuting" ng-click="executeQuery()">
                        <span class="glyphicon glyphicon-play"></span> Execute
                    </button>
                    <button type="button" class="btn btn-default btn-xs" ng-click="formatQuery()">
                        <span class="glyphicon glyphicon-indent-left"></span> Format SQL
                    </button>
                </p>

                <p>
                    <div class="alert alert-info"
                        ng-show="queryResultStatus !== 'done' && queryResultStatus !== 'failed'"
                        ng-switch="queryResultStatus">
                        <span ng-switch-when="processing">Executing query&hellip;</span>
                        <span ng-switch-when="waiting">Query in queue&hellip;</span>
                        <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>
                </p>
            </div>

            <p ng-show="showQuery">
                <textarea ui-codemirror="editorOptions" ui-refresh="showQuery" ng-model="query.query"></textarea>
                <!-- CodeMirror renders here -->
            </p>

            <p>
                <span class="glyphicon glyphicon-refresh"></span>
                <span class="text-muted">Last update </span>
                <strong am-time-ago="queryResult.query_result.retrieved_at"></strong>
            </p>
            <p>
                <span class="glyphicon glyphicon-user"></span>
                <span class="text-muted">Created By </span><strong>{{query.user.name}}</strong>
            </p>
            <p>
                <span class="glyphicon glyphicon-time"></span>
                <span class="text-muted">Runtime </span>
                <strong ng-show="!queryExecuting">{{queryResult.getRuntime() | durationHumanize}}</strong>
                <span ng-show="queryExecuting">Running&hellip;</span>
            </p>
            <p>
                <span class="glyphicon glyphicon-align-justify"></span>
                <span class="text-muted">Rows </span><strong>{{queryResult.getData().length}}</strong>
            </p>
        </div>

        <div ng-class="{'col-lg-6': isEditing, 'col-lg-9': !isEditing}">
            <div class="row">
                <div class="col-lg-12">
                    <ul class="nav nav-tabs">
                        <rd-tab tab-id="table" name="Table"></rd-tab>
                        <rd-tab tab-id="pivot" name="Pivot Table"></rd-tab>
                        <rd-tab tab-id="{{vis.id}}" name="{{vis.name}}" ng-hide="vis.type=='TABLE'" ng-repeat="vis in query.visualizations">
                            <span class="remove" ng-click="deleteVisualization($event, vis)" ng-show="canEdit"> &times;</span>
                        </rd-tab>
                        <rd-tab tab-id="add" name="&plus; New" removeable="true" ng-show="canEdit && isEditing"></rd-tab>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <grid-renderer ng-show="selectedTab == 'table'" query-result="queryResult" items-per-page="50"></grid-renderer>
                    <pivot-table-renderer ng-show="selectedTab == 'pivot'" query-result="queryResult"></pivot-table-renderer>

                    <div ng-show="selectedTab == vis.id" ng-repeat="vis in query.visualizations">
                        <visualization-renderer visualization="vis" query-result="queryResult"></visualization-renderer>
                        <edit-visulatization-form visualization="vis" query="query" query-result="queryResult" ng-show="isEditing"></edit-visulatization-form>
                    </div>

                    <div ng-show="selectedTab == 'add'">
                        <visualization-renderer visualization="newVisualization" query-result="queryResult"></visualization-renderer>
                        <edit-visulatization-form visualization="newVisualization" query="query" ng-show="isEditing"></edit-visulatization-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>