selfhosted
/
dashy
mirror of https://github.com/lissy93/dashy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Adds extensions to conf, so that img type can be determined

This commit is contained in:
Alicia Sykes 2021-04-01 19:51:44 +01:00
parent 221324b41e
commit dfdef736e2
2 changed files with 71 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/Item.vue
View File

@ -7,15 +7,15 @@
<div class="overflow-dots">...</div>
</div>
<img
v-if="iconType === 'img' && icon"
:src="`/img/item-icons/tile-icons/${icon}.png`"
v-if="icon"
:src="getAppropriateImgPath(icon)"
class="tile-icon"
/>
<img
<!-- <img
v-else-if="iconType === 'svg' && icon"
:src="`/img/item-icons/tile-svgs/${icon}.svg`"
class="tile-svg"
/>
/> -->
<!-- <img
v-else-if="fontAwesome"
:src="`/img/tile-svgs/${svg}.svg`"
@ -35,7 +35,6 @@ export default {
subtitle: String, // Optional sub-text
description: String, // Optional tooltip hover text
icon: String, // Optional path to icon, within public/img/tile-icons
iconType: String, // 'img' | 'svg' | 'fa' | undefined, // Type of icon
svg: String, // Optional vector graphic, that is then dynamically filled
color: String, // Optional background color, specified in hex code
url: String, // URL to the resource, optional but recommended
@ -50,6 +49,46 @@ export default {
getId: this.id,
};
},
methods: {
isUrl(str) {
const pattern = new RegExp(/(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-/]))?/);
return pattern.test(str);
},
/* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
getAppropriateImgPath(img) {
const imageType = this.determineImageType(img);
switch (imageType) {
case 'url':
return img;
case 'img':
return `/img/item-icons/tile-icons/${img}`;
case 'svg':
return img;
case 'fas':
return img;
default:
return '';
}
},
/* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
determineImageType(img) {
const fileExtRegex = /(?:\.([^.]+))?$/;
const validImgExtensions = ['png', 'jpg'];
let imgType = '';
if (this.isUrl(img)) {
imgType = 'url';
} else if (validImgExtensions.includes(fileExtRegex.exec(img)[1])) {
imgType = 'img';
} else if (fileExtRegex.exec(img)[1] === 'svg') {
imgType = 'svg';
} else if (img.include('fas')) {
imgType = 'fas';
} else {
imgType = 'none';
}
return imgType;
},
},
mounted() {
// Detects overflowing text, and allows is to marguee on hover
// The below code is horifically bad, it is embarassing that I wrote it...
@ -60,7 +99,7 @@ export default {
if (isOverflowing) {
tileElem.className += ' is-overflowing';
}
} // Not from present me to past me: WTF?!
} // Note from present me to past me: WTF?!
},
};
</script>

82
src/data/conf.yml
View File

@ -7,162 +7,136 @@ sections:
items:
- title: OPNsense
description: Firewall Central Management
icon: networking/opnsense
icon: networking/opnsense.png
iconType: img
url: https://192.168.1.1
- title: NetData
description: System resource usage on firewall
icon: networking/netdata
iconType: img
icon: networking/netdata.png
url: http://192.168.1.1:19999/
- title: MalTrail
description: Malicious traffic detection system
icon: networking/maltrail
icon: networking/maltrail.png
iconType: img
url: 192.168.1.1:8338
- title: Ntopng
description: Network traffic probe and network use monitor
icon: networking/ntop
icon: networking/ntop.png
iconType: img
url: 192.168.1.1:3001
- title: Sensei
description: Additional data features
icon: networking/sensei
icon: networking/sensei.png
iconType: img
url: https://192.168.1.1/ui/sensei/
- title: Monit
description: Status of firewall system alerts
icon: networking/monit
icon: networking/monit.png
iconType: img
url: https://192.168.1.1/ui/monit/status
- title: Firewall Logs
description: Real-time view of firewall data and logs
icon: networking/logs
icon: networking/logs.png
iconType: img
url: https://192.168.1.1/ui/diagnostics/firewall/log
- title: WireGuard
description: Manage WireGuard client and server on firewall
icon: networking/wireguard
iconType: img
icon: networking/wireguard.png
url: https://192.168.1.1/ui/wireguard/general
- name: DNS Device
items:
- title: Pi-Hole
description: DNS settings for ad & tracker blocking
provider: Cockpit
iconType: img
icon: networking/pihole
icon: networking/pihole.png
url: http://192.168.130.2/admin
- title: PiAlert
description: Presence monitoring and ARP scanning
provider: GoAccess
iconType: img
icon: networking/pialert
icon: networking/pialert.png
url: http://192.168.130.2/pialert/
- title: SmokePing
description: Network latency monitoring
iconType: img
icon: networking/smokeping
icon: networking/smokeping.png
url: http://192.168.130.2:8086/
- title: StatPing
description: Up-time monitoring for local service
iconType: img
icon: networking/statping
icon: networking/statping.png
url: http://192.168.130.2:8083/
- title: LibreSpeed
description: Local network speed and latency test
iconType: img
icon: networking/librespeed
icon: networking/librespeed.png
url: http://192.168.130.2:49154/
- title: NetData
description: Real-time system resource usage
iconType: img
icon: networking/netdata
icon: networking/netdata.png
url: http://192.168.130.2:19999
- title: Portainer
description: Docker container management
iconType: img
icon: networking/portainer
icon: networking/portainer.png
url: http://192.168.130.2:9000/
- title: cAdvisor
description: Container monitoring
iconType: img
icon: networking/cadvisor
icon: networking/cadvisor.png
url: http://192.168.130.2:8084/
- title: Glances
description: Simple resource usage
iconType: img
icon: networking/glances
icon: networking/glances.png
url: http://192.168.130.2:61208
- title: Dozzle
description: Docker container web log viewer
iconType: img
icon: networking/dozzle
icon: networking/dozzle.png
url: http://192.168.130.2:8093
- title: Prometheus
description: System Statistics Aggregation with PromQL
iconType: img
icon: networking/prometheus
icon: networking/prometheus.png
url: http://192.168.130.2:8090/
- title: Grafana
description: Data visualised on dashboards
iconType: img
icon: networking/grafana
icon: networking/grafana.png
url: http://192.168.130.2:8091/
- name: Other Devices
items:
- title: Modem
description: ISP Router Modem Combo
iconType: img
icon: ''
url: http://192.168.1.5
- title: Wireless Access Point
description: View clients connected to WiFi
icon: ''
iconType: img
url: http://192.168.1.109/info.php
- title: Fing
description: Monitor connectivity issues, ISP quality, health checks and troubleshooting
provider: Fing
icon: ''
iconType: img
url: https://app.fing.com/
- title: Switch
description: Manage VLANs on Ubiquity Ethernet switch
icon: ''
iconType: img
url: "/"
- name: External Services
items:
- title: DuckDNS
description: Dynamic DNS for fixed public IP
icon: networking/duckdns
iconType: img
icon: networking/duckdns.png
url: https://www.duckdns.org/
- title: BorgBase
description: Off-site system Borg backups
icon: networking/borgbase
iconType: img
icon: networking/borgbase.png
url: https://www.borgbase.com/repositories
- title: Mullvad
description: Hosted VPN provider
icon: networking/mullvad
iconType: img
icon: networking/mullvad.png
url: https://mullvad.net/en/account/
- title: ZeroTier
description: Secure networks between devices
icon: networking/zeroteir
iconType: img
icon: networking/zeroteir.png
url: https://my.zerotier.com/
- title: HealthChecks
description: Cron Job Monitoring
icon: networking/healthchecks
iconType: img
icon: networking/healthchecks.png
url: https://healthchecks.io/checks/
- title: ISP - Vodafone
description: Broadband internet provider
icon: networking/vodafone
iconType: img
icon: networking/vodafone.png
url: https://myaccount.vodafone.co.uk/
- name: External Utilities
displayData:
@ -171,20 +145,16 @@ sections:
- title: Public IP
description: Check public IP and associated data
icon: ''
iconType: img
url: https://www.whatismyip.com/
- title: Who Is Lookup
description: Check ICAN info for a given IP address or domain
icon: ''
iconType: img
url: https://whois.domaintools.com/
- title: Speed Test
description: Upload + download speeds and latency
icon: ''
iconType: img
url: https://speed.cloudflare.com/
- title: Mullvad Check
description: Confirms a secure connection to Mullvad's WireGuard servers
icon: ''
iconType: img
url: https://mullvad.net/check