<filter-bar class="content-filter">
    <div class="content-filter-link pull-right" ng-if="settings.canChangeConnection">
        <a id="kubernetes-change-connection" ng-click="changeAuth()" title="Connection Settings">
            <i class="fa fa-wrench"></i>
        </a>
    </div>
</filter-bar>

<div class="container-cards-pf dashboard-cards" ng-if="settings.flavor != 'openshift'">
    <div class="card-pf card-pf-aggregate-status card-pf-accented dashboard-status">
        <kubernetes-service-graph id="graphs">
        </kubernetes-service-graph>
    </div>
</div>

<div class="container-cards-pf dashboard-cards">
    <div class="card-pf card-pf-aggregate-status card-pf-accented dashboard-status">
        <h2 class="card-pf-title">{{pods.length}} <span translate>Pods</span></h2>
        <div class="card-pf-body">
            <p class="card-pf-aggregate-status-notifications">
                <span class="card-pf-aggregate-status-notification" ng-if="status.pods.Pending.length"
                    title="Pending pods">
                    <span class="spinner spinner-sm"></span>{{status.pods.Pending.length}}
                </span>
                <span class="card-pf-aggregate-status-notification" ng-if="status.pods.Failed.length"
                    title="Failed pods">
                    <span class="pficon pficon-error-circle-o"></span>{{status.pods.Failed.length}}
                </span>
                <span class="card-pf-aggregate-status-notification" ng-if="status.pods.Unknown.length"
                    title="Pods with unknown status">
                    <span class="pficon pficon-warning-triangle-o"></span>{{status.pods.Unknown.length}}
                </span>
                <span class="card-pf-aggregate-status-notification"
                    ng-if="!status.pods.Pending.length && !status.pods.Failed.length && !status.pods.Unknown.length">
                    <span ng-if="pods.length > 0">
                        <span class="pficon pficon-ok"></span>
                        <span class="card-pf-aggregate-status-text" translate>All running</span>
                    </span>
                    <span ng-if="pods.length == 0">
                        <span class="card-pf-aggregate-status-text" translate>No pods deployed</span>
                    </span>
                </span>
            </p>
        </div>
    </div>
    <div class="card-pf card-pf-aggregate-status card-pf-accented dashboard-status">
        <h2 class="card-pf-title">{{volumes.length}} <span translate>Volumes</span></h2>
        <div class="card-pf-body">
            <p class="card-pf-aggregate-status-notifications">
                <span class="card-pf-aggregate-status-notification" ng-if="status.volumes.Pending.length"
                    title="Pending volumes">
                    <span class="spinner spinner-sm"></span>{{status.volumes.Pending.length}}
                </span>
                <span class="card-pf-aggregate-status-notification" ng-if="status.volumes.Released.length"
                    title="Released volumes awaiting cleanup">
                    <span class="pficon pficon-warning-triangle-o"></span>{{status.volumes.Released.length}}
                </span>
                <span class="card-pf-aggregate-status-notification" ng-if="status.volumes.Failed.length"
                    title="Volumes that have failed">
                    <span class="pficon pficon-error-circle-o"></span>{{status.volumes.Failed.length}}
                </span>
                <span class="card-pf-aggregate-status-notification" ng-if="status.volumes.Available.length"
                    title="Available volumes not yet in use">
                    <span class="pficon pficon-ok"></span>{{status.volumes.Available.length}}
                </span>
                <span class="card-pf-aggregate-status-notification"
                    ng-if="!status.volumes.Pending.length && !status.volumes.Released.length && !status.volumes.Failed.length && !status.volumes.Available.length">
                    <span ng-if="volumes.length > 0">
                        <span class="pficon pficon-ok"></span><span class="card-pf-aggregate-status-text"
                            translate>All in use</span>
                    </span>
                    <span ng-if="volumes.length == 0">
                        <span class="card-pf-aggregate-status-text"
                            translate>No volumes in use</span>
                    </span>
                </span>
            </p>
            <p class="pvc-notice" ng-if="status.volumes.PendingClaims.length">
                <span class="card-pf-aggregate-status-notification">
                    <span class="pficon pficon-info"></span>
                    <a href="#{{ viewUrl('volumes', true) }}">
                        <span class="card-pf-aggregate-status-text">{{status.volumes.PendingClaims.length}}</span>
                        <span class="card-pf-aggregate-status-text" translate>pending volume claims</span>
                    </a>
                </span>
            </p>
        </div>
    </div>
    <div class="card-pf card-pf-aggregate-status card-pf-accented dashboard-status">
        <h2 class="card-pf-title">{{nodes.length}} <span translate>Nodes</span></h2>
        <div class="card-pf-body">
            <p class="card-pf-aggregate-status-notifications">
                <span class="card-pf-aggregate-status-notification" ng-if="status.nodes.Pending.length"
                    title="Pending nodes">
                    <span class="spinner spinner-sm"></span>{{status.nodes.Pending.length}}
                </span>
                <span class="card-pf-aggregate-status-notification" ng-if="status.nodes.Terminated.length"
                    title="Terminated nodes">
                    <span class="pficon pficon-warning-triangle-o"></span>{{status.nodes.Terminated.length}}
                </span>
                <span class="card-pf-aggregate-status-notification" ng-if="status.nodes.NotReady.length"
                    title="Nodes that are not ready">
                    <span class="pficon pficon-error-circle-o"></span>{{status.nodes.NotReady.length}}
                </span>
                <span class="card-pf-aggregate-status-notification" ng-if="status.nodes.OutOfDisk.length"
                    title="Out of disk space">
                    <span class="pficon pficon-volume"></span>{{status.nodes.OutOfDisk.length}}
                </span>
                <span class="card-pf-aggregate-status-notification"
                    ng-if="!status.nodes.Pending.length && !status.nodes.Terminated.length && !status.nodes.NotReady.length && !status.nodes.OutofDisk.length">
                    <span ng-if="nodes.length > 0">
                        <span class="pficon pficon-ok"></span><span class="card-pf-aggregate-status-text"
                            translate>All healthy</span>
                    </span>
                    <span ng-if="nodes.length == 0">
                        <span class="pficon pficon-warning-triangle-o"></span>
                        <span class="card-pf-aggregate-status-text" translate>No nodes in cluster</span>
                    </span>
                </span>
            </p>
        </div>
    </div>
</div>

<div class="container-cards-pf dashboard-cards">
    <div class="card-pf card-pf-double" id="service-list">
        <div class="card-pf-heading">
            <div class="pull-right">
                <button class="btn btn-default fa fa-check" id="services-enable-change" title="Change"
                    ng-click="toggleServiceChange()" ng-class="{ active: editServices }"></button>
                <button class="btn btn-primary" id="deploy-app" ng-click="deploy(namespaces(), namespace)"
                    translate>Deploy</button>
            </div>
            <h2 class="card-pf-title" translate>Services</h2>
        </div>
        <div class="card-pf-body">
            <div class="well blank-slate-pf spacious" ng-if="servicesState() == 'failed'">
                <div class="blank-slate-pf-icon">
                    <i ng-if="failure.status == 403" class="fa fa-lock"></i>
                    <i ng-if="failure.status != 403" class="fa fa-exclamation-circle"></i>
                </div>
                <h3 translate>Could not list services</h3>
                <p>{{failure.message}}</p>
            </div>
            <div class="well blank-slate-pf spacious" ng-if="servicesState() == 'empty'">
                <div class="blank-slate-pf-icon">
                    <i class="fa fa-rocket"></i>
                </div>
                <h3>No services present</h3>
                <p translate>You can deploy an application to your cluster.</p>
            </div>
            <table class="listing-ct dashboard-list" ng-if="servicesState() == 'ready'"
                ng-class="{editable: editServices}">
                <thead>
                    <tr>
                        <th translate>Name</th>
                        <th translate>Address</th>
                        <th translate>Containers</th>
                        <th translate ng-if="settings.flavor == 'openshift'">Project</th>
                        <th translate ng-if="settings.flavor != 'openshift'">Namespace</th>
                        <th class="status"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="listing-ct-item"
                            ng-repeat="service in services track by service.metadata.uid"
                            data-name="{{service.metadata.name}}"
                            ng-class="{'highlight-ct': service.metadata.uid == highlighted}"
                            ng-click="jumpService($event, service)"
                            ng-mouseover="highlight(service.metadata.uid)" ng-mouseout="highlight(null)"
                            ng-if="!(service.metadata.namespace == 'default' && service.metadata.name == 'kubernetes')">
                        <td>{{service.metadata.name}}</td>
                        <td><kubernetes-address ng-init="item = service"></td>
                        <td class="containers">{{serviceContainers(service)}}</td>
                        <td>{{service.metadata.namespace}}</td>
                        <td class="status">
                            <button title="Adjust" class="btn btn-default adjust-service pficon pficon-edit"
                                data-id="{{id}}" ng-click="modifyService(service)"></button>
                            <span kubernetes-status-icon status="serviceStatus(service)"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-pf" id="node-list">
        <div class="card-pf-heading">
            <div class="pull-right">
                <button title="Add Kubernetes Node" id="add-node" class="btn btn-primary fa fa-plus"
                    ng-click="addNode()"></button>
            </div>
            <h2 class="card-pf-title" translate>Nodes</h2>
        </div>
        <div class="card-pf-body">
            <table class="listing-ct dashboard-list">
                <thead>
                    <tr>
                        <th translate>Name</th>
                        <th translate>Containers</th>
                        <th class="status"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-click="navigateNode(node)" ng-repeat="node in nodes" class="listing-ct-item">
                        <td>{{node.metadata.name}}</td>
                        <td class="containers">{{nodeContainers(node)}}</td>
                        <td class="status">
                            <span kubernetes-status-icon status="nodeStatusIcon(node)"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
