feat(log-live-tail): update theme

ref: MANAGER-14318 Signed-off-by: Romain Jamet <romain.jamet.ext@corp.ovh.com>
ovh · Jun 24, 2024 · dd3b5b0 · dd3b5b0
1 parent cf71d9f
commit dd3b5b0
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 45 deletions.
diff --git a/packages/components/ng-log-live-tail/package.json b/packages/components/ng-log-live-tail/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ovh-ux/ng-log-live-tail",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Poll a log API for displaying messages",
   "keywords": [
     "angularjs",
@@ -38,6 +38,7 @@
     "set-value": "^2.0.1"
   },
   "dependencies": {
+    "@ovhcloud/ods-theme-blue-jeans": "17.2.2",
     "date-fns": "^3.6.0",
     "lodash": "~4.17.15"
   },

diff --git a/packages/components/ng-log-live-tail/src/constants.js b/packages/components/ng-log-live-tail/src/constants.js
@@ -1,12 +1,12 @@
-export const PREFIX_KEYS = ['formattedTimestamp', 'levelLabel'];
+export const PREFIX_KEYS = ['formattedDate', 'formattedTime', 'levelLabel'];
 
 // https://en.wikipedia.org/wiki/Syslog#Severity_level
 export const LEVEL_LABELS = {
   0: 'emerg',
   1: 'alert',
   2: 'crit',
-  3: 'err',
-  4: 'warning',
+  3: 'error',
+  4: 'warn',
   5: 'notice',
   6: 'info',
   7: 'debug',

diff --git a/packages/components/ng-log-live-tail/src/controller.js b/packages/components/ng-log-live-tail/src/controller.js
@@ -172,7 +172,11 @@ export default class LogLiveTailCtrl {
       const { _id, timestamp, level } = message;
 
       // LOG PREFIX
-      const formattedTimestamp = format(timestamp, 'P pp', {
+      const formattedDate = format(timestamp, 'P', {
+        locale: this.dateFnsLocale,
+      });
+
+      const formattedTime = format(timestamp, 'pp', {
         locale: this.dateFnsLocale,
       });
 
@@ -187,7 +191,8 @@ export default class LogLiveTailCtrl {
 
       const formattedLog = {
         _id,
-        formattedTimestamp,
+        formattedDate,
+        formattedTime,
         level,
         levelLabel,
         ...customFields,

diff --git a/packages/components/ng-log-live-tail/src/index.less b/packages/components/ng-log-live-tail/src/index.less
@@ -1,6 +1,8 @@
+@import (inline) '@ovhcloud/ods-theme-blue-jeans/dist/index.css';
+
 .log-live-tail {
-  background-color: #122844;
-  color: white;
+  background-color: var(--ods-color-primary-900);
+  color: var(--ods-color-default-000);
   position: relative;
   flex: 0 0 70%;
   max-height: 600px;
@@ -22,16 +24,16 @@
     i.cursor {
       content: '';
       display: inline-block;
-      background-color: white;
+      background-color: var(--ods-color-default-000);
       vertical-align: top;
       width: 8px;
       height: 17px;
       animation: tail-logs-blink 1s step-end infinite;
     }
 
     span.highlight {
-      background-color: yellow;
-      color: #122844;
+      background-color: var(--ods-color-default-000);
+      color: var(--ods-color-default-800);
     }
   }
 
@@ -42,26 +44,32 @@
     bottom: 10px;
   }
 
-  .log {
-    overflow-wrap: anywhere;
+  .log-key {
+    word-break: break-all;
+
+    &:not(:first-child) {
+      margin-left: 1ch;
+    }
+  }
+
+  .log-date {
+    color: var(--ods-color-warning-050);
   }
 
-  .log-timestamp {
-    color: DodgerBlue;
+  .log-time {
+    color: var(--ods-color-warning-100);
   }
 
   .log-severity {
-    text-transform: uppercase;
+    display: inline-block;
+    width: 6ch;
     text-align: right;
+    text-transform: uppercase;
   }
 
-  .log-timestamp::after,
-  .log-severity::after {
+  .separator::after {
     content: '|';
-    display: inline-block;
-    padding-left: 1ch;
-    color: white;
-    opacity: 0.3;
+    color: var(--ods-color-default-000);
   }
 
   /*
@@ -70,35 +78,35 @@
 
   // level 0 - emerg
   .log-severity[data-level='0'] {
-    color: Magenta;
+    color: var(--ods-color-error-200);
   }
   // level 1 - alert
   .log-severity[data-level='1'] {
-    color: Violet;
+    color: var(--ods-color-error-200);
   }
   // level 2 - crit
   .log-severity[data-level='2'] {
-    color: red;
+    color: var(--ods-color-error-200);
   }
   // level 3 - err
   .log-severity[data-level='3'] {
-    color: Crimson;
+    color: var(--ods-color-error-200);
   }
   // level 4 - warning
   .log-severity[data-level='4'] {
-    color: Gold;
+    color: var(--ods-color-warning-400);
   }
   // level 5 - notice
   .log-severity[data-level='5'] {
-    color: RosyBrown;
+    color: var(--ods-color-primary-300);
   }
   // level 6 - info
   .log-severity[data-level='6'] {
-    color: LightSkyBlue;
+    color: var(--ods-color-primary-300);
   }
   // level 7 - debug
   .log-severity[data-level='7'] {
-    color: Cyan;
+    color: var(--ods-color-primary-300);
   }
 }
 

diff --git a/packages/components/ng-log-live-tail/src/template.html b/packages/components/ng-log-live-tail/src/template.html
@@ -60,23 +60,29 @@
             ></div>
 
             <div data-ng-repeat="log in $ctrl.logs track by $index">
-                <div>
-                    <span
-                        data-ng-bind-html="log['formattedTimestamp_highlighted']"
-                        class="log-timestamp"
-                    ></span>
+                <span
+                    data-ng-bind-html="log['formattedDate_highlighted']"
+                    class="log-date"
+                ></span>
+                <span
+                    data-ng-bind-html="log['formattedTime_highlighted']"
+                    class="log-time"
+                ></span>
+                <span class="separator"></span>
+                <span
+                    data-level="{{ log['level'] }}"
+                    data-ng-bind-html="log['levelLabel_highlighted']"
+                    class="log-severity"
+                ></span>
+                <span class="separator"></span>
+                <span>
                     <span
-                        data-level="{{ log['level'] }}"
-                        data-ng-bind-html="log['levelLabel_highlighted']"
-                        class="log-severity"
+                        data-ng-repeat="key in $ctrl.logKeys track by key"
+                        class="log-key"
+                        data-ng-bind-html="log[key + '_highlighted']"
+                        data-ng-if="log[key + '_highlighted']"
                     ></span>
-                    <span data-ng-repeat="key in $ctrl.logKeys track by key">
-                        <span
-                            class="log"
-                            data-ng-bind-html="log[key + '_highlighted']"
-                        ></span>
-                    </span>
-                </div>
+                </span>
             </div>
             <i class="cursor"></i>
         </div>

diff --git a/yarn.lock b/yarn.lock
@@ -4695,6 +4695,11 @@
   resolved "https://registry.yarnpkg.com/@ovhcloud/ods-common-theming/-/ods-common-theming-17.2.1.tgz#681c355499c35029536a56973dcf3ab634cb94d9"
   integrity sha512-yzAmWzUJlud0xBd6qL9O3+jJvYpaduZ1N22wZsqSBstpTZH7U5tFxcckfweggc6tfIcL88FTZil8LQvx0hb8DA==
 
+"@ovhcloud/ods-common-theming@17.2.2":
+  version "17.2.2"
+  resolved "https://artifactory.ovhcloud.tools:443/artifactory/api/npm/digital-tools-manager-aapi-npm/@ovhcloud/ods-common-theming/-/ods-common-theming-17.2.2.tgz#376b54531aa10d5019d489f318f97ca83f46aac0"
+  integrity sha512-eGL4d1utEkjpEnAx1SwjCUv3VhWSHD2/KcqqURWLgRpFrUf2H49Z599qyU+UNkwq3JYMFD9L1D9BT8Y5p+Sggw==
+
 "@ovhcloud/ods-components@17.2.1", "@ovhcloud/ods-components@^17.1.0", "@ovhcloud/ods-components@^17.2.1":
   version "17.2.1"
   resolved "https://registry.yarnpkg.com/@ovhcloud/ods-components/-/ods-components-17.2.1.tgz#a4d64fdaafae54f95efca891d77633f43751ea45"
@@ -4711,6 +4716,13 @@
   dependencies:
     "@ovhcloud/ods-common-theming" "17.2.1"
 
+"@ovhcloud/ods-theme-blue-jeans@17.2.2":
+  version "17.2.2"
+  resolved "https://artifactory.ovhcloud.tools:443/artifactory/api/npm/digital-tools-manager-aapi-npm/@ovhcloud/ods-theme-blue-jeans/-/ods-theme-blue-jeans-17.2.2.tgz#12029b0e1c129f47a98ffd4f2002d7968182922a"
+  integrity sha512-0Fr6ZJ10btgkGAXJDun5tftlV1gYFevB7piQiYT4kFjfVXmxmpSw9A1nusPHiZfmV+Dnzv3/+SVxpYK/uccYXw==
+  dependencies:
+    "@ovhcloud/ods-common-theming" "17.2.2"
+
 "@ovhcloud/reket-axios-client@^0.2.1":
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/@ovhcloud/reket-axios-client/-/reket-axios-client-0.2.1.tgz#835997e9d3514a5855dc4d7ac867abe8b2c8638d"