결과 화면 (xpressengine 게시판 링크)

phantomjs 사용기 정리

Posted on by Daniel J.


요약 :

phantomjs  를 사용하여 grafana 그래프를 화면 캡쳐하여 -> 운영중인 팀내 이슈 게시판에 하루에 한번 화면 업데이트

iframe이나 hyperlink 등  다른 방법 써도 되긴하나, 인증 문제등 귀찬아서

phantomjs를 잘 응용하면 웹 해킹등 보안 이슈에 대해서도 모니터링 할수있음 (웹페이지 변조등)

반대로 악의적인 목적으로 사용할수도 있음.

render.js <– – 수정 필요.

(function()
{  ‘use strict’;
  var page = require(‘webpage’).create(); 
var args = require(‘system’).args; 
var params = {}; 
var regexp = /^([^=]+)=([^$]+)/;

args.forEach(function(arg) {
var parts = arg.match(regexp);
if (!parts) { return; }
params[parts[1]] = parts[2];
});

page.customHeaders = { “Authorization”: “Bearer eyJrIjoiTjVXTktkcHlGSEF2aHl6bmR1aHBrcTBEdW………………….” };

  var usage = “url=<url> png=<filename> width=<width> height=<height> renderKey=<key>”;

if (!params.url || !params.png ||  !params.renderKey || !params.domain){
console.log(usage);   
phantom.exit();
}
 
phantom.addCookie({   
‘name’: ‘renderKey’,   
‘value’: params.renderKey,   
‘domain’: params.domain, 
});

page.viewportSize = {
width: params.width || ‘800’,
height: params.height || ‘400’
};

  var tries = 0;

  page.open(params.url, function (status) { 
console.log(‘Loading a web page: ‘ + params.url + ‘ status: ‘ + status);

page.onError = function(msg, trace) {
var msgStack = [‘ERROR: ‘ + msg];
if (trace && trace.length) {
msgStack.push(‘TRACE:’);
trace.forEach(function(t) { 
msgStack.push(‘ -> ‘ + t.file + ‘: ‘ + t.line + (t.function ? ‘ (in function “‘ + t.function +'”)’ : ”));
});
} 
console.error(msgStack.join(‘\n’));
};
    function checkIsReady() {
var panelsRendered = page.evaluate(function() {
if (!window.angular) { return false; }
var body = window.angular.element(document.body);
if (!body.injector) { return false; } 
if (!body.injector()) { return false; }
 
var rootScope = body.injector().get(‘$rootScope’);
if (!rootScope) {return false;} 
var panels = angular.element(‘div.panel:visible’).length;
return rootScope.panelsRendered >= panels;
});
      if (panelsRendered || tries === 1000) {
var bb = page.evaluate(function () {
return document.getElementsByClassName(“main-view”)[0].getBoundingClientRect(); 
});
        page.clipRect = {
top:    bb.top,
left:   bb.left, 
width:  bb.width, 
height: bb.height
};
        page.render(params.png); 
phantom.exit();
} 
else { 
tries++; 
setTimeout(checkIsReady, 10);
} 
}
    setTimeout(checkIsReady, 200);  });})();
 #!/bin/bash 

DAY=`date +%y%m%d`

DIR1=”/root/…/grafana-graph-capture”
DIR2=”/usr/local/xe/reports/grafana-image”

rm -f $DIR2/*

 storage_bar_url=”http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?theme=light&panelId=1″
cluster_bar_url=”http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?theme=light&panelId=4″
 storage_pie_url=”http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?theme=light&panelId=2″
cluster_pie_url=”http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?theme=light&panelId=5″
 storage_table_url=”http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?theme=light&panelId=7″
cluster_table_url=”http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?theme=light&panelId=8″
 product_bar_url=”http://x.x.x.x:xx/dashboard-solo/db/public-vm-summary?theme=light&panelId=41″
product_pie_url=”http://x.x.x.x:xx/dashboard-solo/db/public-vm-summary?theme=light&panelId=42″
 storage_cpu_url=”http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?panelId=10&theme=light”
storage_iops_url=”http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?panelId=11&theme=light”
storage_latency_url=”http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?panelId=12&theme=light”
  renderKey=”eyJrIjoiTjVXTktkcHlGSEF2aHl6bmR1aHBrcTBEdW1uTkJmZHgiLCJuIjoidXNlxxxxxxxxxxxxxxxxx”  width=800  height=450

#### bar
###$DIR1/phantomjs –ignore-ssl-errors=true $DIR1/render.js url=${storage_bar_url} png=$DIR2/storage-bar.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey
$DIR1/phantomjs –ignore-ssl-errors=true $DIR1/render.js url=${cluster_bar_url} png=$DIR2/cluster-bar.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey

#### pie ###
$DIR1/phantomjs –ignore-ssl-errors=true $DIR1/render.js url=${storage_pie_url} png=$DIR2/storage-pie.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey
$DIR1/phantomjs –ignore-ssl-errors=true $DIR1/render.js url=${cluster_pie_url} png=$DIR2/cluster-pie.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey
sleep 1

#### table ###
$DIR1/phantomjs –ignore-ssl-errors=true $DIR1/render.js url=${storage_table_url} png=$DIR2/storage-table.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey

$DIR1/phantomjs –ignore-ssl-errors=true $DIR1/render.js url=${cluster_table_url} png=$DIR2/cluster-table.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey

#### product  ###
$DIR1/phantomjs –ignore-ssl-errors=true $DIR1/render.js url=${product_bar_url} png=$DIR2/product-bar.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey

$DIR1/phantomjs –ignore-ssl-errors=true $DIR1/render.js url=${product_pie_url} png=$DIR2/product-pie.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey
sleep 1

#### storage  ###
$DIR1/phantomjs –ignore-ssl-errors=true $DIR1/render.js url=${storage_cpu_url} png=$DIR2/storage-cpu.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey

$DIR1/phantomjs –ignore-ssl-errors=true $DIR1/render.js url=${storage_iops_url} png=$DIR2/storage-iops.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey

$DIR1/phantomjs –ignore-ssl-errors=true $DIR1/render.js url=${storage_latency_url} png=$DIR2/storage-latency.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey

결과 화면 (xpressengine 게시판 링크) 

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다