Server Monitor Component

86 of 122

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

Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<htmln class="zg-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">
    <style>
      .zg-body {
        padding: 50px;
        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;
        opacity: 1;
        --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-option-list-color: #021b2a;
        --zg-select-background: #021b2a;
        --zg-select-text-background: #021b2a;
        --zg-select-color: white;
      }

      zing-grid.loading {
        opacity: 0;
        transition: opacity .3s ease-out;
      }

      zing-grid.loading * {
        opacity: 0;
      }

      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;
      }

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

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

      zing-grid[loading] {
        height: 428px;
      }
    </style>
  </head>

  <body class="zg-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 class="loading">
      <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>
    <script>
      // 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 `<i class="fas ${classType} ${valType}"></i> <span class="${valType}">${value}</span>`;
      }

      // window:load 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();
            });
        });
      });

      // Custom loading class for CSS handling
      const zgLoaded = document.querySelector('zing-grid');
      zgLoaded.addEventListener('grid:ready', () => {
        setTimeout(() => zgLoaded.classList.remove('loading'), 0);
      });
    </script>
  </body>

  </html>
<!DOCTYPE html>
<htmln class="zg-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 class="zg-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
      class="loading"
    >
			<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>
.zg-body {
  padding: 50px;
  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;
  opacity: 1;
  --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-option-list-color: #021b2a;
  --zg-select-background: #021b2a;
  --zg-select-text-background: #021b2a;
  --zg-select-color: white;
}
zing-grid.loading { opacity:0; transition:opacity .3s ease-out; }
zing-grid.loading * { opacity:0; }

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;
}

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

.zg-body .down {
  color: #FF5864;
  font-weight: bold;
}
// 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 `<i class="fas ${classType} ${valType}"></i> <span class="${valType}">${value}</span>`;
}

// window:load 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();
      });
  });
});

// Custom loading class for CSS handling
const zgLoaded = document.querySelector('zing-grid');
zgLoaded.addEventListener('grid:ready', () => {
  setTimeout(() => zgLoaded.classList.remove('loading'), 0);
});

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

Edit in Studio

Demo Gallery