Update partition add/remove. Add d3 pie chart for partition
Change-Id: Ie14ceb4a3a66417d2631bc12e15d1e1867bdae11
This commit is contained in:
jiahuay
parent
1ff5fb0d57
commit
f7c96f7682
@ -65,4 +65,7 @@ select {
|
||||
}
|
||||
.max-width-200 {
|
||||
max-width: 200px;
|
||||
}
|
||||
.partition-chart {
|
||||
padding-top: 30px;
|
||||
}
|
||||
@ -22,6 +22,7 @@
|
||||
<script type="text/javascript" src="vendor/angular-ui-router/angular-ui-router.min.js"></script>
|
||||
<script type="text/javascript" src="vendor/angular-bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
|
||||
<script type="text/javascript" src="vendor/ng-table/ng-table.min.js"></script>
|
||||
<script type="text/javascript" src="vendor/d3/d3.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="src/app/app.js"></script>
|
||||
<script type="text/javascript" src="src/app/appDev.js"></script>
|
||||
@ -31,7 +32,7 @@
|
||||
<script type="text/javascript" src="src/app/cluster/cluster.js"></script>
|
||||
<script type="text/javascript" src="src/app/cluster/clusterlist.js"></script>
|
||||
<script type="text/javascript" src="src/app/server/server.js"></script>
|
||||
<script type="text/javascript" src="src/common/serialize.js"></script>
|
||||
<script type="text/javascript" src="src/common/charts.js"></script>
|
||||
</head>
|
||||
|
||||
<body ng-app="compass">
|
||||
|
||||
@ -116,6 +116,7 @@ angular.module('compass.services', [])
|
||||
wizard.routingtable = [];
|
||||
wizard.generalConfig = {};
|
||||
wizard.interfaces = {};
|
||||
wizard.partition = {};
|
||||
};
|
||||
|
||||
wizard.reset();
|
||||
@ -202,6 +203,14 @@ angular.module('compass.services', [])
|
||||
return wizard.interfaces;
|
||||
};
|
||||
|
||||
wizard.setPartition = function(partition) {
|
||||
wizard.partition = partition;
|
||||
};
|
||||
|
||||
wizard.getPartition = function() {
|
||||
return wizard.partition;
|
||||
}
|
||||
|
||||
return wizard;
|
||||
}
|
||||
]);
|
||||
|
||||
@ -11,32 +11,58 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-if="partition.length > 0" ng-repeat="pa in partition track by $index">
|
||||
<tr>
|
||||
<td>
|
||||
<input ng-model="pa.mount_point" type="text" placeholder="Mount Point" class="input-medium">
|
||||
<input ng-model="newPartition.mount_point" type="text" placeholder="Mount Point" class="input-medium">
|
||||
</td>
|
||||
<td>
|
||||
<input ng-model="pa.size_percentage" type="text" placeholder="Size Percentage" class="input-medium">
|
||||
<input ng-model="newPartition.size_percentage" type="text" placeholder="Size Percentage" class="input-medium">
|
||||
</td>
|
||||
<td>
|
||||
<input ng-model="pa.max_size" type="text" placeholder="Max Size" class="input-medium">
|
||||
<input ng-model="newPartition.max_size" type="text" placeholder="Max Size" class="input-medium">
|
||||
</td>
|
||||
<td>
|
||||
<!--Add Action-->
|
||||
<span class="action" ng-click="addPartition()">
|
||||
<i class="fa fa-plus-circle bigger-140 blue"></i>
|
||||
</span>
|
||||
<!--Remove Action-->
|
||||
<span ng-show="partition.length > 1" class="action" ng-click="partition.splice($index,1)">
|
||||
<i class="fa fa-minus-circle bigger-140 blue"></i>
|
||||
</span>
|
||||
<button ng-click="addPartition()" class="btn btn-sm btn-info" type="button">
|
||||
Add
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-repeat="(key, data) in partition">
|
||||
<td>
|
||||
<span>{{key}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span ng-hide="editPartitionMode">{{data.size_percentage}}</span>
|
||||
<input ng-show="editPartitionMode" ng-model="data.size_percentage" type="text" placeholder="Size Percentage" class="input-medium">
|
||||
</td>
|
||||
<td>
|
||||
<span ng-hide="editPartitionMode">{{data.max_size}}</span>
|
||||
<input ng-show="editPartitionMode" ng-model="data.max_size" type="text" placeholder="Max Size" class="input-medium">
|
||||
</td>
|
||||
<td>
|
||||
<!--edit button-->
|
||||
<button ng-hide="editPartitionMode" ng-click="editPartitionMode = true;" class="btn btn-xs btn-success">
|
||||
<i class="ace-icon fa fa-pencil bigger-120"></i>
|
||||
</button>
|
||||
<!--delete button-->
|
||||
<button ng-hide="editPartitionMode" ng-click="editPartitionMode = true; deletePartition(key)" class="btn btn-xs btn-danger">
|
||||
<i class="ace-icon fa fa-trash-o bigger-120"></i>
|
||||
</button>
|
||||
<!--save button-->
|
||||
<button ng-show="editPartitionMode" ng-click="editPartitionMode = false;" class="btn btn-xs btn-primary">
|
||||
<i class="ace-icon fa fa-check bigger-120"></i>
|
||||
</button>
|
||||
<!--cancel button-->
|
||||
<button ng-show="editPartitionMode" ng-click="editPartitionMode = false; cancel()" class="btn btn-xs btn-default">
|
||||
<i class="ace-icon fa fa-times bigger-120"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<!--TODO: Partition pie chart-->
|
||||
<div class="col-lg-4 text-center partition-chart">
|
||||
<piechart piedata="partitionarray"></piechart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -54,8 +54,7 @@
|
||||
<tbody>
|
||||
<tr ng-repeat="(service, credential) in service_credentials" inlineEdit>
|
||||
<td>
|
||||
<span ng-hide="editServiceMode">{{service}}</span>
|
||||
<input ng-show="editServiceMode" ng-model="service" placeholder="Service" type="text" ng-required />
|
||||
<span>{{service}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span ng-hide="editServiceMode">{{credential.username}}</span>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
angular.module('compass.wizard', [
|
||||
'ui.router',
|
||||
'ui.bootstrap',
|
||||
'ngTable'
|
||||
'ngTable',
|
||||
'compass.charts'
|
||||
])
|
||||
|
||||
.config(function config($stateProvider) {
|
||||
@ -79,12 +80,6 @@ angular.module('compass.wizard', [
|
||||
break;
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
/*
|
||||
if ($scope.steps[$scope.currentStep - 1].title == "Partition") {
|
||||
}
|
||||
*/
|
||||
};
|
||||
|
||||
$scope.next = function() {
|
||||
@ -431,7 +426,7 @@ angular.module('compass.wizard', [
|
||||
});
|
||||
|
||||
var interfaceCount = Object.keys($scope.interfaces).length;
|
||||
if(interfaceCount == 0) {
|
||||
if (interfaceCount == 0) {
|
||||
alert("Please add interface");
|
||||
} else {
|
||||
// add hosts
|
||||
@ -496,42 +491,35 @@ angular.module('compass.wizard', [
|
||||
|
||||
.controller('partitionCtrl', function($scope, wizardFactory, dataService) {
|
||||
var cluster = wizardFactory.getClusterInfo();
|
||||
$scope.partition = [];
|
||||
$scope.addPartition = function() {
|
||||
$scope.partition.push({});
|
||||
console.log($scope.partition);
|
||||
};
|
||||
$scope.$watch('partition', function() {
|
||||
if ($scope.partition.length == 0) {
|
||||
$scope.partition.push({});
|
||||
}
|
||||
}, true);
|
||||
$scope.partition = wizardFactory.getPartition();
|
||||
|
||||
var partitionData = {};
|
||||
/*
|
||||
angular.forEach($scope.partition, function(pa) {
|
||||
console.log(pa);
|
||||
if (partitionData[pa.mount_point] !== undefined) {
|
||||
if (!partitionData[pa.mount_point].push) {
|
||||
partitionData[pa.mount_point] = [partitionData[pa.mount_point]];
|
||||
}
|
||||
partitionData[pa.mount_point].push({
|
||||
"size_percentage": pa.size_percentage,
|
||||
"max_size": pa.max_size
|
||||
} || {});
|
||||
} else {
|
||||
partitionData[pa.mount_point] = {
|
||||
"size_percentage": pa.size_percentage,
|
||||
"max_size": pa.max_size
|
||||
} || {};
|
||||
}
|
||||
});
|
||||
*/
|
||||
$scope.addPartition = function() {
|
||||
var mount_point = $scope.newPartition.mount_point;
|
||||
$scope.partition[mount_point] = {};
|
||||
$scope.partition[mount_point].size_percentage = $scope.newPartition.size_percentage;
|
||||
$scope.partition[mount_point].max_size = $scope.newPartition.max_size;
|
||||
$scope.newPartition = {};
|
||||
};
|
||||
|
||||
$scope.deletePartition = function(mount_point) {
|
||||
delete $scope.partition[mount_point];
|
||||
};
|
||||
|
||||
$scope.$watch('partition', function() {
|
||||
console.log("changed")
|
||||
$scope.partitionarray = [];
|
||||
angular.forEach($scope.partition, function(value, key) {
|
||||
$scope.partitionarray.push({
|
||||
"name": key,
|
||||
"number": value.size_percentage
|
||||
});
|
||||
});
|
||||
}, true);
|
||||
|
||||
$scope.$watch(function() {
|
||||
return wizardFactory.getCommitState()
|
||||
}, function(newCommitState, oldCommitState) {
|
||||
console.info("### catch commit change in networkCtrl ###", newCommitState);
|
||||
console.info("### catch commit change in partitionCtrl ###", newCommitState);
|
||||
if (newCommitState !== undefined) {
|
||||
if (newCommitState.name == "partition" && newCommitState.state == "triggered") {
|
||||
$scope.commit();
|
||||
@ -540,34 +528,26 @@ angular.module('compass.wizard', [
|
||||
});
|
||||
|
||||
$scope.commit = function() {
|
||||
dataService.updateClusterConfig(cluster.id, partitionData).success(function(data) {
|
||||
var os_partition = {
|
||||
"os_config": {
|
||||
"partition": $scope.partition
|
||||
}
|
||||
};
|
||||
dataService.updateClusterConfig(cluster.id, os_partition).success(function(configData) {
|
||||
wizardFactory.getPartition(configData["os_config"]["partition"]);
|
||||
var commitState = {
|
||||
"name": "partition",
|
||||
"state": "success",
|
||||
"message": ""
|
||||
};
|
||||
wizardFactory.setCommitState(commitState);
|
||||
});
|
||||
});
|
||||
//TODO: error handling
|
||||
};
|
||||
})
|
||||
|
||||
.controller('securityCtrl', function($scope, wizardFactory, dataService) {
|
||||
var cluster = wizardFactory.getClusterInfo();
|
||||
/*
|
||||
dataService.getAdapterConfig().success(function(data) {
|
||||
$scope.os_global_config = data['os_config']['centos']['global'];
|
||||
//console.log("###", $scope.os_global_config);
|
||||
|
||||
var os_security = data['os_config']['centos']['security'];
|
||||
var adapter_security = data['adapter_config']['security'];
|
||||
|
||||
$scope.security = {
|
||||
'os_security': os_security,
|
||||
'adapter_security': adapter_security
|
||||
};
|
||||
//console.log($scope.security);
|
||||
});
|
||||
*/
|
||||
|
||||
//For Service Credentials Section
|
||||
$scope.service_credentials = {
|
||||
@ -644,7 +624,7 @@ angular.module('compass.wizard', [
|
||||
$scope.$watch(function() {
|
||||
return wizardFactory.getCommitState()
|
||||
}, function(newCommitState, oldCommitState) {
|
||||
console.info("### catch commit change in networkCtrl ###", newCommitState);
|
||||
console.info("### catch commit change in securityCtrl ###", newCommitState);
|
||||
if (newCommitState !== undefined) {
|
||||
if (newCommitState.name == "security" && newCommitState.state == "triggered") {
|
||||
$scope.commit();
|
||||
@ -661,7 +641,7 @@ angular.module('compass.wizard', [
|
||||
"message": ""
|
||||
};
|
||||
wizardFactory.setCommitState(commitState);
|
||||
});
|
||||
});
|
||||
};
|
||||
})
|
||||
|
||||
@ -716,4 +696,4 @@ angular.module('compass.wizard', [
|
||||
};
|
||||
wizardFactory.setCommitState(commitState);
|
||||
};
|
||||
})
|
||||
})
|
||||
|
||||
70
v2/src/common/charts.js
Normal file
70
v2/src/common/charts.js
Normal file
@ -0,0 +1,70 @@
|
||||
angular.module('compass.charts', [])
|
||||
|
||||
.directive('piechart', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
piedata: '='
|
||||
},
|
||||
link: function(scope, element, attrs) {
|
||||
var piedata = scope.piedata;
|
||||
|
||||
var width = 300,
|
||||
height = 250,
|
||||
radius = Math.min(width, height) / 2;
|
||||
//var color = d3.scale.category20();
|
||||
var color = d3.scale.ordinal()
|
||||
.range(["#fee188", "#cb6fd7", "#9abc32", "#f79263", "#6fb3e0", "#d53f40", "#1F77B4"]);
|
||||
|
||||
var svg = d3.select("piechart").append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
||||
|
||||
var arc = d3.svg.arc()
|
||||
.outerRadius(radius - 10)
|
||||
.innerRadius(0);
|
||||
|
||||
scope.$watch('piedata', function(val) {
|
||||
piedata = val;
|
||||
|
||||
svg.selectAll('g.arc').remove();
|
||||
|
||||
var pie = d3.layout.pie()
|
||||
.sort(null)
|
||||
.value(function(d) {
|
||||
return d.number;
|
||||
});
|
||||
|
||||
piedata.forEach(function(d) {
|
||||
d.number = +d.number;
|
||||
});
|
||||
|
||||
var g = svg.selectAll(".arc")
|
||||
.data(pie(piedata))
|
||||
.enter().append("g")
|
||||
.attr("class", "arc");
|
||||
|
||||
g.append("path")
|
||||
.attr("d", arc)
|
||||
.attr('stroke', '#fff')
|
||||
.attr('stroke-width', '3')
|
||||
.style("fill", function(d) {
|
||||
return color(d.data.name);
|
||||
});
|
||||
|
||||
g.append("text")
|
||||
.attr("transform", function(d) {
|
||||
return "translate(" + arc.centroid(d) + ")";
|
||||
})
|
||||
.attr("dy", ".35em")
|
||||
.style("text-anchor", "middle")
|
||||
.text(function(d) {
|
||||
return d.data.name;
|
||||
});
|
||||
|
||||
}, true)
|
||||
}
|
||||
}
|
||||
})
|
||||
5
v2/vendor/d3/d3.min.js
vendored
Normal file
5
v2/vendor/d3/d3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user