INTECH-596 add searching and sorting flags on frontend side

best-doctor · Aug 21, 2023 · 5c55453 · 5c55453
1 parent 138096c
commit 5c55453
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 12 deletions.
diff --git a/its_on/admin/views/switches.py b/its_on/admin/views/switches.py
@@ -35,10 +35,17 @@ class SwitchListAdminView(web.View):
     async def get(self) -> Dict[str, Union[Optional[List[RowProxy]], bool]]:
         request_params = self.validator.load(data=self.request.query)
         flags = await self.get_response_data(request_params)
+        # Move to dict because it's Raw
+        flag_dicts = []
+        for flag in flags:
+            flag_dicts.append({
+                **dict(flag),
+                "estimate_at": flag.created_at + datetime.timedelta(days=flag.ttl),
+            })
         groups = await self.get_distinct_groups(request_params)
         return {
             'active_group': request_params.get('group'),
-            'flags': flags,
+            'flags': flag_dicts,
             'groups': groups,
             'show_copy_button': bool(settings.SYNC_FROM_ITS_ON_URL),
         }

diff --git a/its_on/templates/base.html b/its_on/templates/base.html
@@ -32,6 +32,8 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
+    <link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
   {% endblock %}
 </head>
 <body>

diff --git a/its_on/templates/switches/index.html b/its_on/templates/switches/index.html
@@ -34,16 +34,21 @@ <h2>Switches list</h2>
 </div>
 
 <div class="col-sm-9">
-  <table class="table table-striped">
+  <table class="table table-striped"
+         id="table"
+         data-toggle="table"
+         data-search="true"
+  >
     <thead>
       <tr>
-        <th>Switch name</th>
-        <th>Active</th>
-        <th>Groups</th>
-        <th>TTL</th>
-        <th>Created at</th>
-        <th>Updated at</th>
-        <th>Deleted at</th>
+        <th data-field="id">Switch name</th>
+        <th data-field="is_active" data-sortable="true">Active</th>
+        <th data-field="groups">Groups</th>
+        <th data-field="ttl" data-sortable="true">TTL</th>
+        <th data-field="create_at" data-sortable="true">Created at</th>
+        <th data-field="updated_at" data-sortable="true">Updated at</th>
+        <th data-field="estimated_at" data-sortable="true">Estimated at</th>
+        <th data-field="deleted_at" data-sortable="true">Deleted at</th>
       </tr>
     </thead>
     <tbody>
@@ -65,21 +70,28 @@ <h2>Switches list</h2>
           </td>
           <td>
             {% if flag.created_at %}
-              {{ flag.created_at.strftime('%d-%m-%Y %H:%M:%S') }}
+              {{ flag.created_at.strftime('%d-%m-%Y') }}
             {% else %}
               -
             {% endif %}
           </td>
           <td>
             {% if flag.updated_at %}
-              {{ flag.updated_at.strftime('%d-%m-%Y %H:%M:%S') }}
+              {{ flag.updated_at.strftime('%d-%m-%Y') }}
+            {% else %}
+              -
+            {% endif %}
+          </td>
+          <td>
+            {% if flag.estimate_at %}
+              {{ flag.estimate_at.strftime('%d-%m-%Y') }}
             {% else %}
               -
             {% endif %}
           </td>
           <td>
             {% if flag.deleted_at %}
-              {{ flag.deleted_at.strftime('%d-%m-%Y %H:%M:%S') }}
+              {{ flag.deleted_at.strftime('%d-%m-%Y') }}
             {% else %}
               -
             {% endif %}