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

<div class="row">
    <div class="col-md-12">
        <h1>Graphs</h1>
    </div>
</div>

<br/>

<div class="graphs">

    <div class="row shadow memory-app-container">
        <h2>Disk Usage</h2>
        <br/>
        <div class="col-md-4">
            <h4>Applications <span class="badge">{{ diskUsage['docker'].sum }} GB</span></h4>
            <canvas id="dockerDiskUsageChart" width="200" height="200"></canvas>
            <p>
                <span class="text-success">Free {{ diskUsage['docker'].free }} GB</span>
                &nbsp;
                <span class="text-warning">Reserved {{ diskUsage['docker'].reserved }} GB</span>
                &nbsp;
                <span class="text-primary">Used {{ diskUsage['docker'].used }} GB</span>
            </p>
        </div>
        <div class="col-md-4">
            <h4>Cloudron <span class="badge">{{ diskUsage['box'].sum }} GB</span></h4>
            <canvas id="boxDiskUsageChart" width="200" height="200"></canvas>
            <p>
                <span class="text-success">Free {{ diskUsage['box'].free }} GB</span>
                &nbsp;
                <span class="text-warning">Reserved {{ diskUsage['box'].reserved }} GB</span>
                &nbsp;
                <span class="text-primary">Used {{ diskUsage['box'].used }} GB</span>
            </p>
        </div>
        <div class="col-md-4">
            <h4>System (all) <span class="badge">{{ diskUsage['cloudron'].sum }} GB</span></h4>
            <canvas id="cloudronDiskUsageChart" width="200" height="200"></canvas>
            <p>
                <span class="text-success">Free {{ diskUsage['cloudron'].free }} GB</span>
                &nbsp;
                <span class="text-warning">Reserved {{ diskUsage['cloudron'].reserved }} GB</span>
                &nbsp;
                <span class="text-primary">Used {{ diskUsage['cloudron'].used }} GB</span>
            </p>
        </div>
    </div>

    <br/>
    <br/>

    <div class="row">
        <div class="col-md-12 shadow memory-app-container">
            <h2>Memory</h2>
            <br/>
            <div>
                <ul class="nav nav-tabs nav-justified">
                    <li ng-class="{ active: activeApp === 'system' }">
                        <a ng-click="setMemoryApp('system')" href="">System</a>
                    </li>
                    <li ng-class="{ active: activeApp === app }" ng-repeat="app in installedApps">
                        <a ng-click="setMemoryApp(app)" href="">{{ app.location }}</a>
                    </li>
                </ul>
            </div>
            <br/>
            <canvas id="memoryAppChart" width="800" height="300"></canvas>
            <p>Memory consumption over time in MB.</p>
        </div>
    </div>

</div>

<br/>
<br/>