Commit 20d543b9 authored by ale's avatar ale

move to bootstrap 3, jquery 2, and jsRender

parent 8d95228c
This diff is collapsed.
This diff is collapsed.
#searchForm input {
font-size: 16px;
body {
padding-top: 55px;
}
.log:hover {
background-color: #eef;
}
.timestamp {
color: #666;
}
.host {
font-weight: bold;
}
#log_pagination_div {
display: none;
font-size: 85%;
padding-bottom: 3px;
padding-left: 30px;
padding-right: 30px;
}
#log_pagination_prev {
cursor: pointer;
}
#log_pagination_next {
cursor: pointer;
#query_field.loading {
background: url('../spinner.gif') no-repeat top right white;
}
#query_time {
float: right;
margin-right: 30px;
color: #aaa;
.timestamp {
color: #666;
}
#show_stats_btn {
display: block;
float: right;
margin-bottom: -3px;
padding-left: 20px;
padding-right: 5px;
padding-top: 2px;
border: 1px solid black;
.host {
font-weight: bold;
}
.btn_open {
background: url(img/arrow_open.png) top left no-repeat;
}
.btn_closed {
background: url(img/arrow_closed.png) top left no-repeat;
}
#log_stats {
display: none;
width: 100%;
......@@ -63,7 +27,7 @@
}
#log_viewer {
border-top: 1px solid #666;
/* border-top: 1px solid #666; */
padding-top: 3px;
font-family: 'Ubuntu Mono', monospace;
word-wrap: break-word;
......@@ -83,16 +47,6 @@
-webkit-border-radius: 7px;
}
#header {
padding-right: 40px;
background: url(/static/rstar32.gif) no-repeat top right;
}
#error {
display: block;
color: red;
}
.chart {
float: left;
margin: 5px;
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
/*
* jQuery Templates Plugin 1.0.0pre
* http://github.com/jquery/jquery-tmpl
* Requires jQuery 1.4.2
*
* Copyright 2011, Software Freedom Conservancy, Inc.
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
(function(a){var r=a.fn.domManip,d="_tmplitem",q=/^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,b={},f={},e,p={key:0,data:{}},i=0,c=0,l=[];function g(g,d,h,e){var c={data:e||(e===0||e===false)?e:d?d.data:{},_wrap:d?d._wrap:null,tmpl:null,parent:d||null,nodes:[],calls:u,nest:w,wrap:x,html:v,update:t};g&&a.extend(c,g,{nodes:[],parent:d});if(h){c.tmpl=h;c._ctnt=c._ctnt||c.tmpl(a,c);c.key=++i;(l.length?f:b)[i]=c}return c}a.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(f,d){a.fn[f]=function(n){var g=[],i=a(n),k,h,m,l,j=this.length===1&&this[0].parentNode;e=b||{};if(j&&j.nodeType===11&&j.childNodes.length===1&&i.length===1){i[d](this[0]);g=this}else{for(h=0,m=i.length;h<m;h++){c=h;k=(h>0?this.clone(true):this).get();a(i[h])[d](k);g=g.concat(k)}c=0;g=this.pushStack(g,f,i.selector)}l=e;e=null;a.tmpl.complete(l);return g}});a.fn.extend({tmpl:function(d,c,b){return a.tmpl(this[0],d,c,b)},tmplItem:function(){return a.tmplItem(this[0])},template:function(b){return a.template(b,this[0])},domManip:function(d,m,k){if(d[0]&&a.isArray(d[0])){var g=a.makeArray(arguments),h=d[0],j=h.length,i=0,f;while(i<j&&!(f=a.data(h[i++],"tmplItem")));if(f&&c)g[2]=function(b){a.tmpl.afterManip(this,b,k)};r.apply(this,g)}else r.apply(this,arguments);c=0;!e&&a.tmpl.complete(b);return this}});a.extend({tmpl:function(d,h,e,c){var i,k=!c;if(k){c=p;d=a.template[d]||a.template(null,d);f={}}else if(!d){d=c.tmpl;b[c.key]=c;c.nodes=[];c.wrapped&&n(c,c.wrapped);return a(j(c,null,c.tmpl(a,c)))}if(!d)return[];if(typeof h==="function")h=h.call(c||{});e&&e.wrapped&&n(e,e.wrapped);i=a.isArray(h)?a.map(h,function(a){return a?g(e,c,d,a):null}):[g(e,c,d,h)];return k?a(j(c,null,i)):i},tmplItem:function(b){var c;if(b instanceof a)b=b[0];while(b&&b.nodeType===1&&!(c=a.data(b,"tmplItem"))&&(b=b.parentNode));return c||p},template:function(c,b){if(b){if(typeof b==="string")b=o(b);else if(b instanceof a)b=b[0]||{};if(b.nodeType)b=a.data(b,"tmpl")||a.data(b,"tmpl",o(b.innerHTML));return typeof c==="string"?(a.template[c]=b):b}return c?typeof c!=="string"?a.template(null,c):a.template[c]||a.template(null,q.test(c)?c:a(c)):null},encode:function(a){return(""+a).split("<").join("&lt;").split(">").join("&gt;").split('"').join("&#34;").split("'").join("&#39;")}});a.extend(a.tmpl,{tag:{tmpl:{_default:{$2:"null"},open:"if($notnull_1){__=__.concat($item.nest($1,$2));}"},wrap:{_default:{$2:"null"},open:"$item.calls(__,$1,$2);__=[];",close:"call=$item.calls();__=call._.concat($item.wrap(call,__));"},each:{_default:{$2:"$index, $value"},open:"if($notnull_1){$.each($1a,function($2){with(this){",close:"}});}"},"if":{open:"if(($notnull_1) && $1a){",close:"}"},"else":{_default:{$1:"true"},open:"}else if(($notnull_1) && $1a){"},html:{open:"if($notnull_1){__.push($1a);}"},"=":{_default:{$1:"$data"},open:"if($notnull_1){__.push($.encode($1a));}"},"!":{open:""}},complete:function(){b={}},afterManip:function(f,b,d){var e=b.nodeType===11?a.makeArray(b.childNodes):b.nodeType===1?[b]:[];d.call(f,b);m(e);c++}});function j(e,g,f){var b,c=f?a.map(f,function(a){return typeof a==="string"?e.key?a.replace(/(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g,"$1 "+d+'="'+e.key+'" $2'):a:j(a,e,a._ctnt)}):e;if(g)return c;c=c.join("");c.replace(/^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/,function(f,c,e,d){b=a(e).get();m(b);if(c)b=k(c).concat(b);if(d)b=b.concat(k(d))});return b?b:k(c)}function k(c){var b=document.createElement("div");b.innerHTML=c;return a.makeArray(b.childNodes)}function o(b){return new Function("jQuery","$item","var $=jQuery,call,__=[],$data=$item.data;with($data){__.push('"+a.trim(b).replace(/([\\'])/g,"\\$1").replace(/[\r\t\n]/g," ").replace(/\$\{([^\}]*)\}/g,"{{= $1}}").replace(/\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,function(m,l,k,g,b,c,d){var j=a.tmpl.tag[k],i,e,f;if(!j)throw"Unknown template tag: "+k;i=j._default||[];if(c&&!/\w$/.test(b)){b+=c;c=""}if(b){b=h(b);d=d?","+h(d)+")":c?")":"";e=c?b.indexOf(".")>-1?b+h(c):"("+b+").call($item"+d:b;f=c?e:"(typeof("+b+")==='function'?("+b+").call($item):("+b+"))"}else f=e=i.$1||"null";g=h(g);return"');"+j[l?"close":"open"].split("$notnull_1").join(b?"typeof("+b+")!=='undefined' && ("+b+")!=null":"true").split("$1a").join(f).split("$1").join(e).split("$2").join(g||i.$2||"")+"__.push('"})+"');}return __;")}function n(c,b){c._wrap=j(c,true,a.isArray(b)?b:[q.test(b)?b:a(b).html()]).join("")}function h(a){return a?a.replace(/\\'/g,"'").replace(/\\\\/g,"\\"):null}function s(b){var a=document.createElement("div");a.appendChild(b.cloneNode(true));return a.innerHTML}function m(o){var n="_"+c,k,j,l={},e,p,h;for(e=0,p=o.length;e<p;e++){if((k=o[e]).nodeType!==1)continue;j=k.getElementsByTagName("*");for(h=j.length-1;h>=0;h--)m(j[h]);m(k)}function m(j){var p,h=j,k,e,m;if(m=j.getAttribute(d)){while(h.parentNode&&(h=h.parentNode).nodeType===1&&!(p=h.getAttribute(d)));if(p!==m){h=h.parentNode?h.nodeType===11?0:h.getAttribute(d)||0:0;if(!(e=b[m])){e=f[m];e=g(e,b[h]||f[h]);e.key=++i;b[i]=e}c&&o(m)}j.removeAttribute(d)}else if(c&&(e=a.data(j,"tmplItem"))){o(e.key);b[e.key]=e;h=a.data(j.parentNode,"tmplItem");h=h?h.key:0}if(e){k=e;while(k&&k.key!=h){k.nodes.push(j);k=k.parent}delete e._ctnt;delete e._wrap;a.data(j,"tmplItem",e)}function o(a){a=a+n;e=l[a]=l[a]||g(e,b[e.parent.key+n]||e.parent)}}}function u(a,d,c,b){if(!a)return l.pop();l.push({_:a,tmpl:d,item:this,data:c,options:b})}function w(d,c,b){return a.tmpl(a.template(d),c,b,this)}function x(b,d){var c=b.options||{};c.wrapped=d;return a.tmpl(a.template(b.tmpl),b.data,c,b.item)}function v(d,c){var b=this._wrap;return a.map(a(a.isArray(b)?b.join(""):b).filter(d||"*"),function(a){return c?a.innerText||a.textContent:a.outerHTML||s(a)})}function t(){var b=this.nodes;a.tmpl(null,null,null,this).insertBefore(b[0]);a(b).remove()}})(jQuery);
\ No newline at end of file
This diff is collapsed.
......@@ -69,12 +69,14 @@ lens.Lens = function(config) {
this.pagination_prev_elem.click(function() { lensobj.pagePrev(); });
// Create the rendering templates.
var log_template_id = _merge('log_template_id', '#log_template');
this.log_template = $.template(null, $(log_template_id));
this.log_template = $.templates(log_template_id);
var error_template_id = _merge('error_template_id', '#error_template');
this.error_template = $.template(null, $(error_template_id));
this.error_template = $.templates(error_template_id);
var chart_template_id = _merge('chart_template_id', '#chart_template');
this.chart_template = $.template(null, $(chart_template_id));
this.chart_template = $.templates(chart_template_id);
// Reset internal state.
this.resetDefaultQueryParams();
......@@ -192,15 +194,16 @@ lens.Lens.prototype.loadFilterLinks = function() {
* @param {Array[string]} logs list of logs
*/
lens.Lens.prototype.renderLogs = function(logs) {
var out = '';
this.results_view_elem.html('');
var template = this.log_template;
var results_view_id = this.results_view_id;
// Render logs in reverse order, to have the timestamps sorted correctly.
$.each(logs, function(idx, elem) {
$.tmpl(template, {log: elem}).prependTo(results_view_id);
// TODO: Render logs in reverse order, to have the timestamps sorted
// correctly.
var a = [];
$.each(logs, function(idx, entry) {
a.push({'log': entry});
});
a.reverse();
this.results_view_elem.html(
this.log_template.render(a));
this.results_view_elem.show();
this.loadAttrLinks();
......@@ -258,6 +261,7 @@ lens.Lens.prototype.render = function(logs, facets, elapsed) {
this.renderPagination(logs);
// Render stats.
/**
this.stats_view_elem.html('');
if (facets.host) {
this.renderChart('host', 'Top 5 hosts', facets.host.terms);
......@@ -265,16 +269,15 @@ lens.Lens.prototype.render = function(logs, facets, elapsed) {
if (facets.program) {
this.renderChart('program', 'Top 5 programs', facets.program.terms);
}
/*
if (facets.timestamp) {
this.renderHistogram('timestamp', 'Time distribution',
facets.timestamp.entries);
}
*/
//if (facets.timestamp) {
// this.renderHistogram('timestamp', 'Time distribution',
// facets.timestamp.entries);
//}
this.stats_view_elem.show();
**/
// Show query time.
$('#query_time').text('query time: ' + elapsed + ' ms');
//$('#query_time').text('query time: ' + elapsed + ' ms');
};
/**
......@@ -369,14 +372,15 @@ lens.Lens.prototype.pageNext = function() {
*/
lens.Lens.prototype.ajaxError = function(jqxhr, textStatus, errorThrown) {
this.clearLoading();
$('#error').html('');
$.tmpl(this.error_template,
{error: textStatus,
errorThrown: errorThrown}
).appendTo('#error');
$('#error').attr(
'data-title',
this.error_template.render(
{error: textStatus,
errorThrown: errorThrown}));
this.pagination_div_elem.hide();
this.results_view_elem.html('');
$('#error').show();
$('#error').tooltip('show');
};
/**
......@@ -390,13 +394,15 @@ lens.Lens.prototype.clearError = function() {
* Show 'loading' icon.
*/
lens.Lens.prototype.showLoading = function() {
$('#loading').show();
// $('#loading').show();
this.query_field_elem.toggleClass('loading', true);
};
/**
* Hide 'loading' icon.
*/
lens.Lens.prototype.clearLoading = function() {
$('#loading').hide();
// $('#loading').hide();
this.query_field_elem.toggleClass('loading', false);
};
lens2/static/spinner.gif

673 Bytes | W: | H:

lens2/static/spinner.gif

4.08 KB | W: | H:

lens2/static/spinner.gif
lens2/static/spinner.gif
lens2/static/spinner.gif
lens2/static/spinner.gif
  • 2-up
  • Swipe
  • Onion skin
......@@ -3,20 +3,157 @@
<html>
<head>
<title>A/I Log Search</title>
<link href="/static/favicon.ico" type="image/x-icon" rel="shortcut icon">
<link rel="stylesheet" type="text/css" href="/static/lens2.css">
<link href="//fonts.googleapis.com/css?family=Ubuntu+Mono" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/static/strftime.min.js"></script>
<script type="text/javascript" src="/static/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/static/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="/static/protovis.min.js"></script>
<script type="text/javascript" src="/static/graphs.js"></script>
<script type="text/javascript" src="/static/lens2.js?v=123"></script>
<script type="text/javascript">
<link href="{{ url_for('static', filename='favicon.ico') }}"
type="image/x-icon" rel="shortcut icon">
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='css/lens2.css') }}">
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
<link href="//fonts.googleapis.com/css?family=Ubuntu+Mono"
rel="stylesheet" type="text/css">
</head>
<body>
{# Header, navigation bar and search #}
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LENS</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<form id="searchForm" class="navbar-form navbar-left"
action="{{ url_for('api.api_search') }}" method="post"
role="search">
<div class="form-group">
<input type="text" class="form-control"
name="q" id="query_field" size="70"
placeholder="Search...">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</form>
<p class="navbar-text">
{# The loading spinner gif #}
<img id="loading" style="display:none;"
src="{{ url_for('static', filename='spinner.gif') }}">
{# A pop-up for errors #}
<span id="error" class="glyphicon glyphicon-warning-sign"
data-toggle="tooltip" data-placement="bottom" data-html="true"
data-title="" style="color:red;display:none;"></span>
</p>
<ul class="nav navbar-nav navbar-right">
<li>
{# Pagination and time-based navigation #}
<div class="button-group" id="log_pagination_div">
<button type="button" class="btn btn-default btn-sm navbar-btn"
id="log_pagination_prev" style="display:none;">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<button type="button" disabled="disabled"
class="btn btn-default btn-sm navbar-btn"
id="log_pagination_title"></button>
<button type="button" class="btn btn-default btn-sm navbar-btn"
id="log_pagination_next" style="display:none;">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
<span class="glyphicon glyphicon-cog"></span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Reset</a></li>
<li><a href="#">Stats</a></li>
<li class="divider"></li>
<li><a href="https://login.autistici.org/logout">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="log_container">
<div id="log_stats">
<b>Result set analysis</b><br>
<div id="log_stats_inner"></div>
<div style="clear:both;"></div>
</div>
<div id="log_viewer"></div>
</div>
{# JSRender templates #}
{% raw %}
<script id="log_template" type="text/x-jsrender">
<div class="log">
<span class="timestamp">{{>~timestampToString(log.timestamp)}}</span>
<a class="host">{{>log.host}}</a>
<a class="program">{{>log.program}}</a>{{if log.pid}}[<a class="pid">{{>log.pid}}</a>]{{/if}}
{{if log.facility}}<a class="facility">{{>log.facility}}</a>.<span class="severity">{{>log.severity}}</span>{{/if}}
<span class="msg">{{:~replaceAttrsInMsg(log)}}</span>
</div>
</script>
<script id="error_template" type="text/x-jsrender">
ERROR: {{>error}}<br>
<span class="error_detail">{{>errorThrown}}</span>
</script>
<script id="chart_template" type="text/x-jsrender">
<div class="chart">
<h4>{{>title}}:</h4>
<div id="chart_graph_{{>name}}"></div>
</div>
</script>
{% endraw %}
{# Load the Javascript #}
{% set javascripts = ('strftime.min.js',
'jquery-2.1.0.min.js',
'jsrender.min.js',
'bootstrap.min.js',
'protovis.min.js',
'graphs.js',
'lens2.js') %}
{% for script in javascripts %}
<script src="{{ url_for('static', filename=script) }}"></script>
{% endfor %}
<script>
var lens_instance;
$(document).ready(function() {
$.views.helpers({
timestampToString: lens.util.timestampToString,
replaceAttrsInMsg: lens.util.replaceAttrsInMsg,
});
lens_instance = new lens.Lens();
$('#query_field').focus();
......@@ -26,73 +163,16 @@ $(document).ready(function() {
return false;
});
/*
$('#show_stats_btn').click(
function() {
$('#log_stats').toggle('fast');
$(this).toggleClass('btn_open btn_closed');
});
*/
});
</script>
</head>
<body>
<div id="header">
<div id="searchDiv">
<form id="searchForm" action="/search" method="post">
<input type="text" id="query_field" name="q" size="90" value="{{ query or '' | e }}">
<input type="submit" value="Search">
<span id="loading" style="display:none;">
<img src="/static/spinner.gif" border="0">
</span>
<span id="error" style="display:none;"></span>
</form>
</div>
<div id="log_pagination_div">
<a id="show_stats_btn" class="btn_closed">Stats</a>
<div id="query_time"></div>
<a id="log_pagination_prev" style="display:none;">
&lt;-- Previous
</a>
<span id="log_pagination_title"></span>
<a id="log_pagination_next" style="display:none;">
Next --&gt;
</a>
</div>
</div>
<div id="log_container">
<div id="log_stats">
<b>Result set analysis</b><br>
<div id="log_stats_inner"></div>
<div style="clear:both;"></div>
</div>
<div id="log_viewer"></div>
</div>
{% raw %}
<div id="log_template" style="display:none;">
<div class="log">
<span class="timestamp">${lens.util.timestampToString(log.timestamp)}</span>
<a class="host">${log.host}</a>
<a class="program">${log.program}</a>{{if log.pid}}[<a class="pid">${log.pid}</a>]{{/if}}
{{if log.facility}}<a class="facility">${log.facility}</a>.<span class="severity"
>${log.severity}</span>{{/if}}
<span class="msg">{{html lens.util.replaceAttrsInMsg(log)}}</span>
</div>
</div>
<div id="error_template" style="display:none;">
ERROR: ${error}<br>
<span class="error_detail">${errorThrown}</span>
</div>
<div id="chart_template" style="display:none;">
<div class="chart">
<h4>${title}:</h4>
<div id="chart_graph_${name}"></div>
</div>
</div>
{% endraw %}
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment