← Back to branch summary

~mpontillo/maas/networks-list-view

« back to all changes in this revision

Viewing changes to src/maasserver/static/partials/nodes-list.html

Merged nose-select-bucket-plugin into test-in-parallel, resolving a minor conflict.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/partials/nodes-list.html
1
 
<header class="page-header" sticky>
 
1
<header class="page-header" sticky media-query="min-width: 769px">
2
2
    <div class="wrapper--inner">
3
3
        <!-- XXX ricgard 2016-06-16 - Need to add e2e test. -->
4
4
        <h1 class="page-header__title">{$ $parent.site $} MAAS</h1>
549
549
    <aside class="three-col">
550
550
        <div class="accordion maas-accordion" data-ng-show="currentpage === 'nodes'"
551
551
            data-ng-class="{ 'is-disabled': tabs.nodes.actionOption }">
552
 
            <h3 class="accordion__title">Filter by</h3>
553
 
            <!-- XXX ricgard 2016-06-16 - Need to add e2e test. -->
554
 
            <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.status.length">
555
 
                <h4 class="accordion__tab-title maas-accordion-tab is-active">Status</h4>
556
 
                <div class="accordion__tab-content">
557
 
                    <ul class="accordion__tab-list">
558
 
                        <!-- XXX ricgard 2016-06-16 - Need to add e2e test. -->
559
 
                        <li class="accordion__tab-item" data-ng-repeat="status in tabs.nodes.metadata.status | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('status', status.name, 'nodes') }">
560
 
                            <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('status', status.name, 'nodes')">{$ status.name $} ({$ status.count $})</a>
561
 
                        </li>
562
 
                    </ul>
563
 
                </div>
564
 
            </div>
565
 
            <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.owner.length">
566
 
                <h4 class="accordion__tab-title maas-accordion-tab">Owner</h4>
567
 
                <div class="accordion__tab-content">
568
 
                    <ul class="accordion__tab-list">
569
 
                        <li class="accordion__tab-item" data-ng-repeat="owner in tabs.nodes.metadata.owner | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('owner', owner.name, 'nodes') }">
570
 
                            <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('owner', owner.name, 'nodes')">{$ owner.name $} ({$ owner.count $})</a>
571
 
                        </li>
572
 
                    </ul>
573
 
                </div>
574
 
            </div>
575
 
            <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.release.length">
576
 
                <h4 class="accordion__tab-title maas-accordion-tab">OS/Release</h4>
577
 
                <div class="accordion__tab-content">
578
 
                    <ul class="accordion__tab-list">
579
 
                        <li class="accordion__tab-item" data-ng-repeat="release in tabs.nodes.metadata.release | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('release', release.name, 'nodes') }">
580
 
                            <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('release', release.name, 'nodes')">{$ getReleaseTitle(release.name) $} ({$ release.count $})</a>
581
 
                        </li>
582
 
                    </ul>
583
 
                </div>
584
 
            </div>
585
 
            <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.tags.length">
586
 
                <h4 class="accordion__tab-title maas-accordion-tab">Tags</h4>
587
 
                <div class="accordion__tab-content">
588
 
                    <ul class="accordion__tab-list">
589
 
                        <li class="accordion__tab-item" data-ng-repeat="tag in tabs.nodes.metadata.tags | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('tags', tag.name, 'nodes') }">
590
 
                            <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('tags', tag.name, 'nodes')">{$ tag.name $} ({$ tag.count $})</a>
591
 
                        </li>
592
 
                    </ul>
593
 
                </div>
594
 
            </div>
595
 
            <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.storage_tags.length">
596
 
                <h4 class="accordion__tab-title maas-accordion-tab">Storage Tags</h4>
597
 
                <div class="accordion__tab-content">
598
 
                    <ul class="accordion__tab-list">
599
 
                        <li class="accordion__tab-item" data-ng-repeat="tag in tabs.nodes.metadata.storage_tags | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('storage_tags', tag.name, 'nodes') }">
600
 
                            <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('storage_tags', tag.name, 'nodes')">{$ tag.name $} ({$ tag.count $})</a>
601
 
                        </li>
602
 
                    </ul>
603
 
                </div>
604
 
            </div>
605
 
            <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.subnets.length">
606
 
                <h4 class="accordion__tab-title maas-accordion-tab">Subnets</h4>
607
 
                <div class="accordion__tab-content">
608
 
                    <ul class="accordion__tab-list">
609
 
                        <li class="accordion__tab-item" data-ng-repeat="subnet in tabs.nodes.metadata.subnets | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('subnets', subnet.name, 'nodes') }">
610
 
                            <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('subnets', subnet.name, 'nodes')">{$ subnet.name $} ({$ subnet.count $})</a>
611
 
                        </li>
612
 
                    </ul>
613
 
                </div>
614
 
            </div>
615
 
            <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.fabrics.length">
616
 
                <h4 class="accordion__tab-title maas-accordion-tab">Fabrics</h4>
617
 
                <div class="accordion__tab-content">
618
 
                    <ul class="accordion__tab-list">
619
 
                        <li class="accordion__tab-item" data-ng-repeat="fabric in tabs.nodes.metadata.fabrics | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('fabrics', fabric.name, 'nodes') }">
620
 
                            <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('fabrics', fabric.name, 'nodes')">{$ fabric.name $} ({$ fabric.count $})</a>
621
 
                        </li>
622
 
                    </ul>
623
 
                </div>
624
 
            </div>
625
 
            <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.spaces.length">
626
 
                <h4 class="accordion__tab-title maas-accordion-tab">Spaces</h4>
627
 
                <div class="accordion__tab-content">
628
 
                    <ul class="accordion__tab-list">
629
 
                        <li class="accordion__tab-item" data-ng-repeat="space in tabs.nodes.metadata.spaces | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('spaces', space.name, 'nodes') }">
630
 
                            <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('spaces', space.name, 'nodes')">{$ space.name $} ({$ space.count $})</a>
631
 
                        </li>
632
 
                    </ul>
633
 
                </div>
634
 
            </div>
635
 
            <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.zone.length">
636
 
                <h4 class="accordion__tab-title maas-accordion-tab">Zones</h4>
637
 
                <div class="accordion__tab-content">
638
 
                    <ul class="accordion__tab-list">
639
 
                        <li class="accordion__tab-item" data-ng-repeat="zone in tabs.nodes.metadata.zone | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('zone', zone.name, 'nodes') }">
640
 
                            <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('zone', zone.name, 'nodes')">{$ zone.name $} ({$ zone.count $})</a>
641
 
                        </li>
642
 
                    </ul>
 
552
            <h3 class="accordion__title"
 
553
            ng-class="{'is-active': isActive}"
 
554
            ng-init="isActive = false"
 
555
            ng-click="isActive = !isActive">Filter by</h3>
 
556
            <div class="accordion__content">
 
557
                <!-- XXX ricgard 2016-06-16 - Need to add e2e test. -->
 
558
                <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.status.length">
 
559
                    <h4 class="accordion__tab-title maas-accordion-tab is-active">Status</h4>
 
560
                    <div class="accordion__tab-content">
 
561
                        <ul class="accordion__tab-list">
 
562
                            <!-- XXX ricgard 2016-06-16 - Need to add e2e test. -->
 
563
                            <li class="accordion__tab-item" data-ng-repeat="status in tabs.nodes.metadata.status | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('status', status.name, 'nodes') }">
 
564
                                <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('status', status.name, 'nodes')">{$ status.name $} ({$ status.count $})</a>
 
565
                            </li>
 
566
                        </ul>
 
567
                    </div>
 
568
                </div>
 
569
                <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.owner.length">
 
570
                    <h4 class="accordion__tab-title maas-accordion-tab">Owner</h4>
 
571
                    <div class="accordion__tab-content">
 
572
                        <ul class="accordion__tab-list">
 
573
                            <li class="accordion__tab-item" data-ng-repeat="owner in tabs.nodes.metadata.owner | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('owner', owner.name, 'nodes') }">
 
574
                                <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('owner', owner.name, 'nodes')">{$ owner.name $} ({$ owner.count $})</a>
 
575
                            </li>
 
576
                        </ul>
 
577
                    </div>
 
578
                </div>
 
579
                <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.release.length">
 
580
                    <h4 class="accordion__tab-title maas-accordion-tab">OS/Release</h4>
 
581
                    <div class="accordion__tab-content">
 
582
                        <ul class="accordion__tab-list">
 
583
                            <li class="accordion__tab-item" data-ng-repeat="release in tabs.nodes.metadata.release | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('release', release.name, 'nodes') }">
 
584
                                <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('release', release.name, 'nodes')">{$ getReleaseTitle(release.name) $} ({$ release.count $})</a>
 
585
                            </li>
 
586
                        </ul>
 
587
                    </div>
 
588
                </div>
 
589
                <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.tags.length">
 
590
                    <h4 class="accordion__tab-title maas-accordion-tab">Tags</h4>
 
591
                    <div class="accordion__tab-content">
 
592
                        <ul class="accordion__tab-list">
 
593
                            <li class="accordion__tab-item" data-ng-repeat="tag in tabs.nodes.metadata.tags | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('tags', tag.name, 'nodes') }">
 
594
                                <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('tags', tag.name, 'nodes')">{$ tag.name $} ({$ tag.count $})</a>
 
595
                            </li>
 
596
                        </ul>
 
597
                    </div>
 
598
                </div>
 
599
                <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.storage_tags.length">
 
600
                    <h4 class="accordion__tab-title maas-accordion-tab">Storage Tags</h4>
 
601
                    <div class="accordion__tab-content">
 
602
                        <ul class="accordion__tab-list">
 
603
                            <li class="accordion__tab-item" data-ng-repeat="tag in tabs.nodes.metadata.storage_tags | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('storage_tags', tag.name, 'nodes') }">
 
604
                                <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('storage_tags', tag.name, 'nodes')">{$ tag.name $} ({$ tag.count $})</a>
 
605
                            </li>
 
606
                        </ul>
 
607
                    </div>
 
608
                </div>
 
609
                <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.subnets.length">
 
610
                    <h4 class="accordion__tab-title maas-accordion-tab">Subnets</h4>
 
611
                    <div class="accordion__tab-content">
 
612
                        <ul class="accordion__tab-list">
 
613
                            <li class="accordion__tab-item" data-ng-repeat="subnet in tabs.nodes.metadata.subnets | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('subnets', subnet.name, 'nodes') }">
 
614
                                <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('subnets', subnet.name, 'nodes')">{$ subnet.name $} ({$ subnet.count $})</a>
 
615
                            </li>
 
616
                        </ul>
 
617
                    </div>
 
618
                </div>
 
619
                <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.fabrics.length">
 
620
                    <h4 class="accordion__tab-title maas-accordion-tab">Fabrics</h4>
 
621
                    <div class="accordion__tab-content">
 
622
                        <ul class="accordion__tab-list">
 
623
                            <li class="accordion__tab-item" data-ng-repeat="fabric in tabs.nodes.metadata.fabrics | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('fabrics', fabric.name, 'nodes') }">
 
624
                                <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('fabrics', fabric.name, 'nodes')">{$ fabric.name $} ({$ fabric.count $})</a>
 
625
                            </li>
 
626
                        </ul>
 
627
                    </div>
 
628
                </div>
 
629
                <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.spaces.length">
 
630
                    <h4 class="accordion__tab-title maas-accordion-tab">Spaces</h4>
 
631
                    <div class="accordion__tab-content">
 
632
                        <ul class="accordion__tab-list">
 
633
                            <li class="accordion__tab-item" data-ng-repeat="space in tabs.nodes.metadata.spaces | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('spaces', space.name, 'nodes') }">
 
634
                                <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('spaces', space.name, 'nodes')">{$ space.name $} ({$ space.count $})</a>
 
635
                            </li>
 
636
                        </ul>
 
637
                    </div>
 
638
                </div>
 
639
                <div class="ng-hide accordion__tab" data-ng-show="tabs.nodes.metadata.zone.length">
 
640
                    <h4 class="accordion__tab-title maas-accordion-tab">Zones</h4>
 
641
                    <div class="accordion__tab-content">
 
642
                        <ul class="accordion__tab-list">
 
643
                            <li class="accordion__tab-item" data-ng-repeat="zone in tabs.nodes.metadata.zone | orderBy:['name', '-count']" data-ng-class="{ 'is-active': isFilterActive('zone', zone.name, 'nodes') }">
 
644
                                <a class="accordion__tab-link" href="" data-ng-click="toggleFilter('zone', zone.name, 'nodes')">{$ zone.name $} ({$ zone.count $})</a>
 
645
                            </li>
 
646
                        </ul>
 
647
                    </div>
643
648
                </div>
644
649
            </div>
645
650
        </div>
696
701
            <table id="nodes-listing">
697
702
                <thead>
698
703
                    <tr>
699
 
                        <th class="table-col--3">
 
704
                        <th class="table-col--3 u-display--medium" aria-label="Select all">
700
705
                            <!-- XXX ricgard 2016-06-16 - Need to add e2e test. -->
701
706
                            <input class="checkbox" type="checkbox" data-ng-click="toggleCheckAll('nodes')" data-ng-checked="tabs.nodes.allViewableChecked" id="check-all" data-ng-disabled="hasActionsInProgress('nodes')" />
702
707
                            <label class="checkbox-label" for="check-all"></label>
715
720
                            <!-- XXX ricgard 2016-06-16 - Need to add e2e test. -->
716
721
                            <a href="" class="u-align--center" data-ng-click="sortTable('power_state', 'nodes')" data-ng-class="{'is-sorted': tabs.nodes.predicate === 'power_state', 'sort-asc': tabs.nodes.reverse === false, 'sort-desc': tabs.nodes.reverse === true}">Power</a>
717
722
                        </th>
718
 
                        <th class="table-col--3"></th>
719
723
                        <th>
720
724
                            <!-- XXX ricgard 2016-06-16 - Need to add e2e test. -->
721
725
                            <a href="" data-ng-click="sortTable('status', 'nodes')" data-ng-class="{'is-sorted': tabs.nodes.predicate === 'status', 'sort-asc': tabs.nodes.reverse === false, 'sort-desc': tabs.nodes.reverse === true}">Status</a>
747
751
                    <tr
748
752
                        data-ng-repeat="node in tabs.nodes.filtered_items = (nodes | nodesFilter:tabs.nodes.search | orderBy:tabs.nodes.predicate:tabs.nodes.reverse) track by node.system_id"
749
753
                        data-ng-class="{ 'table--error': !supportsAction(node, 'nodes'), selected: node.$selected }">
750
 
                        <td class="table-col--3">
 
754
                        <td class="table-col--3" aria-label="Select node">
751
755
                            <!-- XXX ricgard 2016-06-16 - Need to add e2e test. -->
752
756
                            <input class="checkbox" type="checkbox" data-ng-click="toggleChecked(node, 'nodes')" data-ng-checked="node.$selected" id="{$ node.fqdn $}" data-ng-disabled="hasActionsInProgress('nodes')" />
753
757
                            <label class="checkbox-label" for="{$ node.fqdn $}"></label>
754
758
                        </td>
755
759
                        <!-- XXX ricgard 2016-06-16 - Need to add e2e test. -->
756
 
                        <td class="u-align--left" data-ng-show="tabs.nodes.column === 'fqdn'" colspan="2">
757
 
                            <a href="#/node/machine/{$ node.system_id $}">{$ node.fqdn $}</a>
 
760
                        <td class="u-align--left" aria-label="FQDN" data-ng-show="tabs.nodes.column === 'fqdn'" colspan="2">
 
761
                            <a href="#/node/{$ node.system_id $}">{$ node.fqdn $}</a>
758
762
                        </td>
759
763
                        <!-- XXX ricgard 2016-06-16 - Need to add e2e test. -->
760
 
                        <td class="ng-hide u-align--left" data-ng-show="tabs.nodes.column === 'pxe_mac'" colspan="2">
761
 
                            <a href="#/node/machine/{$ node.system_id $}" title="{$ node.pxe_mac_vendor $}">{$ node.pxe_mac $}</a>
762
 
                            <a href="#/node/machine/{$ node.system_id $}" class="extra-macs" data-ng-show="node.extra_macs.length">(+{$ node.extra_macs.length $})</a>
763
 
                        </td>
764
 
                        <td class="powerstate u-align--center">
765
 
                            <span title="{$ node.power_state $}" class="icon icon--power-{$ node.power_state $}"></span>
766
 
                        </td>
767
 
                        <td class="table-col--3"><i data-ng-if="showSpinner(node)" class="icon icon--loading u-animation--spin"></i></td>
768
 
                        <td class="status u-text--truncate">{$ getStatusText(node) $}</td>
769
 
                        <td class="table-col--10">{$ node.owner $}</td>
770
 
                        <td class="u-align--right">{$ node.cpu_count $}</td>
771
 
                        <td class="u-align--right">{$ node.memory $}</td>
772
 
                        <td class="u-align--right">{$ node.physical_disk_count $}</td>
773
 
                        <td class="u-align--right">{$ node.storage $}</td>
 
764
                        <td class="ng-hide u-align--left" aria-label="MAC" data-ng-show="tabs.nodes.column === 'pxe_mac'" colspan="2">
 
765
                            <a href="#/node/{$ node.system_id $}" title="{$ node.pxe_mac_vendor $}">{$ node.pxe_mac $}</a>
 
766
                            <a href="#/node/{$ node.system_id $}" class="extra-macs" data-ng-show="node.extra_macs.length">(+{$ node.extra_macs.length $})</a>
 
767
                        </td>
 
768
                        <td class="powerstate u-align--center" aria-label="Power state">
 
769
                            <span title="{$ node.power_state $}" class="icon icon--power-{$ node.power_state $} u-display--desktop"></span>
 
770
                            <span class="u-display--mobile u-text--{$ node.power_state $}"><span title="{$ node.power_state $}" class="icon icon--power-{$ node.power_state $}"></span> {$ node.power_state $}</span>
 
771
                        </td>
 
772
                        <td class="status u-text--truncate" aria-label="Status">{$ getStatusText(node) $} <i data-ng-if="showSpinner(node)" class="icon icon--loading u-animation--spin u-margin--left-tiny"></i></td>
 
773
                        <td class="table-col--10" aria-label="Owner">{$ node.owner $}</td>
 
774
                        <td class="u-align--right u-display--desktop" aria-label="CPU">{$ node.cpu_count $}</td>
 
775
                        <td class="u-align--right u-display--desktop" aria-label="Memory">{$ node.memory $}</td>
 
776
                        <td class="u-align--right u-display--desktop" aria-label="Disks">{$ node.physical_disk_count $}</td>
 
777
                        <td class="u-align--right u-display--desktop" aria-label="Storage">{$ node.storage $}</td>
774
778
                    </tr>
775
779
                </tbody>
776
780
            </table>