valitydev/redash
14
0
Fork 0
mirror of https://github.com/valitydev/redash.git synced 2024-11-07 09:28:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[#138] query directives

Browse Source
This commit is contained in:
Amir Nissim 2014-03-19 10:11:31 +02:00
parent af9318fbd1
commit 602d935559
6 changed files with 106 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
rd_ui/app/index.html
View File

@ -127,7 +127,8 @@
<script src="/scripts/visualizations/cohort.js"></script>
<script src="/scripts/visualizations/table.js"></script>
<script src="/scripts/visualizations/pivot.js"></script>
<script src="/scripts/directives.js"></script>
<script src="/scripts/directives/directives.js"></script>
<script src="/scripts/directives/query_directives.js"></script>
<script src="/scripts/filters.js"></script>
<!-- endbuild -->

45
rd_ui/app/scripts/controllers/query_view.js
View File

@ -23,16 +23,7 @@
$scope.queryExecuting = lock;
};
$scope.formatQuery = function () {
$scope.editorOptions.readOnly = 'nocursor';
$http.post('/api/queries/format', {
'query': $scope.query.query
}).success(function (response) {
$scope.query.query = response;
$scope.editorOptions.readOnly = false;
})
}
$scope.duplicateQuery = function () {
var oldId = $scope.query.id;
@ -53,42 +44,6 @@
$scope.queryResult.cancelExecution();
};
$scope.editorOptions = {
mode: 'text/x-sql',
lineWrapping: true,
lineNumbers: true,
readOnly: false,
matchBrackets: true,
autoCloseBrackets: true
};
$scope.refreshOptions = [
{
value: -1,
name: 'No Refresh'
},
{
value: 60,
name: 'Every minute'
},
]
_.each(_.range(1, 13), function (i) {
$scope.refreshOptions.push({
value: i * 3600,
name: 'Every ' + i + 'h'
});
})
$scope.refreshOptions.push({
value: 24 * 3600,
name: 'Every 24h'
});
$scope.refreshOptions.push({
value: 7 * 24 * 3600,
name: 'Once a week'
});
$scope.$watch('queryResult && queryResult.getError()', function (newError, oldError) {
if (newError == undefined) {
return;

0
rd_ui/app/scripts/directives.js → rd_ui/app/scripts/directives/directives.js
View File

102
rd_ui/app/scripts/directives/query_directives.js Normal file
View File

@ -0,0 +1,102 @@
(function() {
'use strict'
function queryEditor() {
return {
restrict: 'E',
scope: {
'query': '=',
'lock': '='
},
template: '<textarea\
ui-codemirror="editorOptions"\
ng-model="query.query">',
link: function($scope) {
$scope.editorOptions = {
mode: 'text/x-sql',
lineWrapping: true,
lineNumbers: true,
readOnly: false,
matchBrackets: true,
autoCloseBrackets: true
};
$scope.$watch('lock', function(locked) {
$scope.editorOptions.readOnly = locked ? 'nocursor' : false;
});
}
}
}
function queryFormatter($http) {
return {
restrict: 'E',
scope: {
'query': '=',
'lock': '='
},
template: '<button type="button" class="btn btn-default btn-xs"\
ng-click="formatQuery()">\
<span class="glyphicon glyphicon-indent-left"></span>\
Format SQL\
</button>',
link: function($scope) {
$scope.formatQuery = function formatQuery() {
$scope.lock = true;
$http.post('/api/queries/format', {
'query': $scope.query.query
}).success(function (response) {
$scope.query.query = response;
}).finally(function () {
$scope.lock = false;
});
};
}
}
}
function queryRefreshSelect() {
return {
restrict: 'E',
template: '<select\
ng-disabled="!isOwner"\
ng-model="query.ttl"\
ng-change="saveQuery()"\
ng-options="c.value as c.name for c in refreshOptions">\
</select>',
link: function($scope) {
$scope.refreshOptions = [
{
value: -1,
name: 'No Refresh'
},
{
value: 60,
name: 'Every minute'
},
]
_.each(_.range(1, 13), function (i) {
$scope.refreshOptions.push({
value: i * 3600,
name: 'Every ' + i + 'h'
});
})
$scope.refreshOptions.push({
value: 24 * 3600,
name: 'Every 24h'
});
$scope.refreshOptions.push({
value: 7 * 24 * 3600,
name: 'Once a week'
});
}
}
}
angular.module('redash.directives')
.directive('queryRefreshSelect', queryRefreshSelect)
.directive('queryEditor', queryEditor)
.directive('queryFormatter', ['$http', queryFormatter]);
})();

4
rd_ui/app/views/query.html
View File

@ -60,7 +60,7 @@
<button type="button" class="btn btn-primary btn-xs" ng-disabled="queryExecuting" ng-click="executeQuery()">
<span class="glyphicon glyphicon-play"></span> Execute
</button>
<query-formatter query="query" lock="queryExecuting" editor-options="editorOptions"></query-formatter>
<query-formatter query="query" lock="queryExecuting"></query-formatter>
<span class="pull-right">
<button class="btn btn-xs btn-default rd-hidden-xs" ng-show="canFork" ng-click="duplicateQuery()">
<span class="glyphicon glyphicon-share-alt"></span> Fork
@ -75,7 +75,7 @@
<!-- code editor -->
<p ng-show="isSourceVisible">
<query-editor query="query"></query-editor>
<query-editor query="query" lock="queryExecuting"></query-editor>
</p>
<hr ng-show="isSourceVisible">
</div>

183
rd_ui/app/views/queryview.html
View File

@ -1,183 +0,0 @@
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-10">
<h2>
<edit-in-place editable="isOwner" done="saveQuery" ignore-blanks='true' value="query.name"></edit-in-place>
</h2>
<p>
<em>
<edit-in-place editable="isOwner" done="saveQuery" editor="textarea" placeholder="No description" ignore-blanks='false' value="query.description"></edit-in-place>
</em>
</p>
</div>
<div class="col-lg-2" ng-hide="isNewQuery || !currentUser.hasPermission('view_source')">
<a ng-href="{{sourceHref}}" ng-click="toggleSource()" class="hidden-xs pull-right">
<span ng-show="isSourceVisible">Hide Source</span>
<span ng-show="!isSourceVisible">View Source</span>
</a>
</div>
</div>
<div class="visible-xs">
<p>
<span class="text-muted">Last update </span>
<strong>
<rd-time-ago value="queryResult.query_result.retrieved_at"></rd-time-ago>
</strong>
&nbsp;
<span class="text-muted">Created By </span>
<strong ng-hide="isOwner">{{query.user.name}}</strong>
<strong ng-show="isOwner">You</strong>
&nbsp;
<span class="text-muted">Runtime </span>
<strong ng-show="!queryExecuting">{{queryResult.getRuntime() | durationHumanize}}</strong>
<span ng-show="queryExecuting">Running&hellip;</span>
&nbsp;
<span class="text-muted">Rows </span>
<strong>{{queryResult.getData().length}}</strong>
</p>
<p>
<a ng-href="{{sourceHref}}" ng-click="toggleSource()">
<span ng-show="isSourceVisible">Hide Source</span>
<span ng-show="!isSourceVisible">View Source</span>
</a>
</p>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-12">
<div ng-show="isSourceVisible">
<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>
<span class="pull-right">
<button class="btn btn-xs btn-default rd-hidden-xs" ng-show="canFork" ng-click="duplicateQuery()">
<span class="glyphicon glyphicon-share-alt"></span> Fork
</button>
<button class="btn btn-success btn-xs" ng-show="canEdit" ng-click="saveQuery()">
<span class="glyphicon glyphicon-floppy-disk"> </span> Save<span ng-show="dirty">&#42;</span>
</button>
</span>
</p>
</div>
<!-- code editor -->
<p ng-show="isSourceVisible">
<textarea ui-codemirror="editorOptions" ui-refresh="isSourceVisible" ng-model="query.query"></textarea>
</p>
<hr ng-show="isSourceVisible">
</div>
</div>
<div class="row">
<div class="col-lg-3 rd-hidden-xs">
<p>
<span class="glyphicon glyphicon-time"></span>
<span class="text-muted">Last update </span>
<strong>
<rd-time-ago value="queryResult.query_result.retrieved_at"></rd-time-ago>
</strong>
</p>
<p>
<span class="glyphicon glyphicon-user"></span>
<span class="text-muted">Created By </span>
<strong ng-hide="isOwner">{{query.user.name}}</strong>
<strong ng-show="isOwner">You</strong>
</p>
<p>
<span class="glyphicon glyphicon-play"></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>
<p>
<span class="glyphicon glyphicon-refresh"></span>
<span class="text-muted">Refresh Interval</span>
<select ng-disabled="!isOwner" ng-model="query.ttl" ng-change="saveQuery()" ng-options="c.value as c.name for c in refreshOptions"></select>
</p>
<p>
<span class="glyphicon glyphicon-hdd"></span>
<span class="text-muted">Data Source</span>
<select ng-disabled="!isOwner" ng-model="query.data_source_id" ng-change="updateDataSource()" ng-options="ds.id as ds.name for ds in dataSources"></select>
</p>
<hr>
<p>
<a class="btn btn-primary btn-sm" ng-disabled="queryExecuting || !queryResult.getData()" ng-href="{{dataUri}}" download="{{dataFilename}}" target="_self">
<span class="glyphicon glyphicon-cloud-download"></span>
<span class="rd-hidden-xs">Download Dataset</span>
</a>
</p>
</div>
<div class="col-lg-9">
<!-- alerts -->
<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>
<!-- tabs and data -->
<div ng-show="queryResult.getStatus() == 'done'">
<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"></rd-tab>
</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>
</div>
<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="canEdit"></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="canEdit"></edit-visulatization-form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>