summaryrefslogtreecommitdiffstats
path: root/app/common/directives/log-filter.html
blob: b84618e0d3f34ab118f43436aa9bd4f09d418ee7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<section id="event-filter" class="row column" aria-label="event log filtering">
    <div class="inline event__severity-filter">
        <p class="filter-label">Filter by severity</p>
        <button class="inline first" ng-click="toggleSeverityAll()"
                ng-class="selectedSeverity.all ? 'btn-primary' : 'btn-secondary'">All
        </button>
        <button class="inline " ng-click="toggleSeverity('high')"
                ng-class="selectedSeverity.high ? 'btn-primary' : 'btn-secondary'">High
        </button>
        <button class="inline" ng-click="toggleSeverity('medium')"
                ng-class="selectedSeverity.medium ? 'btn-primary' : 'btn-secondary'">Medium
        </button>
        <button class="inline last" ng-click="toggleSeverity('low')"
                ng-class="selectedSeverity.low ? 'btn-primary' : 'btn-secondary'">Low
        </button>
    </div>
    <div class="inline event__date-filter">
        <p class="filter-label">Filter by date range</p>
        <div class="inline">
            <label for="event-filter-start-date">Start Date</label>
            <input id="event-filter-start-date" type="date" max="{{end_date | date:'yyyy-MM-dd'}}" placeholder="MM/DD/YYYY" ng-model="start_date"/>
        </div>
        <strong>&ndash;</strong>
        <div class="inline">
            <label for="event-filter-end-date">End Date</label>
            <input id="event-filter-end-date" type="date" min="{{start_date | date:'yyyy-MM-dd'}}" placeholder="MM/DD/YYYY" ng-model="end_date"/>
        </div>
    </div>
    <div class="inline event__status-filter">
        <p class="filter-label">Filter by event status</p>
        <!-- Status filter -->
        <div class="dropdown__wrapper">
            <button class="dropdown__button" ng-click="statusFilter = statusFilter == true ? false : true;"
                    ng-class="{'active' : statusFilter}" toggle-flag="statusFilter">
                    <span ng-if="selectedStatus.all">All events</span>
                    <span ng-if="!selectedStatus.all && selectedStatus.resolved">Resolved events</span>
                    <span ng-if="!selectedStatus.all && !selectedStatus.resolved">Unresolved events</span>
            </button>
            <ul class="dropdown__list inline" ng-show="statusFilter">
                <li>
                    <button
                        ng-click="selectedStatus.all = true; statusFilter = false;"
                        ng-class="{'active' : selectedStatus.all}">All events</button>
                </li>
                <li>
                    <button
                        ng-click="selectedStatus.all = false; selectedStatus.resolved = true; statusFilter = false;"
                        ng-class="{'active' : selectedStatus.resolved}">Resolved events</button>
                </li>
                <li>
                    <button
                        ng-click="selectedStatus.all = false; selectedStatus.resolved = false; statusFilter = false;"
                        ng-class="{'active' : !selectedStatus.resolved}">Unresolved events</button>
                </li>
            </ul>
        </div>
    </div>
</section>
OpenPOWER on IntegriCloud