1
0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-22 07:10:09 +01:00

Working on some updates

This commit is contained in:
Donald Zou 2024-08-14 22:45:36 -04:00
parent fd0e519e41
commit 47efb644b7
17 changed files with 208 additions and 190 deletions

132
README.md
View File

@ -17,11 +17,11 @@
## 📣 What's New: v4.0
> I can't thank enough for all of you who wait for this release, and for those who are new to this project, welcome :) Also, huge thanks who sponsored me GitHub :heart:
- 🎉 **New Features**
- **Updated dashboard design**: Re-designed some of the section with more modern style and layout, the UI is faster and more responsive, it also uses less memory. But overall is still the same dashboard you're familiarized.
- **Docker Solution**: We now have 2 docker solutions! Thanks to @DaanSelen & @shuricksumy for providing them. For more information, please see the Docker section below.
- **Peer Job Scheduler**: Now you can schedule jobs for each peer to either **restrict** or **delete** the peer if the peer's total / upload / download data usage exceeded a limit, or you can set a specific datetime to restrict or delete the peer.
- **Share Peer's QR Code with Public Link**: You can share a peer's QR code and `.conf` file without the need to loging in.
- **API Key for WGDashboard's REST API**: You can now request all the api endpoint used in the dashboard. For more details please review the API Documentation below.
- **Logging**: Dashboard will now log all activity on the dashboard and API requests.
- **Time-Based One-Time Password (TOTP)**: You can enable this function to add one more layer of security, and generate the TOTP with your choice of authenticator.
@ -36,9 +36,14 @@
- Improved SQL query efficient
- Removed all templates, except for `index.html` where it will load the Vue.js app.
- **🥘 New Experimental Features**
- **Cross-Server Access**: Now you can access other servers that installed `v4` of WGDashboard through API key.
- **Desktop App**: Thanks to **Cross-Server Access**, you can now download an ElectronJS based desktop app of WGDashboard, and use that to access WGDashboard on different servers.
- > For more information, please scroll down to [🥘 Experimental Functions](#-experimental-functions)
**For users who is using `v2.x.x` please be sure to read [this](#please-note-for-user-who-is-using-v231-or-below) before updating WGDashboard**
> I can't thank enough for all of you who wait for this release, and for those who are new to this project, welcome :)
> Also, huge thanks to who contributed to this major release:
> @bolgovrussia, @eduardorosabales, @Profik, @airgapper, @tokon2000, @bkeenke, @kontorskiy777, @bugsse, @Johnnykson, @DaanSelen, @shuricksumy and many others!
<hr>
@ -70,7 +75,7 @@
- Edit peer information
- Delete peers with ease
- Restrict peers
- Generate QR Code and `.conf` file for peers
- Generate QR Code and `.conf` file for peers, share it through a public link
- Schedule jobs to delete / restrict peer when conditions are met
- View real time peer status
- Testing tool: Ping and Traceroute to your peer
@ -79,7 +84,7 @@
## 📝 Requirement
- Recommend the following OS, tested by our beloved users:
- [x] Ubuntu 18.04.1 LTS, 20.04.1 LTS, 22.04.4 LTS [@Me]
- [x] Ubuntu 18.04.1 LTS, 20.04.1 LTS, 22.04.4 LTS, 24.02 LTS, Fedora 38 [@Me]
- [x] Debian GNU/Linux 10 (buster) [❤️ @[robchez](https://github.com/robchez)]
- [x] AlmaLinux 8.4 (Electric Cheetah) [❤️ @[barry-smithjr](https://github.com/)]
- [x] CentOS 7 [❤️ @[PrzemekSkw](https://github.com/PrzemekSkw)]
@ -193,40 +198,33 @@ In the `src` folder, it contained a file called `wg-dashboard.service`, we can u
```ini
[Unit]
After=network.service
After=syslog.target network-online.target
Wants=wg-quick.target
ConditionPathIsDirectory=/etc/wireguard
[Service]
WorkingDirectory=<your dashboard directory full path here>
ExecStart=/usr/bin/python3 <your dashboard directory full path here>/dashboard.py
Type=forking
PIDFile=<absolute_path_of_wgdashboard_src>/gunicorn.pid
WorkingDirectory=<absolute_path_of_wgdashboard_src>
ExecStart=<absolute_path_of_wgdashboard_src>/wgd.sh start
ExecStop=<absolute_path_of_wgdashboard_src>/wgd.sh stop
ExecReload=<absolute_path_of_wgdashboard_src>/wgd.sh restart
TimeoutSec=120
PrivateTmp=yes
Restart=always
[Install]
WantedBy=default.target
WantedBy=multi-user.target
```
Now, we need to replace both `<your dashboard directory full path here>` to the one you just copied from step 2. After doing this, the file will become something like this, your file might be different:
```ini
[Unit]
After=netword.service
[Service]
WorkingDirectory=/root/wgdashboard/src
ExecStart=/usr/bin/python3 /root/wgdashboard/src/dashboard.py
Restart=always
[Install]
WantedBy=default.target
```
Now, we need to replace all `<absolute_path_of_wgdashboard_src>` to the one you just copied from step 2. After doing this, the file will become something like this, your file might be different:
**Be aware that after the value of `WorkingDirectory`, it does not have a `/` (slash).** And then save the file after you edited it
4. Copy the service file to systemd folder
```bash
$ cp wg-dashboard.service /etc/systemd/system/wg-dashboard.service
$ sudo cp wg-dashboard.service /etc/systemd/system/wg-dashboard.service
```
To make sure you copy the file successfully, you can use this command `cat /etc/systemd/system/wg-dashboard.service` to see if it will output the file you just edited.
@ -245,28 +243,31 @@ In the `src` folder, it contained a file called `wg-dashboard.service`, we can u
```bash
$ sudo systemctl status wg-dashboard.service
```
And you should see something like this
```shell
● wg-dashboard.service
Loaded: loaded (/etc/systemd/system/wg-dashboard.service; enabled; vendor preset: enabled)
Active: active (running) since Tue 2021-08-03 22:31:26 UTC; 4s ago
Main PID: 6602 (python3)
Tasks: 1 (limit: 453)
Memory: 26.1M
CGroup: /system.slice/wg-dashboard.service
└─6602 /usr/bin/python3 /root/wgdashboard/src/dashboard.py
Aug 03 22:31:26 ubuntu-wg systemd[1]: Started wg-dashboard.service.
Aug 03 22:31:27 ubuntu-wg python3[6602]: * Serving Flask app1 "WGDashboard" (lazy loading)
Aug 03 22:31:27 ubuntu-wg python3[6602]: * Environment: production
Aug 03 22:31:27 ubuntu-wg python3[6602]: WARNING: This is a development server. Do not use it in a production deployment.
Aug 03 22:31:27 ubuntu-wg python3[6602]: Use a production WSGI server instead.
Aug 03 22:31:27 ubuntu-wg python3[6602]: * Debug mode: off
Aug 03 22:31:27 ubuntu-wg python3[6602]: * Running on all addresses.
Aug 03 22:31:27 ubuntu-wg python3[6602]: WARNING: This is a development server. Do not use it in a production deployment.
Aug 03 22:31:27 ubuntu-wg python3[6602]: * Running on http://0.0.0.0:10086/ (Press CTRL+C to quit)
● wg-dashboard.service
Loaded: loaded (/etc/systemd/system/wg-dashboard.service; enabled; vendor preset: enabled)
Active: active (running) since Wed 2024-08-14 22:21:47 EDT; 55s ago
Process: 494968 ExecStart=/home/donaldzou/Wireguard-Dashboard/src/wgd.sh start (code=exited, status=0/SUCCESS)
Main PID: 495005 (gunicorn)
Tasks: 5 (limit: 4523)
Memory: 36.8M
CPU: 789ms
CGroup: /system.slice/wg-dashboard.service
├─495005 /home/donaldzou/Wireguard-Dashboard/src/venv/bin/python3 ./venv/bin/gunicorn --config ./gunicorn.conf.py
└─495007 /home/donaldzou/Wireguard-Dashboard/src/venv/bin/python3 ./venv/bin/gunicorn --config ./gunicorn.conf.py
Aug 14 22:21:40 wg sudo[494978]: root : PWD=/home/donaldzou/Wireguard-Dashboard/src ; USER=root ; COMMAND=./venv/bin/gunicorn --config ./gunicorn.conf.py
Aug 14 22:21:40 wg sudo[494978]: pam_unix(sudo:session): session opened for user root(uid=0) by (uid=0)
Aug 14 22:21:40 wg wgd.sh[494979]: [WGDashboard] WGDashboard w/ Gunicorn will be running on 0.0.0.0:10086
Aug 14 22:21:40 wg wgd.sh[494979]: [WGDashboard] Access log file is at ./log/access_2024_08_14_22_21_40.log
Aug 14 22:21:40 wg wgd.sh[494979]: [WGDashboard] Error log file is at ./log/error_2024_08_14_22_21_40.log
Aug 14 22:21:40 wg sudo[494978]: pam_unix(sudo:session): session closed for user root
Aug 14 22:21:45 wg wgd.sh[494968]: [WGDashboard] Checking if WGDashboard w/ Gunicorn started successfully
Aug 14 22:21:47 wg wgd.sh[494968]: [WGDashboard] WGDashboard w/ Gunicorn started successfully
Aug 14 22:21:47 wg wgd.sh[494968]: ------------------------------------------------------------
Aug 14 22:21:47 wg systemd[1]: Started wg-dashboard.service.
```
If you see `Active:` followed by `active (running) since...` then it means it run correctly.
@ -339,29 +340,12 @@ Endpoint = 0.0.0.0:51820
## ❓ How to update the dashboard?
#### **Please note for user who is using `v2.3.1` or below**
#### **Please note for users who are using `v3 - v3.0.6` want to update to `v4.0`**
- Although theoretically updating through `wgd.sh` should work, but I still suggest you to update the dashboard manually.
- For user who is using `v2.3.1` or below, please notice that all data that stored in the current database will **not** transfer to the new database. This is hard decision to move from TinyDB to SQLite. But SQLite does provide a thread-safe access and TinyDB doesn't. I couldn't find a safe way to transfer the data, so you need to do them manually... Sorry about that :pensive: . But I guess this would be a great start for future development :sunglasses:.
#### **Please note for users who are using `v2.3.1` or below**
<hr>
#### Update Method 1 (For `v3.0` or above)
1. Change your directory to `wgdashboard/src`
```bash
cd wgdashboard/src
```
2. Update the dashboard with the following
```bash
./wgd.sh update
```
> If this doesn't work, please use the method below. Sorry about that :(
#### Update Method 2
- For user who is using `v2.3.1` or below, please notice that all data that stored in the current database will **not** transfer to the new database. This is hard decision to move from TinyDB to SQLite. But SQLite does provide a thread-safe access and TinyDB doesn't. I couldn't find a safe way to transfer the data, so you need to do them manually... Sorry about that :pensive:。 But I guess this would be a great start for future development :sunglasses:.
1. Change your directory to `wgdashboard`
@ -372,26 +356,24 @@ Endpoint = 0.0.0.0:51820
2. Update the dashboard
```shell
git pull https://github.com/donaldzou/WGDashboard.git v3.0.5 --force
git pull https://github.com/donaldzou/WGDashboard.git v4.0 --force
```
3. Install
```shell
./wgd.sh install
sudo ./wgd.sh install
```
Starting with `v3.0`, you can simply do `./wgd.sh update` !! (I hope, lol)
Starting with `v3.0`, you can simply do `sudo ./wgd.sh update` !! (I hope)
## 🥘 Experimental Functions
#### Progressive Web App (PWA) for WGDashboard
### Cross-Server Access
Starting with `v4.0`, you can access WGDashboards on other server through one WGDashboard with API Keys
- With `v3.0`, I've added a `manifest.json` into the dashboard, so user could add their dashboard as a PWA to their browser or mobile device.
<img src="img/PWA.gif"/>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -108,7 +108,6 @@ export default {
</h3>
<h3 class="text-body mb-0">Add Peers</h3>
</RouterLink>
</div>
<div class="d-flex flex-column gap-2">
<BulkAdd :saving="saving" :data="this.data" :availableIp="this.availableIp"></BulkAdd>

View File

@ -402,7 +402,7 @@ export default {
</script>
<template>
<div v-if="!this.loading">
<div v-if="!this.loading" class="container-md">
<div class="d-flex align-items-center">
<div>
<small CLASS="text-muted">CONFIGURATION</small>
@ -545,10 +545,7 @@ export default {
</div>
</div>
</div>
<div class="mb-4">
<!-- <div class="d-flex align-items-center gap-3 mb-2">-->
<!-- <h3>Peers</h3>-->
<!-- </div>-->
<div class="mb-3">
<PeerSearch
@jobsAll="this.peerScheduleJobsAll.modalOpen = true"
@jobLogs="this.peerScheduleJobsLogs.modalOpen = true"

View File

@ -30,7 +30,9 @@ export default {
'60000': '1 Minutes'
},
searchString: "",
searchStringTimeout: undefined
searchStringTimeout: undefined,
showDisplaySettings: false,
showMoreSettings: false
}
},
methods: {
@ -93,68 +95,98 @@ export default {
@click="this.downloadAllPeer()">
<i class="bi bi-download me-2"></i> Download All
</button>
<div class="flex-grow-1">
<div class="flex-grow-1 mt-3 mt-md-0">
<input class="form-control rounded-3 bg-secondary-subtle border-1 border-secondary-subtle shadow-sm w-100"
placeholder="Search..."
id="searchPeers"
@keyup="this.debounce()"
v-model="this.searchString">
</div>
<div class="">
</div>
<div class="dropdown dropup">
<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-filter-circle me-2"></i>
Display
</button>
<ul class="dropdown-menu mt-2 shadow rounded-3 animate__animated animation__fadeInDropdown dropdown-menu-end">
<li>
<small class="dropdown-header">Sort by</small>
</li>
<li v-for="(value, key) in this.sort">
<a class="dropdown-item d-flex align-items-center" role="button" @click="this.updateSort(key)">
<small class="me-auto">{{value}}</small>
<i class="bi bi-check text-primary"
v-if="store.Configuration.Server.dashboard_sort === key"></i>
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<small class="dropdown-header">Refresh Interval</small>
</li>
<li v-for="(value, key) in this.interval">
<a class="dropdown-item d-flex" role="button" @click="updateRefreshInterval(key)">
<small class="me-auto">{{value}}</small>
<i class="bi bi-check text-primary"
v-if="store.Configuration.Server.dashboard_refresh_interval === key"></i>
</a>
</li>
</ul>
</div>
<div class="dropdown dropup">
<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots"></i>
</button>
<ul class="dropdown-menu shadow mt-2 rounded-3 animate__animated animation__fadeInDropdown">
<li>
<h6 class="dropdown-header">Peer Jobs</h6>
</li>
<li>
<a role="button" class="dropdown-item" @click="this.$emit('jobsAll')">
Active Jobs
</a>
</li>
<li>
<a role="button" class="dropdown-item" @click="this.$emit('jobLogs')">
Logs
</a>
</li>
</ul>
</div>
<button
@click="this.showDisplaySettings = true"
class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
type="button" aria-expanded="false">
<i class="bi bi-filter-circle me-2"></i>
Display
</button>
<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
@click="this.showMoreSettings = true"
type="button" aria-expanded="false">
<i class="bi bi-three-dots"></i>
</button>
<Transition name="zoom">
<div
v-if="this.showDisplaySettings"
class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll displayModal">
<div class="container-md d-flex h-100 w-100">
<div class="m-auto modal-dialog-centered dashboardModal">
<div class="card rounded-3 shadow w-100">
<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2">
<h4 class="mb-0 fw-normal">Display
</h4>
<button type="button" class="btn-close ms-auto" @click="this.showDisplaySettings = false"></button>
</div>
<div class="card-body px-4 pb-4 d-flex gap-3 flex-column">
<div>
<p class="text-muted fw-bold mb-2"><small>Sort by</small></p>
<div class="list-group">
<a v-for="(value, key) in this.sort" class="list-group-item list-group-item-action d-flex" role="button" @click="this.updateSort(key)">
<span class="me-auto">{{value}}</span>
<i class="bi bi-check text-primary"
v-if="store.Configuration.Server.dashboard_sort === key"></i>
</a>
</div>
</div>
<div>
<p class="text-muted fw-bold mb-2"><small>Refresh interval</small></p>
<div class="list-group">
<a v-for="(value, key) in this.interval"
class="list-group-item list-group-item-action d-flex" role="button"
@click="this.updateRefreshInterval(key)">
<span class="me-auto">{{value}}</span>
<i class="bi bi-check text-primary"
v-if="store.Configuration.Server.dashboard_refresh_interval === key"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Transition>
<Transition name="zoom">
<div
v-if="this.showMoreSettings"
class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll displayModal">
<div class="container-md d-flex h-100 w-100">
<div class="m-auto modal-dialog-centered dashboardModal">
<div class="card rounded-3 shadow w-100">
<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2">
<h4 class="mb-0 fw-normal">Configuration Settings
</h4>
<button type="button" class="btn-close ms-auto" @click="this.showMoreSettings = false"></button>
</div>
<div class="card-body px-4 pb-4 d-flex gap-3 flex-column">
<div>
<p class="text-muted fw-bold mb-2"><small>Peer Jobs</small></p>
<div class="list-group">
<a class="list-group-item list-group-item-action d-flex" role="button"
@click="this.$emit('jobsAll')">
Active Jobs
</a>
<a class="list-group-item list-group-item-action d-flex" role="button"
@click="this.$emit('jobLogs')">
Logs
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Transition>
</div>
</div>
</template>
@ -180,9 +212,17 @@ export default {
}
}
.displayModal .dashboardModal{
width: 400px !important;
}
@media screen and (max-width: 768px) {
.peerSearchContainer{
flex-direction: column;
}
.peerSettingContainer .dashboardModal{
width: 100% !important;
}
}
</style>

View File

@ -31,7 +31,7 @@ export default {
<template>
<div class="mt-5">
<div class="mt-md-5 mt-3">
<div class="container-md">
<div class="d-flex mb-4 configurationListTitle">
<h3 class="text-body d-flex">

View File

@ -41,8 +41,8 @@ export default {
<li class="nav-item">
<RouterLink :to="'/configuration/'+c.Name + '/peers'" class="nav-link nav-conf-link rounded-3"
active-class="active"
v-for="c in this.wireguardConfigurationsStore.Configurations">
<span class="dot me-2" :class="{active: c.Status}"></span>
{{c.Name}}
</RouterLink>
</li>

View File

@ -18,8 +18,9 @@ export default {
methods: {
async handshake(){
this.active = false;
this.refreshing = true;
if (this.server.host && this.server.apiKey){
this.refreshing = true;
this.startTime = undefined;
this.endTime = undefined;
this.startTime = dayjs()

View File

@ -26,7 +26,7 @@ export const DashboardConfigurationStore = defineStore('DashboardConfigurationSt
this.ActiveServerConfiguration = localStorage.getItem("ActiveCrossServerConfiguration");
}
if (currentConfiguration === null){
localStorage.setItem('CrossServerConfiguration', JSON.stringify(this.CrossServerConfiguration))
window.localStorage.setItem('CrossServerConfiguration', JSON.stringify(this.CrossServerConfiguration))
}else{
this.CrossServerConfiguration = JSON.parse(currentConfiguration)
}
@ -34,7 +34,7 @@ export const DashboardConfigurationStore = defineStore('DashboardConfigurationSt
},
syncCrossServerConfiguration(){
localStorage.setItem('CrossServerConfiguration', JSON.stringify(this.CrossServerConfiguration))
window.localStorage.setItem('CrossServerConfiguration', JSON.stringify(this.CrossServerConfiguration))
},
addCrossServerConfiguration(){
this.CrossServerConfiguration.ServerList[v4().toString()] = {host: "", apiKey: "", active: false}

View File

@ -20,8 +20,8 @@ const getUrl = (url) => {
return `${apiKey.host}${url}`
}
console.log("URL fetching: ", import.meta.env.MODE === 'development' ? url
: `${window.location.protocol}//${(window.location.host + window.location.pathname + url).replace(/\/\//g, '/')}`)
// console.log("URL fetching: ", import.meta.env.MODE === 'development' ? url
// : `${window.location.protocol}//${(window.location.host + window.location.pathname + url).replace(/\/\//g, '/')}`)
return import.meta.env.MODE === 'development' ? url
: `${window.location.protocol}//${(window.location.host + window.location.pathname + url).replace(/\/\//g, '/')}`
}

View File

@ -5,7 +5,7 @@ export default {
</script>
<template>
<div class="mt-5 text-body">
<div class="mt-md-5 mt-3 text-body">
<RouterView v-slot="{ Component, route }">
<Transition name="fade2" mode="out-in">
<Suspense>

View File

@ -60,7 +60,7 @@ export default {
</script>
<template>
<div class="mt-5 text-body">
<div class="mt-md-5 mt-3 text-body">
<div class="container">
<h3 class="mb-3 text-body">Ping</h3>
<div class="row">

View File

@ -39,8 +39,8 @@ export default {
</script>
<template>
<div class="mt-5">
<div class="container">
<div class="mt-md-5 mt-3">
<div class="container-md">
<h3 class="mb-3 text-body">Settings</h3>
<DashboardTheme></DashboardTheme>
<div class="card mb-4 shadow rounded-3">

View File

@ -38,8 +38,8 @@ export default {
</script>
<template>
<div class="mt-5 text-body">
<div class="container">
<div class="mt-md-5 mt-3 text-body">
<div class="container-md">
<h3 class="mb-3 text-body">Traceroute</h3>
<div class="row">
<div class="col-sm-4 d-flex gap-2 flex-column">

View File

@ -5,11 +5,11 @@ ConditionPathIsDirectory=/etc/wireguard
[Service]
Type=forking
PIDFile=/opt/wgdashboard/src/gunicorn.pid
WorkingDirectory=/opt/wgdashboard/src
ExecStart=/opt/wgdashboard/src/wgd.sh start
ExecStop=/opt/wgdashboard/src/wgd.sh stop
ExecReload=/opt/wgdashboard/src/wgd.sh restart
PIDFile=<absolute_path_of_wgdashboard_src>/gunicorn.pid
WorkingDirectory=<absolute_path_of_wgdashboard_src>
ExecStart=<absolute_path_of_wgdashboard_src>/wgd.sh start
ExecStop=<absolute_path_of_wgdashboard_src>/wgd.sh stop
ExecReload=<absolute_path_of_wgdashboard_src>/wgd.sh restart
TimeoutSec=120
PrivateTmp=yes
Restart=always

View File

@ -64,13 +64,13 @@ _determineOS(){
_installPython(){
case "$OS" in
ubuntu|debian)
{ sudo apt update ; sudo apt-get install -y python3; printf "\n\n"; } &>> ./log/install.txt
{ sudo apt update ; sudo apt-get install -y python3 net-tools; printf "\n\n"; } &>> ./log/install.txt
;;
centos|fedora|redhat)
if command -v dnf &> /dev/null; then
{ sudo dnf install -y python3; printf "\n\n"; } >> ./log/install.txt
{ sudo dnf install -y python3 net-tools; printf "\n\n"; } >> ./log/install.txt
else
{ sudo yum install -y python3; printf "\n\n"; } >> ./log/install.txt
{ sudo yum install -y python3 net-tools ; printf "\n\n"; } >> ./log/install.txt
fi
;;
# arch)
@ -305,7 +305,6 @@ update_wgd() {
fi
}
if [ "$#" != 1 ];
then
help