修改gfs配置界面

This commit is contained in:
wu ming 2016-09-26 19:39:18 +08:00
parent 669d2c84ab
commit db2884438d
10 changed files with 205 additions and 51 deletions

View File

@ -24,11 +24,13 @@ declare module Configs {
name: string; name: string;
path: string; path: string;
brick: Array<Brick>; brick: Array<Brick>;
status: string; status: boolean;
editable: boolean;
} }
interface Brick { interface Brick {
ip: Array<string>; ip: Array<string>;
status: boolean; status: boolean;
path: string; path: string;
editable: boolean;
} }
} }

View File

@ -7,6 +7,7 @@ declare module Configs {
status: boolean; status: boolean;
availableSize?: number; availableSize?: number;
usedSize?: number; usedSize?: number;
editable?: boolean;
} }
interface oracleParam { interface oracleParam {
name: string; name: string;
@ -25,6 +26,8 @@ declare module Configs {
folder?: Array<any>; folder?: Array<any>;
status: string; status: string;
path: string; path: string;
editable?: boolean;
alive?: boolean;
} }
/** /**
volume中指定的brock volume中指定的brock

File diff suppressed because one or more lines are too long

View File

@ -248,8 +248,8 @@ gulp.task('connect', ['watch'], function() {
targetPath: '/hawtio/git' targetPath: '/hawtio/git'
}, { }, {
proto: "http", proto: "http",
port: "8080", port: "8088",
hostname: "192.168.0.101", hostname: "192.168.0.110",
path: '/java/console/api', path: '/java/console/api',
targetPath: "/" targetPath: "/"
}]; }];

View File

@ -18,7 +18,8 @@
<table class="table sj_content_table sj_table_border" > <table class="table sj_content_table sj_table_border" >
<thead class="no-scope"> <thead class="no-scope">
<tr> <tr>
<th class="sj_c_green table-header sj_table_td00" >已启用</th> <th ng-show="row.status == Started ||Created" class="sj_c_green table-header sj_table_td00" >已启用</th>
<th ng-show="row.status == Stopped" class="sj_c_green table-header sj_table_td00" >已停止</th>
<th class="no-fade table-header sj_table_td06"> <th class="no-fade table-header sj_table_td06">
<span class="">{{volume.name}}</span> <span class="">{{volume.name}}</span>
</th> </th>
@ -37,13 +38,17 @@
<button class="btn sj_btn" ng-click="editRow(volume)"> <button class="btn sj_btn" ng-click="editRow(volume)">
<span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;编辑 <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;编辑
</button> </button>
</th> <button class="btn sj_btn" ng-click="deleteRow(volume)">
<span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;刪除
</button>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr ng-repeat="row in volume.brick track by $index" class="row.class"> <tr ng-repeat="row in volume.brick track by $index" class="row.class">
<td> <td>
<span class="glyphicon glyphicon-ok sj_c_green " ></span> <span ng-show="row.status" class="glyphicon glyphicon-ok sj_c_green " ></span>
<span ng-hide="row.status" class="glyphicon glyphicon-remove sj_c_green " ></span>
</td> </td>
<td > <td >
<span class="">服务器{{$index+1}}</span> <span class="">服务器{{$index+1}}</span>

View File

@ -21,20 +21,22 @@
</script> </script>
<script type="text/ng-template" id="newDialog.html"> <script type="text/ng-template" id="newDialog.html">
<div class="sj_new_box"> <div class="sj_new_box">
<div class=" mb10"> <ng-form name="volumeForm" class=" mb10" novalidate="novalidate">
<table class="sj_new_table clear"> <table class="sj_new_table clear">
<tbody> <tbody>
<tr> <tr>
<th class="new_left sj_c_green">已启用</th> <th ng-show="ngDialogData.status" class="new_left sj_c_green">启用</th>
<th ng-hide="ngDialogData.status" class="new_left sj_c_green">停止</th>
<th colspan="10"> <th colspan="10">
<input type="text" class="sj_txt_box03 mr10" ng-model="ngDialogData.name " /> <input type="text" class="sj_txt_box03 mr10" ng-model="ngDialogData.name " pattern="^\w{4,20}$" ng-disabled="!{{ngDialogData.editable}}"/>
</th> </th>
<th>云目录:</th> <th>云目录:</th>
<th> <th>
<input type="text" class="sj_txt_box02 mr5" ng-model="ngDialogData.path" /> <input type="text" class="sj_txt_box02 mr5" ng-model="ngDialogData.path" ng-disabled="!{{ngDialogData.editable}}"/>
</th> </th>
<th> <th>
<button class="sj_btn_red fl">停止</button> <button ng-show="ngDialogData.status" class="sj_btn_red fl" ng-click="stopVolume(ngDialogData)">停止</button>
<button ng-hide="ngDialogData.status" class="sj_btn_red fl" ng-click="startVolume(ngDialogData)">启动</button>
</th> </th>
</tr> </tr>
<tr ng-repeat = "row in ngDialogData.brick"> <tr ng-repeat = "row in ngDialogData.brick">
@ -43,29 +45,29 @@
<span ng-hide = "row.status" class="sj_icon_warning"> <span ng-hide = "row.status" class="sj_icon_warning">
</th> </th>
<th colspan="3"> <th colspan="3">
<input type="text" class="sj_txt_box04 mr5" value="服务器 {{$index + 1}} "/> <input type="text" class="sj_txt_box04 mr5" value="服务器 {{$index + 1}} " ng-disabled="true" />
</th> </th>
<th> <th>
<input type="text" class="sj_txt_box05" ng-model="row.ip[0]" /> <input type="text" class="sj_txt_box05" ng-model="row.ip[0]" ng-disabled="!{{row.editable}}" />
</th> </th>
<th>.</th> <th>.</th>
<th> <th>
<input type="text" class="sj_txt_box05" ng-model="row.ip[1]" /> <input type="text" class="sj_txt_box05" ng-model="row.ip[1]" ng-disabled="!{{row.editable}}" />
</th> </th>
<th>.</th> <th>.</th>
<th> <th>
<input type="text" class="sj_txt_box05" ng-model="row.ip[2]" /> <input type="text" class="sj_txt_box05" ng-model="row.ip[2]" ng-disabled="!{{row.editable}}" />
</th> </th>
<th>.</th> <th>.</th>
<th> <th>
<input type="text" class="sj_txt_box05 mr10" ng-model="row.ip[3]"/> <input type="text" class="sj_txt_box05 mr10" ng-model="row.ip[3]" ng-disabled="!{{row.editable}}" />
</th> </th>
<th>存储块:</th> <th>存储块:</th>
<th> <th>
<input type="text" class="sj_txt_box02 mr5" ng-model="row.path" /> <input type="text" class="sj_txt_box02 mr5" ng-model="row.path" ng-disabled="!{{row.editable}}"/>
</th> </th>
<th> <th>
<button class="sj_btn_grey fl">连接</button> <!--<button class="sj_btn_grey fl">连接</button>-->
<a href="#" class="sj_icon_del ml5 fl" ng-click="deleteBrock(ngDialogData, row)"></a> <a href="#" class="sj_icon_del ml5 fl" ng-click="deleteBrock(ngDialogData, row)"></a>
<a href="#" ng-hide ="$index < ngDialogData.brick.length-1" class="sj_icon_add ml5 fl" ng-click="addBrock(ngDialogData)"></a> <a href="#" ng-hide ="$index < ngDialogData.brick.length-1" class="sj_icon_add ml5 fl" ng-click="addBrock(ngDialogData)"></a>
</th> </th>
@ -73,12 +75,12 @@
<tr> <tr>
<th>&nbsp;</th> <th>&nbsp;</th>
<th> <th>
<button class="sj_btn_blue mr5" ng-click="save()">保存</button> <button class="sj_btn_blue mr5" ng-click="save(ngDialogData)" ng-disabled="volumeForm.$invalid">保存</button>
</th> </th>
<th> <th>
<button class="sj_btn_grey mr5" ng-click="cancel()">删除</button> <button class="sj_btn_grey mr5" ng-click="cancel()">取消</button>
</th> </th>
<th> <!--<th>
<button class="sj_btn_grey mr5" ng-click="cancel()">取消</button> <button class="sj_btn_grey mr5" ng-click="cancel()">取消</button>
</th> </th>
<!--<th colspan="5">&nbsp;{{message}}</th>--> <!--<th colspan="5">&nbsp;{{message}}</th>-->
@ -86,7 +88,7 @@
</tbody> </tbody>
</table> </table>
<div class="alert alert-warning" role="alert" ng-show="showMessage">"删除存储块失败:集群中至少包含一个存储块!"</div> <div class="alert alert-warning" role="alert" ng-show="showMessage">"删除存储块失败:集群中至少包含一个存储块!"</div>
</div> </ng-form>
</div> </div>
</script> </script>
<div ng-controller="Kubernetes.TopLevel"> <div ng-controller="Kubernetes.TopLevel">

View File

@ -130,14 +130,16 @@ module Configs{
brick.push({ brick.push({
ip: block.ip.split("."), ip: block.ip.split("."),
status: block.status, status: block.status,
path: block.path path: block.path,
editable: block.editable || false
}); });
}); });
return { return {
name: volume.name, name: volume.name,
path: volume.path, path: volume.path,
brick: brick, brick: brick,
status: volume.status status: volume.alive || false,
editable: volume.editable || false
} }
} }
@ -153,13 +155,15 @@ module Configs{
name: string name: string
path: string path: string
brick: Array<Brick>; brick: Array<Brick>;
status: string; status: boolean;
editable: boolean
} }
export interface Brick{ export interface Brick{
ip: Array<string>; ip: Array<string>;
status: boolean; status: boolean;
path: string; path: string;
editable: boolean
} }
} }

View File

@ -8,6 +8,7 @@ module Configs{
status: boolean; //存储块的状态 status: boolean; //存储块的状态
availableSize?: number, //存储块的大小 availableSize?: number, //存储块的大小
usedSize?: number //存储块已使用空间 usedSize?: number //存储块已使用空间
editable?: boolean
} }
export interface oracleParam{ export interface oracleParam{
@ -27,7 +28,9 @@ module Configs{
brick: Array<Block>; //volume中的存储块 brick: Array<Block>; //volume中的存储块
folder?: Array<any>; //volume的文件 folder?: Array<any>; //volume的文件
status: string; status: string;
path: string; path: string;
editable?: boolean
alive?: boolean
} }
//字节大小转换成字符大小 //字节大小转换成字符大小
@ -45,9 +48,21 @@ module Configs{
function formatVolume(volume:volume){ function formatVolume(volume:volume){
volume["formatTotalSize"] = getStringSize(volume.allSize); volume["formatTotalSize"] = getStringSize(volume.allSize);
volume["formatUsedSize"] = getStringSize(volume.usedSize); volume["formatUsedSize"] = getStringSize(volume.usedSize);
volume["editAble"] = false;
switch (volume.status) {
case "Stopped":
volume["alive"] = false;
break;
default:
volume["alive"] = true;
break;
}
angular.forEach(volume.brick, (brock) =>{ angular.forEach(volume.brick, (brock) =>{
brock["formatUsedSize"] = getStringSize(brock.usedSize); brock["formatUsedSize"] = getStringSize(brock.usedSize);
brock["formatAllSize"] = getStringSize(brock.availableSize); brock["formatAllSize"] = getStringSize(brock.availableSize);
brock["editAble"] = false;
}) })
} }
@ -109,7 +124,7 @@ module Configs{
} }
} }
}); });
this.cluster = result; this.cluster = result;
formatVolumes(this.cluster); formatVolumes(this.cluster);
} }

View File

@ -19,21 +19,24 @@ module Configs{
controller:'Configs.VolumeController', controller:'Configs.VolumeController',
width: 1005, width: 1005,
data: { data: {
name: null, name: '',
path: null, path: '',
status: "", status: 'Stopped',
brick: [{ brick: [{
ip: ["0", "0", "0", "0"], ip: ["0", "0", "0", "0"],
path: "", path: '',
status: false status: false,
}] editAble: true
}],
editAble: true
}, },
className: 'ngdialog-theme-default' className: 'ngdialog-theme-default'
}); });
} }
$scope.editRow = (volume) => { $scope.editRow = (volume) => {
var fVolume = formatVolume(volume); var fVolume = formatVolume(volume);
console.log(fVolume);
ngDialog.open({ ngDialog.open({
template: 'newDialog.html', template: 'newDialog.html',
width: 1005, width: 1005,
@ -42,5 +45,22 @@ module Configs{
controller: 'Configs.VolumeController' controller: 'Configs.VolumeController'
}); });
} }
$scope.deleteRow = (volume) =>{
console.log(volume);
$http({
url: "/java/console/api/volume/delete",
method: 'POST',
data: volume
}).success(function(data,header,config,status){
/*
volume信息
*/
}).error(function(data,header,config,status){
});
}
}]); }]);
} }

View File

@ -12,10 +12,12 @@ module Configs{
} }
}]); }]);
export var VolumeController = controller('VolumeController', ['$scope', ($scope) => { export var VolumeController = controller('VolumeController', ['$scope', '$http', ($scope, $http) => {
$scope.save = () =>{ $scope.save = (entity) =>{
changeStatus(entity);
$scope.closeThisDialog(); $scope.closeThisDialog();
} }
$scope. cancel = () =>{ $scope. cancel = () =>{
$scope.closeThisDialog(); $scope.closeThisDialog();
} }
@ -31,10 +33,49 @@ module Configs{
var block = { var block = {
ip: "", //存储块的机器ip地址 ip: "", //存储块的机器ip地址
path: "", //存储块路径 path: "", //存储块路径
status: false, //存储块的状态 status: false, //存储块的状态
editAble:true
}; };
addBrock(volume, block); addBrock(volume, block);
$scope.showMessage = false; $scope.showMessage = false;
} }
$scope.stopVolume = (volume) =>{
volume.status="false";
}
$scope.startVolume = (volume) =>{
volume.status="true";
}
$scope.$watch("ngDialogData.status", (newValue, oldValue) => {
if(newValue && newValue != oldValue){
$scope.$apply();
console.log($scope.volume)
}
});
function changeStatus(entity){
angular.forEach(entity.brick, (brick) =>{
brick["ip"] = brick.ip.join(".");
});
console.log(entity);
$http({
url: "/java/console/api/volume/update",
method: 'POST',
data: entity
}).success(function(data,header,config,status){
/*
volume信息
*/
}).error(function(data,header,config,status){
});
}
}]); }]);
} }