webapp/app/partials/query/query_detail.html

<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->

<div class="query-content" ng-controller="QueryResultCtrl" ng-if="curQuery">
<div>

<div class="pull-right">
                        <span style="color: #808080">
                            <span>Start Time: {{curQuery.startTime | utcToConfigTimeZone}}</span>&nbsp;&nbsp;
                            <span ng-if="curQuery.result.results">Duration: {{curQuery.result.duration/1000 | number: 2}}s</span>&nbsp;&nbsp;
                        </span>
    <button class="btn btn-success btn-xs" ng-click="rerun()">
        <i class="fa fa-refresh"></i> Rerun
    </button>
    <button class="btn btn-grey btn-xs" ng-click="showSavePanel()">
        <i class="fa fa-floppy-o"></i> Save
    </button>
</div>

<div class="form-group">
    <label>Query String</label>
    <label ng-click="curQuery.result.show=!curQuery.result.show" style="padding:5px">
        <i ng-if="!curQuery.result.show" class="fa fa-angle-double-down"></i>
        <i ng-if="curQuery.result.show" class="fa fa-angle-double-right"></i>
    </label>
    <section style="padding-bottom: 20px" ng-if="curQuery.result.show">
        <div ui-ace="{
                      useWrapMode : true,
                      showGutter: true,
                      theme:'chrome',
                      mode: 'sql',
                      onLoad: aceLoaded,
                      onChange: aceChanged
                    }" ng-model="curQuery.sql"></div>
    </section>
</div>

<div class="form-group">
    <ul class="row">
        <li class="col-md-2" style="display: inline">
            <label>Status: &nbsp;</label>
            <span class="label label-lg label-danger arrowed" ng-if="curQuery.status=='failed'">Failed</span>
            <span class="label label-lg label-success arrowed" ng-if="curQuery.status=='success'">Success</span>
            <span class="label label-lg label-info" ng-if="curQuery.status=='executing'">
                <i class="fa fa-cog fa-spin"></i> Executing...</span>
        </li>
        <li class="col-md-2 " style="display: inline">
            <label>Project: &nbsp;</label>
            <span>{{curQuery.project}}</span>
        </li>
        <li class="col-md-4 " style="display: inline">
            <label>Cubes: &nbsp;</label>
            <span>{{curQuery.result.cube | limitTo:30}}<span ng-if="curQuery.result.cube.length > 30">...  <i class="fa fa-list text-aqua" style="cursor: pointer;" popover-placement="left" popover="{{curQuery.result.cube | formatCubeName}}" popover-title="Cube Info Details"></i></span></span>
        </li>
        <li class="col-md-4 " style="display: inline">
        <label>Miss: &nbsp;</label>
        <span>{{getMissInfo(curQuery) | limitTo:30}}<span ng-if="getMissInfo(curQuery).length > 0">...  <i class="fa fa-list text-aqua" style="cursor: pointer;" popover-placement="left" popover="{{getMissInfo(curQuery)}}" popover-title="Miss Info Details"></i></span></span>
      </li>
    </ul>
</div>

<div ng-if="curQuery.status!='executing'" ng-class="{true: 'fullscreen-result', false: ''}[ui.fullScreen]"
     style="{{ui.fullScreen ? 'padding: 40px 40px 0px 40px':''}}">
    <label>Results <span style="vertical-align:middle;color: grey;font-size: 15px"
                         ng-if="curQuery.status=='success'">(<strong>{{curQuery.result.results.length}})</strong></span></label>
    <span  ng-if="curQuery.result.partial" class="text-warning">
       !Note: Current results are partial, please click 'Show All' button to get all results.
      <button class="btn btn-success btn-xs" ng-click="reset(curQuery);curQuery.acceptPartial=false;query(curQuery)">
        <i class="fa fa-download"></i>
        Show All
      </button>
      </span>
    <div class="pull-right" ng-if="curQuery.status=='success'">
        <button class="btn btn-default btn-xs"  ng-click="curQuery.graph.show=!curQuery.graph.show;buildGraphMetadata(curQuery);resetGraph(curQuery)">
            <span ng-if="!curQuery.graph.show"><i class="fa fa-bar-chart-o"></i> Visualization</span>
            <span ng-if="curQuery.graph.show"><i class="fa fa-list-ul"></i> Grid</span>
        </button>
        <a class="btn btn-default btn-xs" ng-if="(userService.hasRole('ROLE_ADMIN')&&isAdminExportAllowed)||(!userService.hasRole('ROLE_ADMIN')&&isNonAdminExportAllowed)" href="{{config.service.url}}query/format/csv?sql={{exportSql}}&project={{curQuery.project}}" target="_blank">
            <i class="fa fa-cloud-download"></i> Export</a>
        <a class="btn btn-default btn-xs" ng-click="refreshUi();">
            <i ng-class="{true: 'fa fa-compress', false: 'fa fa-expand'}[ui.fullScreen]"></i>
        </a>
    </div>

    <div ng-if="!curQuery.graph.show">
        <div class="query-results">
            <div ng-if="curQuery.status=='success'">
                <div class="gridStyle" ui-grid="curQuery.result.gridOptions" ui-grid-resize-columns  ui-grid-grouping
                     ng-if="curQuery.result.results.length > 0" id="data_grid"
                     style="{{ui.fullScreen?'height: 600px;width:auto':'height: 300px'}}"></div>
                <div ng-if="!curQuery.result.results || curQuery.result.results.length == 0"
                     style="padding-top: 10%">
                    <div no-result></div>
                </div>
            </div>

            <div ng-if="curQuery.status=='failed'">
                <div class="text-danger" style="display: block;white-space: normal">
                    {{curQuery.result.data.exception}}
                </div>
            </div>

            <div style="width: 100%;padding-top: 5px" ng-if="curQuery.result.hasMore">
                <div>
                    <div>
                        <button class="btn btn-default btn-sm" style="float: none;width: 100%"
                                ng-click="loadMore(curQuery)" ng-disabled="curQuery.result.loading">
                            <i class="icon-plus icon-white"></i> <span>{{ curQuery.result.loading ? 'Loading...' : 'More' }}</span>
                        </button>
                    </div>
                    <div class="clearfix" style="margin: 5px"></div>
                </div>
            </div>
        </div>
    </div>

    <div ng-if="curQuery.graph.show" class="row">
        <div class="col-xs-4">
            <div class="graph_content">
                <label>Graph Type</label>
                <div>
                    <select chosen style="width: 100%;"
                        ng-model="curQuery.graph.type"
                        ng-change="resetGraph(curQuery)"
                        ng-options="type as type.name for type in chartTypes"></select>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="graph_content">
                <label>Dimensions</label>
                <div>
                    <select chosen style="width: 100%;"
                            ng-model="curQuery.graph.state.dimensions" ng-change="refreshGraphData(curQuery)"
                            ng-options="dimension as dimension.column.label for dimension in curQuery.graph.meta.dimensions | filter: mappingToChartype">
                        <option value="">-- choose dimension --</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="graph_content">
                <label>Metrics</label>
                <div>
                  <select chosen style="width: 100%;"
                          data-placeholder="Select Metrics.."
                          ng-model="curQuery.graph.state.metrics"
                          ng-options="metrics as metrics.column.label for metrics in curQuery.graph.meta.metrics"
                          ng-change="refreshGraphData(curQuery)">
                        <option value="">-- choose metrics --</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div ng-if="curQuery.graph.show" class="row">
         <div class="col-xs-12">
            <div ng-if="chart">
                <nvd3 options="chart.options" data="chart.data"></nvd3>
            </div>
             <div ng-if="!chart" style="padding-top: 10%">
                <div no-result text="No Graph Generated."></div>
            </div>
        </div>
    </div>
</div>

<div id="query_content_results" style="padding-top: 10px"></div>
</div>
</div>

<script type="text/ng-template" id="saveQueryModal.html">
    <div class="modal-header">
        <h4>Save Query</h4>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" role="form" name="save_query_form">
            <div class="form-group">
                <label class="col-sm-2 control-label">Project</label>

                <div class="col-sm-10">
                    <p class="form-control-static">{{curQuery.project}}</p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Name</label>

                <div class="col-sm-10">
                    <input type="text" class="form-control" placeholder="Name.." ng-model="curQuery.name" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Description</label>

                <div class="col-sm-10">
                    <textarea class="form-control" placeholder="Description.."
                              ng-model="curQuery.description"></textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="cancel()">Close</button>
        <button class="btn btn-success" ng-click="saveQuery(curQuery)" ng-disabled="save_query_form.$invalid">Save
        </button>
    </div>
</script>