Parse and display ANSI color codes found in some messages
This commit is contained in:
parent
fe21cd9e4a
commit
c57fbce360
106
package-lock.json
generated
106
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
27
src/components/Modal/ValueRenderer.js
Normal 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
|
||||
}
|
||||
},
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user