Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Last second style fixes

This commit is contained in:
Michael Hackstein 2014-03-04 15:37:47 +01:00
parent 861afb4e5e
commit 169b3f3138
7 changed files with 109 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
js/apps/system/aardvark/clusterFrontend/js/templates/planScenarioSelector.ejs
View File

@ -2,18 +2,17 @@
<% var box = function(c, btm) { %> <% var box = function(c, btm) { %>
<div class="scenarioBox<%=btm?' bottomBox':''%>"> <div class="scenarioBox<%=btm?' bottomBox':''%>">
<div class="scenarioBoxHeader">...</div>
<div class="scenarioBoxText"><%=c%></div> <div class="scenarioBoxText"><%=c%></div>
</div> </div>
<% } <% }
var row = function(c, d, noHead) { %> var row = function(c, d, nr) { %>
<div class="scenarioMachine"> <div class="scenarioMachine">
<% if (!noHead) { %> <% if (nr) { %>
<div class="scenarioBoxHeader">...</div> <div class="scenarioBoxHeader">Machine <%=nr%></div>
<% } %> <% } %>
<% <%
if (c) {box("C");} if (c) {box("Coordinator");}
if (d) {box("D", true);} if (d) {box("DBServer", true);}
%> %>
</div> </div>
<% <%
@ -30,14 +29,40 @@
<div class="tileList"> <div class="tileList">
<legend class="gv_inner">Please select a cluster scenario:</legend> <legend class="gv_inner">Please select a cluster scenario:</legend>
<li class="bigtile informationtile">
<div class="informationText">
<p>A <b>Coordinator</b> receives requests, distributes them to the DBServers,
executes AQL queries and returns the result to the clients. The
coordinator also exposes information about cluster health and cluster
statistics.
</p>
<p>
A <b>DBServer</b> can both store sharded and non-sharded collections. A
database and a coordinator can live on the same server.
</p>
<p>
<b>Development setup</b>
This setup is useful for development/testing purposes. It lets you
define a coordinator and several database nodes on the save server with
a few clicks.
</p>
<p>
<b>Production setup</b>
This setup is used in production. It lets you configure the different
servers and how you want to distribute coordinators and database nodes
among the cluster.</p>
</div>
<h5 class="collectionName">Information</h5>
</li>
<li class="bigtile" id="singleServer"> <li class="bigtile" id="singleServer">
<div id="singleMachine" class="machineClass"> <div id="singleMachine" class="machineClass">
<div class="scenarioSingleMachine"> <div class="scenarioSingleMachine">
<div class="scenarioBoxHeader">...</div> <div class="scenarioBoxHeader">Single Machine</div>
<% <%
row(true, true, true); row(true, true);
row(true, true, true); row(true, true);
row(false, true, true); row(false, true);
%> %>
</div> </div>
</div> </div>
@ -47,12 +72,12 @@
<li class="bigtile" id="multiServerAsymmetrical"> <li class="bigtile" id="multiServerAsymmetrical">
<div id="multiMachineAsym" class="machineClass"> <div id="multiMachineAsym" class="machineClass">
<% <%
row(false, true); row(false, true, 1);
row(true, false); row(true, false, 2);
row(false, true); row(false, true, "X");
%> %>
</div> </div>
<h5 class="collectionName">Multi Machine / Productive</h5> <h5 class="collectionName">Multi Machine / Production</h5>
</li> </li>
</div> </div>
</script> </script>

8
js/apps/system/aardvark/clusterFrontend/js/templates/showCluster.ejs
View File

@ -32,7 +32,9 @@
_.each(s.coords, function(c) { _.each(s.coords, function(c) {
var url = c.get("protocol") var url = c.get("protocol")
+ "://" + "://"
+ c.get("address"); + c.get("address")
+ "/_db/_system/_admin/aardvark/standalone.html"
+ "#collections";
%> %>
<li class="tile"> <li class="tile">
<a class="coordinator single <%=statusClass(c.get('status'))%>" id="<%=c.get('address')%>"> <a class="coordinator single <%=statusClass(c.get('status'))%>" id="<%=c.get('address')%>">
@ -65,7 +67,9 @@
<% _.each(s.coords, function(c) { <% _.each(s.coords, function(c) {
url = c.get("protocol") url = c.get("protocol")
+ "://" + "://"
+ c.get("address"); + c.get("address")
+ "_db/_system/_admin/aardvark/standalone.html"
+ "#collections";
%> %>
<a class="coordinator <%=type%> <%=statusClass(c.get('status'))%>" id="<%=c.get('address')%>" title="<%=c.get('name')%>"> <a class="coordinator <%=type%> <%=statusClass(c.get('status'))%>" id="<%=c.get('address')%>" title="<%=c.get('name')%>">
<span class="fa fa-compass icon"></span> <span class="fa fa-compass icon"></span>

6
js/apps/system/aardvark/frontend/js/views/newCollectionView.js
View File

@ -77,14 +77,12 @@
if (shards === "") { if (shards === "") {
shards = 1; shards = 1;
} }
if (!typeof shards === 'number' && shards % 1 === 0 && shards > 0) { shards = parseInt(shards, 10);
if (shards < 1) {
arangoHelper.arangoError("Number of shards has to be an integer value greater or equal 1"); arangoHelper.arangoError("Number of shards has to be an integer value greater or equal 1");
return 0; return 0;
} else {
shards = parseInt(shards);
} }
shardBy = _.pluck($('#new-collection-shardBy').select2("data"), "text"); shardBy = _.pluck($('#new-collection-shardBy').select2("data"), "text");
console.log(shardBy);
if (shardBy.length === 0) { if (shardBy.length === 0) {
shardBy.push("_key"); shardBy.push("_key");
} }

43
js/apps/system/aardvark/frontend/scss/_plannerImages.scss
View File

@ -3,41 +3,40 @@
padding: 10px; padding: 10px;
float: left; float: left;
background-color: #E1E1E1; background-color: #E1E1E1;
width: 311px; margin-left: 31px;
height: 175px; margin-right: 31px;
margin-left: 8px;
} }
.scenarioBox { .scenarioBox {
position: absolute; position: absolute;
margin-top: 10px; margin-top: 30px;
width: auto; width: auto;
height: 65px; height: 65px;
left: 10px; left: 10px;
right: 10px; right: 10px;
@include border-radius(3px 3px 0 0); @include border-radius(3px 3px 3px 3px);
border: 1px solid rgba(0, 0, 0, 0.19); border: 1px solid rgba(0, 0, 0, 0.19);
background-color: white; background-color: rgba(0, 0, 0, 0.075);
&.bottomBox { &.bottomBox {
bottom: 10px; bottom: 30px;
} }
} }
.scenarioBoxHeader { .scenarioBoxHeader {
width: auto; width: auto;
height: 5px; height: 18px;
line-height: 5px; line-height: 18px;
text-align: right; text-align: center;
margin-top: -5px; margin-top: 0px;
padding-bottom: 5px; padding-bottom: 0px;
border-bottom: 1px solid rgba(0, 0, 0, 0.19); border-bottom: 1px solid rgba(0, 0, 0, 0.19);
} }
.scenarioBoxText { .scenarioBoxText {
width: auto; width: auto;
font-size: 30px; font-size: 13px;
font-weight: 700; font-weight: 400;
text-align: center; text-align: center;
margin-top: 17px; margin-top: 17px;
} }
@ -46,8 +45,8 @@
@extend %pull-left; @extend %pull-left;
position: relative; position: relative;
margin-right: 20px; margin-right: 20px;
height: 177px; height: 257px;
width: 87px; width: 110px;
@include border-radius(3px 3px 0 0); @include border-radius(3px 3px 0 0);
border: 1px solid rgba(0, 0, 0, 0.19); border: 1px solid rgba(0, 0, 0, 0.19);
background-color: white; background-color: white;
@ -65,6 +64,18 @@
.scenarioMachine { .scenarioMachine {
border: 1px solid transparent; border: 1px solid transparent;
height: 238px;
} }
} }
.bigtile.informationtile {
cursor: auto;
}
.informationText {
font-size: 12px;
text-align: left;
margin: 10px;
padding: 5px;
background: $c_white;
}

4
js/apps/system/aardvark/frontend/scss/_tiles.scss
View File

@ -155,8 +155,8 @@ li.tile {
li.bigtile { li.bigtile {
@extend %clickable; @extend %clickable;
@extend li.tile; @extend li.tile;
height:250px; height: 309px;
width: 345px; width: 460px;
div.shardContainer { div.shardContainer {
font-size: 30px; font-size: 30px;

52
js/apps/system/aardvark/frontend/scss/cluster.css
View File

@ -642,8 +642,8 @@ li.tile, li.bigtile {
right: 0px; } right: 0px; }
li.bigtile { li.bigtile {
height: 250px; height: 309px;
width: 345px; } width: 460px; }
li.bigtile div.shardContainer { li.bigtile div.shardContainer {
font-size: 30px; } font-size: 30px; }
li.bigtile div.shardContainer span { li.bigtile div.shardContainer span {
@ -933,46 +933,45 @@ a.dbserver.double {
padding: 10px; padding: 10px;
float: left; float: left;
background-color: #E1E1E1; background-color: #E1E1E1;
width: 311px; margin-left: 31px;
height: 175px; margin-right: 31px; }
margin-left: 8px; }
.scenarioBox { .scenarioBox {
position: absolute; position: absolute;
margin-top: 10px; margin-top: 30px;
width: auto; width: auto;
height: 65px; height: 65px;
left: 10px; left: 10px;
right: 10px; right: 10px;
-moz-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 3px 3px;
border: 1px solid rgba(0, 0, 0, 0.19); border: 1px solid rgba(0, 0, 0, 0.19);
background-color: white; } background-color: rgba(0, 0, 0, 0.075); }
.scenarioBox.bottomBox { .scenarioBox.bottomBox {
bottom: 10px; } bottom: 30px; }
.scenarioBoxHeader { .scenarioBoxHeader {
width: auto; width: auto;
height: 5px; height: 18px;
line-height: 5px; line-height: 18px;
text-align: right; text-align: center;
margin-top: -5px; margin-top: 0px;
padding-bottom: 5px; padding-bottom: 0px;
border-bottom: 1px solid rgba(0, 0, 0, 0.19); } border-bottom: 1px solid rgba(0, 0, 0, 0.19); }
.scenarioBoxText { .scenarioBoxText {
width: auto; width: auto;
font-size: 30px; font-size: 13px;
font-weight: 700; font-weight: 400;
text-align: center; text-align: center;
margin-top: 17px; } margin-top: 17px; }
.scenarioMachine { .scenarioMachine {
position: relative; position: relative;
margin-right: 20px; margin-right: 20px;
height: 177px; height: 257px;
width: 87px; width: 110px;
-moz-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
@ -986,4 +985,15 @@ a.dbserver.double {
border: 1px solid rgba(0, 0, 0, 0.19); border: 1px solid rgba(0, 0, 0, 0.19);
background-color: white; } background-color: white; }
.scenarioSingleMachine .scenarioMachine { .scenarioSingleMachine .scenarioMachine {
border: 1px solid transparent; } border: 1px solid transparent;
height: 238px; }
.bigtile.informationtile {
cursor: auto; }
.informationText {
font-size: 12px;
text-align: left;
margin: 10px;
padding: 5px;
background: white; }

4
js/apps/system/aardvark/frontend/scss/generated.css
View File

@ -612,8 +612,8 @@ li.tile, li.bigtile {
right: 0px; } right: 0px; }
li.bigtile { li.bigtile {
height: 250px; height: 309px;
width: 345px; } width: 460px; }
li.bigtile div.shardContainer { li.bigtile div.shardContainer {
font-size: 30px; } font-size: 30px; }
li.bigtile div.shardContainer span { li.bigtile div.shardContainer span {