Adds JSON editor component in config modal

2025-04-08 17:06:18 +02:00 · 2021-05-16 20:03:12 +01:00 · 2021-05-16 20:03:12 +01:00 · 88a3ae9c3a
commit 88a3ae9c3a
parent e05a04243d
6 changed files with 278 additions and 34 deletions
--- a/README.md
+++ b/README.md
@ -169,6 +169,7 @@ It makes use of the following components, kudos to their respective authors
 - [`vue-js-modal`](https://github.com/euvl/vue-js-modal) - Modal component by @euvl
 - [`v-tooltip`](https://github.com/Akryum/v-tooltip) - Tooltip component by @Akryum
 - [`vue-material-tabs`](https://github.com/jairoblatt/vue-material-tabs) - Tab view component by @jairoblatt
+- [`VJsoneditor`](https://github.com/yansenlei/VJsoneditor) - Interactive JSON editor component by @yansenlei

 ### License 📜

--- a/package.json
+++ b/package.json
@ -12,6 +12,7 @@
    "register-service-worker": "^1.6.2",
    "remedial": "^1.0.8",
    "serve-static": "^1.14.1",
+    "v-jsoneditor": "^1.4.2",
    "v-tooltip": "^2.1.3",
    "vue": "^2.6.10",
    "vue-cli-plugin-yaml": "^1.0.2",
--- a/public/conf.yml
+++ b/public/conf.yml
@ -1,33 +1,165 @@
 ---
 pageInfo:
-  title: Dashy
-  navLinks:
-  - title: Home
-    path: /
-  - title: About
-    path: /about
-  - title: Source Code
-    path: https://github.com/Lissy93/dashy
-appConfig:
-  theme: colorful
-  fontAwesomeKey: 0821c65656
+  title: Networking Services
 sections:
- name: Getting Started
+- name: Firewall
  items:
-  - title: Source
-    description: Source code and documentation on GitHub
-    icon: fab fa-github
-    url: https://github.com/Lissy93/dashy
-  - title: Issues
-    description: View currently open issues, or raise a new one
-    icon: fas fa-bug
-    url: https://github.com/Lissy93/dashy/issues
-  - title: Demo 1
-    description: 'Live Demo #1'
-    icon: far fa-rocket
-    url: https://dashy-demo-1.netlify.app 
-  - title: Demo 2
-    description: 'Live Demo #2'
-    icon: fad fa-planet-ringed
-    url: https://dashy-demo-2.netlify.app 
-  
+  - title: OPNsense
+    description: Firewall Central Management
+    icon: networking/opnsense.png
+    target: iframe
+    url: https://192.168.1.1
+  - title: NetData
+    description: System resource usage on firewall
+    icon: networking/netdata.png
+    url: http://192.168.1.1:19999/
+  - title: MalTrail
+    description: Malicious traffic detection system
+    icon: networking/maltrail.png
+    url: http://192.168.1.1:8338
+  - title: Ntopng
+    description: Network traffic probe and network use monitor
+    icon: networking/ntop.png
+    url: http://192.168.1.1:3001
+  - title: Sensei
+    description: Additional data features
+    icon: networking/sensei.png
+    url: https://192.168.1.1/ui/sensei/
+  - title: Monit
+    description: Status of firewall system alerts
+    icon: networking/monit.png
+    url: https://192.168.1.1/ui/monit/status
+  - title: Firewall Logs
+    description: Real-time view of firewall data and logs
+    icon: networking/logs.png
+    url: https://192.168.1.1/ui/diagnostics/firewall/log
+  - title: WireGuard
+    description: Manage WireGuard client and server on firewall
+    icon: networking/wireguard.png
+    url: https://192.168.1.1/ui/wireguard/general
+- name: DNS Device
+  displayData:
+    collapsed: false
+    rows: 2
+  items:
+  - title: Pi-Hole
+    description: DNS settings for ad & tracker blocking
+    icon: networking/pihole.png
+    url: http://192.168.130.2/admin
+  - title: PiAlert
+    description: Presence monitoring and ARP scanning
+    icon: networking/pialert.png
+    url: http://192.168.130.2/pialert/
+  - title: SmokePing
+    description: Network latency monitoring
+    icon: networking/smokeping.png
+    url: http://192.168.130.2:8086/
+  - title: StatPing
+    description: Up-time monitoring for local service
+    icon: networking/statping.png
+    url: http://192.168.130.2:8083/
+  - title: LibreSpeed
+    description: Local network speed and latency test
+    icon: networking/librespeed.png
+    url: http://192.168.130.2:49154/
+  - title: NetData
+    description: Real-time system resource usage
+    icon: networking/netdata.png
+    url: http://192.168.130.2:19999
+  - title: Portainer
+    description: Docker container management
+    icon: networking/portainer.png
+    url: http://192.168.130.2:9000/
+  - title: cAdvisor
+    description: Container monitoring
+    icon: networking/cadvisor.png
+    url: http://192.168.130.2:8084/
+  - title: Glances
+    description: Simple resource usage
+    icon: networking/glances.png
+    url: http://192.168.130.2:61208
+  - title: Dozzle
+    description: Docker container web log viewer
+    icon: networking/dozzle.png
+    url: http://192.168.130.2:8093
+  - title: Prometheus
+    description: System Statistics Aggregation with PromQL
+    icon: networking/prometheus.png
+    url: http://192.168.130.2:8090/
+  - title: Grafana
+    description: Data visualised on dashboards
+    icon: networking/grafana.png
+    url: http://192.168.130.2:8091/
+- name: External Services
+  items:
+  - title: DuckDNS
+    description: Dynamic DNS for fixed public IP
+    icon: networking/duckdns.png
+    url: https://www.duckdns.org/
+  - title: BorgBase
+    description: Off-site system Borg backups
+    icon: networking/borgbase.png
+    url: https://www.borgbase.com/repositories
+  - title: Mullvad
+    description: Hosted VPN provider
+    icon: networking/mullvad.png
+    url: https://mullvad.net/en/account/
+  - title: ZeroTier
+    description: Secure networks between devices
+    icon: networking/zeroteir.png
+    url: https://my.zerotier.com/
+  - title: HealthChecks
+    description: Cron Job Monitoring
+    icon: networking/healthchecks.png
+    url: https://healthchecks.io/checks/
+  - title: ISP - Vodafone
+    description: Broadband internet provider
+    icon: networking/vodafone.png
+    url: https://myaccount.vodafone.co.uk/
+  - title: Digital Ocean
+    description: Cloud Hosting
+    icon: networking/digital-ocean.png
+    url: https://cloud.digitalocean.com/
+  - title: CloudFlare
+    description: Domain and DNS Management
+    icon: networking/cloudflare.png
+    url: https://dash.cloudflare.com/
+- name: Other Devices
+  items:
+  - title: Modem
+    description: ISP Router Modem Combo
+    icon: ''
+    url: http://192.168.1.5
+  - title: Wireless Access Point
+    description: View clients connected to WiFi
+    icon: ''
+    url: http://192.168.1.109/info.php
+  - title: Fing
+    description: Monitor connectivity issues, ISP quality, health checks and troubleshooting
+    provider: Fing
+    icon: ''
+    url: https://app.fing.com/
+  - title: Switch
+    description: Manage VLANs on Ubiquity Ethernet switch
+    icon: ''
+    url: "#"
+- name: External Utilities
+  displayData:
+    collapsed: true
+  items:
+  - title: Public IP
+    description: Check public IP and associated data
+    icon: ''
+    url: https://www.whatismyip.com/
+  - title: Who Is Lookup
+    description: Check ICAN info for a given IP address or domain
+    icon: ''
+    url: https://whois.domaintools.com/
+  - title: Speed Test
+    description: Upload + download speeds and latency
+    icon: ''
+    url: https://speed.cloudflare.com/
+  - title: Mullvad Check
+    description: Confirms a secure connection to Mullvad's WireGuard servers
+    icon: ''
+    url: https://mullvad.net/check
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@ -3,15 +3,14 @@
    <TabItem name="Edit">
      <div class="first-tab">Todo</div>
    </TabItem>
+    <TabItem name="Raw Editor">
+         <RawEditor :sections="sections" />
+    </TabItem>
    <TabItem name="Download">
-      <div class="second-tab">
        <pre>{{this.jsonParser(this.sections)}}</pre>
-      </div>
    </TabItem>
    <TabItem name="Add Item">
-      <div class="third-tab">
        <AddItem :sections="sections" />
-      </div>
    </TabItem>
  </Tabs>
 </template>
@ -20,6 +19,7 @@

 import JsonToYaml from '@/utils/JsonToYaml';
 import AddItem from '@/components/Configuration/AddItem';
+import RawEditor from '@/components/Configuration/RawEditor';

 export default {
  name: 'ConfigContainer',
@ -33,6 +33,7 @@ export default {
  },
  components: {
    AddItem,
+    RawEditor,
  },
 };
 </script>
--- a/src/components/Configuration/RawEditor.vue
+++ b/src/components/Configuration/RawEditor.vue
@ -0,0 +1,40 @@
+<template>
+  <div>
+    <v-jsoneditor
+      v-model="json"
+      :options="options"
+      :plus="false"
+      height="650px"
+      @error="onError"
+    />
+  </div>
+</template>
+
+<script>
+
+import VJsoneditor from 'v-jsoneditor';
+
+export default {
+  name: 'RawEditor',
+  props: {
+    sections: Array,
+  },
+  components: {
+    VJsoneditor,
+  },
+  data() {
+    return {
+      json: this.sections,
+    };
+  },
+  methods: {
+    onError() {
+      console.log('error');
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>
--- a/yarn.lock
+++ b/yarn.lock
@ -957,6 +957,11 @@
  resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz#a53515db25d8038374381b73af20bb4f2e508d87"
  integrity sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==

+"@sphinxxxx/color-conversion@^2.2.2":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz#03ecc29279e3c0c832f6185a5bfa3497858ac8ca"
+  integrity sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw==
+
 "@types/anymatch@*":
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
@ -1580,6 +1585,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
    mime-types "~2.1.24"
    negotiator "0.6.2"

+ace-builds@^1.4.12:
+  version "1.4.12"
+  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.12.tgz#888efa386e36f4345f40b5233fcc4fe4c588fae7"
+  integrity sha512-G+chJctFPiiLGvs3+/Mly3apXTcfgE45dT5yp12BcWZ1kUs+gm0qd3/fv4gsz6fVag4mM0moHVpjHDIgph6Psg==
+
 acorn-jsx@^5.2.0, acorn-jsx@^5.3.1:
  version "5.3.1"
  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
@ -1623,7 +1633,7 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==

-ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4:
+ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.6:
  version "6.12.6"
  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@ -5231,6 +5241,11 @@ isstream@~0.1.2:
  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=

+javascript-natural-sort@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz#f9e2303d4507f6d74355a73664d1440fb5a0ef59"
+  integrity sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k=
+
 javascript-stringify@^2.0.1:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-2.1.0.tgz#27c76539be14d8bd128219a2d731b09337904e79"
@ -5244,6 +5259,11 @@ jest-worker@^25.4.0:
    merge-stream "^2.0.0"
    supports-color "^7.0.0"

+jmespath@^0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.15.0.tgz#a3f222a9aae9f966f5d27c796510e28091764217"
+  integrity sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc=
+
 js-message@1.0.7:
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/js-message/-/js-message-1.0.7.tgz#fbddd053c7a47021871bb8b2c95397cc17c20e47"
@ -5314,6 +5334,11 @@ json-schema@0.2.3:
  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
  integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=

+json-source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/json-source-map/-/json-source-map-0.6.1.tgz#e0b1f6f4ce13a9ad57e2ae165a24d06e62c79a0f"
+  integrity sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg==
+
 json-stable-stringify-without-jsonify@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
@ -5355,6 +5380,21 @@ json5@^2.1.2:
  dependencies:
    minimist "^1.2.5"

+jsoneditor@^9.1.1:
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/jsoneditor/-/jsoneditor-9.4.1.tgz#cebd6cefc74ae3c8354b6d84c4e86d4e78fea0b9"
+  integrity sha512-Uf/ru12Y4eRo4xoYaFjpbB13fIXVUQG6GZO21i3yhlfKL389HLV8e8El77grup01IRdtcoB01P8rZTY4d6uXjA==
+  dependencies:
+    ace-builds "^1.4.12"
+    ajv "^6.12.6"
+    javascript-natural-sort "^0.7.1"
+    jmespath "^0.15.0"
+    json-source-map "^0.6.1"
+    jsonrepair "^2.2.0"
+    mobius1-selectr "^2.4.13"
+    picomodal "^3.0.0"
+    vanilla-picker "^2.11.2"
+
 jsonfile@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@ -5367,6 +5407,11 @@ jsonify@~0.0.0:
  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
  integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=

+jsonrepair@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jsonrepair/-/jsonrepair-2.2.0.tgz#3cdaa6fbc9ced360f401cef9c97f1a8caf3470e5"
+  integrity sha512-NyqcDyer9N4OEDwkZZjmSwd17T9tOfvqTSs9GDpbmPp928Rc1Tot7sOTNenIpMaavD3LkAFkDcNcjmxv3Vqvbg==
+
 jsprim@^1.2.2:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@ -5874,6 +5919,11 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
  dependencies:
    minimist "^1.2.5"

+mobius1-selectr@^2.4.13:
+  version "2.4.13"
+  resolved "https://registry.yarnpkg.com/mobius1-selectr/-/mobius1-selectr-2.4.13.tgz#0019dfd9f984840d6e40f70683ab3ec78ce3b5df"
+  integrity sha512-Mk9qDrvU44UUL0EBhbAA1phfQZ7aMZPjwtL7wkpiBzGh8dETGqfsh50mWoX9EkjDlkONlErWXArHCKfoxVg0Bw==
+
 move-concurrently@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@ -6553,6 +6603,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
  integrity sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==

+picomodal@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/picomodal/-/picomodal-3.0.0.tgz#facd30f4fbf34a809c1e04ea525f004f399c0b82"
+  integrity sha1-+s0w9PvzSoCcHgTqUl8ATzmcC4I=
+
 pify@^2.0.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@ -8662,6 +8717,13 @@ uuid@^3.3.2, uuid@^3.4.0:
  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==

+v-jsoneditor@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/v-jsoneditor/-/v-jsoneditor-1.4.2.tgz#2a877fb3ed137732f8e6269b99b32758bd304ad0"
+  integrity sha512-cLY/41uD7+1fJGpbs7HPwBv20UHlNpi8A6zhI9t5lVGLgQ/7lK5pLsZeLAz+4ybOXXK091HDgdB/wEnCTYMFFw==
+  dependencies:
+    jsoneditor "^9.1.1"
+
 v-tooltip@^2.1.3:
  version "2.1.3"
  resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-2.1.3.tgz#281c2015d1e73787f13c8956aa295b8c3a73f261"
@ -8685,6 +8747,13 @@ validate-npm-package-license@^3.0.1:
    spdx-correct "^3.0.0"
    spdx-expression-parse "^3.0.0"

+vanilla-picker@^2.11.2:
+  version "2.11.2"
+  resolved "https://registry.yarnpkg.com/vanilla-picker/-/vanilla-picker-2.11.2.tgz#eaa24efa68c27e7ee9e0776df55d6913b855f133"
+  integrity sha512-2cP7LlUnxHxwOf06ReUVtd2RFJMnJGaxN2s0p8wzBH3In5b00Le7fFZ9VrIoBE0svZkSq/BC/Pwq/k/9n+AA2g==
+  dependencies:
+    "@sphinxxxx/color-conversion" "^2.2.2"
+
 vary@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"