logging: Optimized logging view

octoprint_klipper/__init__.py

@@ -70,7 +70,7 @@ class KlipperPlugin(
    def on_parse_gcode(self, comm, line, *args, **kwargs):
       if "//" in line:
          self._parsingResponse = True
-         self._message = self._message + line.strip('/') + "<br/>"
+         self._message = self._message + line.strip('/')
       else:
          if self._parsingResponse:
              self._parsingResponse = False

octoprint_klipper/static/css/klipper.css

@@ -1,18 +1,34 @@
-.plugin_klipper_log {
-   padding: 0.5em;
+.plugin-klipper-log {
+   padding: 3px;
    overflow-y: scroll;
    height: 400px;
-   background-color: #efefef;
-   border: 1px #eee;
+   border: 1px solid #eee;
+}
+
+.plugin-klipper-log .log-item {
+   margin: 2px auto 0 auto;
+   border: 1px solid #ddd;
    border-radius: 3px;
+   background-color: #eeeeef;
 }
 
-.plugin_klipper_log .log-item {
-   margin: 0 auto 0 auto; 
+.plugin-klipper-log .error {
+   color: #b94a48;
 }
 
-.plugin_klipper_log .error {
-   color: red;
+.plugin-klipper-log .log-item .ts {
+   display: inline-block;
+   width:  13%;
+   height: 100%;
+   vertical-align: top;
+   font-size: 0.8em;
+   padding: 3px;
+}
+
+.plugin-klipper-log .log-item .msg {
+   display: inline-block;
+   width: 84%;
+   height: 100%;
 }
 
 .clear-btn {

octoprint_klipper/templates/klipper_tab_main.jinja2

@@ -1,8 +1,11 @@
 <div class="row-fluid">
   <div class="span8">
     <label><i class="icon-tasks"></i> Messages</label>
-    <div class="plugin_klipper_log" data-bind="foreach: logMessages">
-      <div class="log-item"><i data-bind="text: time"></i>: <span data-bind="html: msg, css: type"></span></div>
+    <div class="plugin-klipper-log" data-bind="foreach: logMessages">
+      <div class="log-item">
+         <div data-bind="text: time" class="ts" ></div>
+         <div data-bind="html: msg, css: type" class="msg"></div>
+      </div>
     </div>
     &nbsp;
     <button class="btn btn-mini pull-right clear-btn" data-bind="click: onClearLog, enable: isActive()"><i class="fa fa-trash"></i> Clear</button>
@@ -10,7 +13,7 @@
   <div class="span4">
     <div class="control-group">
      <div class="controls">
-           <label class="control-label">&nbsp;</label>
+           <label class="control-label"></label>
            <button class="btn btn-block" data-bind="click: onGetStatus, enable: isActive()"><i class="fa icon-black fa-info-circle"></i> Status</button>
      </div>
      <div class="controls">