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

UI Improvements #65

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

UI Improvements #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0ac8f48
Update base.html to use Bulma
aggarwal-h Aug 6, 2021
20435c3
Update all templates to use Bulma
aggarwal-h Aug 6, 2021
93ddbc4
Update the categorize/aggregate forms to use new UI and Bulma styling
aggarwal-h Aug 6, 2021
12c63c6
Add search box to aggregate/categorize pages
aggarwal-h Aug 9, 2021
3ce2fb9
Add custom css file
aggarwal-h Aug 9, 2021
b86b53f
Add custom styling to search fields
aggarwal-h Aug 9, 2021
75b0983
Make sidebar sticky; Remove footer
aggarwal-h Aug 10, 2021
35dbbe5
Add margins
aggarwal-h Aug 11, 2021
0d9c90d
Update font-awesome icons; Add Bulma menu to sidebar
aggarwal-h Aug 11, 2021
1b1d197
Remove Bootstrap CSS files
aggarwal-h Aug 11, 2021
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
1 change: 1 addition & 0 deletions redis_metrics/forms.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ def __init__(self, *args, **kwargs):
self.r = R() # Keep a connection to our Redis wrapper
# The list of available choices should include all metrics
choices = [(slug, slug) for slug in self.r.metric_slugs()]
self.fields['category_name'].widget.attrs.update({'class': 'input'})
self.fields['metrics'].choices = choices

# If a "category" is provided, set inital values (pre-selected)
Expand Down
25 changes: 25 additions & 0 deletions redis_metrics/static/redis_metrics/css/_custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.rounded-corners {
border-radius: 12px;
}

.panel-heading {
border-bottom: 1px solid #ededed !important;
}

.search-box {
width: 30%;
margin-left: auto;
position: relative;
}

input[type="text"] {
border-radius: 12px;
}

.sidebar {
position: sticky;
height: 98vh;
overflow-y: auto;
top: 5px;
padding: 1rem;
}
14 changes: 0 additions & 14 deletions redis_metrics/static/redis_metrics/css/bs-theme.min.css
View file
Open in desktop

This file was deleted.

14 changes: 0 additions & 14 deletions redis_metrics/static/redis_metrics/css/bs.min.css
View file
Open in desktop

This file was deleted.

40 changes: 21 additions & 19 deletions redis_metrics/templates/redis_metrics/_aggregate_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,23 +70,25 @@
<hr style="clear:both;"/>

{% if with_data_table %}
<table class="table table-striped">
<caption>Metric Data</caption>
<thead>
<tr>
<th>Metric</th>
{% for t in granularities %}<th>{{ t }}</th>{% endfor %}
</tr>
</thead>
<tbody>
{% for slug, values in metrics %}
<tr>
<td><code>{{ slug }}</code></td>
{% for v in values %}
<td class="value">{{ v|default:"-" }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
<div style="overflow-x: scroll;">
<table class="table is-striped">
<caption>Metric Data</caption>
<thead>
<tr>
<th>Metric</th>
{% for t in granularities %}<th>{{ t }}</th>{% endfor %}
</tr>
</thead>
<tbody>
{% for slug, values in metrics %}
<tr>
<td><code>{{ slug }}</code></td>
{% for v in values %}
<td class="value">{{ v|default:"-" }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
48 changes: 25 additions & 23 deletions redis_metrics/templates/redis_metrics/_aggregate_history.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,27 +66,29 @@
<hr style="clear:both;"/>

{% if with_data_table %}
<table class="table table-striped" style="overflow:scroll">
<caption>
{{ granularity|title }} metrics {% if since %}since {{ since }}{% endif %}
</caption>
<thead>
<tr>
<th>Metric</th>
{% for period in metric_history.periods %}
<th>{{ period }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for item in metric_history.data %}
<tr>
<td><code>{{ item.slug }}</code></td>
{% for value in item.values %}
<td>{{ value|default:"-" }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
<div style="overflow-x: scroll;">
<table class="table is-striped">
<caption>
{{ granularity|title }} metrics {% if since %}since {{ since }}{% endif %}
</caption>
<thead>
<tr>
<th>Metric</th>
{% for period in metric_history.periods %}
<th>{{ period }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for item in metric_history.data %}
<tr>
<td><code>{{ item.slug }}</code></td>
{% for value in item.values %}
<td>{{ value|default:"-" }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
2 changes: 1 addition & 1 deletion redis_metrics/templates/redis_metrics/_metric_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
});
</script>
{% if with_data_table %}
<table class="table">
<table class="table mt-6">
<caption><code>{{ slug }}</code> data</caption>
<thead>
<tr><th>Time Period</th><th>Value</th></tr>
Expand Down
2 changes: 1 addition & 1 deletion redis_metrics/templates/redis_metrics/_metric_history.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
</script>

{% if with_data_table %}
<table class="table">
<table class="table mt-6">
<caption>
<code>{{ slug }}</code> {{ granularity }} metrics
{% if since %} since {{ since }}{% endif %}
Expand Down
61 changes: 28 additions & 33 deletions redis_metrics/templates/redis_metrics/_metric_list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,39 @@
<h2><i class="fa fa-cog"></i> Admin</h2>
<ul style="list-style-type:none;">
<li>
<i class="fa fa-plus"></i>
<a href="{% url 'redis_metrics_categorize' %}">Create Category</a>
</li>
<li>
<i class="fa fa-bar-chart"></i>
<a href="{% url 'redis_metric_aggregate' %}">Metric Aggregates</a>
</li>
<li>
<i class="fa fa-pie-chart"></i>
<a href="{% url 'redis_metrics_gauges' %}">Gauges</a>
</li>
</ul>
<div class="sidebar">
<aside class="menu mb-4">
<p class="menu-label">
ADMIN
</p>
<ul class="menu-list">
<li>
<a href="{% url 'redis_metrics_categorize' %}" ><i class="fas fa-plus" style="width: 20px;"></i> Create Category</a>
</li>
<li>
<a href="{% url 'redis_metric_aggregate' %}"><i class="fas fa-chart-bar" style="width: 20px;"></i> Metric Aggregates</a>
</li>
<li>
<a href="{% url 'redis_metrics_gauges' %}"><i class="fas fa-chart-pie" style="width: 20px;"></i> Gauges</a>
</li>
</ul>
</aside>

{% if metrics %}
{% for category, slugs in metrics.items %}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a href="{% url 'redis_metric_aggregate_detail_by_category' category %}"
title="{{ category }}">{{ category }}</a>
<article class="panel is-white">
<h3 class="panel-heading pb-2">
<a href="{% url 'redis_metric_aggregate_detail_by_category' category %}"
title="{{ category }}">{{ category }}</a>

<a href="{% url 'redis_metrics_categorize' category %}"
class="pull-right" title="Edit {{ category}}">
<i class="fa fa-edit"></i></a>
</h3>
</div>
<div class="panel-body">
<ul>
<a href="{% url 'redis_metrics_categorize' category %}"
class="is-pulled-right" title="Edit {{ category}}">
<i class="far fa-edit"></i></a>
</h3>
{% for slug in slugs %}
<li>
<a title="{{ slug }}" href="{% url 'redis_metric_detail' slug %}">
<a class="panel-block px-4" title="{{ slug }}" href="{% url 'redis_metric_detail' slug %}">
{{ slug|truncatechars:28 }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</article>
{% endfor %}
{% else %}
<p>There are No Metrics</p>
{% endif %}
</div>
40 changes: 23 additions & 17 deletions redis_metrics/templates/redis_metrics/_since.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,27 @@

{% if slug_values %}
<ul class="nav nav-pills since">
<div class="tabs">
<ul>
{# Metric History #}
{% if link_type == "history" %}
{% for slug, since, text, granularity in slug_values %}
<li {% if since|date:"Y-m-d" in request.get_full_path %}class="is-active"{% endif %}>
<a href="{% url 'redis_metric_history' slug granularity %}?since={{ since|date:"Y-m-d" }}">
{{ text }}
</a>
</li>
{% endfor %}

{# Metric History #}
{% if link_type == "history" %}
{% for slug, since, text, granularity in slug_values %}
<li><a href="{% url 'redis_metric_history' slug granularity %}?since={{ since|date:"Y-m-d" }}">
{{ text }}</a></li>
{% endfor %}

{# Aggregate History #}
{% elif link_type == "aggregate_history" %}
{% for slug, since, text, granularity in slug_values %}
<li><a href="{% url 'redis_metric_aggregate_history' slug granularity %}?since={{ since|date:"Y-m-d" }}">
{{ text }}</a></li>
{% endfor %}
{% endif %}

</ul>
{# Aggregate History #}
{% elif link_type == "aggregate_history" %}
{% for slug, since, text, granularity in slug_values %}
<li {% if since|date:"Y-m-d" in request.get_full_path %}class="is-active"{% endif %}>
<a href="{% url 'redis_metric_aggregate_history' slug granularity %}?since={{ since|date:"Y-m-d" }}">
{{ text }}
</a>
</li>
{% endfor %}
{% endif %}
</ul>
</div>
{% endif %}
59 changes: 55 additions & 4 deletions redis_metrics/templates/redis_metrics/aggregate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,67 @@
{% extends "redis_metrics/base.html" %}

{% block extrahead %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
{% endblock %}

{% block titletext %}Aggregate Metrics{% endblock %}
{% block breadcrumb %}
<li class="active">Aggregate Metrics</li>
<li class="is-active"><a>Aggregate Metrics</a></li>
{% endblock %}

{% block content %}
{% if form %}
<form action="" method="post">{% csrf_token %}
<form action="" method="post">
{% csrf_token %}
<p>Select the metrics that you wish to view:</p>
{{ form.as_p }}
<p><input type="submit" value="View Metrics" class="btn btn-default"/></p>
<div class="field">
<div style="align-items: center; display: flex;" class="control has-icons-left">
<label class="label mb-0">Metrics</label>
<div class="search-box">
<span class="icon is-small" style="position: absolute;">
<i class="fas fa-search"></i>
</span>
<input id="metrics_search" class="input mb-3" type="text" placeholder="Search" autocomplete="off">
</div>
</div>
<div class="control">
<div class="columns is-multiline">
{% for slug, choice in form.metrics.field.choices %}
<div class="column is-3-desktop is-4-tablet is-2-mobile searchable-metric" id="id_{{ slug }}">
<label class="checkbox" style="width: 100%;" for="id_options_{{ forloop.counter0 }}">
<div class="box">
<div class="columns">
<div class="column is-1">
<input type="checkbox" id="id_options_{{ forloop.counter0 }}" value="{{ slug }}" name="metrics" />
</div>
<div class="column">
{{ choice }}
</div>
</div>
</div>
</label>
</div>
{% endfor %}
</div>
</div>
</div>
<p><input type="submit" value="View Metrics" class="button is-primary mt-2"/></p>
</form>
{% endif %}
{% endblock %}

{% block bodyjs %}
<script type="text/javascript">
$(document).ready(function(){
$("#metrics_search").on("input", function() {
const value = $(this).val()
if (value === "") {
$('.searchable-metric').show();
} else {
$('.searchable-metric').hide();
$('.searchable-metric[id*="' + value + '"]').show()
}
});
});
</script>
{% endblock %}
14 changes: 8 additions & 6 deletions redis_metrics/templates/redis_metrics/aggregate_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,18 @@
{% block titletext %}Aggregate Metrics{% endblock %}
{% block breadcrumb %}
<li><a href="{% url 'redis_metric_aggregate' %}">Select Metrics</a></li>
<li class="active">Aggregate Metrics</li>
<li class="is-active"><a>Aggregate Metrics</a></li>
{% endblock %}

{% block content %}
{% if category %}<h2>{{ category }}</h2>{% endif %}
<ul class="nav nav-pills history">
{% for g in granularities %}
<li><a href="{% url 'redis_metric_aggregate_history' slugs|join:"+" g %}">{{ g|title }}</a></li>
{% endfor %}
</ul>
<div class="tabs">
<ul>
{% for g in granularities %}
<li {% if g in request.path %}class="is-active"{% endif %}><a href="{% url 'redis_metric_aggregate_history' slugs|join:"+" g %}">{{ g|title }}</a></li>
{% endfor %}
</ul>
</div>

{% aggregate_detail slugs True %}

Expand Down
14 changes: 8 additions & 6 deletions redis_metrics/templates/redis_metrics/aggregate_history.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,17 @@
{% block breadcrumb %}
<li><a href="{% url 'redis_metric_aggregate' %}">Select Metrics</a></li>
<li><a href="{% url 'redis_metric_aggregate_detail' slugs|join:"+" %}">Detail</a></li>
<li class="active">{{ granularity }} history</li>
<li class="is-active"><a>{{ granularity }} history</a></li>
{% endblock %}

{% block content %}
<ul class="nav nav-pills history">
{% for g in granularities %}
<li><a href="{% url 'redis_metric_aggregate_history' slugs|join:"+" g %}">{{ g|title }}</a></li>
{% endfor %}
</ul>
<div class="tabs mb-1">
<ul>
{% for g in granularities %}
<li {% if g in request.path %}class="is-active"{% endif %}><a href="{% url 'redis_metric_aggregate_history' slugs|join:"+" g %}">{{ g|title }}</a></li>
{% endfor %}
</ul>
</div>

{# Menu for viewing metrics at different levels #}
{% metrics_since slugs 5 "aggregate_history" granularity %}
Expand Down
Loading