Skip to content

GitLab

Commit cdd19f54 authored by gj4210's avatar gj4210 👽 Committed by janis.streib
Browse files

ADD: Vis Network for Netdoc

parent f028b6e7
Hide whitespace changes
Inline Side-by-side
frontend/package-lock.json
View file @ cdd19f54
......@@ -28,6 +28,7 @@
"vue-axios": "^3.2.2",
"vue-bootstrap-typeahead": "^0.2.6",
"vue-router": "^3.4.9",
"vue-vis-network": "^1.0.2",
"vue2-leaflet": "^2.6.0",
"vuedraggable": "^2.24.3",
"vuex": "^3.5.1",
......@@ -1669,6 +1670,17 @@
"node": ">=10.0.0"
}
},
"node_modules/@egjs/hammerjs": {
"version": "2.0.17",
"resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
"integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
"dependencies": {
"@types/hammerjs": "^2.0.36"
},
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "0.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
......@@ -2004,6 +2016,11 @@
"@types/node": "*"
}
},
"node_modules/@types/hammerjs": {
"version": "2.0.40",
"resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.40.tgz",
"integrity": "sha512-VbjwR1fhsn2h2KXAY4oy1fm7dCxaKy0D+deTb8Ilc3Eo3rc5+5eA4rfYmZaHgNJKxVyI0f6WIXzO2zLkVmQPHA=="
},
"node_modules/@types/hast": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
......@@ -4978,8 +4995,7 @@
"node_modules/component-emitter": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
"integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
"dev": true
"integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
},
"node_modules/compressible": {
"version": "2.0.18",
......@@ -10452,6 +10468,11 @@
"verror": "1.10.0"
}
},
"node_modules/keycharm": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.2.0.tgz",
"integrity": "sha1-+m6i5DuQpoAohD0n8gddNajD5vk="
},
"node_modules/killable": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
......@@ -11327,6 +11348,14 @@
"mkdirp": "bin/cmd.js"
}
},
"node_modules/moment": {
"version": "2.29.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
"engines": {
"node": "*"
}
},
"node_modules/mousetrap": {
"version": "1.6.5",
"resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
......@@ -16638,8 +16667,7 @@
"node_modules/timsort": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
},
"node_modules/tmp": {
"version": "0.0.33",
......@@ -17352,6 +17380,69 @@
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
"dev": true
},
"node_modules/vis-data": {
"version": "6.6.1",
"resolved": "https://registry.npmjs.org/vis-data/-/vis-data-6.6.1.tgz",
"integrity": "sha512-xmujDB2Dzf8T04rGFJ9OP4OA6zRVrz8R9hb0CVKryBrZRCljCga9JjSfgctA8S7wdZu7otDtUIwX4ZOgfV/57w==",
"hasInstallScript": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/visjs"
},
"peerDependencies": {
"moment": "^2.24.0",
"uuid": "^7.0.0 || ^8.0.0",
"vis-util": "^4.0.0"
}
},
"node_modules/vis-network": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/vis-network/-/vis-network-5.4.1.tgz",
"integrity": "sha512-hUJlFWoCmLup6IxoXCr//OO2ZCkC8jrXEkkHLG1DhBgB54Y3K33+e5q4tc436inMlGzfqqaKTIToNbOGr8Szww==",
"hasInstallScript": true,
"dependencies": {
"@egjs/hammerjs": "^2.0.15",
"component-emitter": "^1.3.0",
"keycharm": "^0.2.0",
"moment": "^2.24.0",
"timsort": "^0.3.0",
"vis-data": "^6.1.1",
"vis-util": "^1.1.6"
}
},
"node_modules/vis-util": {
"version": "1.1.10",
"resolved": "https://registry.npmjs.org/vis-util/-/vis-util-1.1.10.tgz",
"integrity": "sha512-8hGSxsFi2ogYYweClQyITzWnirWgQ8p0i9M4d3OXMuUO8vjXrf+2zHOYI9OZbtUduxAWuMEePnS9BXDtPJmJ7Q==",
"dependencies": {
"moment": "2.24.0",
"vis-uuid": "1.1.3"
},
"engines": {
"node": ">=8"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/visjs"
}
},
"node_modules/vis-util/node_modules/moment": {
"version": "2.24.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
"integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
"engines": {
"node": "*"
}
},
"node_modules/vis-uuid": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/vis-uuid/-/vis-uuid-1.1.3.tgz",
"integrity": "sha512-2B6XdY1bkzbUh+TugmnAaFa61KO9R5pzBzIuFIm8a9FrkbxIdSmQXV+FbfkL8QunkQV/bT0JDLQ2puqCS2+0Og==",
"deprecated": "We don't use this library anymore so you shouldn't either. Use e.g. 'uuid' instead!",
"engines": {
"node": ">=8"
}
},
"node_modules/vm-browserify": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
......@@ -17603,6 +17694,17 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"node_modules/vue-vis-network": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/vue-vis-network/-/vue-vis-network-1.0.2.tgz",
"integrity": "sha512-UAN08qSBuTjUtKXSHLkUKY3Izz2t2dxAKUfnbFwZ5OzBiL+kdSx/wTfI1mF7QjkKTHyMD4VHWOuPGzX3Xu2cww==",
"dependencies": {
"vis-network": "^5.4.1"
},
"peerDependencies": {
"vue": "~2.x"
}
},
"node_modules/vue2-leaflet": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz",
......@@ -20310,6 +20412,14 @@
"integrity": "sha512-6nFkfkmSeV/rqSaS4oWHgmpnYw194f6hmWF5is6b0J1naJZoiD0NTc9AiUwPHvWsowkjuHErCZT1wa0jg+BLIA==",
"dev": true
},
"@egjs/hammerjs": {
"version": "2.0.17",
"resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
"integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
"requires": {
"@types/hammerjs": "^2.0.36"
}
},
"@fortawesome/fontawesome-common-types": {
"version": "0.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
......@@ -20573,6 +20683,11 @@
"@types/node": "*"
}
},
"@types/hammerjs": {
"version": "2.0.40",
"resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.40.tgz",
"integrity": "sha512-VbjwR1fhsn2h2KXAY4oy1fm7dCxaKy0D+deTb8Ilc3Eo3rc5+5eA4rfYmZaHgNJKxVyI0f6WIXzO2zLkVmQPHA=="
},
"@types/hast": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
......@@ -22991,8 +23106,7 @@
"component-emitter": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
"integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
"dev": true
"integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
},
"compressible": {
"version": "2.0.18",
......@@ -27285,6 +27399,11 @@
"verror": "1.10.0"
}
},
"keycharm": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.2.0.tgz",
"integrity": "sha1-+m6i5DuQpoAohD0n8gddNajD5vk="
},
"killable": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
......@@ -27995,6 +28114,11 @@
"minimist": "^1.2.5"
}
},
"moment": {
"version": "2.29.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
},
"mousetrap": {
"version": "1.6.5",
"resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
......@@ -32345,8 +32469,7 @@
"timsort": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
},
"tmp": {
"version": "0.0.33",
......@@ -32925,6 +33048,47 @@
}
}
},
"vis-data": {
"version": "6.6.1",
"resolved": "https://registry.npmjs.org/vis-data/-/vis-data-6.6.1.tgz",
"integrity": "sha512-xmujDB2Dzf8T04rGFJ9OP4OA6zRVrz8R9hb0CVKryBrZRCljCga9JjSfgctA8S7wdZu7otDtUIwX4ZOgfV/57w==",
"requires": {}
},
"vis-network": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/vis-network/-/vis-network-5.4.1.tgz",
"integrity": "sha512-hUJlFWoCmLup6IxoXCr//OO2ZCkC8jrXEkkHLG1DhBgB54Y3K33+e5q4tc436inMlGzfqqaKTIToNbOGr8Szww==",
"requires": {
"@egjs/hammerjs": "^2.0.15",
"component-emitter": "^1.3.0",
"keycharm": "^0.2.0",
"moment": "^2.24.0",
"timsort": "^0.3.0",
"vis-data": "^6.1.1",
"vis-util": "^1.1.6"
}
},
"vis-util": {
"version": "1.1.10",
"resolved": "https://registry.npmjs.org/vis-util/-/vis-util-1.1.10.tgz",
"integrity": "sha512-8hGSxsFi2ogYYweClQyITzWnirWgQ8p0i9M4d3OXMuUO8vjXrf+2zHOYI9OZbtUduxAWuMEePnS9BXDtPJmJ7Q==",
"requires": {
"moment": "2.24.0",
"vis-uuid": "1.1.3"
},
"dependencies": {
"moment": {
"version": "2.24.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
"integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
}
}
},
"vis-uuid": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/vis-uuid/-/vis-uuid-1.1.3.tgz",
"integrity": "sha512-2B6XdY1bkzbUh+TugmnAaFa61KO9R5pzBzIuFIm8a9FrkbxIdSmQXV+FbfkL8QunkQV/bT0JDLQ2puqCS2+0Og=="
},
"vm-browserify": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
......@@ -33124,6 +33288,14 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"vue-vis-network": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/vue-vis-network/-/vue-vis-network-1.0.2.tgz",
"integrity": "sha512-UAN08qSBuTjUtKXSHLkUKY3Izz2t2dxAKUfnbFwZ5OzBiL+kdSx/wTfI1mF7QjkKTHyMD4VHWOuPGzX3Xu2cww==",
"requires": {
"vis-network": "^5.4.1"
}
},
"vue2-leaflet": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz",
frontend/package.json
View file @ cdd19f54
......@@ -28,6 +28,7 @@
"vue-axios": "^3.2.2",
"vue-bootstrap-typeahead": "^0.2.6",
"vue-router": "^3.4.9",
"vue-vis-network": "^1.0.2",
"vue2-leaflet": "^2.6.0",
"vuedraggable": "^2.24.3",
"vuex": "^3.5.1",
......
frontend/src/App.vue
View file @ cdd19f54
......@@ -17,7 +17,8 @@
</b-col>
<b-col style="margin-top: auto; margin-bottom: auto">
<span><b> Devel-Instanz</b>
Diese Anwendung befindet sich in <a href="https://git.scc.kit.edu/scc-net/netvs/netvs-core/-/tree/devel">aktiver Entwicklung</a>. Einige Features könnten eingeschränkt funktionieren oder unerwartete Ergebnisse liefern.</span>
Diese Anwendung befindet sich in <a
href="https://git.scc.kit.edu/scc-net/netvs/netvs-core/-/tree/devel">aktiver Entwicklung</a>. Einige Features könnten eingeschränkt funktionieren oder unerwartete Ergebnisse liefern.</span>
</b-col>
</b-row>
</b-alert>
......@@ -171,6 +172,7 @@ export default {
@import 'assets/css/netvs.scss';
@import '../node_modules/bootstrap/scss/bootstrap.scss';
@import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
@import '../node_modules/vis-network/dist/vis-network.css';
#wrapper {
transition: padding-right .2s, padding-left .2s;
......
frontend/src/views/nd/Netdoc.vue
View file @ cdd19f54
......@@ -45,6 +45,27 @@
</b-card>
</b-col>
<b-col>
<b-card class="shadow-sm network-card" no-body>
<Network id="network" :nodes="[{id: 1, label: 'circle', shape: 'circle' },
{id: 2, label: 'ellipse', shape: 'ellipse'},
{id: 3, label: 'database',shape: 'database'},
{id: 4, label: 'box', shape: 'box' },
{id: 5, label: 'diamond', shape: 'diamond'},
{id: 6, label: 'dot', shape: 'dot'},
{id: 7, label: 'square', shape: 'square'},
{id: 8, label: 'triangle',shape: 'triangle'}]"
:edges=" [
{from: 1, to: 2},
{from: 2, to: 3},
{from: 2, to: 4},
{from: 2, to: 5},
{from: 5, to: 6},
{from: 5, to: 7},
{from: 6, to: 8}
]"
:options="network_options"
/>
</b-card>
</b-col>
</b-row>
</div>
......@@ -55,10 +76,11 @@ import NetdocService from '@/api-services/netdoc.service'
import apiutil from '@/util/apiutil'
import Loading from '@/components/Loading'
import PaginatorList from '@/components/PaginatorList'
import {Network} from 'vue-vis-network'
export default {
name: 'Netdoc',
components: { PaginatorList, Loading },
components: { PaginatorList, Loading, Network },
data() {
return {
bcds: null,
......@@ -66,7 +88,19 @@ export default {
vlan2lports: {},
vlan2l2pports: {},
vlan2pports: {},
bcd_collapse_states: []
bcd_collapse_states: [],
network_options: {
nodes: {
borderWidth: 4
},
edges: {
color: 'lightgray'
},
font: {
color: 'red',
face: 'arial'
}
}
}
},
async created() {
......@@ -105,4 +139,13 @@ export default {
.collapse-header {
z-index: 69;
}
.network-card {
height: 100%;
}
#network {
width: 100%;
height: 100%;
}
</style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Imprint