Demos Back to Demos

Server Monitor Component

2 of 25

Actively monitor reactive data and display changes in cells based on the cell value.

Result HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  	<link href="https://fonts.googleapis.com/css?family=Chakra+Petch:400,400i,700,700i" rel="stylesheet">
  </head>
  <body>
    <zing-grid 
      id="zgRef" 
      src="https://zinggrid-examples.firebaseio.com/server-monitor-component" 
      caption="<i class='fas fa-server'></i> Server Monitor" 
      pager 
      page-size="5" 
      page-size-options="5,10" 
      sort
      viewport-stop>
			<zg-colgroup>
        <zg-column index="url">
          <template>
        		[[index.url.0.urlMainText]] <em class="details">[[index.url.0.urlDetailText]]</em>
          </template>
        </zg-column>
        <zg-column index="port"></zg-column>
        <zg-column index="interval"></zg-column>
        <zg-column index="location" renderer="renderLocation"></zg-column>
        <zg-column index="lastMonitor"></zg-column>
        <zg-column index="monitorStatus" renderer="renderMonitorStatus"></zg-column>
        <zg-column index="status" renderer="renderStatus"></zg-column>
      </zg-colgroup>
    </zing-grid>
  </body>
</html>

CSS

body {
  padding: 50px;
  font-family: sans-serif;
  font-family: 'Chakra Petch', sans-serif;
  background: #141E30;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


  color: white;
}

zing-grid {
  max-width: 1000px;
  margin: 30px auto 0 auto;
  font-size: 14px;			
  font-family: 'Chakra Petch', sans-serif;
  background: #141618;
  color: #c7e5fa;
  border-color: #003450;
  --theme-color-primary: #005481;
  --zg-head-cell-background_sorted: #003450;
  --zg-cell-background_sorted: #1b252d;
  --zg-select-arrow-color: #ffffff;
  --zg-head-cell-icon-color_sorted: #ffffff;
  --zg-select-background: #021b2a;
  --zg-select-text-background: #021b2a;
  --zg-select-color: white;
}

zg-caption {
  background: #000f17;
  font-size: 25px;
}

zg-caption i {
  max-width: 15px;
  margin-right: 15px;
}

zg-head {
  border-color: #003450;
}

zg-head-cell {
  background: #021b2a;
  color: #005481;
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
}	

zg-head-cell_sorted zg-icon {
  max-width: 15px;
  color: #ffffff;
}

zg-column[index="url"] {
  background: #000f17; 
  width: 25%;
}	

zg-row {
  border-color: #003450;
}

.details {
  font-size: 11px;
  color: #cccccc;
}

zg-pager,
zg-watermark {
  background: #021b2a;
  color: white;
  border-color: #003450;
}

.up {
  color: #63E385;
  font-weight: bold;
}

.down {
  color: #FF5864;
  font-weight: bold;
}

JS

// Store vars
var emojis = null;

// Define Renderers

// 'Location' column renderers
function renderLocation(location, $cell) {
  const emoji = renderEmojis(location[0].countryFlag, $cell);
  return `${location[0].city} ${emoji}`;
}
// Render emojis on load
function renderEmojis (shortcode, cellRef, $cell) {
  let returnText = shortcode;
  if (emojis) {
    for (let emoji in emojis) {
      if (shortcode === emojis[emoji].shortname) {
        returnText = emojis[emoji].emoji;
        cellRef.children[0].classList.add('loaded');
        break;
      }
    }
  }
  return returnText;
}

// 'Monitor Status' column renderer
function renderMonitorStatus(value) {
  return createContent(value, ['Not Listed','Up']);
}

// 'Status' column renderer
function renderStatus(value) {
  return createContent(value, ['Active']);
}

// Helper Method
function createContent(value, match) {
	const isMatch = match.indexOf(value) > -1;
  const classType = isMatch ? 'fa-caret-up' : 'fa-caret-down';
  const valType = isMatch ? 'up' : 'down';
  return ` ${value}`;
}

// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content
  
  // get reference to grid
  const zgRef = document.querySelector('zing-grid');
  // fetch emojis
  zgRef.executeOnLoad(function() {
    const endpoint = 'https://gist.githubusercontent.com/oliveratgithub/0bf11a9aff0d6da7b46f1490f86a71eb/raw/ac8dde8a374066bcbcf44a8296fc0522c7392244/emojis.json';
    fetch(endpoint)
      .then(r => r.json())
      .then(r => {
        emojis = r.emojis;
        // Refresh the grid with the new emojis
        if (zgRef) zgRef.refresh();
      });
  });
});

Interested in this demo? Modify it to your needs in the ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio