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

Organize Service View Page with Tabs #520

Closed
wants to merge 1 commit into from
Closed

Organize Service View Page with Tabs #520

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 4 additions & 0 deletions promgen/locale/ja/LC_MESSAGES/django.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,3 +172,7 @@ msgstr "Serviceを登録"
#: templates/promgen/project_detail_hosts.html:49
msgid "Silence selected hosts"
msgstr "選択したHostをSilence"

#: templates/promgen/service_detail.html:23
msgid "Actions"
msgstr "Actions"
23 changes: 23 additions & 0 deletions promgen/static/css/promgen.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,29 @@ a[rel]:after {
cursor: pointer;
}


/* service-detail */
.promgen-flex-space-between-center {
display: flex;
align-items: center;
justify-content: space-between;
}


/* service-action-button-group */
.service-action-button-group {
hr {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.dropdown-menu > li > form > button {
padding: 3px 20px;
white-space: nowrap;
background: none;
border: none;
}
}

/* Margin Top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
Expand Down
44 changes: 44 additions & 0 deletions promgen/templates/promgen/service_action_button_group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
{% load i18n %}
{% load promgen %}

<div style="display: inline-block;" class="service-action-button-group">
<div class="btn-group btn-group-sm" role="group" aria-label="...">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{% translate "Actions" %} <span class="caret"></span>
</button>
<ul class="dropdown-menu">

<li>
<form action="{% url 'service-notifier' service.id %}" style="display:inline" method="post" v-pre>{% csrf_token %}
<input type="hidden" name="sender" value="promgen.notification.user">
<input type="hidden" name="value" value="{{request.user.username}}" />
<button>{% translate "Subscribe to Notifications" %}</button>
</form>
</li>

<hr>

<li role="presentation"><a href="{% urlqs 'audit-list' service=service.id %}">{% translate "Edit History" %}</a></li>
<li role="presentation"><a href="{% urlqs 'alert-list' service=service.name %}">{% translate "Alert History" %}</a></li>

<hr>

<li role="presentation"><a href="{% url 'api:service-rules' name=service.name %}">{% translate "Export Rules" %}</a></li>
<li role="presentation"><a href="{% url 'api:service-targets' name=service.name %}">{% translate "Export Service" %}</a></li>

<hr>

<li role="presentation">
<form method="post" action="{% url 'service-delete' service.id %}" onsubmit="return confirm('{% translate "Delete this service?" %}')" style="display: inline">
{% csrf_token %}
<button type="submit" style="color:#d9534f;">{% translate "Delete Service" %}</button>
</form>
</li>

</ul>
</div>
<a @click="setSilenceDataset" data-service="{{service.name}}" class="btn btn-warning btn-sm ml-2 mr-2">{% translate "Silence" %}</a>

<a href="{% url 'service-update' service.id %}" class="btn btn-warning btn-sm">{% translate "Edit Service" %}</a>

</div>
66 changes: 9 additions & 57 deletions promgen/templates/promgen/service_block.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,73 +35,25 @@

<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group btn-group-sm" role="group" aria-label="...">
<div class="btn-group btn-group-sm mr-2" role="group" aria-label="...">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{% trans "Register" %} <span class="caret"></span>
{% translate "Register" %} <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li role="presentation"><a href="{% url 'project-new' service.id %}">{% trans "Register Project" %}</a></li>
<li role="presentation"><a href="{% url 'rule-new' 'service' service.id %}">{% trans "Register Rule" %}</a></li>
<li role="presentation"><a href="{% url 'service-notifier' service.id %}">{% trans "Register Notifier" %}</a></li>
<li role="presentation"><a href="{% url 'project-new' service.id %}">{% translate "Register Project" %}</a></li>
<li role="presentation"><a href="{% url 'rule-new' 'service' service.id %}">{% translate "Register Rule" %}</a></li>
<li role="presentation"><a href="{% url 'service-notifier' service.id %}">{% translate "Register Notifier" %}</a></li>
</ul>
</div>

<form action="{% url 'service-notifier' service.id %}" style="display:inline" method="post" v-pre>{% csrf_token %}
<input type="hidden" name="sender" value="promgen.notification.user">
<input type="hidden" name="value" value="{{request.user.username}}" />
<button class="btn btn-primary btn-sm">{% trans "Subscribe to Notifications" %}</button>
</form>
{% include "promgen/service_action_button_group.html" %}

<div class="btn-group btn-group-sm" role="group" aria-label="...">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{% trans "Change History" %} <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li role="presentation"><a href="{% urlqs 'audit-list' service=service.id %}">{% trans "Edit History" %}</a></li>
<li role="presentation"><a href="{% urlqs 'alert-list' service=service.name %}">{% trans "Alert History" %}</a></li>
</ul>
</div>

<a href="{% url 'service-update' service.id %}" class="btn btn-warning btn-sm">{% trans "Edit Service" %}</a>
<a @click="setSilenceDataset" data-service="{{service.name}}" class="btn btn-warning btn-sm">{% trans "Silence" %}</a>

<div class="btn-group btn-group-sm" role="group" aria-label="...">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Export <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li role="presentation"><a href="{% url 'api:service-rules' name=service.name %}">{% trans "Export Rules" %}</a></li>
<li role="presentation"><a href="{% url 'api:service-targets' name=service.name %}">{% trans "Export Service" %}</a></li>
</ul>
</div>

<form method="post" action="{% url 'service-delete' service.id %}" onsubmit="return confirm('{% trans "Delete this service?" %}')" style="display: inline">
{% csrf_token %}
<button class="btn btn-danger btn-sm pull-right">{% trans "Delete Service" %}</button>
</form>
</div>
</div>

{% if service.rule_set.count or request.site.rule_set.count %}
<div class="panel panel-default">
<table class="table table-bordered table-condensed">
{% include "promgen/rule_header.html" %}
{% include "promgen/rule_block.html" with rule_list=service.rule_set.all toggle=1 delete=1 %}
{% include "promgen/rule_block.html" with rule_list=request.site.rule_set.all collapse="service-site-rules-" overwrite_type='service' overwrite_id=service.id %}
</table>
<div class="panel-footer">
<a class="btn btn-default btn-xs" role="button" data-toggle="collapse" href=".service-site-rules-{{service.id}}" aria-expanded="false" aria-controls="collapseExample">
{% trans 'Show Site Rules' %}
</a>
</div>
</div>
{% endif %}

{% include "promgen/service_block_panel_rules.inc.html" %}

{% if service.notifiers.count %}
<div class="panel panel-default">
{% include "promgen/notifier_block.html" with object=service show_edit=1 %}
</div>
{% endif %}
{% include "promgen/service_block_panel_notifiers.inc.html" %}

{% include "promgen/service_block_projects.html" with project_list=project_list|default:service.project_set.all service=service only %}

Expand Down
7 changes: 7 additions & 0 deletions promgen/templates/promgen/service_block_panel_notifiers.inc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{% load promgen %}

{% if service.notifiers.count %}
<div class="panel panel-default">
{% include "promgen/notifier_block.html" with object=service show_edit=1 %}
</div>
{% endif %}
17 changes: 17 additions & 0 deletions promgen/templates/promgen/service_block_panel_rules.inc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{% load i18n %}
{% load promgen %}

{% if service.rule_set.count or request.site.rule_set.count %}
<div class="panel panel-default">
<table class="table table-bordered table-condensed">
{% include "promgen/rule_header.html" %}
{% include "promgen/rule_block.html" with rule_list=service.rule_set.all toggle=1 delete=1 %}
{% include "promgen/rule_block.html" with rule_list=request.site.rule_set.all collapse="service-site-rules-" overwrite_type='service' overwrite_id=service.id %}
</table>
<div class="panel-footer">
<a class="btn btn-default btn-xs" role="button" data-toggle="collapse" href=".service-site-rules-{{service.id}}" aria-expanded="false" aria-controls="collapseExample">
{% translate 'Show Site Rules' %}
</a>
</div>
</div>
{% endif %}
24 changes: 1 addition & 23 deletions promgen/templates/promgen/service_block_projects.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,8 @@
( <a href="{{shard.url}}">{{shard.url}}</a> )
<a href="{% url 'project-new' service.id %}?shard={{shard.id}}" class="btn btn-primary btn-xs pull-right">{% trans "Register Project" %}</a>
</div>
<table class="table table-bordered table-condensed">
<tr>
<th class="col-md-2">Project</th>
<th class="col-md-3">Exporters</th>
<th class="col-md-3">Notifiers</th>
<th class="col-md-1">Actions</th>
</tr>
{% for project in shard_projects %}

{% if service.notifiers.count == 0 and project.notifiers.count == 0 %}
<tr>
<td colspan="4" class="warning">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
{% trans "No notifications configured for this project. Please configure some" %}
</td>
</tr>
{% endif %}
{% include 'promgen/service_detail_projects_table.html' with shard_projects=shard_projects service=service %}

{% include 'promgen/project_row.html' %}
{% empty %}
<tr>
<td colspan="4">No Projects?</td>
</tr>
{% endfor %}
</table>
</div>
{% endfor %}
50 changes: 44 additions & 6 deletions promgen/templates/promgen/service_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,53 @@

{% block content %}

<div class="page-header" v-pre>
<h1>Service: {{ service.name }}</h1>
{% if service.owner %}
<p>{% trans 'Contact' %}: {{service.owner.username}}</p>
{% endif %}
<div class="page-header promgen-flex-space-between-center">
<div>
<h1>Service: {{ service.name }}</h1>
{% if service.owner %}
<p>{% translate 'Contact' %}: {{service.owner.username}}</p>
{% endif %}
</div>


{% include "promgen/service_action_button_group.html" %}

</div>

{% breadcrumb service %}

{% include "promgen/service_block.html" %}
kfdm marked this conversation as resolved.
Show resolved Hide resolved
<ul class="nav nav-tabs mb-5" role="tablist">
<li role="presentation" class="active"><a href="#projects" data-toggle="tab">Projects</a></li>
<li role="presentation"><a href="#rules" data-toggle="tab">Rules</a></li>
<li role="presentation"><a href="#notifiers" data-toggle="tab">Notifiers</a></li>
</ul>

<div class="well">

<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="projects">
{% include "promgen/service_detail_projects.html" with project_list=project_list|default:service.project_set.all service=service only %}
</div>

<div role="tabpanel" class="tab-pane" id="rules">
<div class="text-right mb-4">
<a href="{% url 'rule-new' 'service' service.id %}" class="btn btn-primary btn-sm">{% translate "Register Rule" %}</a>
</div>

{% include "promgen/service_block_panel_rules.inc.html" %}

</div>

<div role="tabpanel" class="tab-pane" id="notifiers">
<div class="text-right mb-4">
<a href="{% url 'service-notifier' service.id %}" class="btn btn-primary btn-sm">{% translate "Register Notifier" %}</a>
</div>

{% include "promgen/service_block_panel_notifiers.inc.html" %}

</div>
</div>

</div>

{% endblock %}
20 changes: 20 additions & 0 deletions promgen/templates/promgen/service_detail_projects.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{% load i18n %}

{% regroup project_list|dictsort:"shard_id" by shard as project_shard_list %}

<div class="text-right mb-4">
<a href="{% url 'project-new' service.id %}" class="btn btn-primary btn-sm">{% translate "Register Project" %}</a>
</div>

{% for shard, shard_projects in project_shard_list %}
<div class="panel panel-default">
<div class="panel-heading" v-pre>
Datasource
<a href="{{shard.get_absolute_url}}">{{shard.name}}</a>
( <a href="{{shard.url}}">{{shard.url}}</a> )
</div>

{% include 'promgen/service_detail_projects_table.html' with shard_projects=shard_projects service=service %}

</div>
{% endfor %}
kfdm marked this conversation as resolved.
Show resolved Hide resolved
27 changes: 27 additions & 0 deletions promgen/templates/promgen/service_detail_projects_table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{% load i18n %}

<table class="table table-bordered table-condensed">
<tr>
<th class="col-md-2">Project</th>
<th class="col-md-3">Exporters</th>
<th class="col-md-3">Notifiers</th>
<th class="col-md-1">Actions</th>
</tr>
{% for project in shard_projects %}

{% if service.notifiers.count == 0 and project.notifiers.count == 0 %}
<tr>
<td colspan="4" class="warning">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
{% translate "No notifications configured for this project. Please configure some" %}
</td>
</tr>
{% endif %}

{% include 'promgen/project_row.html' %}
{% empty %}
<tr>
<td colspan="4">No Projects?</td>
</tr>
{% endfor %}
</table>