diff --git a/package-lock.json b/package-lock.json index d6b1317..b018a70 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 4e84c03..5d578b2 100644 --- a/package.json +++ b/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": { diff --git a/src/components/Grid/Main/MessageWithLevelRenderer.js b/src/components/Grid/Main/MessageWithLevelRenderer.js index 7176638..40c5ba0 100644 --- a/src/components/Grid/Main/MessageWithLevelRenderer.js +++ b/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: ` - {{ icon }} - {{ message }} + {{ icon }} + `, 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, diff --git a/src/components/Modal/ExamineLogModal.vue b/src/components/Modal/ExamineLogModal.vue index 18a818d..9ef27f3 100644 --- a/src/components/Modal/ExamineLogModal.vue +++ b/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' }, ] } diff --git a/src/components/Modal/ValueRenderer.js b/src/components/Modal/ValueRenderer.js new file mode 100644 index 0000000..28717ac --- /dev/null +++ b/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: ` + + + + `, + 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 + } + }, +}; \ No newline at end of file