Server Monitor Component
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 nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></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> ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // 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"></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!