Status Card

by Dhanck

HTML

<div class="row">
  <div class=" col-md-3">
    <div class="panel panel-default error">
      <div class="panel-body">
        <span class="glyphicon glyphicon-cog card-bg"></span>
        <div class="card-icon-display">
          <span class="">stopped</span>
          <span class="glyphicon glyphicon-remove"></span>
        </div>
        <div class="in-card">
          <span class="title">Master</span>
          <span class="">VRS Build: 418-Nightlyt</span>
          <span class="">VRS Build Timestamp: 28/03/2016 21:24</span>
        </div>
      </div>
      <div class="panel-footer">
        <span class="card-name bold">VRS Core System</span>
        <span class="card-name">VRS Version: <span class="bold">4.0.0</span>

        <div class="btn-group dropup pull-right">
          <button type="button" class="btn btn-default btn-sm" title="Add">log</button>
          <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> <span class="caret"></span></button>
          <ul class="dropdown-menu" role="menu">
            <li>
              <div>More logs...</div>
            </li>
            <li>
              <div>More logs...</div>
            </li>
          </ul>
        </div>
        </span>
      </div>
    </div>
  </div>



  <div class=" col-md-3">
    <div class="panel panel-default ok">
      <div class="panel-body">
        <span class="glyphicon glyphicon-cog card-bg"></span>
        <div class="card-icon-display">
          <span class="">running</span>
          <span class="glyphicon glyphicon-ok"></span>
        </div>
        <div class="in-card">
          <span class="title">Master</span>
          <span class="info"> </span>
          <span class="info"> </span>
        </div>
      </div>
      <div class="panel-footer">
        <span class="card-name bold">VRS Databaset</span>
        <span class="card-name"><span class="">Mock status message</span>
        <span class="btn...

CSS

body {
  margin: 20px;
}

.warning {
  background-color: #fb7a24;
}

.ok {
  background-color: #4F9E38;
}

.error {
  background-color: #c42033;
}

.warning span,
.ok span,
.error span {
  vertical-align: middle;
}

.card-bg {
  font-size: 100px;
  color: rgba(255, 255, 255, 0.3);
  position: absolute;
  top: 15px;
}

.card-icon-display {
  margin-left: 60px;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  float: right;
  font-family: century gothic;
}

.card-icon-display .glyphicon {
  font-size: 30px;
  margin: 5px;
}

.card-name {
  font-family: century gothic;
  color: #333;
  display: block;
}

.in-card {
  color: #fff;
}

.in-card span {
  display: block;
  font-size: 11px;
  font-family: century gothic;
}

.in-card .title {
  font-size: 24px;
  font-weight: bold;
  font-family: century gothic;
}

.in-card .info {
  height: 15px;
}

.btn {
  margin-top: -15px;
}

.bold {
  font-weight: bold;
}

.dropup,
.dropdown {
  position: relative;
}
.dropdown-menu>li>div{
      padding-left:10px;
}
.dropdown-menu>li>div:hover, .dropdown-menu>li>div:focus {
    color: #fff;
    text-decoration: none;
    background-color: #428bca;

}

JavaScript

Type(VRS, RG, WF, database etc)
Name(display name)
Optional tenancy(some clients like RG and WF are configured by tenancy)
Top level status(starting, running, stopping, stopped)
Attributes / properties(collection of name - value pairs specific to each sub - system)
Log entries(collection of String values)