mirror of
https://github.com/getredash/redash.git
synced 2025-12-19 17:37:19 -05:00
c2e3637dce
This pull request implements UI for parameters and also allows to set the default value and type of a parameter. (Closes #583) Other changes in this pull request: - Loading/error state for dashboard widgets. - Refresh button on dashboard widgets (Closes #810). - Maintain sync between query/dashboard URL and current parameters, and preserve them when navigating. - Removed Pivot Table tab.
538 lines
16 KiB
JavaScript
538 lines
16 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
var directives = angular.module('redash.directives', []);
|
|
|
|
directives.directive('appHeader', ['$location', 'Dashboard', 'notifications', function ($location, Dashboard) {
|
|
return {
|
|
restrict: 'E',
|
|
replace: true,
|
|
templateUrl: '/views/app_header.html',
|
|
link: function ($scope) {
|
|
$scope.dashboards = [];
|
|
$scope.logoUrl = clientConfig.logoUrl;
|
|
$scope.reloadDashboards = function () {
|
|
Dashboard.query(function (dashboards) {
|
|
$scope.dashboards = _.sortBy(dashboards, "name");
|
|
$scope.allDashboards = _.groupBy($scope.dashboards, function (d) {
|
|
var parts = d.name.split(":");
|
|
if (parts.length == 1) {
|
|
return "Other";
|
|
}
|
|
return parts[0];
|
|
});
|
|
$scope.otherDashboards = $scope.allDashboards['Other'] || [];
|
|
$scope.groupedDashboards = _.omit($scope.allDashboards, 'Other');
|
|
});
|
|
};
|
|
|
|
$scope.searchQueries = function() {
|
|
$location.path('/queries/search').search({q: $scope.term});
|
|
};
|
|
|
|
$scope.reloadDashboards();
|
|
|
|
$scope.currentUser = currentUser;
|
|
}
|
|
}
|
|
}]);
|
|
|
|
directives.directive('alertUnsavedChanges', ['$window', function ($window) {
|
|
return {
|
|
restrict: 'E',
|
|
replace: true,
|
|
scope: {
|
|
'isDirty': '='
|
|
},
|
|
link: function ($scope) {
|
|
var
|
|
|
|
unloadMessage = "You will lose your changes if you leave",
|
|
confirmMessage = unloadMessage + "\n\nAre you sure you want to leave this page?",
|
|
|
|
// store original handler (if any)
|
|
_onbeforeunload = $window.onbeforeunload;
|
|
|
|
$window.onbeforeunload = function () {
|
|
return $scope.isDirty ? unloadMessage : null;
|
|
}
|
|
|
|
$scope.$on('$locationChangeStart', function (event, next, current) {
|
|
if (next.split("#")[0] == current.split("#")[0]) {
|
|
return;
|
|
}
|
|
|
|
if ($scope.isDirty && !confirm(confirmMessage)) {
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
$scope.$on('$destroy', function () {
|
|
$window.onbeforeunload = _onbeforeunload;
|
|
});
|
|
}
|
|
}
|
|
}]);
|
|
|
|
directives.directive('hashLink', ['$location', function($location) {
|
|
return {
|
|
restrict: 'A',
|
|
scope: {
|
|
'hash': '@'
|
|
},
|
|
link: function (scope, element) {
|
|
var basePath = $location.path().substring(1);
|
|
element[0].href = basePath + "#" + scope.hash;
|
|
}
|
|
};
|
|
}]);
|
|
|
|
directives.directive('rdTab', ['$location', function ($location) {
|
|
return {
|
|
restrict: 'E',
|
|
scope: {
|
|
'tabId': '@',
|
|
'name': '@',
|
|
'basePath': '=?'
|
|
},
|
|
transclude: true,
|
|
template: '<li class="rd-tab" ng-class="{active: tabId==selectedTab}"><a href="{{basePath}}#{{tabId}}">{{name}}<span ng-transclude></span></a></li>',
|
|
replace: true,
|
|
link: function (scope) {
|
|
scope.basePath = scope.basePath || $location.path().substring(1);
|
|
scope.$watch(function () {
|
|
return scope.$parent.selectedTab
|
|
}, function (tab) {
|
|
scope.selectedTab = tab;
|
|
});
|
|
}
|
|
}
|
|
}]);
|
|
|
|
directives.directive('emailSettingsWarning', function() {
|
|
return {
|
|
restrict: 'E',
|
|
template: '<p class="alert alert-danger" ng-if="showMailWarning">It looks like your mail server isn\'t configured. Make sure to configure it for the {{function}} to work.</p>',
|
|
link: function(scope, elements, attrs) {
|
|
scope.showMailWarning = clientConfig.mailSettingsMissing && currentUser.isAdmin;
|
|
scope.function = attrs.function;
|
|
}
|
|
}
|
|
});
|
|
|
|
directives.directive('rdTabs', ['$location', function ($location) {
|
|
return {
|
|
restrict: 'E',
|
|
scope: {
|
|
tabsCollection: '=',
|
|
selectedTab: '='
|
|
},
|
|
template: '<ul class="tab-nav bg-white"><li ng-class="{active: tab==selectedTab}" ng-repeat="tab in tabsCollection"><a href="{{basePath}}#{{tab.key}}">{{tab.name}}</a></li></ul>',
|
|
replace: true,
|
|
link: function ($scope, element, attrs) {
|
|
$scope.basePath = $location.path().substring(1);
|
|
$scope.selectTab = function (tabKey) {
|
|
$scope.selectedTab = _.find($scope.tabsCollection, function (tab) {
|
|
return tab.key == tabKey;
|
|
});
|
|
}
|
|
|
|
$scope.$watch(function () {
|
|
return $location.hash()
|
|
}, function (hash) {
|
|
if (hash) {
|
|
$scope.selectTab($location.hash());
|
|
} else {
|
|
$scope.selectTab($scope.tabsCollection[0].key);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}]);
|
|
|
|
// From: http://jsfiddle.net/joshdmiller/NDFHg/
|
|
directives.directive('editInPlace', function () {
|
|
return {
|
|
restrict: 'E',
|
|
scope: {
|
|
value: '=',
|
|
ignoreBlanks: '=',
|
|
editable: '=',
|
|
done: '=',
|
|
},
|
|
template: function (tElement, tAttrs) {
|
|
var elType = tAttrs.editor || 'input';
|
|
var placeholder = tAttrs.placeholder || 'Click to edit';
|
|
|
|
var viewMode = '';
|
|
|
|
if (tAttrs.markdown == "true") {
|
|
viewMode = '<span ng-click="editable && edit()" ng-bind-html="value|markdown" ng-class="{editable: editable}"></span>';
|
|
} else {
|
|
viewMode = '<span ng-click="editable && edit()" ng-bind="value" ng-class="{editable: editable}"></span>';
|
|
}
|
|
|
|
var placeholderSpan = '<span ng-click="editable && edit()" ng-show="editable && !value" ng-class="{editable: editable}">' + placeholder + '</span>';
|
|
var editor = '<{elType} ng-model="value" class="rd-form-control"></{elType}>'.replace('{elType}', elType);
|
|
|
|
return viewMode + placeholderSpan + editor;
|
|
},
|
|
link: function ($scope, element, attrs) {
|
|
// Let's get a reference to the input element, as we'll want to reference it.
|
|
var inputElement = angular.element(element.children()[2]);
|
|
|
|
// This directive should have a set class so we can style it.
|
|
element.addClass('edit-in-place');
|
|
|
|
// Initially, we're not editing.
|
|
$scope.editing = false;
|
|
|
|
// ng-click handler to activate edit-in-place
|
|
$scope.edit = function () {
|
|
$scope.oldValue = $scope.value;
|
|
|
|
$scope.editing = true;
|
|
|
|
// We control display through a class on the directive itself. See the CSS.
|
|
element.addClass('active');
|
|
|
|
// And we must focus the element.
|
|
// `angular.element()` provides a chainable array, like jQuery so to access a native DOM function,
|
|
// we have to reference the first element in the array.
|
|
inputElement[0].focus();
|
|
};
|
|
|
|
function save() {
|
|
if ($scope.editing) {
|
|
if ($scope.ignoreBlanks && _.isEmpty($scope.value)) {
|
|
$scope.value = $scope.oldValue;
|
|
}
|
|
$scope.editing = false;
|
|
element.removeClass('active');
|
|
|
|
if ($scope.value !== $scope.oldValue) {
|
|
$scope.done && $scope.done();
|
|
}
|
|
}
|
|
}
|
|
|
|
$(inputElement).keydown(function (e) {
|
|
// 'return' or 'enter' key pressed
|
|
// allow 'shift' to break lines
|
|
if (e.which === 13 && !e.shiftKey) {
|
|
save();
|
|
} else if (e.which === 27) {
|
|
$scope.value = $scope.oldValue;
|
|
$scope.$apply(function () {
|
|
$(inputElement[0]).blur();
|
|
});
|
|
}
|
|
}).blur(function () {
|
|
save();
|
|
});
|
|
}
|
|
};
|
|
});
|
|
|
|
// http://stackoverflow.com/a/17904092/1559840
|
|
directives.directive('jsonText', function () {
|
|
return {
|
|
restrict: 'A',
|
|
require: 'ngModel',
|
|
link: function (scope, element, attr, ngModel) {
|
|
function into(input) {
|
|
return JSON.parse(input);
|
|
}
|
|
|
|
function out(data) {
|
|
return JSON.stringify(data, undefined, 2);
|
|
}
|
|
|
|
ngModel.$parsers.push(into);
|
|
ngModel.$formatters.push(out);
|
|
|
|
scope.$watch(attr.ngModel, function (newValue) {
|
|
element[0].value = out(newValue);
|
|
}, true);
|
|
}
|
|
};
|
|
});
|
|
|
|
directives.directive('rdTimer', [function () {
|
|
return {
|
|
restrict: 'E',
|
|
scope: { timestamp: '=' },
|
|
template: '{{currentTime}}',
|
|
controller: ['$scope' , function ($scope) {
|
|
$scope.currentTime = "00:00:00";
|
|
|
|
// We're using setInterval directly instead of $timeout, to avoid using $apply, to
|
|
// prevent the digest loop being run every second.
|
|
var currentTimer = setInterval(function () {
|
|
$scope.currentTime = moment(moment() - moment($scope.timestamp)).utc().format("HH:mm:ss");
|
|
$scope.$digest();
|
|
}, 1000);
|
|
|
|
$scope.$on('$destroy', function () {
|
|
if (currentTimer) {
|
|
clearInterval(currentTimer);
|
|
currentTimer = null;
|
|
}
|
|
});
|
|
}]
|
|
};
|
|
}]);
|
|
|
|
directives.directive('rdTimeAgo', function () {
|
|
return {
|
|
restrict: 'E',
|
|
scope: {
|
|
value: '='
|
|
},
|
|
template: '<span>' +
|
|
'<span ng-show="value" am-time-ago="value"></span>' +
|
|
'<span ng-hide="value">-</span>' +
|
|
'</span>'
|
|
}
|
|
});
|
|
|
|
// Used instead of autofocus attribute, which doesn't work in Angular as there is no real page load.
|
|
directives.directive('autofocus',
|
|
['$timeout', function ($timeout) {
|
|
return {
|
|
link: function (scope, element) {
|
|
$timeout(function () {
|
|
element[0].focus();
|
|
});
|
|
}
|
|
};
|
|
}]
|
|
);
|
|
|
|
directives.directive('compareTo', function () {
|
|
return {
|
|
require: "ngModel",
|
|
scope: {
|
|
otherModelValue: "=compareTo"
|
|
},
|
|
link: function (scope, element, attributes, ngModel) {
|
|
var validate = function(value) {
|
|
ngModel.$setValidity("compareTo", value === scope.otherModelValue);
|
|
};
|
|
|
|
scope.$watch("otherModelValue", function() {
|
|
validate(ngModel.$modelValue);
|
|
});
|
|
|
|
ngModel.$parsers.push(function(value) {
|
|
validate(value);
|
|
return value;
|
|
});
|
|
}
|
|
};
|
|
});
|
|
|
|
directives.directive('inputErrors', function () {
|
|
return {
|
|
restrict: "E",
|
|
templateUrl: "/views/directives/input_errors.html",
|
|
replace: true,
|
|
scope: {
|
|
errors: "="
|
|
}
|
|
};
|
|
});
|
|
|
|
directives.directive('onDestroy', function () {
|
|
/* This directive can be used to invoke a callback when an element is destroyed,
|
|
A useful example is the following:
|
|
<div ng-if="includeText" on-destroy="form.text = null;">
|
|
<input type="text" ng-model="form.text">
|
|
</div>
|
|
*/
|
|
return {
|
|
restrict: "A",
|
|
scope: {
|
|
onDestroy: "&",
|
|
},
|
|
link: function(scope, elem, attrs) {
|
|
scope.$on('$destroy', function() {
|
|
scope.onDestroy();
|
|
});
|
|
}
|
|
};
|
|
});
|
|
|
|
directives.directive('colorBox', function () {
|
|
return {
|
|
restrict: "E",
|
|
scope: {color: "="},
|
|
template: "<span style='width: 12px; height: 12px; background-color: {{color}}; display: inline-block; margin-right: 5px;'></span>"
|
|
};
|
|
});
|
|
|
|
directives.directive('overlay', function() {
|
|
return {
|
|
restrict: "E",
|
|
transclude: true,
|
|
template: "" +
|
|
'<div>' +
|
|
'<div class="overlay"></div>' +
|
|
'<div style="width: 100%; position:absolute; top:50px; z-index:2000">' +
|
|
'<div class="well well-lg" style="width: 70%; margin: auto;" ng-transclude>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
}
|
|
});
|
|
|
|
directives.directive('dynamicForm', ['$http', 'growl', '$q', function ($http, growl, $q) {
|
|
return {
|
|
restrict: 'E',
|
|
replace: 'true',
|
|
transclude: true,
|
|
templateUrl: '/views/directives/dynamic_form.html',
|
|
scope: {
|
|
'target': '=',
|
|
'type': '@type'
|
|
},
|
|
link: function ($scope) {
|
|
var setType = function(types) {
|
|
if ($scope.target.type === undefined) {
|
|
$scope.target.type = types[0].type;
|
|
return types[0];
|
|
}
|
|
|
|
$scope.type = _.find(types, function (t) {
|
|
return t.type == $scope.target.type;
|
|
});
|
|
};
|
|
|
|
$scope.files = {};
|
|
|
|
$scope.$watchCollection('files', function() {
|
|
_.each($scope.files, function(v, k) {
|
|
if (v) {
|
|
$scope.target.options[k] = v.base64;
|
|
}
|
|
});
|
|
});
|
|
|
|
var typesPromise = $http.get('api/' + $scope.type + '/types');
|
|
|
|
$q.all([typesPromise, $scope.target.$promise]).then(function(responses) {
|
|
var types = responses[0].data;
|
|
setType(types);
|
|
|
|
$scope.types = types;
|
|
|
|
_.each(types, function (type) {
|
|
_.each(type.configuration_schema.properties, function (prop, name) {
|
|
if (name == 'password' || name == 'passwd') {
|
|
prop.type = 'password';
|
|
}
|
|
|
|
if (_.string.endsWith(name, "File")) {
|
|
prop.type = 'file';
|
|
}
|
|
|
|
if (prop.type == 'boolean') {
|
|
prop.type = 'checkbox';
|
|
}
|
|
|
|
prop.required = _.contains(type.configuration_schema.required, name);
|
|
});
|
|
});
|
|
});
|
|
|
|
$scope.$watch('target.type', function(current, prev) {
|
|
if (prev !== current) {
|
|
if (prev !== undefined) {
|
|
$scope.target.options = {};
|
|
}
|
|
setType($scope.types);
|
|
}
|
|
});
|
|
|
|
$scope.saveChanges = function() {
|
|
$scope.target.$save(function() {
|
|
growl.addSuccessMessage("Saved.");
|
|
}, function() {
|
|
growl.addErrorMessage("Failed saving.");
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}]);
|
|
|
|
directives.directive('pageHeader', function() {
|
|
return {
|
|
restrict: 'E',
|
|
transclude: true,
|
|
templateUrl: '/views/directives/page_header.html',
|
|
link: function(scope, elem, attrs) {
|
|
attrs.$observe('title', function(value){
|
|
scope.title = value;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
directives.directive('settingsScreen', ['$location', function($location) {
|
|
return {
|
|
restrict: 'E',
|
|
transclude: true,
|
|
templateUrl: '/views/directives/settings_screen.html',
|
|
link: function(scope, elem, attrs) {
|
|
scope.usersPage = _.string.startsWith($location.path(), '/users');
|
|
scope.groupsPage = _.string.startsWith($location.path(), '/groups');
|
|
scope.dsPage = _.string.startsWith($location.path(), '/data_sources');
|
|
scope.destinationsPage = _.string.startsWith($location.path(), '/destinations');
|
|
|
|
scope.showGroupsLink = currentUser.hasPermission('list_users');
|
|
scope.showUsersLink = currentUser.hasPermission('list_users');
|
|
scope.showDsLink = currentUser.hasPermission('admin');
|
|
scope.showDestinationsLink = currentUser.hasPermission('admin');
|
|
}
|
|
}
|
|
}]);
|
|
|
|
directives.directive('parameters', ['$location', '$modal', function($location, $modal) {
|
|
return {
|
|
restrict: 'E',
|
|
transclude: true,
|
|
scope: {
|
|
'parameters': '=',
|
|
'syncValues': '=?',
|
|
'editable': '=?'
|
|
},
|
|
templateUrl: '/views/directives/parameters.html',
|
|
link: function(scope, elem, attrs) {
|
|
// is this the correct location for this logic?
|
|
if (scope.syncValues !== false) {
|
|
scope.$watch('parameters', function() {
|
|
_.each(scope.parameters, function(param) {
|
|
if (param.value !== null || param.value !== '') {
|
|
$location.search('p_' + param.name, param.value);
|
|
}
|
|
})
|
|
}, true);
|
|
}
|
|
|
|
scope.showParameterSettings = function(param) {
|
|
$modal.open({
|
|
templateUrl: '/views/dialogs/parameter_settings.html',
|
|
controller: ['$scope', '$modalInstance', function($scope, $modalInstance) {
|
|
$scope.close = function() {
|
|
$modalInstance.close();
|
|
};
|
|
$scope.parameter = param;
|
|
}]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}]);
|
|
|
|
})();
|