Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Integrate default filter html #2555

Merged
merged 4 commits into from
Jun 7, 2017
Merged

Integrate default filter html #2555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0571713
[trigger] Add hostId query in domesticLink
Mar 6, 2017
148d02b
[css] Brush up hatohol.css
Mar 6, 2017
e854307
[html] Integrate summary default filter and events default filter
Mar 6, 2017
ad3e70c
[html] Replace 'Delete' string to trash icon
Mar 6, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 44 additions & 41 deletions client/static/css/hatohol.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ div#controller-container
padding: 16px 4px 16px 4px;
}

#view-config input[type="text"] {
input#auto-reload-interval,#num-rows-per-page {
width: 4em;
display: inline-block;
}
Expand All @@ -123,18 +123,16 @@ label.unit {
}

div#filter-name-config {
margin-top: 16px;
margin-bottom: 20px;
margin-top: 6px;
margin-bottom: 10px;
}

#filter-name-config .btn.dropdown-toggle {
float: none;
}

#filter-name-config ul {
width: 380px;
left: initial;
right: 32px;
min-width: 320px;
}

#filter-name-config li {
Expand All @@ -151,6 +149,10 @@ button#filter-name-list-button {
margin-bottom: 2px;
}

button#filter-name-list-add-button {
margin-bottom: 6px;
}

button#filter-name-list-delete-button {
margin-bottom: 6px;
}
Expand Down Expand Up @@ -219,13 +221,6 @@ table.view-layout-mock td.highlight {
border-color: red !important;
}

select.default-filter-selector {
display: inline-block;
vertical-align: middle;
margin-left: 40px;
width: 200px;
}

td[contenteditable=true]:empty::before {
content: attr(data-placeholder);
color: #888888;
Expand Down Expand Up @@ -358,10 +353,27 @@ h2.hatohol-graph {
}

.filter-element {
display: inline-block;
*display:inline;
text-align: left;
margin-right: 10px;
*display:inline;
display: inline-table;
text-align: left;
margin-right: 10px;
width: 33%;
margin: 0;
padding: 0 0 12px 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.filter-element p {
display: table-cell;
vertical-align: middle;
height: auto;
line-height: 100%;
}

.filter-element select {
width: 50%;
}

.filter-time-range {
Expand Down Expand Up @@ -557,14 +569,22 @@ html {
color: #666666;
}

#summaryBar #select-summary-filter {
#summaryBar .filter-element {
position: relative;
left: 10px;
top: 7px;
width: auto;
width: 100px;
font-size: 12px;
}

#summaryBar .filter-element .bootstrap-select {
width: 150px;
}

#select-filter ul {
min-width: 250px;
}

#summaryBar #summaryBarRight {
position: absolute;
right: 170px;
Expand Down Expand Up @@ -638,31 +658,10 @@ html {
margin: 0;
}

#hideDiv .filter-element {
display: inline-table;
width: 33%;
margin: 0;
padding: 0 0 12px 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

#hideDiv .filter-element p {
display: table-cell;
vertical-align: middle;
height: auto;
line-height: 100%;
}

#hideDiv .bootstrap-select.btn-group > .disabled {
.bootstrap-select.btn-group > .disabled {
background-color: #adadad;
}

#hideDiv .filter-element select {
width: 50%;
}

#hideDiv #apply-all-filter {
background: #428bca;
border-color: #428bca;
Expand Down Expand Up @@ -773,6 +772,10 @@ div#abbreviating-event-descriptions-container {
margin: 0;
}

#view-config .bootstrap-select {
width: 200px;
}

.table.verticalAlignMiddle > tbody > tr > td {
vertical-align: middle;
}
Expand Down
1 change: 1 addition & 0 deletions client/static/js/triggers_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,6 +425,7 @@ var TriggersView = function(userProfile, options) {
html += "<td class='" + severityClass + "'>" +
anchorTagForDomesticLink(
'ajax_events?serverId=' + escapeHTML(serverId) +
'&hostId=' + escapeHTML(trigger["hostId"]) +
'&triggerId=' + escapeHTML(trigger["id"]),
escapeHTML(triggerName));
+ "</td>";
Expand Down
53 changes: 15 additions & 38 deletions client/viewer/events_ajax.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,9 @@ <h2 style="margin-left: 20px;">{% trans "Event" %}</h2>
<button style="display: none;">
{% trans "Hosts with important events" %}<span class="badge" id="numOfImportantEventOccurredHosts">N/A</span>
</button>
<select id="select-summary-filter" class="form-control"></select>
<div class="filter-element">
<select id="select-filter" class="form-control" data-live-search="true"></select>
</div>
<div id="summaryBarRight">
<div id="update-time-wrap">
<div id="update-time"> {% trans "Last Update:"%} None </div>
Expand All @@ -63,7 +65,7 @@ <h2 style="margin-left: 20px;">{% trans "Event" %}</h2>
<form class="form-inline hatohol-filter-toolbar">
<div class="clearfix">
<div class="pull-left">
<h3 id="controller-container-title"></h3>
<h3 id="controller-container-title"> {% trans "All Events" %} </h3>
<span id="filtering-options-brief"><span aria-hiden="true" class="glyphicon glyphicon-tag"></span><span id="filtering-options-brief-line"/></span>
</div>
<div class="pull-right">
Expand Down Expand Up @@ -136,9 +138,7 @@ <h3 id="controller-container-title"></h3>
</select>
</div>
<div class="filter-element">
<p><label>{% trans "Filter:" %}</label></p>
<select id="select-filter" class="form-control" data-live-search="true" data-width="50%">
</select>
<p></p>
</div>
<div class="filter-element">
<p><label>{% trans "Hostgroup Name:" %}</label></p>
Expand Down Expand Up @@ -210,10 +210,16 @@ <h4 class="modal-title" id="events-view-config-label">{% trans "Event Page Setti
<ul id="config-tab-list" class="nav nav-tabs">
<li class="active"><a href="#view-config" data-toggle="tab">{% trans "View" %}</a></li>
<li><a href="#filter-config" data-toggle="tab">{% trans "Filter" %}</a></li>
<li><a href="#default-filter-config" data-toggle="tab">{% trans "Default filter" %}</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="view-config">
<label>{% trans "Default filter" %}</label>
<div class="filter-element" style="float: right;">
<select id="events-default-filter-selector" class="form-control" data-live-search="true">
</select>
</div>

<hr>
<div class="boxed-group">
<p><label for="auto-reload-interval">{% trans "Auto reload interval (5 - 600 sec)" %}</p>
<p>
Expand Down Expand Up @@ -289,8 +295,9 @@ <h4 class="modal-title" id="events-view-config-label">{% trans "Event Page Setti
<div class="tab-pane fade" id="filter-config">

<!-- Filter name -->
<div id="filter-name-config" class="btn-group">
<label for="filter-name-entry">{% trans "Filter name(1 - 128 char)" %}</label>
<br>
<div id="filter-name-config" class="btn-group">
<input id="filter-name-entry" class="form-control" type="text" style="width: 290px" maxlength="128">
<button id="filter-name-list-button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
Expand All @@ -302,7 +309,7 @@ <h4 class="modal-title" id="events-view-config-label">{% trans "Event Page Setti
<i class="glyphicon glyphicon-plus"></i>
</button>
<button id="filter-name-list-delete-button" class="btn btn-primary">
{% trans "Delete" %}
<i class="glyphicon glyphicon-trash"></i>
</button>

<!-- Period filter config -->
Expand Down Expand Up @@ -573,36 +580,6 @@ <h4 class="modal-title" id="events-view-config-label">{% trans "Event Page Setti
</div>
</div>

<div class="tab-pane fade" id="default-filter-config">

<div>
<p>{% trans 'Select a filter to apply as the default filter of the summary view.' %}
</p>
<div class="view-layout-mock">
<table class="table-bordered view-layout-mock">
<tr><td class="controlbar highlight"></td></tr>
<tr><td></td></tr>
</table>
</div>
<select size="8" id="summary-default-filter-selector" class="default-filter-selector">
</select>
</div>

<hr>

<div>
<p>{% trans 'Select a filter to apply as the default filter of the event list view.' %}</p>
<div class="view-layout-mock">
<table class="table-bordered view-layout-mock">
<tr><td class="controlbar"></td></tr>
<tr><td class="highlight"></td></tr>
</table>
</div>
<select size="8" id="events-default-filter-selector" class="default-filter-selector">
</select>
</div>

</div>
</div>

</div>
Expand Down