modify session page UI
This commit is contained in:
bohanjason
Dana Van Aken
parent
e676433ece
commit
63b7dd9a77
|
|
@ -1,18 +1,76 @@
|
||||||
|
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% load util_functions %}
|
{% load util_functions %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
.metric-scrollbar {
|
||||||
|
position: relative;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: block;
|
||||||
|
height: 400px;
|
||||||
|
padding-left: 25px;
|
||||||
|
border: 2px solid #F5F5F5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.knob-scrollbar {
|
||||||
|
position: relative;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: block;
|
||||||
|
height: 250px;
|
||||||
|
padding-left: 25px;
|
||||||
|
border: 2px solid #F5F5F5;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption > h4 {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%); }
|
||||||
|
caption span {float: right;}
|
||||||
|
|
||||||
|
.session-font {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-searchbar {
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-custom-scrollbar::-webkit-scrollbar {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-custom-scrollbar::-webkit-scrollbar:vertical {
|
||||||
|
width: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-custom-scrollbar::-webkit-scrollbar:horizontal {
|
||||||
|
height: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 2px solid white; /* should match background, can't be transparent */
|
||||||
|
background-color: rgba(0, 0, 0, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
<div id="session" class="container">
|
<div id="session" class="container">
|
||||||
<table class="table table-striped table-bordered table-condensed table-hover">
|
<table class="table table-striped table-bordered table-condensed table-hover">
|
||||||
<caption><h4>{{ labels.title }} (<a href="{% url 'edit_session' project.pk session.pk %}">edit</a>)
|
<caption >
|
||||||
(<a href="{% url 'edit_knobs' project.pk session.pk %}">edit knobs</a>)
|
<h4> {{ labels.title }}</h4>
|
||||||
</h4></caption>
|
<span> (<a href="{% url 'edit_session' project.pk session.pk %}">edit</a>)
|
||||||
|
(<a href="{% url 'edit_knobs' project.pk session.pk %}">edit knobs</a>)
|
||||||
|
</span>
|
||||||
|
</caption>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><div class="text-right">{{ labels.name }}</div></td>
|
<td style="width: 50%"><div class="text-right">{{ labels.name }}</div></td>
|
||||||
<td>{{ session.name }}</td>
|
<td style="width: 50%">{{ session.name }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
{% if session.description %}
|
{% if session.description %}
|
||||||
<tr>
|
<tr>
|
||||||
|
|
@ -59,145 +117,121 @@
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
<div id="sidebar" class="col-md-3" style="width:30%">
|
||||||
|
<div id="dbmss">
|
||||||
|
|
||||||
<div id="sidebar" class="col-md-3">
|
<div><h4>DBMS</h4></div>
|
||||||
<div id="dbmss">
|
<div class="boxbody checkbox session-font">
|
||||||
<div><h4>DBMS</h4></div>
|
<ul>
|
||||||
<div class="boxbody checkbox">
|
{% for dbms_key, dbms in dbmss.items %}
|
||||||
<ul>
|
<li><label><input type="checkbox" name="dbms" value="{{ dbms_key }}"/> {{ dbms.full_name }}</label></li>
|
||||||
{% for dbms_key, dbms in dbmss.items %}
|
{% endfor %}
|
||||||
<li><label><input type="checkbox" name="dbms" value="{{ dbms_key }}"/> {{ dbms.full_name }}</label></li>
|
</ul>
|
||||||
{% endfor %}
|
</div>
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="workload">
|
|
||||||
<div><h4>Workload</h4></div>
|
|
||||||
<div class="boxbody radio">
|
|
||||||
<ul>
|
|
||||||
<li><label><input type="radio" name="workload" value="show_none" /> Display none</label></li>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
{% for wkld, confs in workloads.items %}
|
|
||||||
<li>
|
|
||||||
<label><input id="workload_{{ wkld }}" type="radio" name="workload" value="{{ wkld }}" /> {{ wkld }}</label>
|
|
||||||
<div id="div_specific_{{ wkld }}">
|
|
||||||
<ul>
|
|
||||||
{% for conf in confs %}
|
|
||||||
<li><label><input id="specific_{{ wkld }}_{{ conf.pk }}" type="checkbox" name="specific" value="{{ conf.pk }}"/> {{ conf.name }}</label></li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
|
||||||
{% endfor %}
|
<div id="workload">
|
||||||
</ul>
|
<div><h4>Workload</h4></div>
|
||||||
|
<div class="boxbody radio session-font">
|
||||||
|
<ul>
|
||||||
|
<li><label><input type="radio" name="workload" value="show_none" /> Display none</label></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
{% for wkld, confs in workloads.items %}
|
||||||
|
<li>
|
||||||
|
<label><input id="workload_{{ wkld }}" type="radio" name="workload" value="{{ wkld }}" /> {{ wkld }}</label>
|
||||||
|
<div id="div_specific_{{ wkld }}">
|
||||||
|
<ul>
|
||||||
|
{% for conf in confs %}
|
||||||
|
<li><label><input id="specific_{{ wkld }}_{{ conf.pk }}" type="checkbox" name="specific" value="{{ conf.pk }}"/> {{ conf.name }}</label></li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="metric">
|
||||||
|
<div><h4>Plot Metrics</h4></div>
|
||||||
|
<input type="search" class="form-control session-searchbar session-font" id="metricSearch" placeholder="Filter Metrics">
|
||||||
|
<div class="checkbox boxbody metric-scrollbar session-font" >
|
||||||
|
<table id="metricTable">
|
||||||
|
{% for metric in metrics %}
|
||||||
|
<tr>
|
||||||
|
<td style="background-color: white;">
|
||||||
|
<input type="checkbox" name="metric" value="{{ metric }}"> {{ metric_meta|get_item:metric|get_attr:"pprint" }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="knob">
|
||||||
|
<div><h4>Plot Knobs</h4></div>
|
||||||
|
<input type="search" class="form-control session-searchbar session-font" id="knobSearch" placeholder="Filter Knobs">
|
||||||
|
<div class="checkbox boxbody knob-scrollbar session-font" >
|
||||||
|
<table id="knobTable">
|
||||||
|
{% for knob_name in knob_names %}
|
||||||
|
<tr>
|
||||||
|
<td style="background-color: white">
|
||||||
|
<input type="checkbox" name="knob" value="{{ knob_name }}" > {{ knob_name }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<!-- <div id="additional_filter">
|
|
||||||
<div><h4>Additional Filter</h4></div>
|
|
||||||
<div class="boxbody">
|
<div class="col-md-9" style="width: 70%">
|
||||||
<ul>
|
<div id="configbar" class="row">
|
||||||
{% for filter in filters %}
|
<div class="col-sm-10">
|
||||||
<li><label>{{ filter.print }}<select class="selectpicker" name="additional_{{ filter.field }}">
|
Show the last
|
||||||
<option value="select_all">Select All</option>
|
<select id="results_per_page" class="selectpicker show-tick" data-width="fit" data-style="btn-default">
|
||||||
{% for value in filter.values %}
|
{% for n_res in results_per_page %}
|
||||||
<option value="{{ value }}">{{ value }}</option>
|
<option value="{{ n_res }}">{{ n_res }}</option>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</select></label></li>
|
</select> results
|
||||||
{% endfor %}
|
</div>
|
||||||
</ul>
|
<div class="col-sm-2 checkbox">
|
||||||
|
<label><input id="equidistant" class="option" name="equidistant" type="checkbox"/> Equidistant</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
|
||||||
<div id="metric">
|
<div id="content" class="col-sm-12">
|
||||||
<div><h4>Plot Metrics</h4></div>
|
<div id="plotgrid" class="plotcontainer row"></div>
|
||||||
<div class="checkbox boxbody">
|
<div id="result_table">
|
||||||
<table id="metrictable">
|
<h4>Filtered Results</h4>
|
||||||
<thead style="display:none;">
|
<table id="dataTable">
|
||||||
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Metrics</th>
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
|
||||||
{% for metric in metrics %}
|
|
||||||
<tr>
|
|
||||||
<td style="background-color: white">
|
|
||||||
<input type="checkbox" name="metric" value="{{ metric }}" > {{ metric_meta|get_item:metric|get_attr:"pprint" }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- table tools stuff -->
|
||||||
|
<link rel='stylesheet' type='text/css' href='{{ STATIC_URL }}css/jquery.dataTables.css'>
|
||||||
|
<script type="text/javascript" src='{{ STATIC_URL }}js/jquery.dataTables.min.js'></script>
|
||||||
|
<script type="text/javascript" src='{{ STATIC_URL }}js/FixedHeader.min.js'></script>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="knob">
|
|
||||||
<div><h4>Plot Knobs</h4></div>
|
|
||||||
<div class="checkbox boxbody">
|
|
||||||
<table id="knobtable">
|
|
||||||
<thead style="display:none;">
|
|
||||||
<tr>
|
|
||||||
<th>Knobs</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
|
|
||||||
{% for knob_name in knob_names %}
|
|
||||||
<tr>
|
|
||||||
<td style="background-color: white">
|
|
||||||
<input type="checkbox" name="knob" value="{{ knob_name }}" > {{ knob_name }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-9">
|
|
||||||
<div id="configbar" class="row">
|
|
||||||
<div class="col-sm-10">
|
|
||||||
Show the last
|
|
||||||
<select id="results_per_page" class="selectpicker show-tick" data-width="fit" data-style="btn-default">
|
|
||||||
{% for n_res in results_per_page %}
|
|
||||||
<option value="{{ n_res }}">{{ n_res }}</option>
|
|
||||||
{% endfor %}
|
|
||||||
</select> results
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-2 checkbox">
|
|
||||||
<label><input id="equidistant" class="option" name="equidistant" type="checkbox"/> Equidistant</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="content" class="col-sm-10">
|
|
||||||
<div id="plotgrid" class="plotcontainer row"></div>
|
|
||||||
<div id="result_table">
|
|
||||||
<h4>Filtered Results</h4>
|
|
||||||
<table id="dataTable">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th></th>
|
|
||||||
<th></th>
|
|
||||||
<th></th>
|
|
||||||
<th></th>
|
|
||||||
<th></th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- table tools stuff -->
|
|
||||||
<link rel='stylesheet' type='text/css' href='{{ STATIC_URL }}css/jquery.dataTables.css'>
|
|
||||||
<script type="text/javascript" src='{{ STATIC_URL }}js/jquery.dataTables.min.js'></script>
|
|
||||||
<script type="text/javascript" src='{{ STATIC_URL }}js/FixedHeader.min.js'></script>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -248,4 +282,29 @@ $(function() {
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function(){
|
||||||
|
$("#metricSearch").on("keyup", function() {
|
||||||
|
var value = $(this).val().toLowerCase();
|
||||||
|
$("#metricTable tr").filter(function() {
|
||||||
|
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function(){
|
||||||
|
$("#knobSearch").on("keyup", function() {
|
||||||
|
var value = $(this).val().toLowerCase();
|
||||||
|
$("#knobTable tr").filter(function() {
|
||||||
|
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
{% endblock body %}
|
{% endblock body %}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue