k-space/logmower-frontend
Archived
11
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Activity

Parse and display ANSI color codes found in some messages

Browse Source
This commit is contained in:
Erki Aas
2022-11-16 14:55:45 +02:00
parent fe21cd9e4a
commit c57fbce360
5 changed files with 153 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
package-lock.json generated
View File

@@ -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",

9
package.json
View File

@@ -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": {

15
src/components/Grid/Main/MessageWithLevelRenderer.js
View File

@@ -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>
{{ message }}
<v-icon v-if="icon" :color="color" class="mr-2">{{ icon }}</v-icon>
<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 icon = icons[level]
let color = colors[level] ?? null
let icon = icons[level] ?? null
return {
message,
color,

8
src/components/Modal/ExamineLogModal.vue
View File

@@ -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'
},
]
}

27
src/components/Modal/ValueRenderer.js Normal file
View File

@@ -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
}
},
};