cloudron-box/webadmin/src/views/graphs.html

<br/>

<div class="graphs">

    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="row">
                <div class="col-md-12 text-left">
                    <h2>Memory</h2>
                </div>
            </div>

            <div class="row shadow memory-app-container">
                <div class="row">
                    <div class="col-md-6"">
                        <h3>Apps</h3>
                        <canvas id="memoryUsageAppsChart" width="200" height="200"></canvas>
                    </div>
                    <div class="col-md-6">
                        <h3>System</h3>
                        <canvas id="memoryUsageSystemChart" width="200" height="200"></canvas>
                    </div>
                </div>

                <br/>

                <div class="row">
                    <div class="col-md-12">
                        <h4 ng-show="activeApp === 'system'">System</h4>
                        <h4 ng-show="activeApp !== 'system'">{{ activeApp.location }}</h4>
                        <br/>
                        <canvas id="memoryAppChart" width="900" height="300"></canvas>
                        <p>Memory consumption in MB.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <br/>
    <br/>

    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="row">
                <div class="col-md-12 text-left">
                    <h2>Disk Usage</h2>
                </div>
            </div>

            <div class="row shadow memory-app-container">
                <div class="col-md-12">
                    <h4><span class="badge">{{ diskUsage['system'].sum }} GB</span></h4>
                    <canvas id="systemDiskUsageChart" width="200" height="200"></canvas>
                    <p>
                        <span class="text-success">Free {{ diskUsage['system'].free }} GB</span>
                        &nbsp;
                        <span class="text-primary">Used {{ diskUsage['system'].used }} GB</span>
                    </p>
                </div>
            </div>
        </div>
    </div>

</div>

<br/>
<br/>