mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(plugins): refactored datasourceEditCtrl to typescript, #4298
This commit is contained in:
Torkel Ödegaard
@@ -148,12 +148,13 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
|
||||
}
|
||||
// ConfigCtrl
|
||||
case 'datasource-config-ctrl': {
|
||||
return System.import(scope.datasourceMeta.module).then(function(dsModule) {
|
||||
var dsMeta = scope.ctrl.datasourceMeta;
|
||||
return System.import(dsMeta.module).then(function(dsModule) {
|
||||
return {
|
||||
baseUrl: scope.datasourceMeta.baseUrl,
|
||||
name: 'ds-config-' + scope.datasourceMeta.id,
|
||||
baseUrl: dsMeta.baseUrl,
|
||||
name: 'ds-config-' + dsMeta.id,
|
||||
bindings: {meta: "=", current: "="},
|
||||
attrs: {meta: "datasourceMeta", current: "current"},
|
||||
attrs: {meta: "ctrl.datasourceMeta", current: "ctrl.current"},
|
||||
Component: dsModule.ConfigCtrl,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -57,6 +57,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
|
||||
.when('/datasources/edit/:id', {
|
||||
templateUrl: 'public/app/features/datasources/partials/edit.html',
|
||||
controller : 'DataSourceEditCtrl',
|
||||
controllerAs: 'ctrl',
|
||||
resolve: loadOrgBundle,
|
||||
})
|
||||
.when('/datasources/new', {
|
||||
|
||||
@@ -1,129 +0,0 @@
|
||||
define([
|
||||
'angular',
|
||||
'lodash',
|
||||
'app/core/config',
|
||||
],
|
||||
function (angular, _, config) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.controllers');
|
||||
var datasourceTypes = [];
|
||||
|
||||
module.directive('datasourceHttpSettings', function() {
|
||||
return {
|
||||
scope: {current: "="},
|
||||
templateUrl: 'public/app/features/datasources/partials/http_settings.html'
|
||||
};
|
||||
});
|
||||
|
||||
module.controller('DataSourceEditCtrl', function($scope, $q, backendSrv, $routeParams, $location, datasourceSrv) {
|
||||
|
||||
var defaults = {
|
||||
name: '',
|
||||
type: 'graphite',
|
||||
url: '',
|
||||
access: 'proxy',
|
||||
jsonData: {}
|
||||
};
|
||||
|
||||
$scope.init = function() {
|
||||
$scope.isNew = true;
|
||||
$scope.datasources = [];
|
||||
|
||||
$scope.loadDatasourceTypes().then(function() {
|
||||
if ($routeParams.id) {
|
||||
$scope.getDatasourceById($routeParams.id);
|
||||
} else {
|
||||
$scope.current = angular.copy(defaults);
|
||||
$scope.typeChanged();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$scope.loadDatasourceTypes = function() {
|
||||
if (datasourceTypes.length > 0) {
|
||||
$scope.types = datasourceTypes;
|
||||
return $q.when(null);
|
||||
}
|
||||
|
||||
return backendSrv.get('/api/org/plugins', {enabled: 1, type: 'datasource'}).then(function(plugins) {
|
||||
datasourceTypes = plugins;
|
||||
$scope.types = plugins;
|
||||
});
|
||||
};
|
||||
|
||||
$scope.getDatasourceById = function(id) {
|
||||
backendSrv.get('/api/datasources/' + id).then(function(ds) {
|
||||
$scope.isNew = false;
|
||||
$scope.current = ds;
|
||||
return $scope.typeChanged();
|
||||
});
|
||||
};
|
||||
|
||||
$scope.typeChanged = function() {
|
||||
return backendSrv.get('/api/org/plugins/' + $scope.current.type + '/settings').then(function(pluginInfo) {
|
||||
$scope.datasourceMeta = pluginInfo;
|
||||
});
|
||||
};
|
||||
|
||||
$scope.updateFrontendSettings = function() {
|
||||
return backendSrv.get('/api/frontend/settings').then(function(settings) {
|
||||
config.datasources = settings.datasources;
|
||||
config.defaultDatasource = settings.defaultDatasource;
|
||||
datasourceSrv.init();
|
||||
});
|
||||
};
|
||||
|
||||
$scope.testDatasource = function() {
|
||||
$scope.testing = { done: false };
|
||||
|
||||
datasourceSrv.get($scope.current.name).then(function(datasource) {
|
||||
if (!datasource.testDatasource) {
|
||||
$scope.testing.message = 'Data source does not support test connection feature.';
|
||||
$scope.testing.status = 'warning';
|
||||
$scope.testing.title = 'Unknown';
|
||||
return;
|
||||
}
|
||||
|
||||
return datasource.testDatasource().then(function(result) {
|
||||
$scope.testing.message = result.message;
|
||||
$scope.testing.status = result.status;
|
||||
$scope.testing.title = result.title;
|
||||
}, function(err) {
|
||||
if (err.statusText) {
|
||||
$scope.testing.message = err.statusText;
|
||||
$scope.testing.title = "HTTP Error";
|
||||
} else {
|
||||
$scope.testing.message = err.message;
|
||||
$scope.testing.title = "Unknown error";
|
||||
}
|
||||
});
|
||||
}).finally(function() {
|
||||
$scope.testing.done = true;
|
||||
});
|
||||
};
|
||||
|
||||
$scope.saveChanges = function(test) {
|
||||
if (!$scope.editForm.$valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ($scope.current.id) {
|
||||
return backendSrv.put('/api/datasources/' + $scope.current.id, $scope.current).then(function() {
|
||||
$scope.updateFrontendSettings().then(function() {
|
||||
if (test) {
|
||||
$scope.testDatasource();
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
return backendSrv.post('/api/datasources', $scope.current).then(function(result) {
|
||||
$scope.updateFrontendSettings();
|
||||
$location.path('datasources/edit/' + result.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$scope.init();
|
||||
});
|
||||
});
|
||||
140
public/app/features/datasources/edit_ctrl.ts
Normal file
140
public/app/features/datasources/edit_ctrl.ts
Normal file
@@ -0,0 +1,140 @@
|
||||
///<reference path="../../headers/common.d.ts" />
|
||||
|
||||
import angular from 'angular';
|
||||
import _ from 'lodash';
|
||||
import coreModule from 'app/core/core_module';
|
||||
import config from 'app/core/config';
|
||||
|
||||
var datasourceTypes = [];
|
||||
|
||||
var defaults = {
|
||||
name: '',
|
||||
type: 'graphite',
|
||||
url: '',
|
||||
access: 'proxy',
|
||||
jsonData: {}
|
||||
};
|
||||
|
||||
export class DataSourceEditCtrl {
|
||||
isNew: boolean;
|
||||
datasources: any[];
|
||||
current: any;
|
||||
types: any;
|
||||
testing: any;
|
||||
datasourceMeta: any;
|
||||
|
||||
/** @ngInject */
|
||||
constructor(
|
||||
private $scope,
|
||||
private $q,
|
||||
private backendSrv,
|
||||
private $routeParams,
|
||||
private $location,
|
||||
private datasourceSrv) {
|
||||
|
||||
this.isNew = true;
|
||||
this.datasources = [];
|
||||
|
||||
this.loadDatasourceTypes().then(() => {
|
||||
if (this.$routeParams.id) {
|
||||
this.getDatasourceById(this.$routeParams.id);
|
||||
} else {
|
||||
this.current = angular.copy(defaults);
|
||||
this.typeChanged();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loadDatasourceTypes() {
|
||||
if (datasourceTypes.length > 0) {
|
||||
this.types = datasourceTypes;
|
||||
return this.$q.when(null);
|
||||
}
|
||||
|
||||
return this.backendSrv.get('/api/org/plugins', {enabled: 1, type: 'datasource'}).then(plugins => {
|
||||
datasourceTypes = plugins;
|
||||
this.types = plugins;
|
||||
});
|
||||
}
|
||||
|
||||
getDatasourceById(id) {
|
||||
this.backendSrv.get('/api/datasources/' + id).then(ds => {
|
||||
this.isNew = false;
|
||||
this.current = ds;
|
||||
return this.typeChanged();
|
||||
});
|
||||
}
|
||||
|
||||
typeChanged() {
|
||||
return this.backendSrv.get('/api/org/plugins/' + this.current.type + '/settings').then(pluginInfo => {
|
||||
this.datasourceMeta = pluginInfo;
|
||||
});
|
||||
}
|
||||
|
||||
updateFrontendSettings() {
|
||||
return this.backendSrv.get('/api/frontend/settings').then(settings => {
|
||||
config.datasources = settings.datasources;
|
||||
config.defaultDatasource = settings.defaultDatasource;
|
||||
this.datasourceSrv.init();
|
||||
});
|
||||
}
|
||||
|
||||
testDatasource() {
|
||||
this.testing = { done: false };
|
||||
|
||||
this.datasourceSrv.get(this.current.name).then(datasource => {
|
||||
if (!datasource.testDatasource) {
|
||||
this.testing.message = 'Data source does not support test connection feature.';
|
||||
this.testing.status = 'warning';
|
||||
this.testing.title = 'Unknown';
|
||||
return;
|
||||
}
|
||||
|
||||
return datasource.testDatasource().then(result => {
|
||||
this.testing.message = result.message;
|
||||
this.testing.status = result.status;
|
||||
this.testing.title = result.title;
|
||||
}).catch(err => {
|
||||
if (err.statusText) {
|
||||
this.testing.message = err.statusText;
|
||||
this.testing.title = "HTTP Error";
|
||||
} else {
|
||||
this.testing.message = err.message;
|
||||
this.testing.title = "Unknown error";
|
||||
}
|
||||
});
|
||||
}).finally(() => {
|
||||
this.testing.done = true;
|
||||
});
|
||||
}
|
||||
|
||||
saveChanges(test) {
|
||||
if (!this.$scope.editForm.$valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.current.id) {
|
||||
return this.backendSrv.put('/api/datasources/' + this.current.id, this.current).then(() => {
|
||||
this.updateFrontendSettings().then(() => {
|
||||
if (test) {
|
||||
this.testDatasource();
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
return this.backendSrv.post('/api/datasources', this.current).then(result => {
|
||||
this.updateFrontendSettings();
|
||||
this.$location.path('datasources/edit/' + result.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
coreModule.controller('DataSourceEditCtrl', DataSourceEditCtrl);
|
||||
|
||||
coreModule.directive('datasourceHttpSettings', function() {
|
||||
return {
|
||||
scope: {current: "="},
|
||||
templateUrl: 'public/app/features/datasources/partials/http_settings.html'
|
||||
};
|
||||
});
|
||||
@@ -1,43 +1,58 @@
|
||||
<navbar
|
||||
title="Data Sources"
|
||||
title-url="datasources"
|
||||
icon="icon-gf icon-gf-datasources">
|
||||
<navbar title="Data Sources" title-url="datasources" icon="icon-gf icon-gf-datasources">
|
||||
</navbar>
|
||||
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
|
||||
<div class="page-header">
|
||||
<h1 ng-show="isNew">Add data source</h1>
|
||||
<h1 ng-show="!isNew">Edit data source</h1>
|
||||
|
||||
<div class="page-header-tabs">
|
||||
|
||||
<ul class="gf-tabs">
|
||||
<li class="gf-tabs-item">
|
||||
<a class="gf-tabs-link" ng-click="ctrl.editor.index = 0" ng-class="{active: ctrl.editor.index === 0}">
|
||||
Config
|
||||
</a>
|
||||
</li>
|
||||
<li class="gf-tabs-item" ng-show="ctrl.hasDashboards" ng-cloak>
|
||||
<a class="gf-tabs-link" ng-click="ctrl.editor.index = 1" ng-class="{active: ctrl.editor.index === 1}">
|
||||
Dashboards
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<form name="editForm">
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-7">Name</span>
|
||||
<input class="gf-form-input max-width-21" type="text" ng-model="current.name" placeholder="My data source name" required>
|
||||
<input class="gf-form-input max-width-21" type="text" ng-model="ctrl.current.name" placeholder="My data source name" required>
|
||||
<info-popover offset="0px -95px">
|
||||
The name is used when you select the data source in panels.
|
||||
The <code>Default</code> data source is preselected in new
|
||||
panels.
|
||||
</info-popover>
|
||||
|
||||
<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
|
||||
<editor-checkbox text="Default" model="ctrl.current.isDefault"></editor-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-7">Type</span>
|
||||
<div class="gf-form-select-wrapper">
|
||||
<select class="gf-form-input gf-size-auto" ng-model="current.type" ng-options="v.id as v.name for v in types" ng-change="typeChanged()"></select>
|
||||
<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<rebuild-on-change property="datasourceMeta.id">
|
||||
<rebuild-on-change property="ctrl.datasourceMeta.id">
|
||||
<plugin-component type="datasource-config-ctrl">
|
||||
</plugin-component>
|
||||
|
||||
<dashboard-import-list plugin="datasourceMeta"></dashboard-import-list>
|
||||
<dashboard-import-list plugin="ctrl.datasourceMeta"></dashboard-import-list>
|
||||
</rebuild-on-change>
|
||||
|
||||
<div ng-if="testing" style="margin-top: 25px">
|
||||
@@ -50,9 +65,9 @@ icon="icon-gf icon-gf-datasources">
|
||||
</div>
|
||||
|
||||
<div class="gf-form-button-row">
|
||||
<button type="submit" class="btn btn-success" ng-show="isNew" ng-click="saveChanges()">Add</button>
|
||||
<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
|
||||
<button type="submit" class="btn btn-secondary" ng-show="!isNew" ng-click="saveChanges(true)">
|
||||
<button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
|
||||
<button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save</button>
|
||||
<button type="submit" class="btn btn-secondary" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges(true)">
|
||||
Test Connection
|
||||
</button>
|
||||
<a class="btn btn-link" href="datasources">Cancel</a>
|
||||
|
||||
Reference in New Issue
Block a user