Skip to content

N
nexpie-grafana-theme
Commit 1951f385 by Torkel Ödegaard
Options

feat(plugins): refactored datasourceEditCtrl to typescript, #4298

parent d8b11adf
Showing with 174 additions and 146 deletions
public/app/core/directives/plugin_component.ts
......@@ -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,
};
});
......
public/app/core/routes/routes.ts
......@@ -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', {
......
public/app/features/datasources/edit_ctrl.js deleted 100644 → 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();
});
});
public/app/features/datasources/edit_ctrl.ts 0 → 100644
///<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'
};
});
public/app/features/datasources/partials/edit.html
<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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment