2014-11-05 12:01:01 +01:00
|
|
|
<html>
|
|
|
|
<head>
|
2015-01-12 17:24:24 +01:00
|
|
|
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
|
|
|
|
<link href="bootstrap.min.css" rel="stylesheet">
|
2014-11-05 12:01:01 +01:00
|
|
|
|
2015-01-12 17:24:24 +01:00
|
|
|
<script type="text/javascript" src="hyrise-connector.js"></script>
|
2014-12-15 13:19:12 +01:00
|
|
|
<script type="text/javascript" src="ui.js"></script>
|
2014-11-17 15:39:27 +01:00
|
|
|
<link href="style.css" rel="stylesheet" />
|
|
|
|
<title>Hyrise SQL Frontend</title>
|
2014-11-05 12:01:01 +01:00
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="content">
|
|
|
|
<div class="row">
|
2015-01-12 17:24:24 +01:00
|
|
|
<div class="col-lg-5">
|
2014-11-05 12:01:01 +01:00
|
|
|
<!-- Config -->
|
|
|
|
<div class="row">
|
2014-12-15 13:19:12 +01:00
|
|
|
<div class="form-group col-sm-12">
|
|
|
|
<input type="text" class="form-control" id="endpointInput" placeholder="Hyrise Host" value="http://localhost:5000/query" />
|
2014-11-05 12:01:01 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2014-11-05 16:09:56 +01:00
|
|
|
<!-- Sample Queries -->
|
|
|
|
<div class="row" style="margin-bottom: 10px;">
|
2015-01-12 17:24:24 +01:00
|
|
|
<div class="col-sm-12" id="sampleQueries"></div>
|
|
|
|
<!-- <div class="col-sm-4" id="buggyQueries"></div> -->
|
2014-11-05 16:09:56 +01:00
|
|
|
</div>
|
|
|
|
|
2014-11-05 12:01:01 +01:00
|
|
|
<!-- Input -->
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-sm-12">
|
2015-01-12 17:24:24 +01:00
|
|
|
<textarea id="queryInput" class="form-control" placeholder="Enter your SQL query here..."></textarea>
|
2014-11-05 12:01:01 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Submit -->
|
2014-11-05 12:20:29 +01:00
|
|
|
<div class="row" style="margin: 10px 0px;">
|
2015-01-12 17:24:24 +01:00
|
|
|
<div class="col-sm-6">
|
2014-11-13 02:40:43 +01:00
|
|
|
<button type="button" class="btn btn-primary" id="submitBtn">Submit Query (Shift + Enter)</button>
|
2014-11-05 12:01:01 +01:00
|
|
|
</div>
|
2015-01-12 17:24:24 +01:00
|
|
|
<div class="col-sm-6">
|
|
|
|
<div class="input-group">
|
|
|
|
<span class="input-group-addon" id="basic-addon1"># times</span>
|
|
|
|
<input type="text" class="form-control" id="benchmarkInput" placeholder="Number of times to run" value="10" />
|
|
|
|
<span class="input-group-btn">
|
|
|
|
<button class="btn btn-primary" type="button" id="benchmarkBtn">Benchmark</button>
|
|
|
|
</span>
|
|
|
|
</div><!-- /input-group -->
|
|
|
|
</div>
|
2014-11-05 12:01:01 +01:00
|
|
|
</div>
|
2014-11-05 12:20:29 +01:00
|
|
|
|
2015-01-12 17:24:24 +01:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-lg-7">
|
|
|
|
|
2014-11-05 12:20:29 +01:00
|
|
|
<div class="row">
|
|
|
|
<div class="col-sm-12">
|
|
|
|
<!-- View: Performance Data -->
|
2015-01-26 15:40:39 +01:00
|
|
|
<h3>Performance Data</h3>
|
|
|
|
<h4 id="timeInfo"></h4>
|
2015-01-12 17:24:24 +01:00
|
|
|
|
2014-11-05 12:20:29 +01:00
|
|
|
<table id="performanceDataTable" class="table table-bordered table-striped table-hover">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
2015-01-12 17:24:24 +01:00
|
|
|
<th data-key="id">ID</th>
|
|
|
|
<th data-key="name">Name</th>
|
|
|
|
<th data-key="duration">Duration</th>
|
|
|
|
<th data-key="time_ms">Time (ms)</th>
|
2015-01-26 15:40:39 +01:00
|
|
|
<th data-key="startTime">Start Time</th>
|
|
|
|
<th data-key="endTime">End Time</th>
|
2014-11-05 12:20:29 +01:00
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody></tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2015-01-12 17:24:24 +01:00
|
|
|
<div class="row">
|
|
|
|
<div class="col-sm-12">
|
|
|
|
<!-- View: Result Table -->
|
|
|
|
<h3>Results (first 100 rows)</h3>
|
|
|
|
<div id="msgContainer" class="alert alert-success" role="alert">
|
|
|
|
<div id="resultInfo">Frontend Ready</div>
|
|
|
|
</div>
|
|
|
|
<table id="resultTable" class="table table-bordered table-striped table-hover"></table>
|
|
|
|
</div>
|
2014-11-12 00:11:19 +01:00
|
|
|
</div>
|
2015-01-12 17:24:24 +01:00
|
|
|
|
2014-11-05 12:01:01 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|