[IMPROVEMENT] Service: Group action buttons inside a dropdown menu #546

line · Oct 10, 2024 · 599eb7b · 599eb7b
2 parents 8928b60 + 8603be3
commit 599eb7b
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 33 deletions.
diff --git a/promgen/locale/ja/LC_MESSAGES/django.po b/promgen/locale/ja/LC_MESSAGES/django.po
@@ -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"
diff --git a/promgen/static/css/promgen.css b/promgen/static/css/promgen.css
@@ -81,6 +81,27 @@ 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; }

diff --git a/promgen/templates/promgen/service_action_button_group.html b/promgen/templates/promgen/service_action_button_group.html
@@ -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>
diff --git a/promgen/templates/promgen/service_block.html b/promgen/templates/promgen/service_block.html
@@ -35,7 +35,7 @@
 
   <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>
         </button>
@@ -46,39 +46,8 @@
         </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>