SOLR-3915: Color Legend for Cloud UI

git-svn-id: https://svn.apache.org/repos/asf/lucene/dev/trunk@1437791 13f79535-47bb-0310-9956-ffa450edef68
This commit is contained in:
Stefan Matheis 2013-01-23 23:06:47 +00:00
parent 15bc6148ae
commit 3801883396
3 changed files with 65 additions and 0 deletions

View File

@ -83,6 +83,8 @@ Optimizations
* SOLR-4341: Admin UI - Plugins/Stats Page contains loooong
Values which result in horizontal Scrollbar (steffkes)
* SOLR-3915: Color Legend for Cloud UI (steffkes)
Other Changes
----------------------

View File

@ -231,11 +231,39 @@
color: #00f;
}
#content #cloud #legend
{
border: 1px solid #f0f0f0;
padding: 10px;
position: absolute;
right: 0;
bottom: 0;
}
#content #cloud #legend li
{
padding-left: 15px;
position: relative;
}
#content #cloud #legend li svg
{
position: absolute;
left: 0;
top: 2px;
}
#content #graph-content
{
min-height: 400px;
}
#content #graph-content .node
{
fill: #333;
}
#content #cloud #legend circle,
#content #graph-content .node circle
{
fill: #fff;
@ -265,6 +293,7 @@
stroke-width: 1.5px;
}
#content #cloud #legend .gone circle,
#content #graph-content .node.gone circle,
#content #graph-content .link.gone
{
@ -276,8 +305,16 @@
fill: #f0f0f0;
}
#content #cloud #legend ul .gone
{
color: #e0e0e0;
}
#content #cloud #legend .recovery_failed,
#content #cloud #legend .recovery_failed circle,
#content #graph-content .node.recovery_failed circle
{
color: #C43C35;
stroke: #C43C35;
}
@ -286,8 +323,11 @@
fill: #C43C35;
}
#content #cloud #legend .down,
#content #cloud #legend .down circle,
#content #graph-content .node.down circle
{
color: #c48f00;
stroke: #c48f00;
}
@ -296,8 +336,11 @@
fill: #c48f00;
}
#content #cloud #legend .recovering,
#content #cloud #legend .recovering circle,
#content #graph-content .node.recovering circle
{
color: #d5dd00;
stroke: #d5dd00;
}
@ -306,8 +349,11 @@
fill: #d5dd00;
}
#content #cloud #legend .active,
#content #cloud #legend .active circle,
#content #graph-content .node.active circle
{
color: #57A957;
stroke: #57A957;
}
@ -316,11 +362,17 @@
fill: #57A957;
}
#content #cloud #legend .leader circle,
#content #graph-content .node.leader circle
{
fill: #000;
}
#content #cloud #legend .leader circle
{
stroke: #fff;
}
#content #graph-content .link.lvl-2,
#content #graph-content .link.leader
{

View File

@ -39,6 +39,17 @@ limitations under the License.
<div id="canvas"></div>
<div id="legend">
<ul>
<li class="leader"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><circle r="4.5"></circle></g></g></svg> Leader</li>
<li class="active"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><circle r="4.5"></circle></g></g></svg> Active</li>
<li class="recovering"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><circle r="4.5"></circle></g></g></svg> Recovering</li>
<li class="down"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><circle r="4.5"></circle></g></g></svg> Down</li>
<li class="recovery_failed"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><circle r="4.5"></circle></g></g></svg> Recovery Failed</li>
<li class="gone"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><circle r="4.5"></circle></g></g></svg> Gone</li>
</ul>
</div>
</div>
</div>