redash/rd_ui/app/views/queryfiddle.html

<div class="container">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <p>
                     <edit-in-place editable="currentUser.canEdit(query)" ignore-blanks='true' value="query.name"></edit-in-place>
                 </p>
                </h3>
                <p>
                    <edit-in-place editable="currentUser.canEdit(query)" editor="textarea" placeholder="No description" ignore-blanks='false' value="query.description" class="text-muted"></edit-in-place>
                </p>
            </div>
            <div class="panel-body">
                <textarea ui-codemirror="editorOptions" ng-model="query.query"></textarea>

                <div>
                    <a class="btn btn-default" ng-disabled="queryExecuting || !queryResult.getData()" ng-href="{{dataUri}}" download="{{dataFilename}}" target="_self">
                        <span class="glyphicon glyphicon-floppy-disk"></span> Download Data Set
                    </a>
                    <button type="button" class="btn btn-default center-x" ng-click="formatQuery()"><span class="glyphicon glyphicon-ok"></span> Format SQL</button>

                    <div class="btn-group pull-right">
                        <button type="button" class="btn btn-default" ng-click="duplicateQuery()">Duplicate</button>
                        <button type="button" class="btn btn-default" ng-disabled="!currentUser.canEdit(query)" ng-click="saveQuery()">Save
                            <span ng-show="dirty">&#42;</span>
                        </button>
                        <button type="button" class="btn btn-primary" ng-disabled="queryExecuting" ng-click="executeQuery()">Execute</button>
                    </div>
                </div>

            </div>
            <div class="panel-footer">
                <span ng-show="queryResult.getRuntime()>=0">Query runtime: {{queryResult.getRuntime() | durationHumanize}} | </span>
                <span ng-show="queryResult.query_result.retrieved_at">Last update time: <span am-time-ago="queryResult.query_result.retrieved_at"></span> | </span>
                <span ng-show="queryResult.getStatus() == 'done'">Rows: {{queryResult.getData().length}} | </span>
                Created by: {{query.user.name}}
                <div class="pull-right">Refresh query: <select ng-model="query.ttl" ng-options="c.value as c.name for c in refreshOptions"></select><br></div>
            </div>
        </div>

        <div class="alert alert-info" ng-show="queryResult.getStatus() == 'processing'">
            Executing query... <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... <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>

    <div class="row" ng-show="queryResult.getStatus() == 'done'">
        <ul class="nav nav-tabs">
            <rd-tab tab-id="table" name="Table"></rd-tab>
            <rd-tab tab-id="pivot" name="Pivot Table"></rd-tab>
            <!-- hide the table visualization -->
            <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="currentUser.canEdit(query)"> &times;</span>
            </rd-tab>
            <rd-tab tab-id="add" name="&plus; New" removeable="true" ng-show="currentUser.canEdit(query)"></rd-tab>
        </ul>

        <div class="col-lg-12" ng-show="selectedTab == 'table'">
            <grid-renderer query-result="queryResult" items-per-page="50"></grid-renderer>
        </div>

        <div class="col-lg-12" ng-show="selectedTab == 'pivot'">
            <pivot-table-renderer query-result="queryResult"></pivot-table-renderer>
        </div>

        <div class="col-lg-12" ng-show="selectedTab == vis.id" ng-repeat="vis in query.visualizations">
            <div class="row" ng-show="currentUser.canEdit(query)">
                <p>
                    <div class="col-lg-12">
                        <edit-visulatization-form visualization="vis" query="query" query-result="queryResult"></edit-visulatization-form>
                    </div>
                </p>
            </div>
            <div class="row">
                <p>
                    <div class="col-lg-12">
                        <visualization-renderer visualization="vis" query-result="queryResult"></visualization-renderer>
                    </div>
                </p>
            </div>
        </div>

        <div class="col-lg-12" ng-show="selectedTab == 'add'">
            <div class="row">
                 <p>
                    <div class="col-lg-6">
                        <edit-visulatization-form visualization="newVisualization" query="query"></edit-visulatization-form>
                    </div>
                    <div class="col-lg-6">
                        <visualization-renderer visualization="newVisualization" query-result="queryResult"></visualization-renderer>
                    </div>
                </p>
            </div>
        </div>
    </div>
</div>