rebuild template job_list.html for new version Js

esi/static/css/style.css

+
 /* Actions */
 .actions {
   display: flex;
@@ -41,8 +42,11 @@
 .btn {
   cursor: pointer;
 }
-.btn-min {
-  padding: .2rem 1rem;
+.btn-sm {
+  margin-right: 5px;
+}
+.btn-min:last-child {
+  margin-right: 0;
 }
 /* Table */
 .table-header {
@@ -89,5 +93,32 @@
   height: 300px;
 }
 .container-max {
-  max-width: 1170px;
+  max-width: 1300px;
+}
+
+td[data-col="action"] {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* Loading */
+.loading {
+  display: none;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,.5);
+  top: 0;
+  z-index: 9999;
+}
+.loading-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+.loading i {
+  font-size: 1.5em;
+  color: #fff;
 }
\ No newline at end of file

esi/templates/job_list.html

@@ -14,6 +14,9 @@
 {% endblock %}
 
 {% block content %}
+<div class="loading">
+    <div class="loading-content"><i class="fa fa-refresh fa-spin"></i></div>
+</div>
 <div class="container-fluid container-max">
     <!-- START: Table pending -->
     <div class="table-item">
@@ -31,16 +34,23 @@
                 <th style="width: 250px">Actions</th>
                 </thead>
                 <tbody>
+                <!-- Line 1 -->
                 {% for i in jobs.pending %}
-                    <tr id="{{ i.id }}">
+                <tr id="{{ i.pk }}">
                     <td data-col="job">{{ i.name }}</td>
                     <td data-col="uuid">{{ i.job_uuid }}</td>
                     <td data-col="created-date">{{ i.create_time }}</td>
                     <td data-col="status" class="text-success">{{ i.status }}</td>
                     <td data-col="action">
-                            <button class="btn btn-min btn-primary" data-action="run">Run</button>
-                            <button class="btn btn-min btn-danger" data-action="delete">Delete</button>
-                            <button class="btn btn-min btn-secondary" data-action="options">
+                        <button class="btn btn-sm btn-primary" data-loading="loading" data-action="run"
+                                data-loading-text="Running..." data-text="Run">Run
+                        </button>
+                        <button class="btn btn-sm btn-danger" data-action="delete" data-loading-text="Deleting..."
+                                data-text="Delete">Delete
+                        </button>
+                        <button class="btn btn-sm btn-secondary"
+                                data-loading-text="<i class='fa fa-cog fa-spin' aria-hidden='true'></i>"
+                                data-action="edit" data-text="<i class='fa fa-cog' aria-hidden='true'></i>">
                             <i class="fa fa-cog" aria-hidden="true"></i>
                         </button>
                     </td>
@@ -64,23 +74,28 @@
                 <th>Created date</th>
                 <th>Start date</th>
                 <th>Status</th>
-                <th style="width: 250px;">Log</th>
+                <th>Log</th>
                 <th style="width: 250px">Actions</th>
                 </thead>
                 <tbody>
                 <!-- Line 1 -->
                 {% for i in jobs.running %}
-                    <tr id="running-{{ i.id }}">
+                <tr id="{{ i.pk }}">
                     <td data-col="job">{{ i.name }}</td>
                     <td data-col="uuid">{{ i.job_uuid }}</td>
                     <td data-col="created-date">{{ i.create_time }}</td>
                     <td data-col="start-date">{{ i.start_time }}</td>
                     <td data-col="status" class="text-success">{{ i.status }}</td>
-                        <td data-col="log"><a href="https://v4-alpha.getbootstrap.com/components/alerts/">http://jsfiddle.net/itamark/uAKNx/asdasdas/asdasdasdas/dasdasdasd</a>
+                    <td data-col="log">
+                        <button data-action="log" class="btn btn-sm btn-secondary" data-text="Get log">Get log</button>
                     </td>
                     <td data-col="action">
-                            <button class="btn btn-min btn-primary" data-action="cancel">Cancel</button>
-                            <button class="btn btn-min btn-danger" data-action="delete">Delete</button>
+                        <button class="btn btn-sm btn-primary" data-action="cancel" data-loading-text="Cancelling..."
+                                data-text="Cancel">Cancel
+                        </button>
+                        <button class="btn btn-sm btn-danger" data-action="delete" data-loading-text="Deleting..."
+                                data-text="Delete">Delete
+                        </button>
                     </td>
                 </tr>
                 {% endfor %}
@@ -102,7 +117,7 @@
                 <th>Uuid</th>
                 <th>Created date</th>
                 <th>Started date</th>
-                <th style="width: 200px;">Finished date</th>
+                <th>Finished date</th>
                 <th>Status</th>
                 <th>Log</th>
                 <th style="width: 250px">Actions</th>
@@ -110,18 +125,23 @@
                 <tbody>
                 <!-- Line 1 -->
                 {% for i in jobs.finished %}
-                    <tr id="finished-{{ i.id }}">
+                <tr id="{{ i.pk }}">
                     <td data-col="job">{{ i.name }}</td>
                     <td data-col="uuid">{{ i.job_uuid }}</td>
                     <td data-col="created-date">{{ i.create_time }}</td>
                     <td data-col="start-date">{{ i.start_time }}</td>
-                        <td data-col="finished-date">{{ i.end_time }}</td>
+                    <td data-col="finished-date">{{ i.finish_time }}</td>
                     <td data-col="status" class="text-success">{{ i.status }}</td>
-                        <td data-col="log"><a href="https://v4-alpha.getbootstrap.com/components/alerts/">http://jsfiddle.net/itamark/uAKNx/asdasdas/asdasdasdas/dasdasdasd</a>
+                    <td data-col="log">
+                        <button data-action="log" class="btn btn-sm btn-secondary" data-text="Get log">Get log</button>
                     </td>
                     <td data-col="action">
-                            <button class="btn btn-min btn-primary" data-action="restart">Restart</button>
-                            <button class="btn btn-min btn-danger" data-action="delete">Delete</button>
+                        <button class="btn btn-sm btn-primary" data-action="restart" data-loading-text="Restarting..."
+                                data-text="Restart">Restart
+                        </button>
+                        <button class="btn btn-sm btn-danger" data-action="delete" data-loading-text="Deleting..."
+                                data-text="Delete">Delete
+                        </button>
                     </td>
                 </tr>
                 {% endfor %}
@@ -150,17 +170,22 @@
                 <tbody>
                 <!-- Line 1 -->
                 {% for i in jobs.deleted %}
-                    <tr id="deleted-1">
+                <tr id="{{ i.pk }}">
                     <td data-col="job">{{ i.name }}</td>
                     <td data-col="uuid">{{ i.job_uuid }}</td>
                     <td data-col="created-date">{{ i.create_time }}</td>
                     <td data-col="start-date">{{ i.start_time }}</td>
-                        <td data-col="finished-date">{{ i.end_time }}</td>
+                    <td data-col="finished-date">{{ i.finish_time }}</td>
                     <td data-col="status" class="text-success">{{ i.status }}</td>
-                        <td data-col="log"><a href="https://v4-alpha.getbootstrap.com/components/alerts/">http://jsfiddle.net/itamark/uAKNx/asdasdas/asdasdasdas/dasdasdasd</a>
+                    <td data-col="log">
+                        <button data-action="log" class="btn btn-sm btn-secondary" data-loading-text="Creating log..."
+                                data-text="Get log">Get log
+                        </button>
                     </td>
                     <td data-col="action">
-                            <button class="btn btn-min btn-success" data-action='activate'>Activate</button>
+                        <button class="btn btn-sm btn-success" data-action='activate' data-loading-text="Activating..."
+                                data-text="Activate">Activate
+                        </button>
                     </td>
                 </tr>
                 {% endfor %}
@@ -169,10 +194,31 @@
         </div>
     </div>
     <!-- END: Table deleted -->
+    <div class="modal" id="log-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
+         aria-hidden="true">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLongTitle">Log</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body"></div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 {% endblock %}
 
 {% block script %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
+        integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
+        crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
 <script src="{% static 'js/dateformat.js' %}"></script>
 <script src="{% static 'js/tables.js' %}"></script>
 {% endblock %}
\ No newline at end of file