pm2-web
Version:
A web based monitor for PM2
104 lines • 5.01 kB
HTML
<h1>PM2 Process Monitor</h1>
<ul class="nav nav-tabs" ng-controller="HostListController" ng-hide="tabs.length == 1">
<li ng-repeat="tab in tabs" ng-class="{active: tab.selected}">
<a ng-click="changeHost(tab.title)" data-toggle="tab">{{tab.title}}</a>
</li>
</ul>
<section class="system" ng-controller="SystemController">
<h2>{{hostData.system.hostname}}</h2>
<alert ng-hide={{hostData.pm2.compatible}} class="alert-error" type="error">The version of pm2 running on {{hostData.system.hostname}} is incompatible with pm2-web {{pm2WebVersion}} - please upgrade pm2 to {{pm2VersionRequired}} or higher.</alert>
<table class="table" ng-show={{hostData.pm2.compatible}}>
<thead>
<tr>
<th>Processes</th>
<th>CPUs</th>
<th>Load</th>
<th>Uptime</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{hostData.processes.length}}</td>
<td>{{hostData.system.cpu_count}}</td>
<td><span ng-repeat="load in hostData.system.load track by $index">{{load | decimalPlaces:2}}</span></td>
<td>{{hostData.system.uptime | humanise}}</td>
</tr>
</tbody>
</table>
<figure id="memory" ng-show={{hostData.pm2.compatible}}>
<figcaption>Memory ({{hostData.system.memory.total | memory}} total)</figcaption>
<div style="width: {{(hostData.system.memory.free / hostData.system.memory.total) * 100}}%">{{hostData.system.memory.free | memory}} Free</div><div style="width: {{100 - ((hostData.system.memory.free / hostData.system.memory.total) * 100)}}%">{{hostData.system.memory.used | memory}} Used</div>
</figure>
</section>
<section class="processes" ng-controller="ProcessListController" ng-show={{hostData.pm2.compatible}}>
<h2>Processes</h2>
<p class="noprocesses" ng-show="processes.length == 0">There are no processes running.</p>
<article ng-repeat="process in processes">
<ul class="information" ng-class="{'reloading': process.reloading, 'erroring': process.throwing}">
<li class="pid">
<h3>PID</h3>
<p ng-click="toggleDetails(process.id)">{{process.pid}}</p>
</li>
<li class="script">
<h3>Name</h3>
<p ng-click="toggleDetails(process.id)">{{process.name}}</p>
</li>
<li class="restarts">
<h3>Restarts</h3>
<p ng-click="toggleDetails(process.id)">{{process.restarts}}</p>
</li>
<li class="uptime">
<h3>Uptime</h3>
<p ng-hide="process.status == 'online'" ng-click="toggleDetails(process.id)">N/A</p>
<p ng-show="process.status == 'online'" ng-click="toggleDetails(process.id)">{{process.uptime | humanise}}</p>
</li>
<li class="status {{process.status}}">
<h3>Status</h3>
<p ng-click="toggleDetails(process.id)">
<i title="Online" ng-show="process.status == 'online'" class="icon-ok-circle {{process.status}}"></i>
<i title="Stopping" ng-show="process.status == 'stopping'" class="icon-ban-circle {{process.status}}"></i>
<i title="Stopped" ng-show="process.status == 'stopped'" class="icon-ban-circle {{process.status}}"></i>
<i title="Error!" ng-show="process.status == 'errored'" class="icon-exclamation-sign {{process.status}}"></i>
<i title="Launching" ng-show="process.status == 'launching'" class="icon-repeat {{process.status}}"></i>
</p>
</li>
<li class="cpu">
<h3>CPU</h3>
<p ng-click="toggleDetails(process.id)">{{process.cpu | decimalPlaces:2}}%</p>
</li>
<li class="memory">
<h3>Memory</h3>
<p ng-click="toggleDetails(process.id)">{{process.memory | memory}}</p>
</li>
<li class="actions">
<h3>Actions</h3>
<p ng-click="toggleDetails(process.id)">
<a class="icon-play" title="Start process" ng-hide="process.status == 'online'" ng-click="start(process.id, $event)"></a>
<a class="icon-remove" title="Stop process" ng-hide="process.status != 'online'" ng-click="stop(process.id, $event)"></a>
<a class="icon-refresh" title="Restart process" ng-hide="process.status != 'online'" ng-click="restart(process.id, $event)"></a>
<a class="icon-repeat" title="Reload process" ng-hide="process.status != 'online'" ng-click="reload(process, $event)" ng-show="process.mode == 'cluster'"></a>
<a class="icon-bug" title="Debug process" ng-show="debugEnabled && process.status == 'online'" ng-click="debug(process, $event)"></a>
</p>
</li>
</ul>
<div class="details" ng-show="showDetails[process.id]">
<h3>Executable</h3>
<p title="{{process.script}}" class="executable">{{process.script}}</p>
<h3>Resources</h3>
<dl class="legend">
<dt class="cpu">CPU</dt>
<dd>CPU</dd>
<dt class="memory">Memory</dt>
<dd>Memory</dd>
</dl>
<figure resourceusage data="process.usage" style="display: block; width: 100%; height: 300px; margin: 10px 0 30px 0"></figure>
<h3>Logs</h3>
<!-- <div class="btn-group">
<button ng-click="clearLogs(process)" class="btn btn-default btn-sm">Clear</button>
</div> -->
<ul scrollglue>
<li ng-repeat="log in process.logs" class="{{log.type}}" ng-bind-html="log.data | ansiToHtml" />
</ul>
</div>
</article>
</section>