ui metadata os global config

Change-Id: I4a892ba7737b93b910572f81250891124fb1217d
This commit is contained in:
chi zhang 2015-04-02 14:01:59 -07:00
parent 989b1f2ba5
commit 771d5df61c
10 changed files with 348 additions and 260 deletions

View File

@ -7,8 +7,8 @@ define(['angular'
'app/services/all'
'app/factory/all'
'app/directives/all'
# 'app/server/appDev'
'app/filters/all'
# 'app/server/appDev'
],
(ng)->
'use strict'
@ -20,8 +20,8 @@ define(['angular'
'compass.services'
'compass.factories'
'compass.directives'
# 'compassAppDev'
'compass.filters'
# 'compassAppDev'
]
.config ['$stateProvider','$urlRouterProvider', '$httpProvider', ($stateProvider, $urlRouterProvider, $httpProvider) ->
$stateProvider

View File

@ -74,10 +74,13 @@ define(['./baseController'], ()->
($scope, wizardService, $q) ->
wizardService.globalConfigInit($scope)
wizardService.buildOsGlobalConfigByMetaData($scope)
wizardService.watchingTriggeredStep($scope)
$scope.addValue = (key) ->
$scope.general[key].push("")
$scope.addValue = (category, key) ->
scope.os_global_config[category][key] = [] if !$scope.os_global_config[category][key]
$scope.os_global_config[category][key].push("")
# $scope.general[key].push("")
$scope.commit = (sendRequest) ->
wizardService.globalCommit($scope,sendRequest)

View File

@ -5,4 +5,5 @@ define([
'./enterDirective'
'./hostprogressbarDirective'
'./wizardDirective'
'./dataMatchDirective'
], ()-> )

View File

@ -0,0 +1,40 @@
define ['./baseDirective'], ->
'use strict';
angular.module('compass.directives')
.directive 'compassDataMatch', () ->
return {
require: 'ngModel'
scope:
compassDataMatch: "="
response: "="
currentData: "="
link: (scope, element, attrs, ngModel) ->
scope.$watch(()->
return scope.compassDataMatch
,(newValue, oldValue) ->
if scope.compassDataMatch is ngModel.$modelValue
scope.response =
error: false
message: ""
ngModel.$setValidity('match', true)
else
scope.response =
error: true
message: "Passwords do not match"
ngModel.$setValidity('match', false)
)
ngModel.$parsers.unshift (value) ->
if scope.compassDataMatch is value
scope.response =
error: false
message: ""
ngModel.$setValidity('match', true)
else
scope.response =
error: true
message: "Passwords do not match"
ngModel.$setValidity('match', false)
return value
}

View File

@ -18,6 +18,7 @@ define(['./baseFactory'], () ->
@console_credentials = {}
@network_mapping = {}
@ceph_config = {}
@os_gloable_config = {}
clean: ->
@cluster = {}
@ -63,6 +64,12 @@ define(['./baseFactory'], () ->
setPartition: (partition) ->
@partition = partition
setOsGlobalConfig: (os_config) ->
@os_gloable_config = os_config
getOsGlobalConfig: ->
return @os_gloable_config
setServerCredentials: (credentials) ->
@server_credentials = credentials

View File

@ -1,3 +1,3 @@
define([
'./healthReportFilter'
])
], ()->)

View File

@ -2,257 +2,102 @@
<div class="row">
<div class="col-xs-12">
<form id="generalForm" name="generalForm" class="form-horizontal" role="form">
<!-- Use metadata to generate the form. might be used later -->
<!--<div class="form-group" ng-repeat="(key, data) in os_global_config['general']">
<div ng-if="key!='_self'">
<label class="col-sm-4 control-label no-padding-right">{{data.display}}</label>
<div class="col-sm-8">
<input type="text" class="col-xs-10 col-sm-5" placeholder="{{data.display}}" name="{{key}}" popover-title="Help" popover="{{data.description}}" popover-trigger="focus" popover-placement="right">
<div ng-repeat="category in metaData | orderBy: 'order'">
<input ng-model="category.name" user-group-validation="{{category.name}}" target-function="{{category.userGroupValidation}}" response="category.validationResponse" index="{{$index}}" ng-model="category.name" enable="{{category.userGroupValidation||false}}" ng-hide="true">
<div class="form-group" ng-if="category.title !==''">
<div>
<label class="col-sm-4 control-label no-padding-right">
<h4>{{category.title}}:</h4>
</label>
</div>
</div>
<div class="form-group" data-ng-show="category.validationResponse[$index].error">
<div class="col-sm-3">
</div>
<div class="alert alert-danger col-sm-5" >
{{category.validationResponse[$index].message}}
</div>
</div>
<div ng-repeat="content in category.data | orderBy: 'order'">
<div class="form-group" ng-if="content.display_type !== 'multitext'">
<!-- ======================text and password========================== -->
<div ng-if="content.display_type == 'text' || content.display_type == 'password'">
<label class="col-sm-4 control-label no-padding-right">
{{content.display_name}}
<span class="text-danger" ng-if="content.is_required">*</span>
</label>
<div class="col-sm-8">
<input ng-model="os_global_config[category.name][content.name]" type="{{content.display_type}}" class="col-xs-10 col-sm-5" placeholder="{{content.placeholder}}" name="{{content.name}}"
ng-required="{{content.is_required}}"
enable="{{content.validation||false}}"
response="content.validationResponse"
ng-if="!content.datamatch">
<input ng-model="os_global_config[category.name][content.name]"
type="{{content.display_type}}"
class="col-xs-10 col-sm-5"
placeholder="{{content.placeholder}}"
name="{{content.name}}"
ng-required="{{content.is_required}}"
enable="{{content.validation||false}}"
response="content.validationResponse"
compass-data-match="os_global_config[category.name][content.datamatch]"
ng-if="content.datamatch">
<!-- <input ng-model="os_global_config[category.name][content.name]" type="{{content.display_type}}" class="col-xs-10 col-sm-5" placeholder="{{content.placeholder}}" name="{{content.name}}" ng-required="{{content.is_required}}" ng-if="!content.validation"> -->
<div class="margin-left-14 inline">
<span class="text-danger" data-ng-show="content.validationResponse.error">{{content.validationResponse.message}}</span>
</div>
</div>
</div>
<!-- ======================dropdown========================== -->
<div ng-if="content.display_type == 'dropdown'">
<label class="col-sm-4 control-label no-padding-right">
{{content.display_name}}
<span class="text-danger" ng-if="content.is_required">*</span>
</label>
<div class="col-sm-8">
<select ng-model="os_global_config[category.name][content.name]"
name="{{content.name}}" class="col-xs-10 col-sm-5"
ng-options="option.value as option.name for option in content.options">
</select>
</div>
</div>
</div>
</div>-->
<!--TODO: use json to generate inputs-->
<div class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">
Language
<span class="text-danger">*</span>
</label>
<div class="col-sm-8">
<select ng-model="general.language" name="language" class="col-xs-10 col-sm-5">
<option value="en" ng-selected="general.language == 'en'">English</option>
<option value="cn" ng-selected="general.language == 'cn'">Chinese</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">
Timezone
<span class="text-danger">*</span>
</label>
<div class="col-sm-8">
<select ng-model="general.timezone" name="timezone" class="col-xs-10 col-sm-5">
<option ng-repeat="tm in timezones" value="{{tm.value}}" ng-selected="tm.value == general.timezone">{{tm.timezone}}</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">
HTTP Proxy
<span class="text-danger opacity-zero">*</span>
</label>
<div class="col-sm-8">
<input ng-model="general.http_proxy" type="text" class="col-xs-10 col-sm-5" placeholder="HTTP Proxy" name="http_proxy">
</div>
</div>
</div>
<div class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">
HTTPS Proxy
<span class="text-danger opacity-zero">*</span>
</label>
<div class="col-sm-8">
<input ng-model="general.https_proxy" type="text" class="col-xs-10 col-sm-5" placeholder="HTTPS Proxy" name="https_proxy">
</div>
</div>
</div>
<div ng-repeat="no_proxy in general.no_proxy track by $index" class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">
<span ng-if="$index==0">
No Proxy
<span class="text-danger opacity-zero">*</span>
</span>
</label>
<div class="col-sm-8">
<input ng-model="general.no_proxy[$index]" type="text" class="col-xs-10 col-sm-5" placeholder="No Proxy" name="no_proxy">
<span class="col-xs-2 col-sm-3">
<!--Add Action-->
<span class="action" ng-click="addValue('no_proxy')">
<i class="fa fa-plus-circle bigger-140 blue"></i>
</span>
<!--Remove Action-->
<span ng-show="general.no_proxy.length > 1" class="action" ng-click="general.no_proxy.splice($index,1)">
<i class="fa fa-minus-circle bigger-140 blue"></i>
</span>
</span>
</div>
</div>
</div>
<div class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">
NTP Server
<span class="text-danger">*</span>
</label>
<div class="col-sm-8">
<input ng-model="general.ntp_server" type="text" class="col-xs-10 col-sm-5" placeholder="NTP Server" name="ntp_server" required>
</div>
</div>
</div>
<div ng-repeat="dns_server in general.dns_servers track by $index" class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">
<span ng-if="$index==0">
DNS Servers
<span class="text-danger">*</span>
</span>
</label>
<div class="col-sm-8">
<input ng-model="general.dns_servers[$index]" type="text" class="col-xs-10 col-sm-5" placeholder="DNS Server" name="dns_servers" required>
<span class="col-xs-2 col-sm-3">
<!--Add Action-->
<span class="action" ng-click="addValue('dns_servers')">
<i class="fa fa-plus-circle bigger-140 blue"></i>
</span>
<!--Remove Action-->
<span ng-show="general.dns_servers.length > 1" class="action" ng-click="general.dns_servers.splice($index,1)">
<i class="fa fa-minus-circle bigger-140 blue"></i>
</span>
</span>
</div>
</div>
</div>
<div ng-repeat="search_path in general.search_path track by $index" class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">
<span ng-if="$index==0">
Search Path
<span class="text-danger">*</span>
</span>
</label>
<div class="col-sm-8">
<input ng-model="general.search_path[$index]" type="text" class="col-xs-10 col-sm-5" placeholder="Search Path" name="search_path" required>
<span class="col-xs-2 col-sm-3">
<!--Add Action-->
<span class="action" ng-click="addValue('search_path')">
<i class="fa fa-plus-circle bigger-140 blue"></i>
</span>
<!--Remove Action-->
<span ng-show="general.search_path.length > 1" class="action" ng-click="general.search_path.splice($index,1)">
<i class="fa fa-minus-circle bigger-140 blue"></i>
</span>
</span>
</div>
</div>
</div>
<div class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">
Domain
<span class="text-danger">*</span>
</label>
<div class="col-sm-8">
<input ng-model="general.domain" type="text" class="col-xs-10 col-sm-5" placeholder="Domain" name="domain" required>
</div>
</div>
</div>
<div class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">
Default Gateway
<span class="text-danger">*</span>
</label>
<div class="col-sm-8">
<input ng-model="general.default_gateway" type="text" class="col-xs-10 col-sm-5" placeholder="Gateway" name="gateway" required>
</div>
</div>
</div>
<div class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">
Local Repository
<span class="text-danger opacity-zero">*</span>
</label>
<div class="col-sm-8">
<input ng-model="general.local_repo" type="text" class="col-xs-10 col-sm-5" placeholder="Local Repo" name="local_repo">
</div>
</div>
</div>
<div class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">
<h4> Server Credentials: </h4>
</label>
</div>
</div>
<div class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">
User Name
<span class="text-danger">*</span>
</label>
<div class="col-sm-8">
<input type="text" class="col-xs-10 col-sm-5" placeholder="Username" name="server-username" ng-model="server_credentials.username" required>
</div>
</div>
</div>
<div class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">
Password
<span class="text-danger">*</span>
</label>
</label>
<div class="col-sm-8">
<input type="password" class="col-xs-10 col-sm-5" placeholder="Password" name="server-password" ng-model="server_credentials.password" required>
</div>
</div>
</div>
<div class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">
Confirm Password
<span class="text-danger">*</span>
</label>
<div class="col-sm-8">
<input type="password" class="col-xs-10 col-sm-5" placeholder="Confirm Password" ng-model="confirmPassword" data-match="server_credentials.password" name="confirmPassword" required>
<div class="margin-left-14 inline">
<span class="text-danger" data-ng-show="generalForm.confirmPassword.$error.match">Passwords do not match</span>
<!-- ======================multiText========================== -->
<div ng-repeat="target in os_global_config[category.name][content.name] track by $index" class="form-group" ng-if="content.display_type == 'multitext'">
<div>
<label class="col-sm-4 control-label no-padding-right">
<span ng-if="$index==0">
{{content.display_name}}
<span class="text-danger" ng-if="content.is_required">*</span>
</span>
</label>
<div class="col-sm-8">
<input ng-model="os_global_config[category.name][content.name][$index]" type="text" class="col-xs-10 col-sm-5" placeholder="{{content.placeholder}}"
name="content.name"
ng-required="{{content.is_required}}"
user-individual-validation="{{content.validation}}"
enable="{{content.validation||false}}"
response="content.validationResponse"
index="{{$index}}">
<span class="col-xs-2 col-sm-3">
<span class="action" ng-click="addValue(category.name,content.name)">
<i class="fa fa-plus-circle bigger-140 blue"></i>
</span>
<span ng-show="os_global_config[category.name][content.name].length > 1" class="action" ng-click="os_global_config[category.name][content.name].splice($index,1)">
<i class="fa fa-minus-circle bigger-140 blue"></i>
</span>
<div class="margin-left-14 inline">
<span class="text-danger" data-ng-show="content.validationResponse[$index].error">{{content.validationResponse[$index].message}}</span>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</form>
<!--table class="table table-hover nowrap">
<thead>
<tr>
<th>Name</th>
<th>Subnet</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="sub in subnetworks">
<td>
<input type="text" ng-model="sub.name" placeholder="Name" />
</td>
<td>
<input type="text" ng-model="sub.subnet" placeholder="Subnet" />
</td>
<td>
<span class="action" ng-click="addSubnetwork()">
<i class="fa fa-plus-circle bigger-140 blue"></i>
</span>
<span ng-show="subnetworks.length > 1" class="action" ng-click="removeSubnetwork($index)">
<i class="fa fa-minus-circle bigger-140 blue"></i>
</span>
</td>
</tr>
</tbody>
</table!-->
</div>
</div>
</div>

View File

@ -1358,6 +1358,169 @@ define(['angular', 'angularMocks'], function() {
return [200, deleteHost, {}];
});
$httpBackend.whenGET(/\.*\/oses\/[0-9]\/ui_metadata/).respond(function(method, url, data){
console.log(method, url, data);
var metaData = {
"os_global_config": [
{
"title": "Server Credentials",
"data": [
{
"default_value": "root",
"display_name": "User name",
"name": "username",
"display_type": "text",
"is_required": "true",
"placeholder": "Username",
"order": 1
},
{
"display_name": "Confirm Password",
"name": "confirmPassword",
"display_type": "password",
"is_required": "true",
"placeholder": "Confirm Password",
"datamatch": "password",
"order": 3
},
{
"display_name": "Password",
"name": "password",
"display_type": "password",
"is_required": "true",
"placeholder": "Password",
"order": 2
}
],
"order": 2,
"name": "sever_credentials"
},
{
"title": "",
"data": [
{
"default_value": "ods.com",
"display_name": "Domain",
"name": "domain",
"display_type": "text",
"is_required": "true",
"placeholder": "Domain",
"order": 9
},
{
"display_name": "DNS Server",
"name": "dns_servers",
"display_type": "multitext",
"is_required": "true",
"placeholder": "DNS Server",
"order": 7
},
{
"default_value": "10.145.88.1",
"display_name": "Default Gateway",
"name": "default_gateway",
"display_type": "text",
"is_required": "true",
"placeholder": "Gateway",
"order": 10
},
{
"display_name": "HTTP Proxy",
"name": "http_proxy",
"display_type": "text",
"is_required": "false",
"placeholder": "HTTP Proxy",
"order": 3
},
{
"default_value": [
"ods.com"
],
"display_name": "Search Path",
"name": "search_path",
"display_type": "multitext",
"is_required": "false",
"placeholder": "Search Path",
"order": 8
},
{
"display_name": "Local Repository",
"name": "local_repo",
"display_type": "text",
"is_required": "false",
"placeholder": "Local Repo",
"order": 11
},
{
"default_value": "Los Angeles",
"display_name": "Timezone",
"name": "timezone",
"options": [
{
"name": "Los Angeles",
"value": "Los Angeles"
},
{
"name": "Chicago",
"value": "Chicago"
}
],
"display_type": "dropdown",
"is_required": "true",
"order": 2
},
{
"display_name": "NTP Server",
"name": "ntp_server",
"display_type": "text",
"is_required": "true",
"placeholder": "NTP Server",
"order": 6
},
{
"default_value": "en",
"display_name": "Language",
"name": "language",
"options": [
{
"name": "English",
"value": "en"
},
{
"name": "Chinese",
"value": "cn"
}
],
"display_type": "dropdown",
"is_required": "true",
"order": 1
},
{
"display_name": "No Proxy",
"name": "no_proxy",
"display_type": "multitext",
"is_required": "false",
"placeholder": "No Proxy",
"order": 5
},
{
"display_name": "HTTPS Proxy",
"name": "https_proxy",
"display_type": "text",
"is_required": "false",
"placeholder": "HTTPS Proxy",
"order": 4
}
],
"order": 1,
"name": "general"
}
]
}
return [200, metaData, {}]
});
$httpBackend.whenGET(/\.*\/monit.*clusters\/([0-9]|[1-9][0-9])\/overview/).respond(function(method, url, data) {
console.log(method, url, data);
var overviewData = [{

View File

@ -116,5 +116,8 @@ define(['./baseService'], () ->
startHealthCheck: (id, request) ->
return @$http.post(@settings.apiUrlBase + '/clusters/' + id + '/action',angular.toJson(request))
getOsGlobalConfigMetaData: (id) ->
return @$http.get(@settings.apiUrlBase + '/oses/'+ id + '/ui_metadata')
angular.module('compass.services').service('dataService', ['$http', 'settings', ($http,settings) -> new DS($http,settings)])
)

View File

@ -141,11 +141,15 @@ define(['./baseService'], ()->
$scope.pendingStep = 1
globalConfigInit: ($scope) ->
$scope.os_global_config = {}
$scope.cluster = @wizardFactory.getClusterInfo()
$scope.general = @wizardFactory.getGeneralConfig()
$scope.server_credentials = @wizardFactory.getServerCredentials()
@dataService.getTimezones().success (data) ->
$scope.timezones = data
if @wizardFactory.getOsGlobalConfig() != undefined
$scope.os_global_config = @wizardFactory.getOsGlobalConfig()
# $scope.cluster = @wizardFactory.getClusterInfo()
# $scope.general = @wizardFactory.getGeneralConfig()
# $scope.server_credentials = @wizardFactory.getServerCredentials()
# @dataService.getTimezones().success (data) ->
# $scope.timezones = data
networkInit: ($scope) ->
$scope.cluster = @wizardFactory.getClusterInfo()
@ -483,15 +487,18 @@ define(['./baseService'], ()->
"message": ""
})
$scope.$emit "loading", true
osGlobalConfig =
"os_config":
"general": $scope.general
"server_credentials":
"username": $scope.server_credentials.username
"password": $scope.server_credentials.password
# osGlobalConfig =
# "os_config":
# "general": $scope.general
# "server_credentials":
# "username": $scope.server_credentials.username
# "password": $scope.server_credentials.password
wizardFactory = @wizardFactory
submitData = {}
for mdata in $scope.metaData
submitData[mdata.name] = $scope.os_global_config[mdata.name]
if $scope.generalForm.$valid
@dataService.updateClusterConfig($scope.cluster.id, osGlobalConfig).success (configData) ->
@dataService.updateClusterConfig($scope.cluster.id, submitData).success (configData) ->
wizardFactory.setCommitState({
"name": "os_global"
"state": "success"
@ -883,6 +890,25 @@ define(['./baseService'], ()->
return @dataService.postSwitchAction(id, action)
putSwitches: (id, sw) ->
return @dataService.putSwitches(id, sw)
buildOsGlobalConfigByMetaData: ($scope) ->
@dataService.getOsGlobalConfigMetaData($scope.cluster.os_id).success (data) ->
$scope.metaData = data.os_global_config
for key, values of data
for category in values
if $scope.os_global_config[category.name]
$scope[key][category.name]= $scope.os_global_config[category.name]
else
$scope[key][category.name] = {}
for content in category.data
if content.default_value and !$scope.os_global_config[category.name][content.name]
$scope.os_global_config[category.name][content.name] = content.default_value
if content.display_type is "multitext"
if $scope.os_global_config[category.name][content.name]
$scope[key][category.name][content.name] = $scope.os_global_config[category.name][content.name]
else
$scope[key][category.name][content.name] = [""]
angular.module('compass.services').service 'wizardService',[