[chores:ui] Highlighted command status with colors #812

Closes #812

Author: Srinath0916

openwisp_controller/connection/admin.py

@@ -103,8 +103,22 @@ class CommandInline(admin.StackedInline):
     model = Command
     verbose_name = _("Recent Commands")
     verbose_name_plural = verbose_name
-    fields = ["status", "type", "input_data", "output_data", "created", "modified"]
-    readonly_fields = ["input_data", "output_data"]
+    fields = [
+        "status_display",
+        "type",
+        "input_data",
+        "output_data",
+        "created",
+        "modified",
+    ]
+    readonly_fields = [
+        "status_display",
+        "type",
+        "input_data",
+        "output_data",
+        "created",
+        "modified",
+    ]
     formset = LimitedCommandResults
 
     def get_queryset(self, request, select_related=True):
@@ -133,8 +147,18 @@ def output_data(self, obj):
             )
         return obj.output
 
+    def status_display(self, obj):
+        status_value = obj.status
+        css_class = f"command-status-{status_value}"
+        return format_html(
+            '<span class="{0}">{1}</span>',
+            css_class,
+            obj.get_status_display(),
+        )
+
     input_data.short_description = _("input")
     output_data.short_description = _("output")
+    status_display.short_description = _("status")
 
     def _get_conditional_queryset(self, request, obj, select_related=False):
         return self.get_queryset(request, select_related=select_related).exists()

openwisp_controller/connection/static/connection/css/command-inline.css

@@ -231,3 +231,17 @@ li.commands:not(.recent) {
   width: 3.125em;
   margin: 0.2em 0;
 }
+
+/* Command status highlighting */
+.command-status-success {
+  color: #417927;
+  font-weight: bold;
+}
+.command-status-failed {
+  color: #ba2121;
+  font-weight: bold;
+}
+.command-status-in-progress {
+  color: #666;
+  font-weight: bold;
+}

openwisp_controller/connection/tests/test_admin.py

@@ -173,6 +173,46 @@ def test_command_inline_output_loading_overlay(self):
             response, '<div class="loader recent-commands-loader"></div>', html=True
         )
 
+    def test_command_status_highlighting(self):
+        """Test that command status is displayed with appropriate CSS classes"""
+        url = reverse(
+            f"admin:{self.config_app_label}_device_change", args=(self.device.id,)
+        )
+        command = Command.objects.create(
+            type="custom",
+            input={"command": "echo hello"},
+            device=self.device,
+            status="success",
+        )
+
+        with self.subTest("Test success status"):
+            response = self.client.get(url)
+            self.assertContains(
+                response,
+                '<span class="command-status-success">success</span>',
+                html=True,
+            )
+
+        with self.subTest("Test failed status"):
+            command.status = "failed"
+            command.save()
+            response = self.client.get(url)
+            self.assertContains(
+                response,
+                '<span class="command-status-failed">failed</span>',
+                html=True,
+            )
+
+        with self.subTest("Test in-progress status"):
+            command.status = "in-progress"
+            command.save()
+            response = self.client.get(url)
+            self.assertContains(
+                response,
+                '<span class="command-status-in-progress">in progress</span>',
+                html=True,
+            )
+
     def test_command_writable_inline(self):
         url = reverse(
             f"admin:{self.config_app_label}_device_change", args=(self.device.id,)