{% extends "base.html" %}

{% block css %}
<!-- Custom CSS for this module -->
<link rel="stylesheet" type="text/css" href="/dist/dashboard/graphite/graphite.min.css">
<link rel="stylesheet" type="text/css" href="/dist/angular-material-data-table/dist/md-data-table.min.css">
{% endblock %}

{% block content %}
<!-- Content for this module -->
<div>
    <div flex>
        <div class="md-title">Graphite Tree Browser</div>
        <div><p></p></div>

        <div ng-controller="GraphiteController as graphiteCtrl">
            <div layout="column">
                <md-toolbar>
                    <div class="md-toolbar-tools">
                        {%raw%}
                        <span>Bucket: {{graphiteCtrl.node.path}}</span>
                        {%endraw%}
                    </div>
                </md-toolbar>
                <md-whiteframe flex="auto" class="md-whiteframe-1dp" layout="column">
                    <md-table-container md-table>
                        <table md-table>
                            <thead md-head>
                                <tr md-row>
                                    <th md-column>Type</th>
                                    <th md-column>Name</th>
                                    <th md-column>Status</th>
                                    <th md-column>Actions</th>
                                </tr>
                            </thead>
                            <tbody md-body>
                                {%raw%}
                                <tr
                                class="pointer"
                                md-row
                                md-select="child.id"
                                ng-repeat="child in graphiteCtrl.node.children  | orderBy: graphiteCtrl.node.order | limitTo: graphiteCtrl.query.limit: (graphiteCtrl.query.page - 1) * graphiteCtrl.query.limit"
                                ng-click="!graphiteCtrl.node.isLeaf(child) ? graphiteCtrl.node.select(child.text) : $log.info('cannot expand leaf node')">
                                    <td md-cell ng-if="graphiteCtrl.node.isLeaf(child)"><i class="fa fa-line-chart"> </i></td>
                                    <td md-cell ng-if="!graphiteCtrl.node.isLeaf(child)"><i class="fa fa-folder"> </i></td>
                                    <td md-cell>{{ child.text }}</td>
                                    <td md-cell ng-if="graphiteCtrl.node.isLeaf(child)">
                                        <span ng-class="{warn: child.staleness && child.staleness > 86400, success: child.staleness && child.staleness < 86400}">
                                            {{ child.staleness && child.staleness > 86400 ? 'Stale' : 'Active'}}
                                        </span>
                                    </td>
                                    <td md-cell ng-if="!graphiteCtrl.node.isLeaf(child)">-</td>
                                    <td md-cell>
                                        <md-button class="md-raised md-icon-button" ng-disabled="!graphiteCtrl.node.isLeaf(child)" ng-click="graphiteCtrl.node.delete(child.id);$event.stopPropagation();$event.preventDefault();" aria-label="Delete">
                                            <md-tooltip md-direction="bottom">Delete Metric</md-tooltip>
                                            <md-icon class="fa fa-trash"></md-icon>
                                        </md-button>
                                        <md-button class="md-raised md-icon-button" ng-disabled="!graphiteCtrl.node.isLeaf(child)" ng-click="graphiteCtrl.dialog.moveDialog(child.id)" aria-label="Move">
                                            <md-tooltip md-direction="bottom">Move Metric</md-tooltip>
                                            <md-icon class="fa fa-arrows fa"></md-icon>
                                        </md-button>
                                    </td>
                                    <td md-cell ng-if="!graphiteCtrl.node.isLeaf(child)"></td>
                                </tr>
                                {%endraw%}
                            </tbody>
                        </table>
                    </md-table-container>
                    {%raw%}
                    <md-table-pagination md-limit-options="[25, 50, 100, 200]" md-limit="graphiteCtrl.query.limit" md-page="graphiteCtrl.query.page" md-total="{{graphiteCtrl.node.children.length}}"></md-table-pagination>
                    {%endraw%}
                </md-whiteframe>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<!-- Custom JS for this module -->
<script src="/dist/angular-material-data-table/dist/md-data-table.min.js"></script>
<script src="/dist/dashboard/graphite/graphite.min.js"></script>
{% include "graphite/metric-move-dialog.html" %}
{% endblock %}