Parse and display ANSI color codes found in some messages

package-lock.json

@@ -13,12 +13,14 @@
         "@meforma/vue-toaster": "^1.3.0",
         "@vue/cli-service": "^5.0.8",
         "ag-grid-vue3": "^28.2.0",
+        "ansi-to-html": "^0.7.2",
         "core-js": "^3.25.1",
         "event-hooks-webpack-plugin": "^2.2.0",
         "pinia": "^2.0.21",
         "roboto-fontface": "*",
         "single-spa-vue": "^2.5.1",
         "systemjs-webpack-interop": "^2.3.7",
+        "v-calendar": "next",
         "vue": "^3.2.39",
         "vue-select": "beta",
         "vuetify": "^3.0.0-beta.0",
@@ -645,6 +647,15 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "license": "MIT"
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.0.tgz",
+      "integrity": "sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -820,6 +831,11 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.189",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.189.tgz",
+      "integrity": "sha512-kb9/98N6X8gyME9Cf7YaqIMvYGnBSWqEci6tiettE6iJWH1XdJz/PO8LB0GtLCG7x8dU3KWhZT+lA1a35127tA=="
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -1630,6 +1646,20 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/ansi-to-html": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz",
+      "integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==",
+      "dependencies": {
+        "entities": "^2.2.0"
+      },
+      "bin": {
+        "ansi-to-html": "bin/ansi-to-html"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -2699,6 +2729,26 @@
       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==",
       "license": "MIT"
     },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/date-fns-tz": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.7.tgz",
+      "integrity": "sha512-1t1b8zyJo+UI8aR+g3iqr5fkUHWpd58VBx8J/ZSQ+w7YrGlw80Ag4sA86qkfCXRBLmMc4I2US+aPMd4uKvwj5g==",
+      "peerDependencies": {
+        "date-fns": ">=2.0.0"
+      }
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -7611,6 +7661,21 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/v-calendar": {
+      "version": "3.0.0-alpha.8",
+      "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-3.0.0-alpha.8.tgz",
+      "integrity": "sha512-T23H5UbK0EomrwArlF/jrT2LFbV/lu+Bp9JroZ1paN6rPoaMyvE+HrLxvAmUgi+pODrdTURDMzM3+WPgeFKEBQ==",
+      "dependencies": {
+        "@popperjs/core": "2.4.0",
+        "@types/lodash": "^4.14.165",
+        "date-fns": "^2.16.1",
+        "date-fns-tz": "^1.0.12",
+        "lodash": "^4.17.20"
+      },
+      "peerDependencies": {
+        "vue": "^3.1.0"
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -8825,6 +8890,11 @@
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g=="
     },
+    "@popperjs/core": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.0.tgz",
+      "integrity": "sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA=="
+    },
     "@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -8971,6 +9041,11 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
     },
+    "@types/lodash": {
+      "version": "4.14.189",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.189.tgz",
+      "integrity": "sha512-kb9/98N6X8gyME9Cf7YaqIMvYGnBSWqEci6tiettE6iJWH1XdJz/PO8LB0GtLCG7x8dU3KWhZT+lA1a35127tA=="
+    },
     "@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -9583,6 +9658,14 @@
         "color-convert": "^2.0.1"
       }
     },
+    "ansi-to-html": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz",
+      "integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==",
+      "requires": {
+        "entities": "^2.2.0"
+      }
+    },
     "any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -10261,6 +10344,17 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+    },
+    "date-fns-tz": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.7.tgz",
+      "integrity": "sha512-1t1b8zyJo+UI8aR+g3iqr5fkUHWpd58VBx8J/ZSQ+w7YrGlw80Ag4sA86qkfCXRBLmMc4I2US+aPMd4uKvwj5g==",
+      "requires": {}
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -13479,6 +13573,18 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
+    "v-calendar": {
+      "version": "3.0.0-alpha.8",
+      "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-3.0.0-alpha.8.tgz",
+      "integrity": "sha512-T23H5UbK0EomrwArlF/jrT2LFbV/lu+Bp9JroZ1paN6rPoaMyvE+HrLxvAmUgi+pODrdTURDMzM3+WPgeFKEBQ==",
+      "requires": {
+        "@popperjs/core": "2.4.0",
+        "@types/lodash": "^4.14.165",
+        "date-fns": "^2.16.1",
+        "date-fns-tz": "^1.0.12",
+        "lodash": "^4.17.20"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

package.json

@@ -10,20 +10,21 @@
   "dependencies": {
     "@ag-grid-community/core": "^28.2.0",
     "@mdi/font": "5.9.55",
+    "@meforma/vue-toaster": "^1.3.0",
     "@vue/cli-service": "^5.0.8",
     "ag-grid-vue3": "^28.2.0",
     "core-js": "^3.25.1",
     "event-hooks-webpack-plugin": "^2.2.0",
+    "ansi-to-html": "^0.7.2",
     "pinia": "^2.0.21",
     "roboto-fontface": "*",
     "single-spa-vue": "^2.5.1",
     "systemjs-webpack-interop": "^2.3.7",
-    "vue": "^3.2.39",
-    "vuex": "next",
-    "vue-select": "beta",
     "v-calendar": "next",
-    "@meforma/vue-toaster": "^1.3.0",
+    "vue": "^3.2.39",
+    "vue-select": "beta",
     "vuetify": "^3.0.0-beta.0",
+    "vuex": "next",
     "webfontloader": "^1.0.0"
   },
   "devDependencies": {

src/components/Grid/Main/MessageWithLevelRenderer.js

@@ -1,11 +1,14 @@
 import { VRow, VCol } from 'vuetify/components/VGrid'
 import { VIcon } from 'vuetify/components/VIcon'
+import 'ansi-to-html'
+import Convert from "ansi-to-html";
+
 
 export default {
     template: `<v-row>
       <v-col>
-        <v-icon :color="color" class="mr-2">{{ icon }}</v-icon>
+        <v-icon v-if="icon" :color="color" class="mr-2">{{ icon }}</v-icon>
-        {{ message }}
+        <span v-html="message"></span>
       </v-col>
     </v-row>`,
     components: {
@@ -14,7 +17,9 @@ export default {
         VIcon
     },
     setup(props) {
-        let message = props.params.data.message
+        let message = props.params.value
+        let converter = new Convert()
+        message = converter.toHtml(message)
         let level = props.params.data.level
         let icons = {
             'emergency': 'mdi-alert-circle',
@@ -36,8 +41,8 @@ export default {
             'info': 'green',
             'debug': 'green',
         }
-        let color = colors[level]
+        let color = colors[level] ?? null
-        let icon = icons[level]
+        let icon = icons[level] ?? null
         return {
             message,
             color,

src/components/Modal/ExamineLogModal.vue

@@ -35,7 +35,7 @@ import { VCard, VCardText, VCardActions } from 'vuetify/components/VCard'
 import { VDialog } from 'vuetify/components/VDialog'
 import { VBtn } from 'vuetify/components/VBtn'
 import { VTable } from 'vuetify/components/VTable'
-
+import ValueRenderer from "./ValueRenderer";
 
 export default {
   name: "ExamineLogModal",
@@ -46,7 +46,8 @@ export default {
     VCardActions,
     VBtn,
     VDialog,
-    VTable
+    VTable,
+    ValueRenderer
   },
   data() {
     return {
@@ -62,7 +63,8 @@ export default {
           field: 'value',
           sortable: true,
           filter: 'agTextColumnFilter',
-          resizable: true
+          resizable: true,
+          cellRenderer: 'ValueRenderer'
         },
       ]
     }

src/components/Modal/ValueRenderer.js

@@ -0,0 +1,27 @@
+import { VRow, VCol } from 'vuetify/components/VGrid'
+import 'ansi-to-html'
+import Convert from "ansi-to-html";
+
+export default {
+    template: `<v-row>
+      <v-col>
+        <span v-html="message"></span>
+      </v-col>
+    </v-row>`,
+    components: {
+        VRow,
+        VCol,
+    },
+    setup(props) {
+        let message;
+        if (props.params.data.key === 'message') {
+            let parser = new Convert()
+            message = parser.toHtml(props.params.value)
+        } else {
+            message = props.params.value
+        }
+        return {
+            message
+        }
+    },
+};