<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>M/Monit Reports | Analytics</title>
    <meta name="theme-color" content="#3D3E40">
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="M/Monit" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <link rel="apple-touch-icon" href="../../img/apple-touch-icon.png"/>
    <link rel="manifest" href="../../img/manifest.webmanifest">
    <script src="../../lib/js/appearance.js"></script>
    <link rel="stylesheet" href="../../lib/css/styles.css?version=430">
    <link href="../../assets/reports/charts.css?version=430" media="screen" rel="Stylesheet">
</head>
<body>
    <?cs include:"img/icons.svg" ?>
    <div id="wrap">
        <div id="fixed-header">
            <div id="fake-status-bar"></div>
            <div id="header">
                <div id="nav">
                    <a id="logo" target="webapp" href="../../"></a>
                    <a id="logout" title="Logout" target="webapp" href="../../login/logout.csp"></a>
                    <ul id="menu">
                        <li>
                            <a target="webapp" href="../../index.csp">Dashboard</a>
                        </li>
                        <li>
                            <a target="webapp" href="../../status/hosts/">Status</a>
                        </li>
                        <li class="active">
                            <a target="webapp" href="../../reports/analytics/">Reports</a>
                            <ul>
                                <li><a target="webapp" href="../../reports/analytics/">Analytics</a></li>
                                <li><a target="webapp" href="../../reports/uptime/">Uptime</a></li>
                                <li><a target="webapp" href="../../reports/events/">Events</a></li>
                            </ul>
                        </li>
                        <li>
                            <?cs if:#Request.Param.IsAdmin ?>
                            <a target="webapp" href="../../admin/general/">Admin</a>
                            <ul>
                                <li><a target="webapp" href="../../admin/general/">General</a></li>
                                <li><a target="webapp" href="../../admin/hosts/">Hosts</a></li>
                                <li><a target="webapp" href="../../admin/groups/">Groups</a></li>
                                <li><a target="webapp" href="../../admin/users/">Users</a></li>
                                <li><a target="webapp" href="../../admin/roles/">Roles</a></li>
                                <li><a target="webapp" href="../../admin/alerts/">Alerts</a></li>
                                <li><a target="webapp" href="../../admin/settings/">Settings</a></li>
                            </ul>
                            <?cs else ?>
                            <a target="webapp" href="../../admin/users/edit?id=<?cs var:Request.Param.RemoteUserId ?>"><span>Profile</span></a>
                            <?cs /if ?>
                        </li>
                        <li id="logout-phone"><a target="webapp" href="../../login/logout.csp">Logout</a></li>
                    </ul>
                </div> <!-- nav -->
            </div><!-- header -->
        </div><!-- fixed-header -->
        <div id="main" style="display:none;" data-bind="visible: true">
            <div id="title">
                <a href="#" id="help" class="help-button" title="Help" data-help="#helpbox"></a>
                <h1>
                    Analytics
                </h1>
            </div>
            <div class="row-fluid">
                <div class="span12" id="query">
                    <div class="menutable">
                        <div class="menucontrols">
                            <span class="description">Show</span>
                            <!-- chart types menu -->
                            <div class="charttype tableViewMenu">
                                <button class="btn btn-block btn-menucharts" data-bind="css: {'btn-link': ! isPhone()}, style: {'max-width': isPhone() ? 'none' : (((width() - 300) / 3) + 'px')},  event: {vclick: TableView.callout.toggle}">
                                    <span class="caret visible-phone"></span>
                                    <span data-bind="text: $root.menucharts2label($data)"></span>
                                </button>
                                <div class="callout popup">
                                    <div class="tableViewScroller">
                                        <div class="tableViewTop current">
                                            <div class="tableViewBar">
                                                <div class="title">Charts</div>
                                                <span class="selectAllButton" data-bind="css:{unSelectAllButton:Menu.countSelected(menucharts()) == menucharts().length}, event: {vclick: Menu.toggleSelection.bind($data, menucharts())}"></span>
                                            </div>
                                            <ul class="tableView" data-bind="foreach: menucharts">
                                                <!-- ko if: active() -->
                                                <li class="select" data-bind="event: {vclick: $root.selectChart}, css:{checked:selected}">
                                                    <span data-bind="text: name"></span>
                                                    <span class="accessory"></span>
                                                </li>
                                                <!-- /ko -->
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <span class="description">for</span>
                            <!-- hosts/hostgroups menu -->
                            <div class="host tableViewMenu">
                                <button class="btn btn-block btn-menuhosts" data-bind="css: {'btn-link': ! isPhone()}, style: {'max-width': isPhone() ? 'none' : (((width() - 300) / 3) + 'px')}, event: {vclick: TableView.callout.toggle}">
                                    <span class="caret visible-phone"></span>
                                    <span data-bind="text: $root.menuhosts2label($data)"></span>
                                </button>
                                <div class="callout popup">
                                    <div class="tableViewScroller">
                                        <div class="tableViewTop current">
                                            <ul class="tableView">
                                                <li class="list" data-bind="event: {vclick: hostViewController.push}, css:{disabled:menuhosts().length == 0}">
                                                    <span>Hosts</span>
                                                    <span class="accessory"></span>
                                                    <div class="tableViewSubView">
                                                        <div class="tableViewBar">
                                                            <div>
                                                                <div class="title">Hosts</div>
                                                                <span class="backButton" data-bind="event: {vclick: hostViewController.pop}"></span>
                                                                <span class="selectAllButton" data-bind="css:{unSelectAllButton:Menu.countSelected(menuhosts()) == menuhosts().length}, event: {vclick: $root.selectAllHosts}"></span>
                                                            </div>
                                                            <div data-bind="visible: menuhosts().length > 9">
                                                                <input id="searchfield" class="searchfield" placeholder="Search hosts..." type="search" data-bind="value: hostQuery, valueUpdate: ['keyup','search'], blurOnEnter: true, event: {vclick:document.getElementById('searchfield').focus()}" autocomplete="off">
                                                            </div>
                                                        </div>
                                                        <ul class="tableView" data-bind="foreach: menuhosts">
                                                            <!-- ko if: active() -->
                                                                <li class="select" data-bind="event: {vclick: $parent.selectHost}, css:{checked:selected}">
                                                                    <span data-bind="text: name"></span>
                                                                    <span class="accessory"></span>
                                                                </li>
                                                            <!-- /ko -->
                                                        </ul>
                                                    </div>
                                                </li>
                                                <li class="list" data-bind="event: {vclick: hostViewController.push}, css:{disabled:menuhostgroups().length == 0}">
                                                    <span>Host groups</span>
                                                    <span class="accessory"></span>
                                                    <div class="tableViewSubView">
                                                        <div class="tableViewBar">
                                                            <div>
                                                                <div class="title">Host groups</div>
                                                                <span class="backButton" data-bind="event: {vclick:hostViewController.pop}"></span>
                                                                <span class="selectAllButton" data-bind="css:{unSelectAllButton:Menu.countSelected(menuhostgroups()) == menuhostgroups().length}, event: {vclick:$root.selectAllHostGroups}"></span>
                                                            </div>
                                                        </div>
                                                        <ul class="tableView" data-bind="foreach: menuhostgroups">
                                                            <li class="select" data-bind="event: {vclick: $parent.selectHostGroup}, css:{checked:selected}">
                                                                <span data-bind="text: name"></span>
                                                                <span class="accessory"></span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <span class="description">for the</span>
                            <!-- range menu -->
                            <div class="range tableViewMenu">
                                <button class="btn btn-block btn-menurange" data-bind="css: {'btn-link': ! isPhone()}, style: {'max-width': isPhone() ? 'none' : (((width() - 300) / 3) + 'px')}, event: {vclick: TableView.callout.toggle}">
                                    <span class="caret visible-phone"></span>
                                    <span data-bind="text: $root.menurange2label($data)"></span>
                                </button>
                                <div class="callout popup">
                                    <div class="tableView">
                                        <div class="tableViewTop current">
                                            <ul class="tableView" data-bind="foreach: menurange">
                                                <li class="select" data-bind="event: {vclick:$root.selectRange}, css:{checked:selected}">
                                                    <span data-bind="text: name"></span>
                                                    <span class="accessory"></span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- menucontrols -->
                    </div> <!-- menutable -->
                    <div class="controlbox hidden-phone">
                        <!-- Play Button -->
                        <span title="Run query and show charts">
                            <svg style="width:38px" class="media-button" data-bind="event: {vclick: start}, css: { active: activeButton()=='start'}">
                                <use href="#rectangle-icon" class="rectangle"></use>
                                <use href="#play-icon" class="play"></use>
                            </svg>
                        </span>
                        <!-- Pause Button -->
                        <span title="Pause reloading charts automatically">
                            <svg style="width:38px" class="media-button" title="Pause" data-bind="event: {vclick: pause}, css: { active: activeButton()=='pause'}" >
                                <use href="#rectangle-icon" class="rectangle"></use>
                                <use href="#pause-icon" class="pause"></use>
                            </svg>
                        </span>
                        <!-- Stop Button -->
                        <span title="Remove charts and reset query">
                            <svg style="width:38px" class="media-button" title="Stop" data-bind="event: {vclick: stop}, css: { active: activeButton()=='stop'}">
                                <use href="#rectangle-icon" class="rectangle"></use>
                                <use href="#stop-icon" class="stop"></use>
                            </svg>
                        </span>
                    </div>
                    <div class="controlbox visible-phone"> 
                        <!-- Play Button -->
                        <span title="Run query and show charts">
                            <svg style="width:30%" class="media-button" data-bind="event: {vclick: start}, css: { active: activeButton()=='start'}">
                                <use href="#rectangle-icon" class="rectangle"></use>
                                <use href="#play-icon" class="play"></use>
                            </svg>
                        </span>
                        <!-- Pause Button -->
                        <span title="Stop reloading charts automatically">
                            <svg style="width:30%" class="media-button" title="Pause" data-bind="event: {vclick: pause}, css: { active: activeButton()=='pause'}" >
                                <use href="#rectangle-icon" class="rectangle"></use>
                                <use href="#pause-icon" class="pause"></use>
                            </svg>
                        </span>
                        <!-- Stop Button -->
                        <span title="Remove charts and reset query">
                            <svg style="width:30%" class="media-button" title="Stop" data-bind="event: {vclick: stop}, css: { active: activeButton()=='stop'}">
                                <use href="#rectangle-icon" class="rectangle"></use>
                                <use href="#stop-icon" class="stop"></use>
                            </svg>
                        </span>
                    </div>
                </div> <!-- query -->
            </div> <!-- row-fluid -->
            <div class="row-fluid">
                <div class="charts margin-top-1 margin-bottom-1">
                    <div id="info" data-bind="visible: info().length, html: info()"></div>
                    <!-- ko foreach: {data: charts} -->
                    <div class="chart" data-bind="visible: show()">
                        <div class="header">
                            <div class="btn-group btn-chartcontrols">
                                <!-- ko if: showSearchButton() -->
                                <button type="button" class="btn btn-mini btn-search" title="Filter data" data-bind="event: {vclick: $root.toggleSearch}"><i class="icon-search"></i></button>
                                <!-- /ko -->
                                <!-- ko if: showTrendButton() -->
                                <button type="button" class="btn btn-mini btn-trend" title="Show trend" data-bind="event: {vclick: $root.toggleTrend}, css: { active: showTrend() }"><i class="icon-forward"></i></button>
                                <!-- /ko -->
                                <!-- ko if: showZoomInButton() -->
                                <button type="button" class="btn btn-mini btn-zoomin" title="Zoom in" data-bind="event: {vclick: $root.zoomIn}, css: { active: showZoomIn() }"><i class="icon-plus"></i></button>
                                <!-- /ko -->
                                <!-- ko if: showZoomOutButton() -->
                                <button type="button" class="btn btn-mini btn-zoomout" title="Zoom out" data-bind="event: {vclick: $root.zoomOut}, css: { active: showZoomOut() }"><i class="icon-minus"></i></button>
                                <!-- /ko -->
                                <!-- ko if: showLegendButton() -->
                                <button type="button" class="btn btn-mini btn-legend" title="Show legend" data-bind="event: {vclick: $root.toggleLegend}, css: { active: showLegend() }"><i class="icon-th-list"></i></button>
                                <!-- /ko -->
                            </div>
                            <h2 data-bind="text: title"></h2>
                        </div>
                        <div data-bind="visible: showLegend()">
                            <div class="legend" data-bind="attr: {id: legendid}"></div>
                        </div>
                        <div class="canvasBox">
                            <div class="canvas" data-bind="attr: {id: canvasid}"></div>
                        </div>
                    </div>
                    <!-- /ko -->
                </div> <!-- charts -->
            </div> <!-- row-fluid -->     
        </div> <!-- main -->
    </div> <!-- wrap -->
    <div id="footer">
        <div class="toleft hidden-phone">Logged in as <?cs var:Request.RemoteUser ?></div>
        <div class="toright hidden-phone">
            <ul class="piped">
                <li>Copyright &copy; 2024 <a href="https://tildeslash.com/">Tildeslash</a>. All Rights Reserved.</li>
                <li><a href="https://mmonit.com/">M/Monit</a></li>
                <li><a href="https://mmonit.com/monit/">Monit</a></li>
                <li><a href="https://mmonit.com/wiki/">Wiki</a></li>
            </ul>
        </div>
        <div id="copy" class="visible-phone">Copyright &copy; 2024 <a href="https://tildeslash.com/">Tildeslash</a>. All Rights Reserved.</div>
    </div> <!-- footer -->
    <!-- Help -->
    <div id="helpbox">
        <div class="title">
            <h2>Analytics Help</h2>
        </div>
        <div class="content paragraphify">
            <p>
                M/Monit collects key performance data from both hosts and services. From this page you can run queries and investigate the data.
            </p>
            <p>
                <em>Only</em> services which are monitored by Monit are displayed in the charts. If you want to include a particular
                service such as a process or a filesystem in the charts, you must add a check for the service in Monit's control file.
            </p>
            <h3>Query</h3>
            <p>
                A query is built by selecting chart types, hosts or hostgroups and a time range.
            </p>
            <p>Chart controls:
                <ul>
                    <li>To draw the charts, press the play <i class="icon-play"></i> button. Charts will reload automatically based on the chart precision.</li>
                    <li>To stop automatic reload and analyze the data, press the <i class="icon-pause"></i> button.</li>
                    <li>To reset all menu choices and start over again select the stop <i class="icon-stop"></i> button.</li>
                </ul>
            </p>
            <p>
                Selected hosts are displayed in the same chart for easy comparison, for example if you select the [space %] chart and [all hosts],
                you can see all monitored filesystems in one chart. You can then compare space usage across the whole selection and identify
                underutilized or overutilized filesystems.
            </p>
            <h3>Chart types</h3>
            <p>
                The type of charts that are displayed depends on the range selected and on the number of selected hosts. The [seconds] range uses bar charts
                and/or pie charts to display the current value. The rest of the time ranges use line charts. The cpu usage line chart shows cpu total if multiple
                hosts are selected, if only one host is selected, cpu usage is displayed as a stacked area chart detailing cpu user%, system%, wait% values.
            </p>
            <p>
                The [seconds] time range is special in that it shows a snap-shot of collected data from the last minute. To see this chart,
                Monit must run with a poll-cycle which is less than 1 minute, otherwise this chart will be empty, except if you happen to draw the
                chart within the minute data was collected.
            </p>
            <p>
                Datasets with zero values are not displayed in the charts
            </p>
            <h3>Chart buttons</h3>
            <p>
                <i class="icon-search"></i> <b>Search</b> You can further refine the selection by pressing the search button for a given chart. This allows you to filter
                the chart's dataset and only show entries that match a search term. For example, if you have Apache httpd running on several hosts and wish to compare cpu
                utilization, select the [process cpu %] chart and search for apache.
            </p>
            <p>
                <i class="icon-forward"></i> <b>Trend</b> Use the trend button to display a trend line and predict the future! The method we use is either a
                linear or an exponential extrapolation based on a best-fit. A trend line is a stippled line that projects forward in time by extending the
                selected time range twice. For example, if [month] is selected, the trend line will show the estimate for the next month. Note that predictions
                may be incorrect if data does not follow a linear or an exponential trend. In general, a longer time range is more likely to produce a better
                estimate.
            </p>
            <p>
                <i class="icon-plus"></i> <b>Zoom in</b> Use the zoom in button to show data in the current selection with higher precision.
            </p>
            <p>
                <i class="icon-minus"></i> <b>Zoom out</b> Use the zoom out button to show data around the current selection (with lower precision).
            </p>
            <p>
                <i class="icon-th-list"></i> <b>Legend</b> The legend button displays the chart's legend in addition to minimum,
                maximum and average values and the delta for the given range. The <strong>delta</strong> is the <em>rightmost</em>
                x-axis value <em>minus</em> the <em>leftmost</em> x-axis value. That is, the chart's range end value minus the chart's
                range start value.
            </p>
            <p>
                The [seconds] range is an exception and only shows the current value since a minute is the lowest resolution.
            </p>
            <p>
               Items can be removed from the chart by clicking on the legend's color box. If a trend line is displayed, the legend table will also contain future
               estimated values.
            </p>

            <h3>Custom selection</h3>
            <p>
                Click and drag the mouse to perform a custom selection and to zoom in on a specific area of the chart.
            </p>

            <h3>Y-axis scale</h3>
            <p>
                Charts that show percentage, uses a fixed range from 0 to 100 percent on the Y-axis. If you hover the cursor over the Y-axis, the cursor changes into a
                magnification glass. Click, and the chart "zooms in" by scaling the range from 0 to local maximum. Click the Y-axis again to
                zoom out.
            </p>

            <h3>X-axis panning</h3>
            <p>
                You can drag the X-axis to pan the chart to the left or right. Panning to the right is limited by the current time.
            </p>

            <h3>Chart drawings</h3>
            <p>
                The charts <strong>refresh</strong> automatically based on the range sampling rate (precision). E.g. for the <em>last seconds</em> range,
                charts refresh every 5 seconds, for the <em>last hour</em> range, every 2 minutes and so on. See the <a href="#refresh-rate">table</a>
                below for details.
            </p>
            <p>
                If you hover or tap a line/bar/slice, a tooltip is displayed with a point-in-time value. If the legend table
                is displayed, the corresponding legend will be highlighted as well.
            </p>
            <p>
                Monit send data samples to M/Monit at the end of each poll cycle. If Monit's poll-cycle is longer than the
                chart precision, the chart will show data points instead of a continuous line. To show a continuous line for
                all charts, Monit must have a poll-cycle which is less then 1 minute. See the table below for chart precision
                and how data is aggregated.
            </p>
            <p>
                If Monit stop sending status updates or if M/Monit is stopped, you might see gaps in the charts - such gaps
                represent "no data available".
            </p>
            <h3>Data</h3>
            <div class="row-fluid">
                <div class="span6">
                    <p>
                        Data is collected and aggregated by M/Monit for best memory and space use and display speed. Historical data is stored for up to three years before
                        being automatically deleted. This can be changed in <a href="../../admin/settings/">admin/settings</a>.
                    </p>
                    <p>
                        The table below illustrates data aggregation through averaging and indicates the default precision for various ranges. Additionally, the custom range
                        selection empowers users to drill down with precision exceeding the default level.
                    </p>
                </div> <!-- span6 -->
                <div class="span6">
                    <table class="table table-hover table-bordered" id="refresh-rate">
                        <thead>
                            <tr>
                                <th>Range</th>
                                <th>Precision</th>
                            </tr>
                        </thead>
                        <tr>
                            <td>Last seconds</td>
                            <td>Snapshot</td>
                        </tr>
                        <tr>
                            <td>Last Hour</td>
                            <td>2 Minutes</td>
                        </tr>
                        <tr>
                            <td>Last Day</td>
                            <td>1 Hour</td>
                        </tr>
                        <tr>
                            <td>Last Week</td>
                            <td>4 Hours</td>
                        </tr>
                        <tr>
                            <td>Last Month</td>
                            <td>1 Day</td>
                        </tr>
                        <tr>
                            <td>Last 3 Months</td>
                            <td>3 Days</td>
                        </tr>
                        <tr>
                            <td>Last 6 Months</td>
                            <td>1 Week</td>
                        </tr>
                        <tr>
                            <td>Last Year</td>
                            <td>2 Weeks</td>
                        </tr>
                        <tr>
                            <td>Last 3 Years</td>
                            <td>1 Month</td>
                        </tr>
                    </table>
                </div> <!-- span6 -->
            </div> <!-- row-fluid -->
        </div> <!-- content -->
    </div> <!-- helpbox -->
    <script src="../../lib/f/jquery/jquery.js?version=430"></script>
    <script src="../../lib/f/jquery/jquery.mobile.vmouse.js?version=430"></script>
    <script src="../../lib/f/jquery/jquery.event.drag.js?version=430"></script>
    <script src="../../lib/js/webapp.js?version=430"></script>
    <script src="../../lib/f/jquery/jquery.flot.js?version=430"></script>
    <script src="../../lib/f/jquery/jquery.flot.resize.js?version=430"></script>
    <script src="../../lib/f/jquery/jquery.flot.pie.js?version=430"></script>
    <script src="../../lib/f/jquery/jquery.flot.stack.js?version=430"></script>
    <script src="../../lib/f/jquery/jquery.flot.time.js?version=430"></script>
    <script src="../../lib/f/jquery/jquery.flot.selection.js?version=430"></script>
    <script src="../../lib/f/jquery/jquery.flot.crosshair.js?version=430"></script>
    <script src="../../lib/f/jquery/jquery.flot.navigate.js?version=430"></script>
    <script src="../../lib/f/jquery/jquery.getUrlParam.js?version=430"></script>
    <script src="../../lib/js/error.js?version=430"></script>
    <script src="../../lib/js/math.js?version=430"></script>
    <script src="../../lib/js/chart.js?version=430"></script>
    <script src="../../lib/js/ui.js?version=430"></script>
    <script src="../../lib/f/knockout/knockout.js?version=430"></script>
    <script src="../../lib/js/tableview.js?version=430"></script>
    <script src="../../lib/js/menu.js?version=430"></script>
    <script src="../../lib/js/help.js?version=430"></script>
    <script src="../../lib/f/twbootstrap/js/bootstrap.js?version=430"></script>
    <script src="../../lib/f/strftime/strftime.js?version=430"></script>
    <script src="../../assets/reports/trends.js?version=430"></script>
    <script src="../../assets/reports/charts.js?version=430"></script>
</body>
</html>
