[ui] Highlight command status with colors #812

Made command status easier to read by adding colors - green for
success, red for failed, and gray for in-progress. Also made the
text bold so it stands out more.

Author: Srinath0916

openwisp_controller/connection/admin.py

@@ -103,8 +103,8 @@ 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 +133,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,19 @@ 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;
+}