More improvements to add server page.

This commit is contained in:
Dane Everitt 2017-02-23 22:52:05 -05:00
parent 8f96b35db1
commit 58999913ba
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 164 additions and 60 deletions

View file

@ -120,13 +120,13 @@ class ServersController extends Controller
$nodes = Models\Node::with('allocations')->where('location_id', $request->input('location'))->get();
return $nodes->map(function ($item) {
$filtered = $item->allocations->map(function($map) {
return collect($map)->only(['ip', 'port']);
return collect($map)->only(['id', 'ip', 'port']);
});
$item->ports = $filtered->unique('ip')->map(function ($map) use ($item) {
$item->ports = $filtered->map(function ($map) use ($item) {
return [
'ip' => $map['ip'],
'ports' => $item->allocations->where('ip', $map['ip'])->pluck('port')->all(),
'id' => $map['id'],
'text' => $map['ip'] . ':' . $map['port'],
];
})->values();

View file

@ -141,11 +141,60 @@ li.select2-results__option--highlighted[aria-selected="false"] > .user-block > .
color: #eee;
}
.select2-search--inline .select2-search__field:focus {
outline: none;
border: 0 !important;
}
.img-bordered-xs {
border: 1px solid #d2d6de;
padding: 1px;
}
span[aria-labelledby="select2-pOwner-container"] {
span[aria-labelledby="select2-pUserId-container"] {
padding-left: 2px !important;
}
.callout-slim a {
color: #555 !important;
}
.callout.callout-info.callout-slim {
border: 1px solid #0097bc !important;
border-left: 5px solid #0097bc !important;
border-right: 5px solid #0097bc !important;
color: #777 !important;
background: transparent !important;
}
.callout.callout-danger.callout-slim {
border: 1px solid #c23321 !important;
border-left: 5px solid #c23321 !important;
border-right: 5px solid #c23321 !important;
color: #777 !important;
background: transparent !important;
}
.callout.callout-warning.callout-slim {
border: 1px solid #c87f0a !important;
border-left: 5px solid #c87f0a !important;
border-right: 5px solid #c87f0a !important;
color: #777 !important;
background: transparent !important;
}
.callout.callout-success.callout-slim {
border: 1px solid #00733e !important;
border-left: 5px solid #00733e !important;
border-right: 5px solid #00733e !important;
color: #777 !important;
background: transparent !important;
}
.callout.callout-default.callout-slim {
border: 1px solid #eee !important;
border-left: 5px solid #eee !important;
border-right: 5px solid #eee !important;
color: #777 !important;
background: transparent !important;
}

View file

@ -36,7 +36,7 @@
<form action="{{ route('admin.servers.new') }}" method="POST">
<div class="row">
<div class="col-xs-12">
<div class="box box-primary">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Core Details</h3>
</div>
@ -62,36 +62,29 @@
<h3 class="box-title">Allocation Management</h3>
</div>
<div class="box-body row">
<div class="form-group col-sm-6">
<div class="form-group col-sm-4">
<label for="pLocationId">Location</label>
<select name="location_id" id="pLocationId" class="form-control">
<option disabled selected>Select a Location</option>
@foreach($locations as $location)
<option value="{{ $location->id }}">{{ $location->long }} ({{ $location->short }})</option>
@endforeach
</select>
<p class="small text-muted no-margin">The location in which this server will be deployed.</p>
</div>
<div class="form-group col-sm-6">
<div class="form-group col-sm-4">
<label for="pNodeId">Node</label>
<select name="node_id" id="pNodeId" class="form-control">
<option disabled selected>Select a Node</option>
</select>
<select name="node_id" id="pNodeId" class="form-control"></select>
<p class="small text-muted no-margin">The node which this server will be deployed to.</p>
</div>
<div class="form-group col-sm-6">
<label for="pIp">IP Address</label>
<select name="ip" id="pIp" class="form-control">
<option disabled selected>Select an IP</option>
</select>
<p class="small text-muted no-margin">The IP address that this server will be allocated to.</p>
<div class="form-group col-sm-4">
<label for="pAllocation">Default Allocation</label>
<select name="allocation_id" id="pAllocation" class="form-control"></select>
<p class="small text-muted no-margin">The main allocation that will be assigned to this server.</p>
</div>
<div class="form-group col-sm-6">
<label for="pPort">Port</label>
<select name="port" id="pPort" class="form-control">
<option disabled selected>Select a Port</option>
</select>
<p class="small text-muted no-margin">The port that this server will be allocated to.</p>
<div class="form-group col-sm-12">
<label for="pAllocationAdditional">Additional Allocation(s)</label>
<select name="allocation_additional" id="pAllocationAdditional" class="form-control" multiple></select>
<p class="small text-muted no-margin">Additional allocations to assign to this server on creation.</p>
</div>
</div>
<div class="box-footer">
@ -103,6 +96,73 @@
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Resource Management</h3>
</div>
<div class="box-body row">
<div class="form-group col-sm-4">
<label for="pMemory">Memory</label>
<div class="input-group">
<input type="text" class="form-control" name="memory" id="pMemory" />
<span class="input-group-addon">MB</span>
</div>
</div>
<div class="form-group col-sm-4">
<label for="pSwap">Swap</label>
<div class="input-group">
<input type="text" class="form-control" name="swap" id="pSwap" />
<span class="input-group-addon">MB</span>
</div>
</div>
<div class="form-group col-sm-4">
<label for="pOOMDisabled">Out-of-Memory Killer</label>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" id="pOOMDisabled" name="oom_disabled"/>
</span>
<input type="text" class="form-control" readonly style="background:transparent !important;" value="Disable OOM Killer" />
</div>
</div>
</div>
<div class="box-footer no-border" style="padding: 0 10px 10px;">
<div class="callout callout-info callout-slim no-margin">
<p class="small no-margin">If you do not want to assign swap space to a server simply put <code>0</code> for the value, or <code>-1</code> to allow unlimited swap space. If you want to disable memory limiting on a server simply enter <code>0</code> into the memory field. We suggest leaving OOM Killer enabled unless you know what you are doing, disabling it could cause your server to hang unexpectedly.<p>
</div>
</div>
<div class="box-body row">
<div class="form-group col-sm-4">
<label for="pDisk">Disk Space</label>
<div class="input-group">
<input type="text" class="form-control" name="disk" id="pDisk" />
<span class="input-group-addon">GB</span>
</div>
</div>
<div class="form-group col-sm-4">
<label for="pCPU">CPU Limit</label>
<div class="input-group">
<input type="text" class="form-control" name="cpu" id="pCPU" />
<span class="input-group-addon">%</span>
</div>
</div>
<div class="form-group col-sm-4">
<label for="pIO">Block IO Weight</label>
<div class="input-group">
<input type="text" class="form-control" value="500" name="io" id="pIO" />
<span class="input-group-addon">I/O</span>
</div>
</div>
</div>
<div class="box-footer no-border" style="padding: 0 10px 10px;">
<div class="callout callout-info callout-slim">
<p class="small no-margin">If you do not want to limit CPU usage set the value to <code>0</code>. To determine a value, take the number <em>physical</em> cores and multiply it by 100. For example, on a quad core system <code>(4 * 100 = 400)</code> there is <code>400%</code> available. To limit a server to using half of a single core, you would set the value to <code>50</code>. To allow a server to use up to two physical cores, set the value to <code>200</code>. BlockIO should be a value between <code>10</code> and <code>1000</code>. Please see <a href="https://docs.docker.com/engine/reference/run/#/block-io-bandwidth-blkio-constraint" target="_blank">this documentation</a> for more information about it.<p>
</div>
</div>
</div>
</div>
</div>
</form>
@endsection
@ -110,10 +170,18 @@
@parent
<script>
$(document).ready(function() {
$('#pLocationId').select2();
$('#pNodeId').select2();
$('#pIp').select2();
$('#pPort').select2();
$('#pLocationId').select2({
placeholder: 'Select a Location',
}).change();
$('#pNodeId').select2({
placeholder: 'Select a Node',
});
$('#pAllocation').select2({
placeholder: 'Select a Default Allocation',
});
$('#pAllocationAdditional').select2({
placeholder: 'Select Additional Allocations',
});
$('#pUserId').select2({
ajax: {
@ -165,16 +233,22 @@
$('#allocationLoader').show();
}
var lastActiveBox = null;
$(document).on('click', function (event) {
if (lastActiveBox !== null) {
lastActiveBox.removeClass('box-primary');
}
lastActiveBox = $(event.target).closest('.box');
lastActiveBox.addClass('box-primary');
});
var currentLocation = null;
var curentNode = null;
var currentIP = null;
var NodeDataIdentifier = null;
var NodeData = [];
var AllocationsForNode = null;
$('#pLocationId').on('change', function (event) {
showLoader()
showLoader();
currentLocation = $(this).val();
currentNode = null;
@ -185,8 +259,7 @@
data: { location: currentLocation },
}).done(function (data) {
NodeData = data;
console.log(data);
$('#pNodeId').select2({data: data});
$('#pNodeId').select2({data: data}).change();
}).fail(function (jqXHR) {
cosole.error(jqXHR);
currentLocation = null;
@ -197,31 +270,13 @@
currentNode = $(this).val();
$.each(NodeData, function (i, v) {
if (v.id == currentNode) {
NodeDataIdentifier = i;
$('#pIp').select2({
data: $.map(v.allocations, function (item) {
return {
id: item.ip,
text: item.ip,
}
}),
})
}
});
});
$('#pIp').on('change', function (event) {
currentIP = $(this).val();
$.each(NodeData[NodeDataIdentifier].allocations, function (i, v) {
if (v.ip == currentIP) {
$('#pPort').val(null);
$('#pPort').select2({
data: $.map(v.ports, function (item) {
return {
id: item,
text: item,
}
}),
$('#pAllocation').select2({
data: v.allocations,
placeholder: 'Select a Default Allocation',
});
$('#pAllocationAdditional').select2({
data: v.allocations,
placeholder: 'Select Additional Allocations',
})
}
});