Commit 1bbb305c authored by Patrick Godwin's avatar Patrick Godwin

refactor templates.py into .tpl files in /templates

parent 9b780c81
Pipeline #54727 passed with stages
in 1 minute and 43 seconds
......@@ -21,7 +21,6 @@ import yaml
from . import aggregator
from . import io
from . import templates
from . import utils
#-------------------------------------------------
......@@ -32,6 +31,8 @@ JSON_HEADER = {
'Cache-Control': 'max-age=10',
}
template_path = pkg_resources.resource_filename(pkg_resources.Requirement.parse('ligo_scald'), 'templates')
bottle.TEMPLATE_PATH.insert(0, template_path)
#-------------------------------------------------
### bottle apps/routing
......@@ -55,18 +56,6 @@ def index(config, script_name='', use_cgi=False):
if "duration" in bottle.request.query:
config['dashboard']['duration']=bottle.request.query['duration']
### generate html
yield bottle.template(templates.HEADER_TEMPLATE, title=config['dashboard']['title'], static_dir=static_dir)
yield bottle.template(templates.BODY_HEADER_TEMPLATE)
yield bottle.template(
templates.DASHBOARD_NAVBAR_TEMPLATE,
static_dir=static_dir,
plots=config['plots'],
**config['dashboard']
)
### find out whether query is for realtime or historical data
### NOTE: gps < 0 is used as a proxy for realtime data and refers
### to the delay (i.e. -5 means to query up to now - 5s
......@@ -81,18 +70,19 @@ def index(config, script_name='', use_cgi=False):
refresh = -1
start = stop - int(config['dashboard']['duration'])
### generate html
yield bottle.template(
templates.DASHBOARD_PLOT_TEMPLATE,
'dashboard.tpl',
static_dir=static_dir,
script_name=script_name,
plots=config['plots'],
start=start,
stop=stop,
refresh=refresh,
delay=delay,
script_name=script_name,
dashboard_config=config['dashboard'],
)
yield bottle.template(templates.BODY_FOOTER_TEMPLATE)
def serve_timeseries(measurement, start, end, config):
column, tags, tag_filters, aggregate, dt, _, datetime = parse_query(bottle.request.query)
......
......@@ -10,11 +10,12 @@ setup(
url = 'https://git.ligo.org/gstlal-visualisation/ligo-scald.git',
license = 'GPLv2+',
packages = ['ligo', 'ligo.scald', 'ligo.scald.io', 'static'],
packages = ['ligo', 'ligo.scald', 'ligo.scald.io', 'static', 'templates'],
namespace_packages = ['ligo'],
package_data = {
'static': ['*']
'static': ['*'],
'templates': ['*'],
},
entry_points={
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
% title = dashboard_config['title']
<title>{{title}}</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<link rel='icon' href='{{static_dir}}static/favicon.ico' type='image/x-icon' sizes="16x16" />
<!-- Dependencies -->
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+TC" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">
<!-- Scripts -->
<!-- Required for graphing and table prodution -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="{{static_dir}}static/scald.js"></script>
<link href="{{static_dir}}static/scald.css" rel="stylesheet" type="text/css" />
</head>
<body class="keen-dashboard" style="padding-top: 100px;">
% include(
% 'navbar.tpl',
% script_name=script_name,
% plots=plots,
% **dashboard_config
% )
% include(
% 'plots.tpl',
% script_name=script_name,
% plots=plots,
% start=start,
% stop=stop,
% refresh=refresh,
% delay=delay
% )
</body>
</html>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark py-0" id="nav">
% if image:
<a class="navbar-brand mt-3 mt-lg-0" href="#"><img style="width:80px" src="{{static_dir}}static/gstlal.png"></a>
% else:
<a class="navbar-brand mt-3 mt-lg-0" href="">{{title}}</a>
% end
<b-navbar-toggle target="nav_collapse">
<span class="navbar-toggler-icon"></span>
</b-navbar-toggle>
<b-collapse is-nav id="nav_collapse">
<ul class="navbar-nav mr-auto">
% for tab in tabs:
% tab_title = tab['name']
% tab_url = tab['url']
<li>
<a class="nav-link mt-2" href="{{tab_url}}">{{tab_title}}</a>
</li>
% end
<li class="mr-3 ml-3">
<form class="form-inline" role="search">
<div class="form-group">
<input type="text" class="form-control mr-md-2" name="gps" value="{{gps}}" size=12>
</div>
<div class="form-group">
<input type="text" class="form-control mr-md-2" name="duration" value="{{duration}}" size=6 >
</div>
<div class="form-group mr-md-2">
<b-nav-item-dropdown id="dropdown-left" class="m-md-2">
<template slot="button-content">
<i class="fas fa-chart-line fa-lg"></i>
</template>
<ul class="scrollable">
% for plot in plots:
% plot_title = plot['title']
% plot_id = plot['title'].replace(' ', '_').lower()
% if plot['value'] == 'checked':
% checked = 'true'
% else:
% checked = 'false'
% end
<li>
<b-form-checkbox class ="m-lg-2" name="livecharts{{plot_id}}" :checked={{checked}}>
{{plot_title}}
</b-form-checkbox>
</li>
% end
</ul>
</b-nav-item-dropdown>
</div>
<!--<div class="form-group-md-2">
<select value="Directory" name="Directory" class="form-control">
<option value="/path/to/analysis" selected>/path/to/analysis</option>
</select>
</div>-->
<div class="form-group mr-md-2">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
</form>
</li>
</ul>
<a href="#"><div id="clock" style="color: grey"></div></a>
</b-collapse>
</nav>
#!/usr/bin/env python
__author__ = "Patrick Godwin (patrick.godwin@ligo.org)"
__description__ = "a module to store web-based templates"
#-------------------------------------------------
### templates
HEADER_TEMPLATE = """
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<link rel='icon' href='{{static_dir}}static/favicon.ico' type='image/x-icon' sizes="16x16" />
<!-- Dependencies -->
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+TC" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">
<!-- Scripts -->
<!-- Required for graphing and table prodution -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="{{static_dir}}static/scald.js"></script>
<link href="{{static_dir}}static/scald.css" rel="stylesheet" type="text/css" />
</head>
"""
BODY_HEADER_TEMPLATE = """
<body class="keen-dashboard" style="padding-top: 100px;">
"""
DASHBOARD_NAVBAR_TEMPLATE = """
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark py-0" id="nav">
% if image:
<a class="navbar-brand mt-3 mt-lg-0" href="#"><img style="width:80px" src="{{static_dir}}static/gstlal.png"></a>
% else:
<a class="navbar-brand mt-3 mt-lg-0" href="">{{title}}</a>
% end
<b-navbar-toggle target="nav_collapse">
<span class="navbar-toggler-icon"></span>
</b-navbar-toggle>
<b-collapse is-nav id="nav_collapse">
<ul class="navbar-nav mr-auto">
% for tab in tabs:
% tab_title = tab['name']
% tab_url = tab['url']
<li>
<a class="nav-link mt-2" href="{{tab_url}}">{{tab_title}}</a>
</li>
% end
<li class="mr-3 ml-3">
<form class="form-inline" role="search">
<div class="form-group">
<input type="text" class="form-control mr-md-2" name="gps" value="{{gps}}" size=12>
</div>
<div class="form-group">
<input type="text" class="form-control mr-md-2" name="duration" value="{{duration}}" size=6 >
</div>
<div class="form-group mr-md-2">
<b-nav-item-dropdown id="dropdown-left" class="m-md-2">
<template slot="button-content">
<i class="fas fa-chart-line fa-lg"></i>
</template>
<ul class="scrollable">
% for plot in plots:
% plot_title = plot['title']
% plot_id = plot['title'].replace(' ', '_').lower()
% if plot['value'] == 'checked':
% checked = 'true'
% else:
% checked = 'false'
% end
<li>
<b-form-checkbox class ="m-lg-2" name="livecharts{{plot_id}}" :checked={{checked}}>
{{plot_title}}
</b-form-checkbox>
</li>
% end
</ul>
</b-nav-item-dropdown>
</div>
<!--<div class="form-group-md-2">
<select value="Directory" name="Directory" class="form-control">
<option value="/path/to/analysis" selected>/path/to/analysis</option>
</select>
</div>-->
<div class="form-group mr-md-2">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
</form>
</li>
</ul>
<a href="#"><div id="clock" style="color: grey"></div></a>
</b-collapse>
</nav>
"""
DASHBOARD_PLOT_TEMPLATE = """
<div class="container-fluid">
<div>
% i = 0
......@@ -275,9 +161,3 @@ DASHBOARD_PLOT_TEMPLATE = """
},
});
</script>
"""
BODY_FOOTER_TEMPLATE = """
</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