requirebin sketch

index.js

var h = require("virtual-dom/h"),
    createElement = require("virtual-dom/create-element");

var shards = [{
  "num_keys": "224123",
  "replicas": [
    {
      "configured_primary": false,
      "currently_primary": true,
      "id": "8a25d0c4-9d04-4596-8101-7574be54ba67",
      "server": "batman",
      "state": "ready"
    },
    {
      "configured_primary": true,
      "currently_primary": false,
      "id": "a3615c9e-b5ee-445b-86fc-91891e0064de",
      "server": "taste",
      "state": "disconnected"
    },
    {
      "configured_primary": false,
      "currently_primary": true,
      "id": "a41f2e6a-4d32-4470-a0dc-b68355f5c255",
      "server": "africa",
      "state": "ready"
    }
  ]
},{
  "num_keys": "242312",
  "replicas": [
    {
      "configured_primary": true,
      "currently_primary": true,
      "id": "8a25d0c4-9d04-4596-8101-7574be54ba67",
      "server": "thursday",
      "state": "ready"
    },
    {
      "configured_primary": false,
      "currently_primary": false,
      "id": "a3615c9e-b5ee-445b-86fc-91891e0064de",
      "server": "alcatraz",
      "state": "ready"
    },
    {
      "configured_primary": false,
      "currently_primary": false,
      "id": "a41f2e6a-4d32-4470-a0dc-b68355f5c255",
      "server": "gas-cap",
      "state": "transitioning"
    }
  ]
}];

function approximate(number) {
  /* this is a standin, our actual approximation function is more complicated */
	return Math.floor(number / 1000) + "K"
}

function replica_role(replica) {
  return replica.configured_primary ?
    (replica.currently_primary ? "primary" : "goal.primary")
  : (replica.currently_primary ? "acting.primary" : "secondary");
}

function replica_rolename(replica) {
  return replica.configured_primary ?
    (replica.currently_primary ? "Primary replica" : "Goal primary replica")
  : (replica.currently_primary ? "Acting primary replica" : "Secondary replica");
}

function state_color(state){
  return state === "ready" ? "green" :
         state === "disconnected" ? "red" :
         "yellow";
}

function render_replica(replica) {
  return h("li.replica", [
    h("span.server-name."+state_color(replica.state), [
      h("a", {href: "#servers/"+replica.id}, [replica.server])
    ]),
    h("span.replica-role."+replica_role(replica), [
      replica_rolename(replica)
    ]),
    h("span.state."+state_color(replica.state), [replica.state]),
  ])
}

function render_shard(shard, index) {
  return h("li.shard", [
    h("div.shard-heading", [
      h("span.shard-title", ["Shard " + (index + 1)]),
      h("span.numkeys", ["~", approximate(shard.num_keys), " documents"]),
    ]),
    h("ul.replicas", shard.replicas.map(render_replica))
  ])
}

function render(shards){
  return h("div#element", [
     h("h2.section-title", "Servers used by this table"),
     h("ul.shards", shards.map(render_shard))
  ])
}

document.body.appendChild(createElement(render(shards)));

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports=function split(undef){var nativeSplit=String.prototype.split,compliantExecNpcg=/()??/.exec("")[1]===undef,self;self=function(str,separator,limit){if(Object.prototype.toString.call(separator)!=="[object RegExp]"){return nativeSplit.call(str,separator,limit)}var output=[],flags=(separator.ignoreCase?"i":"")+(separator.multiline?"m":"")+(separator.extended?"x":"")+(separator.sticky?"y":""),lastLastIndex=0,separator=new RegExp(separator.source,flags+"g"),separator2,match,lastIndex,lastLength;str+="";if(!compliantExecNpcg){separator2=new RegExp("^"+separator.source+"$(?!\\s)",flags)}limit=limit===undef?-1>>>0:limit>>>0;while(match=separator.exec(str)){lastIndex=match.index+match[0].length;if(lastIndex>lastLastIndex){output.push(str.slice(lastLastIndex,match.index));if(!compliantExecNpcg&&match.length>1){match[0].replace(separator2,function(){for(var i=1;i<arguments.length-2;i++){if(arguments[i]===undef){match[i]=undef}}})}if(match.length>1&&match.index<str.length){Array.prototype.push.apply(output,match.slice(1))}lastLength=match[0].length;lastLastIndex=lastIndex;if(output.length>=limit){break}}if(separator.lastIndex===match.index){separator.lastIndex++}}if(lastLastIndex===str.length){if(lastLength||!separator.test("")){output.push("")}}else{output.push(str.slice(lastLastIndex))}return output.length>limit?output.slice(0,limit):output};return self}()},{}],2:[function(require,module,exports){"use strict";var OneVersionConstraint=require("individual/one-version");var MY_VERSION="7";OneVersionConstraint("ev-store",MY_VERSION);var hashKey="__EV_STORE_KEY@"+MY_VERSION;module.exports=EvStore;function EvStore(elem){var hash=elem[hashKey];if(!hash){hash=elem[hashKey]={}}return hash}},{"individual/one-version":4}],3:[function(require,module,exports){(function(global){"use strict";var root=typeof window!=="undefined"?window:typeof global!=="undefined"?global:{};module.exports=Individual;function Individual(key,value){if(key in root){return root[key]}root[key]=value;return value}}).call(this,typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{}],4:[function(require,module,exports){"use strict";var Individual=require("./index.js");module.exports=OneVersion;function OneVersion(moduleName,version,defaultValue){var key="__INDIVIDUAL_ONE_VERSION_"+moduleName;var enforceKey=key+"_ENFORCE_SINGLETON";var versionValue=Individual(enforceKey,version);if(versionValue!==version){throw new Error("Can only have one copy of "+moduleName+".\n"+"You already have version "+versionValue+" installed.\n"+"This means you cannot install version "+version)}return Individual(key,defaultValue)}},{"./index.js":3}],5:[function(require,module,exports){var nativeIsArray=Array.isArray;var toString=Object.prototype.toString;module.exports=nativeIsArray||isArray;function isArray(obj){return toString.call(obj)==="[object Array]"}},{}],6:[function(require,module,exports){"use strict";var EvStore=require("ev-store");module.exports=EvHook;function EvHook(value){if(!(this instanceof EvHook)){return new EvHook(value)}this.value=value}EvHook.prototype.hook=function(node,propertyName){var es=EvStore(node);var propName=propertyName.substr(3);es[propName]=this.value};EvHook.prototype.unhook=function(node,propertyName){var es=EvStore(node);var propName=propertyName.substr(3);es[propName]=undefined}},{"ev-store":2}],7:[function(require,module,exports){"use strict";module.exports=SoftSetHook;function SoftSetHook(value){if(!(this instanceof SoftSetHook)){return new SoftSetHook(value)}this.value=value}SoftSetHook.prototype.hook=function(node,propertyName){if(node[propertyName]!==this.value){node[propertyName]=this.value}}},{}],8:[function(require,module,exports){"use strict";var isArray=require("x-is-array");var VNode=require("../vnode/vnode.js");var VText=require("../vnode/vtext.js");var isVNode=require("../vnode/is-vnode");var isVText=require("../vnode/is-vtext");var isWidget=require("../vnode/is-widget");var isHook=require("../vnode/is-vhook");var isVThunk=require("../vnode/is-thunk");var parseTag=require("./parse-tag.js");var softSetHook=require("./hooks/soft-set-hook.js");var evHook=require("./hooks/ev-hook.js");module.exports=h;function h(tagName,properties,children){var childNodes=[];var tag,props,key,namespace;if(!children&&isChildren(properties)){children=properties;props={}}props=props||properties||{};tag=parseTag(tagName,props);if(props.hasOwnProperty("key")){key=props.key;props.key=undefined}if(props.hasOwnProperty("namespace")){namespace=props.namespace;props.namespace=undefined}if(tag==="INPUT"&&!namespace&&props.hasOwnProperty("value")&&props.value!==undefined&&!isHook(props.value)){props.value=softSetHook(props.value)}transformProperties(props);if(children!==undefined&&children!==null){addChild(children,childNodes,tag,props)}return new VNode(tag,props,childNodes,key,namespace)}function addChild(c,childNodes,tag,props){if(typeof c==="string"){childNodes.push(new VText(c))}else if(isChild(c)){childNodes.push(c)}else if(isArray(c)){for(var i=0;i<c.length;i++){addChild(c[i],childNodes,tag,props)}}else if(c===null||c===undefined){return}else{throw UnexpectedVirtualElement({foreignObject:c,parentVnode:{tagName:tag,properties:props}})}}function transformProperties(props){for(var propName in props){if(props.hasOwnProperty(propName)){var value=props[propName];if(isHook(value)){continue}if(propName.substr(0,3)==="ev-"){props[propName]=evHook(value)}}}}function isChild(x){return isVNode(x)||isVText(x)||isWidget(x)||isVThunk(x)}function isChildren(x){return typeof x==="string"||isArray(x)||isChild(x)}function UnexpectedVirtualElement(data){var err=new Error;err.type="virtual-hyperscript.unexpected.virtual-element";err.message="Unexpected virtual child passed to h().\n"+"Expected a VNode / Vthunk / VWidget / string but:\n"+"got:\n"+errorString(data.foreignObject)+".\n"+"The parent vnode is:\n"+errorString(data.parentVnode);"\n"+"Suggested fix: change your `h(..., [ ... ])` callsite.";err.foreignObject=data.foreignObject;err.parentVnode=data.parentVnode;return err}function errorString(obj){try{return JSON.stringify(obj,null,"    ")}catch(e){return String(obj)}}},{"../vnode/is-thunk":10,"../vnode/is-vhook":11,"../vnode/is-vnode":12,"../vnode/is-vtext":13,"../vnode/is-widget":14,"../vnode/vnode.js":16,"../vnode/vtext.js":17,"./hooks/ev-hook.js":6,"./hooks/soft-set-hook.js":7,"./parse-tag.js":9,"x-is-array":5}],9:[function(require,module,exports){"use strict";var split=require("browser-split");var classIdSplit=/([\.#]?[a-zA-Z0-9_:-]+)/;var notClassId=/^\.|#/;module.exports=parseTag;function parseTag(tag,props){if(!tag){return"DIV"}var noId=!props.hasOwnProperty("id");var tagParts=split(tag,classIdSplit);var tagName=null;if(notClassId.test(tagParts[1])){tagName="DIV"}var classes,part,type,i;for(i=0;i<tagParts.length;i++){part=tagParts[i];if(!part){continue}type=part.charAt(0);if(!tagName){tagName=part}else if(type==="."){classes=classes||[];classes.push(part.substring(1,part.length))}else if(type==="#"&&noId){props.id=part.substring(1,part.length)}}if(classes){if(props.className){classes.push(props.className)}props.className=classes.join(" ")}return props.namespace?tagName:tagName.toUpperCase()}},{"browser-split":1}],10:[function(require,module,exports){module.exports=isThunk;function isThunk(t){return t&&t.type==="Thunk"}},{}],11:[function(require,module,exports){module.exports=isHook;function isHook(hook){return hook&&(typeof hook.hook==="function"&&!hook.hasOwnProperty("hook")||typeof hook.unhook==="function"&&!hook.hasOwnProperty("unhook"))}},{}],12:[function(require,module,exports){var version=require("./version");module.exports=isVirtualNode;function isVirtualNode(x){return x&&x.type==="VirtualNode"&&x.version===version}},{"./version":15}],13:[function(require,module,exports){var version=require("./version");module.exports=isVirtualText;function isVirtualText(x){return x&&x.type==="VirtualText"&&x.version===version}},{"./version":15}],14:[function(require,module,exports){module.exports=isWidget;function isWidget(w){return w&&w.type==="Widget"}},{}],15:[function(require,module,exports){module.exports="2"},{}],16:[function(require,module,exports){var version=require("./version");var isVNode=require("./is-vnode");var isWidget=require("./is-widget");var isThunk=require("./is-thunk");var isVHook=require("./is-vhook");module.exports=VirtualNode;var noProperties={};var noChildren=[];function VirtualNode(tagName,properties,children,key,namespace){this.tagName=tagName;this.properties=properties||noProperties;this.children=children||noChildren;this.key=key!=null?String(key):undefined;this.namespace=typeof namespace==="string"?namespace:null;var count=children&&children.length||0;var descendants=0;var hasWidgets=false;var hasThunks=false;var descendantHooks=false;var hooks;for(var propName in properties){if(properties.hasOwnProperty(propName)){var property=properties[propName];if(isVHook(property)&&property.unhook){if(!hooks){hooks={}}hooks[propName]=property}}}for(var i=0;i<count;i++){var child=children[i];if(isVNode(child)){descendants+=child.count||0;if(!hasWidgets&&child.hasWidgets){hasWidgets=true}if(!hasThunks&&child.hasThunks){hasThunks=true}if(!descendantHooks&&(child.hooks||child.descendantHooks)){descendantHooks=true}}else if(!hasWidgets&&isWidget(child)){if(typeof child.destroy==="function"){hasWidgets=true}}else if(!hasThunks&&isThunk(child)){hasThunks=true}}this.count=count+descendants;this.hasWidgets=hasWidgets;this.hasThunks=hasThunks;this.hooks=hooks;this.descendantHooks=descendantHooks}VirtualNode.prototype.version=version;VirtualNode.prototype.type="VirtualNode"},{"./is-thunk":10,"./is-vhook":11,"./is-vnode":12,"./is-widget":14,"./version":15}],17:[function(require,module,exports){var version=require("./version");module.exports=VirtualText;function VirtualText(text){this.text=String(text)}VirtualText.prototype.version=version;VirtualText.prototype.type="VirtualText"},{"./version":15}],"virtual-dom/h":[function(require,module,exports){var h=require("./virtual-hyperscript/index.js");module.exports=h},{"./virtual-hyperscript/index.js":8}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){},{}],2:[function(require,module,exports){(function(global){var topLevel=typeof global!=="undefined"?global:typeof window!=="undefined"?window:{};var minDoc=require("min-document");if(typeof document!=="undefined"){module.exports=document}else{var doccy=topLevel["__GLOBAL_DOCUMENT_CACHE@4"];if(!doccy){doccy=topLevel["__GLOBAL_DOCUMENT_CACHE@4"]=minDoc}module.exports=doccy}}).call(this,typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{"min-document":1}],3:[function(require,module,exports){"use strict";module.exports=function isObject(x){return typeof x==="object"&&x!==null}},{}],4:[function(require,module,exports){var isObject=require("is-object");var isHook=require("../vnode/is-vhook.js");module.exports=applyProperties;function applyProperties(node,props,previous){for(var propName in props){var propValue=props[propName];if(propValue===undefined){removeProperty(node,propName,propValue,previous)}else if(isHook(propValue)){removeProperty(node,propName,propValue,previous);if(propValue.hook){propValue.hook(node,propName,previous?previous[propName]:undefined)}}else{if(isObject(propValue)){patchObject(node,props,previous,propName,propValue)}else{node[propName]=propValue}}}}function removeProperty(node,propName,propValue,previous){if(previous){var previousValue=previous[propName];if(!isHook(previousValue)){if(propName==="attributes"){for(var attrName in previousValue){node.removeAttribute(attrName)}}else if(propName==="style"){for(var i in previousValue){node.style[i]=""}}else if(typeof previousValue==="string"){node[propName]=""}else{node[propName]=null}}else if(previousValue.unhook){previousValue.unhook(node,propName,propValue)}}}function patchObject(node,props,previous,propName,propValue){var previousValue=previous?previous[propName]:undefined;if(propName==="attributes"){for(var attrName in propValue){var attrValue=propValue[attrName];if(attrValue===undefined){node.removeAttribute(attrName)}else{node.setAttribute(attrName,attrValue)}}return}if(previousValue&&isObject(previousValue)&&getPrototype(previousValue)!==getPrototype(propValue)){node[propName]=propValue;return}if(!isObject(node[propName])){node[propName]={}}var replacer=propName==="style"?"":undefined;for(var k in propValue){var value=propValue[k];node[propName][k]=value===undefined?replacer:value}}function getPrototype(value){if(Object.getPrototypeOf){return Object.getPrototypeOf(value)}else if(value.__proto__){return value.__proto__}else if(value.constructor){return value.constructor.prototype}}},{"../vnode/is-vhook.js":8,"is-object":3}],5:[function(require,module,exports){var document=require("global/document");var applyProperties=require("./apply-properties");var isVNode=require("../vnode/is-vnode.js");var isVText=require("../vnode/is-vtext.js");var isWidget=require("../vnode/is-widget.js");var handleThunk=require("../vnode/handle-thunk.js");module.exports=createElement;function createElement(vnode,opts){var doc=opts?opts.document||document:document;var warn=opts?opts.warn:null;vnode=handleThunk(vnode).a;if(isWidget(vnode)){return vnode.init()}else if(isVText(vnode)){return doc.createTextNode(vnode.text)}else if(!isVNode(vnode)){if(warn){warn("Item is not a valid virtual dom node",vnode)}return null}var node=vnode.namespace===null?doc.createElement(vnode.tagName):doc.createElementNS(vnode.namespace,vnode.tagName);var props=vnode.properties;applyProperties(node,props);var children=vnode.children;for(var i=0;i<children.length;i++){var childNode=createElement(children[i],opts);if(childNode){node.appendChild(childNode)}}return node}},{"../vnode/handle-thunk.js":6,"../vnode/is-vnode.js":9,"../vnode/is-vtext.js":10,"../vnode/is-widget.js":11,"./apply-properties":4,"global/document":2}],6:[function(require,module,exports){var isVNode=require("./is-vnode");var isVText=require("./is-vtext");var isWidget=require("./is-widget");var isThunk=require("./is-thunk");module.exports=handleThunk;function handleThunk(a,b){var renderedA=a;var renderedB=b;if(isThunk(b)){renderedB=renderThunk(b,a)}if(isThunk(a)){renderedA=renderThunk(a,null)}return{a:renderedA,b:renderedB}}function renderThunk(thunk,previous){var renderedThunk=thunk.vnode;if(!renderedThunk){renderedThunk=thunk.vnode=thunk.render(previous)}if(!(isVNode(renderedThunk)||isVText(renderedThunk)||isWidget(renderedThunk))){throw new Error("thunk did not return a valid node")}return renderedThunk}},{"./is-thunk":7,"./is-vnode":9,"./is-vtext":10,"./is-widget":11}],7:[function(require,module,exports){module.exports=isThunk;function isThunk(t){return t&&t.type==="Thunk"}},{}],8:[function(require,module,exports){module.exports=isHook;function isHook(hook){return hook&&(typeof hook.hook==="function"&&!hook.hasOwnProperty("hook")||typeof hook.unhook==="function"&&!hook.hasOwnProperty("unhook"))}},{}],9:[function(require,module,exports){var version=require("./version");module.exports=isVirtualNode;function isVirtualNode(x){return x&&x.type==="VirtualNode"&&x.version===version}},{"./version":12}],10:[function(require,module,exports){var version=require("./version");module.exports=isVirtualText;function isVirtualText(x){return x&&x.type==="VirtualText"&&x.version===version}},{"./version":12}],11:[function(require,module,exports){module.exports=isWidget;function isWidget(w){return w&&w.type==="Widget"}},{}],12:[function(require,module,exports){module.exports="2"},{}],"virtual-dom/create-element":[function(require,module,exports){var createElement=require("./vdom/create-element.js");module.exports=createElement},{"./vdom/create-element.js":5}]},{},[]);var h=require("virtual-dom/h"),createElement=require("virtual-dom/create-element");var shards=[{num_keys:"224123",replicas:[{configured_primary:false,currently_primary:true,id:"8a25d0c4-9d04-4596-8101-7574be54ba67",server:"batman",state:"ready"},{configured_primary:true,currently_primary:false,id:"a3615c9e-b5ee-445b-86fc-91891e0064de",server:"taste",state:"disconnected"},{configured_primary:false,currently_primary:true,id:"a41f2e6a-4d32-4470-a0dc-b68355f5c255",server:"africa",state:"ready"}]},{num_keys:"242312",replicas:[{configured_primary:true,currently_primary:true,id:"8a25d0c4-9d04-4596-8101-7574be54ba67",server:"thursday",state:"ready"},{configured_primary:false,currently_primary:false,id:"a3615c9e-b5ee-445b-86fc-91891e0064de",server:"alcatraz",state:"ready"},{configured_primary:false,currently_primary:false,id:"a41f2e6a-4d32-4470-a0dc-b68355f5c255",server:"gas-cap",state:"transitioning"}]}];function approximate(number){return Math.floor(number/1e3)+"K"}function replica_role(replica){return replica.configured_primary?replica.currently_primary?"primary":"goal.primary":replica.currently_primary?"acting.primary":"secondary"}function replica_rolename(replica){return replica.configured_primary?replica.currently_primary?"Primary replica":"Goal primary replica":replica.currently_primary?"Acting primary replica":"Secondary replica"}function state_color(state){return state==="ready"?"green":state==="disconnected"?"red":"yellow"}function render_replica(replica){return h("li.replica",[h("span.server-name."+state_color(replica.state),[h("a",{href:"#servers/"+replica.id},[replica.server])]),h("span.replica-role."+replica_role(replica),[replica_rolename(replica)]),h("span.state."+state_color(replica.state),[replica.state])])}function render_shard(shard,index){return h("li.shard",[h("div.shard-heading",[h("span.shard-title",["Shard "+(index+1)]),h("span.numkeys",["~",approximate(shard.num_keys)," documents"])]),h("ul.replicas",shard.replicas.map(render_replica))])}function render(shards){return h("div#element",[h("h2.section-title","Servers used by this table"),h("ul.shards",shards.map(render_shard))])}document.body.appendChild(createElement(render(shards)));

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "virtual-dom": "2.0.1"
  }
}

page-body.html

<div></div>

page-head.html

<!-- contents of this file will be placed inside the <head> -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Copse' rel='stylesheet' type='text/css'>
<style type="text/less">
  @text-color: #5c6169;
  @highlight-color: #f7ae41;
  @background-color: #fbfbfb;
  @body-color: #ededed;
  @container-border-color: #cfcfcf;
  @shard-title-color: #5c6169;
  @section-title-color: #a3a3a3;
  @section-title-bottom-color: #f0f0f0;
  @link-hover-color: #005580;
  @link-color: #08C;
  @shadow-color1: rgba(0, 0, 0, 0.04);
  @shadow-color2: rgba(0, 0, 0, 0.05);
  @sans: "Open Sans";
  @serif: "Copse";
  @role-width: 205px;
  @state-width: 100px;
  @github-raw: "https://raw.githubusercontent.com/rethinkdb/rethinkdb/next/admin/static/";
  @square-bullet: url("@{github-raw}images/list-square-bullet.png");
  @horiz-dash: url("@{github-raw}images/list-horiz-dash.png");
  @vert-dash: url("@{github-raw}images/list-vert-dash.png");
  @layers-icon: "@{github-raw}images/layers-icon.png";
  @bars-icon: "@{github-raw}images/bars-icon_server-assignments.png";
  @grid-icon: "@{github-raw}images/grid-icon.png";
  @green-light-glow: "@{github-raw}images/green-light_glow.png";
  @red-light-glow: "@{github-raw}images/red-light_glow.png";
  @yellow-light-glow: "@{github-raw}images/yellow-light_glow.png";
  @icon-size: 16px;
  body {
    background-color: @body-color;
  }
  div#element {
    font-family: @sans;
    color: @text-color;
    background-color: @background-color;
    border-radius: 4px;
    border: 1px solid @container-border-color;
    box-shadow: 0px 2px 1px @shadow-color1,
                0px -1px 2px @shadow-color2
                inset;
    background-clip: padding-box;
    margin: 10px;
    padding: 20px 20px 10px 25px;
    .section-title {
      font-family: @serif;
      color: @section-title-color;
      font-size: 20px;
      border-bottom: thin solid @section-title-bottom-color;
      padding-bottom: 15px;
      margin-top: 0px;
    }
  }
  ul.shards {
    padding: 0px 5px 0px 10px;
    list-style: none;
    position: relative;
    li.shard:before {
      content: "";
      display: block;
      position: absolute;
      top: 7.5px;
      bottom: 19px;
      width: 7px;
      left: -8px;
      background-image: @square-bullet, @vert-dash;
      background-position: left top, 2.5px center;
      background-repeat: no-repeat, repeat-y;
    }
  }
  div.shard-heading {
    display: flex;
    flex-direction: row;
    justify-content: flex-begin;
    align-items: flex-end;
    position: relative;
    span.numkeys {
      margin-left: 30px;
      position: relative;
      .icon-before(@bars-icon, 16px);
    }
  }
  span.shard-title {
    font-size: 16px;
    word-wrap: break-word;
    white-space: nowrap;
    color: @shard-title-color;
  }
  ul.replicas {
    padding-left: 5px;
    color: @text-color;
    margin-bottom: 10px;
  }
  .icon-before(@image, @size) {
    	background-image: url(@image);
      background-position: 0 50%;
      background-repeat: no-repeat;
      padding-left: @size + 10px;
  }
  .icon-after(@image, @size) {
    	background-image: url(@image);
      background-position: 100% 50%;
      background-repeat: no-repeat;
      padding-right: @size + 10px;
  }
  li.replica {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 7px 0px;
    font-size: 14px;
    span.replica-role {
      width: @role-width;
      position: relative;
      &.primary {
        .icon-before(@layers-icon, @icon-size);
        font-weight: bold;
        &.goal {
          font-weight: normal;
          .icon-before(@grid-icon, @icon-size);
        }
      }
      &.secondary {
        .icon-before(@grid-icon, @icon-size);
      }
    }
    .server-name {
      display: flex;
      justify-content: space-between;
      margin-left: 10px;
      width: 35%;
      position: relative;
      a {
        color: @link-color;
        text-decoration: none;
        &:hover {
          color: @link-hover-color;
          text-decoration: underline;
        }
        &:before {
          content: "";
          display: block;
          width: 22px;
          position: absolute;
          top: 0;
          bottom: 0px;
          left:-30px;
          background-image: @square-bullet, @horiz-dash;
          background-position: right center, 2.5px center;
          background-repeat: no-repeat, repeat-x;
        }
      }
    }
    .state {
      margin-left: 10px;
      text-align: right;
      width: @state-width;
      &.yellow {
        .icon-after(@yellow-light-glow, @icon-size);
      }
      &.red {
        .icon-after(@red-light-glow, @icon-size);
      }
      &.green {
        .icon-after(@green-light-glow, @icon-size);
      }
    }
  }
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>

requirebin.md

made with requirebin