Skip to content
Snippets Groups Projects
Commit 119c5d04 authored by Jan Mach's avatar Jan Mach
Browse files

HTML code and visual improvements in database status view module. 

Improved layout of DOM elements, added more PostgreSQL configurations to list of displayed values, enhanced visual style and amount of the information displayed in PostgreSQL configuration view table.
parent c62bf723
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lib/hawat/blueprints/dbstatus/templates/dbstatus/view.html
+ 192
− 154
View file @ 119c5d04
......@@ -11,30 +11,95 @@
<h2>{{ hawat_current_view.get_view_title() }}</h2>
<hr>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
</div> <!-- /.col-lg-12 -->
</div> <!-- /.row -->
<!-- Search result dump - BEGIN ----------------------------------->
<script>
var database_statistics_events = {{ database_statistics_events | tojson }};
</script>
<!-- Search result dump - END ------------------------------------->
<!-- Tab navigation - BEGIN --------------------------------------->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#tab-dbstatus-events" aria-controls="tab-dbstatus-events" role="tab" data-toggle="tab">
<strong>{{ _('Event database') }}</strong>
</a>
</li>
<li role="presentation">
<a href="#tab-dbstatus-postgresql" aria-controls="tab-dbstatus-postgresql" role="tab" data-toggle="tab">
<strong>{{ _('PostgreSQL') }}</strong>
</a>
</li>
</ul>
<!-- Tab navigation - END ----------------------------------------->
<!-- Tab panels - BEGIN ------------------------------------------->
<div class="tab-content">
<!-- Tab panel - BEGIN ---------------------------------------->
<div role="tabpanel" class="tab-pane fade in active" id="tab-dbstatus-events">
<h3>{{ _('Event database') }}</h3>
<br>
<!-- Inner tab navigation - BEGIN ------------------------->
<ul class="nav nav-tabs nav-tabs-inner" role="tablist">
<li role="presentation" class="active">
<a href="#tab-dbstatus-events" aria-controls="tab-dbstatus-events" role="tab" data-toggle="tab">
<strong>{{ _('Event database') }}</strong>
<a href="#tab-dbstatus-events-tables" aria-controls="tab-dbstatus-events-tables" role="tab" data-toggle="tab">
<strong>{{ _('Tables') }}</strong>
</a>
</li>
{%-
set chsections = [
{'ident': 'row_estimate', 'label': _('Row counts'), 'value_label': False, 'value_format': False},
{'ident': 'total_bytes', 'label': _('Total sizes'), 'value_label': _('Size'), 'value_format': 'byteFormatter'},
{'ident': 'table_bytes', 'label': _('Table sizes'), 'value_label': _('Size'), 'value_format': 'byteFormatter'},
{'ident': 'index_bytes', 'label': _('Index sizes'), 'value_label': _('Size'), 'value_format': 'byteFormatter'}
]
%}
{%- for chsection in chsections %}
<li role="presentation">
<a href="#tab-dbstatus-postgresql" aria-controls="tab-dbstatus-postgresql" role="tab" data-toggle="tab">
<strong>{{ _('PostgreSQL') }}</strong>
<a href="#tab-dbstatus-events-{{ chsection['ident'] }}" aria-controls="tab-dbstatus-events-{{ chsection['ident'] }}" role="tab" data-toggle="tab">
<strong>{{ chsection['label'] }}</strong>
</a>
</li>
{%- endfor %}
</ul>
<!-- Inner tab navigation - END --------------------------->
<!-- Tab panes -->
<!-- Inner tab panels - BEGIN ----------------------------->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="tab-dbstatus-events">
<!-- Inner tab panel - BEGIN -------------------------->
<div role="tabpanel" class="tab-pane fade in active" id="tab-dbstatus-events-tables">
<br>
<h3>{{ _('Event database') }}</h3>
<br>
<a name="tab-dbstatus-events-tables-top">
{#- Reference for this hack: https://stackoverflow.com/a/11842865 -#}
<p style="padding-top: 70px; margin-top: -70px;">
<strong>
{{ _('List of available tables:') }}
</strong>
</p>
</a>
<div class="btn-group btn-group-xs" role="group">
{%- for table_name, table_data in database_status_events['tables'] | dictsort %}
<a role="button" class="btn btn-default" href="#tab-dbstatus-events-tables-{{ table_name }}">
{{ table_name }}
</a>
{%- endfor %}
</div>
<hr>
{%- for table_name, table_data in database_status_events['tables'] | dictsort %}
<h4>{{ _('Table <strong>%(table_name)s</strong>', table_name = table_name) }}</h4>
<a name="tab-dbstatus-events-tables-{{ table_name }}">
{#- Reference for this hack: https://stackoverflow.com/a/11842865 -#}
<h4 style="padding-top: 70px; margin-top: -70px;">
{{ _('Table <strong>%(table_name)s</strong>', table_name = table_name) }}
<a href="#tab-dbstatus-events-tables-top">
{{ get_icon('backtotop') }}
</a>
</h4>
</a>
<table class="table table-condensed table-striped">
<tr>
<th>
......@@ -127,155 +192,128 @@
</div>
{% if not loop.last %}<hr>{% endif %}
{%- endfor %}
</div> <!-- /.tabpanel #tab-dbstatus-events-tables -->
{%- for chsection in chsections %}
<!-- Inner tab panel - BEGIN -------------------------->
<div role="tabpanel" class="tab-pane fade" id="tab-dbstatus-events-{{ chsection['ident'] }}">
<br>
<hr>
<br>
<h4>{{ chsection['label'] }}</h4>
<!-- Search result dump - BEGIN ----------------------------------->
<script>
var database_statistics_events = {{ database_statistics_events | tojson }};
</script>
<!-- Search result dump - END ------------------------------------->
{{ macros_chart.render_dataset_pie_dict(
database_statistics_events,
'database_statistics_events',
'database_events',
chsection['ident'],
{
'value_label': chsection['value_label'],
'value_format': chsection['value_format']
}
)
}}
</div> <!-- /.tabpanel #tab-dbstatus-events-{{ chsection['ident'] }} -->
{%- endfor %}
</div>
<!-- Inner tab panels - END ------------------------------->
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
{%-
set chsections = [
{'ident': 'row_estimate', 'label': _('Row counts'), 'value_label': False, 'value_format': False},
{'ident': 'total_bytes', 'label': _('Total sizes'), 'value_label': _('Size'), 'value_format': 'byteFormatter'},
{'ident': 'table_bytes', 'label': _('Table sizes'), 'value_label': _('Size'), 'value_format': 'byteFormatter'},
{'ident': 'index_bytes', 'label': _('Index sizes'), 'value_label': _('Size'), 'value_format': 'byteFormatter'}
]
%}
{%- for chsection in chsections %}
<li role="presentation"{% if loop.first %} class="active"{% endif %}>
<a href="#tab-dbstatus-events-{{ chsection['ident'] }}" aria-controls="tab-dbstatus-events-{{ chsection['ident'] }}" role="tab" data-toggle="tab">
<strong>{{ chsection['label'] }}</strong>
</a>
</li>
{%- endfor %}
</ul>
<div class="tab-content">
{%- for chsection in chsections %}
<div role="tabpanel" class="tab-pane fade{% if loop.first %} in active{% endif %}" id="tab-dbstatus-events-{{ chsection['ident'] }}">
<br>
<h4>{{ chsection['label'] }}</h4>
</div> <!-- /.tabpanel -->
{{ macros_chart.render_dataset_pie_dict(
database_statistics_events,
'database_statistics_events',
'database_events',
chsection['ident'],
{
'value_label': chsection['value_label'],
'value_format': chsection['value_format']
}
)
}}
</div>
{%- endfor %}
</div>
</div>
<!-- Tab panel - BEGIN ---------------------------------------->
<div role="tabpanel" class="tab-pane fade" id="tab-dbstatus-postgresql">
<h3>{{ _('Configuration') }}</h3>
<br>
<div role="tabpanel" class="tab-pane fade" id="tab-dbstatus-postgresql">
<br>
<h3>{{ _('PostgreSQL - Configuration') }}</h3>
<br>
<table class="table table-condensed table-striped">
<tr>
<th>
{{ _('Name') }}
</th>
<th>
{{ _('Type') }}
</th>
<th>
{{ _('Value [unit]') }}
</th>
<th>
{{ _('Boot / Reset') }}
</th>
<th>
{{ _('Description') }}
</th>
</tr>
<tr>
<th>
{{ _('version:') }}
</th>
<td>
string
</td>
<td>
{{ sw_versions['postgresql'] }}
</td>
<td></td>
<td></td>
</tr>
{#- Reference: https://www.postgresql.org/docs/current/view-pg-settings.html -#}
{%- for setting in ['autovacuum_vacuum_cost_limit', 'autovacuum_vacuum_delay', 'bytea_output', 'checkpoint_timeout',
'default_statistics_target', 'effective_cache_size', 'effective_io_concurrency', 'maintenance_work_mem', 'min_parallel_index_scan_size', 'max_connections', 'max_parallel_workers', 'max_parallel_workers_per_gather', 'max_wal_size', 'parallel_tuple_cost', 'parallel_setup_cost', 'random_page_cost', 'seq_page_cost', 'shared_buffers', 'wal_buffers', 'work_mem'] | sort %}
{%- if setting in database_status_events['pg_settings'] %}
<tr>
<th>
{{ setting }}:
</th>
<td>
{{ database_status_events['pg_settings'][setting].vartype }}
{%- if database_status_events['pg_settings'][setting].vartype in ['integer', 'real'] %}
<span data-toggle="tooltip" title="{{ database_status_events['pg_settings'][setting].min_val }} - {{ database_status_events['pg_settings'][setting].max_val }}">{{ get_icon('help')}}</span>
{%- elif database_status_events['pg_settings'][setting].vartype in ['enum'] %}
<span data-toggle="tooltip" title="['{{ database_status_events['pg_settings'][setting].enumvals | join("', '") }}']">{{ get_icon('help')}}</span>
{%- endif %}
</td>
<td>
{% if database_status_events['pg_settings'][setting].setting != database_status_events['pg_settings'][setting].boot_val %}
<em class="text-danger">
{%- endif %}
{%- if database_status_events['pg_settings'][setting].vartype in ['integer', 'real'] %}
{{ babel_format_decimal(database_status_events['pg_settings'][setting].setting) }}
{%- else %}
{{ database_status_events['pg_settings'][setting].setting }}
{%- endif %}
{% if database_status_events['pg_settings'][setting].setting != database_status_events['pg_settings'][setting].boot_val %}
</em>
{%- endif %}
[{{ database_status_events['pg_settings'][setting].unit | default('none') }}]
<span data-toggle="tooltip" title="{{ _('source:') }} {{ database_status_events['pg_settings'][setting].source }}">{{ get_icon('help')}}</span>
</td>
<td>
{%- if database_status_events['pg_settings'][setting].vartype in ['integer', 'real'] %}
{{ babel_format_decimal(database_status_events['pg_settings'][setting].boot_val) }}
/
{{ babel_format_decimal(database_status_events['pg_settings'][setting].reset_val) }}
{%- else %}
{{ database_status_events['pg_settings'][setting].boot_val }}
/
{{ database_status_events['pg_settings'][setting].reset_val }}
{%- endif %}
</td>
<td>
{{ database_status_events['pg_settings'][setting].category }}
<span data-toggle="tooltip" title="{{ database_status_events['pg_settings'][setting].short_desc }}{% if database_status_events['pg_settings'][setting].extra_desc %} {{ database_status_events['pg_settings'][setting].extra_desc }}{% endif %}">{{ get_icon('help')}}</span>
</td>
</tr>
{%- endif %}
{%- endfor %}
</table>
</div> <!-- /.tabpanel -->
<table class="table table-condensed table-striped">
<tr>
<th>
{{ _('Name') }}
</th>
<th>
{{ _('Type') }}
</th>
<th>
{{ _('Value [unit]') }}
</th>
<th>
{{ _('Boot / Reset') }}
</th>
<th>
{{ _('Description') }}
</th>
</tr>
<tr>
<th>
{{ _('version:') }}
</th>
<td>
string
</td>
<td>
{{ sw_versions['postgresql'] }}
</td>
<td></td>
<td></td>
</tr>
{#- Reference: https://www.postgresql.org/docs/current/view-pg-settings.html -#}
{%- for setting in ['autovacuum_vacuum_cost_limit', 'autovacuum_vacuum_delay', 'bytea_output', 'checkpoint_timeout',
'default_statistics_target', 'effective_cache_size', 'effective_io_concurrency', 'maintenance_work_mem', 'min_parallel_index_scan_size', 'max_connections', 'max_parallel_workers', 'max_parallel_workers_per_gather', 'max_wal_size', 'parallel_tuple_cost', 'parallel_setup_cost', 'random_page_cost', 'seq_page_cost', 'shared_buffers', 'wal_buffers', 'work_mem'] | sort %}
{%- if setting in database_status_events['pg_settings'] %}
<tr>
<th>
{{ setting }}:
</th>
<td>
{{ database_status_events['pg_settings'][setting].vartype }}
{%- if database_status_events['pg_settings'][setting].vartype in ['integer', 'real'] %}
<span data-toggle="tooltip" title="{{ database_status_events['pg_settings'][setting].min_val }} - {{ database_status_events['pg_settings'][setting].max_val }}">{{ get_icon('help')}}</span>
{%- elif database_status_events['pg_settings'][setting].vartype in ['enum'] %}
<span data-toggle="tooltip" title="['{{ database_status_events['pg_settings'][setting].enumvals | join("', '") }}']">{{ get_icon('help')}}</span>
{%- endif %}
</td>
<td>
{% if database_status_events['pg_settings'][setting].setting != database_status_events['pg_settings'][setting].boot_val %}
<em>
{%- endif %}
{%- if database_status_events['pg_settings'][setting].vartype in ['integer', 'real'] %}
{{ babel_format_decimal(database_status_events['pg_settings'][setting].setting) }}
{%- else %}
{{ database_status_events['pg_settings'][setting].setting }}
{%- endif %}
{% if database_status_events['pg_settings'][setting].setting != database_status_events['pg_settings'][setting].boot_val %}
</em>
{%- endif %}
[{{ database_status_events['pg_settings'][setting].unit | default('none') }}]
<span data-toggle="tooltip" title="{{ _('source:') }} {{ database_status_events['pg_settings'][setting].source }}">{{ get_icon('help')}}</span>
</td>
<td>
{%- if database_status_events['pg_settings'][setting].vartype in ['integer', 'real'] %}
{{ babel_format_decimal(database_status_events['pg_settings'][setting].boot_val) }}
/
{{ babel_format_decimal(database_status_events['pg_settings'][setting].reset_val) }}
{%- else %}
{{ database_status_events['pg_settings'][setting].boot_val }}
/
{{ database_status_events['pg_settings'][setting].reset_val }}
{%- endif %}
</td>
<td>
{{ database_status_events['pg_settings'][setting].category }}
<span data-toggle="tooltip" title="{{ database_status_events['pg_settings'][setting].short_desc }}{% if database_status_events['pg_settings'][setting].extra_desc %} {{ database_status_events['pg_settings'][setting].extra_desc }}{% endif %}">{{ get_icon('help')}}</span>
</td>
</tr>
{%- endif %}
{%- endfor %}
</table>
</div>
</div>
</div>
<!-- Tab panels - END --------------------------------------------->
{%- if permission_can('developer') %}
<hr>
{{ macros_site.render_raw_var('database_status_events', database_status_events) }}
{{ macros_site.render_raw_var('database_statistics_events', database_statistics_events) }}
{{ macros_site.render_raw_var('sw_versions', sw_versions) }}
{%- endif %}
</div> <!-- /.col-lg-12 -->
</div> <!-- /.row -->
{%- if permission_can('developer') %}
<hr>
{{ macros_site.render_raw_var('database_status_events', database_status_events) }}
{{ macros_site.render_raw_var('database_statistics_events', database_statistics_events) }}
{{ macros_site.render_raw_var('sw_versions', sw_versions) }}
{%- endif %}
{%- endblock content %}
lib/hawat/const.py
+ 1
− 1
View file @ 119c5d04
......@@ -265,7 +265,7 @@ FA_ICONS = {
'ko': '<i class="fas fa-fw fa-times"></i>',
'sortasc': '<i class="fas fa-fw fa-sort-asc"></i>',
'sortdesc': '<i class="fas fa-fw fa-sort-desc"></i>',
'backtotop': '<i class="fas fa-fw fa-level-up"></i>',
'backtotop': '<i class="fas fa-fw fa-level-up-alt"></i>',
'first': '<i class="fas fa-fw fa-angle-double-left"></i>',
'previous': '<i class="fas fa-fw fa-angle-left"></i>',
'next': '<i class="fas fa-fw fa-angle-right"></i>',
......
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