mirror of
https://github.com/vx3r/wg-gen-web.git
synced 2024-12-18 00:13:23 +00:00
improve formatting and layout
This commit is contained in:
Christoph Haas
parent
31dd494d62
commit
3c155f1c97
2
.env
2
.env
@ -41,6 +41,6 @@ OAUTH2_REDIRECT_URL=https://wg-gen-web-demo.127-0-0-1.fr
|
||||
OAUTH2_PROVIDER_NAME=fake
|
||||
|
||||
# https://github.com/jamescun/wg-api integration, user and password (basic auth) are optional
|
||||
WG_STATS_API=https://wg.example.digital/wg-api
|
||||
WG_STATS_API=
|
||||
WG_STATS_API_USER=
|
||||
WG_STATS_API_PASS=
|
||||
@ -23,7 +23,7 @@ func readInterfaceStatus(c *gin.Context) {
|
||||
log.WithFields(log.Fields{
|
||||
"err": err,
|
||||
}).Error("failed to read interface status")
|
||||
c.AbortWithStatus(http.StatusInternalServerError)
|
||||
c.AbortWithStatusJSON(http.StatusInternalServerError, err.Error())
|
||||
return
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@ func readClientStatus(c *gin.Context) {
|
||||
log.WithFields(log.Fields{
|
||||
"err": err,
|
||||
}).Error("failed to read client status")
|
||||
c.AbortWithStatus(http.StatusInternalServerError)
|
||||
c.AbortWithStatusJSON(http.StatusInternalServerError, err.Error())
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ package core
|
||||
import (
|
||||
"bytes"
|
||||
"encoding/json"
|
||||
"errors"
|
||||
"io/ioutil"
|
||||
"net/http"
|
||||
"os"
|
||||
@ -34,6 +35,10 @@ type apiResponse struct {
|
||||
|
||||
func fetchWireGuardAPI(reqData apiRequest) (*apiResponse, error) {
|
||||
apiUrl := os.Getenv("WG_STATS_API")
|
||||
if apiUrl == "" {
|
||||
return nil, errors.New("Status API integration not configured")
|
||||
}
|
||||
|
||||
apiClient := http.Client{
|
||||
Timeout: time.Second * 2, // Timeout after 2 seconds
|
||||
}
|
||||
@ -135,6 +140,8 @@ func ReadClientStatus() ([]*model.ClientStatus, error) {
|
||||
for i, peerIP := range peerIPs {
|
||||
peerAddresses[i] = peerIP.(string)
|
||||
}
|
||||
peerHandshakeRelative := time.Since(peerHandshake)
|
||||
peerActive := peerHandshakeRelative.Minutes() < 3 // TODO: we need a better detection... ping for example?
|
||||
|
||||
newClientStatus := &model.ClientStatus{
|
||||
PublicKey: peer["public_key"].(string),
|
||||
@ -142,10 +149,11 @@ func ReadClientStatus() ([]*model.ClientStatus, error) {
|
||||
ProtocolVersion: int(peer["protocol_version"].(float64)),
|
||||
Name: "UNKNOWN",
|
||||
Email: "UNKNOWN",
|
||||
Connected: false,
|
||||
Connected: peerActive,
|
||||
AllowedIPs: peerAddresses,
|
||||
Endpoint: peer["endpoint"].(string),
|
||||
LastHandshake: peerHandshake,
|
||||
LastHandshakeRelative: peerHandshakeRelative,
|
||||
ReceivedBytes: int(peer["receive_bytes"].(float64)),
|
||||
TransmittedBytes: int(peer["transmit_bytes"].(float64)),
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
package model
|
||||
|
||||
import (
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"time"
|
||||
)
|
||||
|
||||
@ -15,10 +17,46 @@ type ClientStatus struct {
|
||||
AllowedIPs []string `json:"allowedIPs"`
|
||||
Endpoint string `json:"endpoint"`
|
||||
LastHandshake time.Time `json:"lastHandshake"`
|
||||
LastHandshakeRelative time.Duration `json:"lastHandshakeRelative"`
|
||||
ReceivedBytes int `json:"receivedBytes"`
|
||||
TransmittedBytes int `json:"transmittedBytes"`
|
||||
}
|
||||
|
||||
func (c *ClientStatus) MarshalJSON() ([]byte, error) {
|
||||
|
||||
duration := fmt.Sprintf("%v ago", c.LastHandshakeRelative)
|
||||
if c.LastHandshakeRelative.Hours() > 5208 { // 24*7*31 = approx one month
|
||||
duration = "more than a month ago"
|
||||
}
|
||||
return json.Marshal(&struct {
|
||||
PublicKey string `json:"publicKey"`
|
||||
HasPresharedKey bool `json:"hasPresharedKey"`
|
||||
ProtocolVersion int `json:"protocolVersion"`
|
||||
Name string `json:"name"`
|
||||
Email string `json:"email"`
|
||||
Connected bool `json:"connected"`
|
||||
AllowedIPs []string `json:"allowedIPs"`
|
||||
Endpoint string `json:"endpoint"`
|
||||
LastHandshake time.Time `json:"lastHandshake"`
|
||||
LastHandshakeRelative string `json:"lastHandshakeRelative"`
|
||||
ReceivedBytes int `json:"receivedBytes"`
|
||||
TransmittedBytes int `json:"transmittedBytes"`
|
||||
}{
|
||||
PublicKey: c.PublicKey,
|
||||
HasPresharedKey: c.HasPresharedKey,
|
||||
ProtocolVersion: c.ProtocolVersion,
|
||||
Name: c.Name,
|
||||
Email: c.Email,
|
||||
Connected: c.Connected,
|
||||
AllowedIPs: c.AllowedIPs,
|
||||
Endpoint: c.Endpoint,
|
||||
LastHandshake: c.LastHandshake,
|
||||
LastHandshakeRelative: duration,
|
||||
ReceivedBytes: c.ReceivedBytes,
|
||||
TransmittedBytes: c.TransmittedBytes,
|
||||
})
|
||||
}
|
||||
|
||||
// InterfaceStatus structure
|
||||
type InterfaceStatus struct {
|
||||
Name string `json:"name"`
|
||||
|
||||
@ -44,9 +44,19 @@
|
||||
:items="clients"
|
||||
:search="search"
|
||||
>
|
||||
<template v-slot:item.address="{ item }">
|
||||
<template v-slot:item.connected="{ item }">
|
||||
<v-icon left v-if="item.connected" color="success">mdi-lan-connect</v-icon>
|
||||
<v-icon left v-else>mdi-lan-disconnect</v-icon>
|
||||
</template>
|
||||
<template v-slot:item.receivedBytes="{ item }">
|
||||
{{ humanFileSize(item.receivedBytes) }}
|
||||
</template>
|
||||
<template v-slot:item.transmittedBytes="{ item }">
|
||||
{{ humanFileSize(item.transmittedBytes) }}
|
||||
</template>
|
||||
<template v-slot:item.allowedIPs="{ item }">
|
||||
<v-chip
|
||||
v-for="(ip, i) in item.address"
|
||||
v-for="(ip, i) in item.allowedIPs"
|
||||
:key="i"
|
||||
color="indigo"
|
||||
text-color="white"
|
||||
@ -55,63 +65,11 @@
|
||||
{{ ip }}
|
||||
</v-chip>
|
||||
</template>
|
||||
<template v-slot:item.tags="{ item }">
|
||||
<v-chip
|
||||
v-for="(tag, i) in item.tags"
|
||||
:key="i"
|
||||
color="blue-grey"
|
||||
text-color="white"
|
||||
>
|
||||
<v-icon left>mdi-tag</v-icon>
|
||||
{{ tag }}
|
||||
</v-chip>
|
||||
</template>
|
||||
<template v-slot:item.created="{ item }">
|
||||
<template v-slot:item.lastHandshake="{ item }">
|
||||
<v-row>
|
||||
<p>At {{ item.created | formatDate }} by {{ item.createdBy }}</p>
|
||||
<p>{{ item.lastHandshake | formatDate }} ({{ item.lastHandshakeRelative }})</p>
|
||||
</v-row>
|
||||
</template>
|
||||
<template v-slot:item.updated="{ item }">
|
||||
<v-row>
|
||||
<p>At {{ item.updated | formatDate }} by {{ item.updatedBy }}</p>
|
||||
</v-row>
|
||||
</template>
|
||||
<template v-slot:item.action="{ item }">
|
||||
<v-row>
|
||||
<v-icon
|
||||
class="pr-1 pl-1"
|
||||
@click.stop="startUpdate(item)"
|
||||
>
|
||||
mdi-square-edit-outline
|
||||
</v-icon>
|
||||
<v-icon
|
||||
class="pr-1 pl-1"
|
||||
@click.stop="forceFileDownload(item)"
|
||||
>
|
||||
mdi-cloud-download-outline
|
||||
</v-icon>
|
||||
<v-icon
|
||||
class="pr-1 pl-1"
|
||||
@click.stop="email(item)"
|
||||
>
|
||||
mdi-email-send-outline
|
||||
</v-icon>
|
||||
<v-icon
|
||||
class="pr-1 pl-1"
|
||||
@click="remove(item)"
|
||||
>
|
||||
mdi-trash-can-outline
|
||||
</v-icon>
|
||||
<v-switch
|
||||
dark
|
||||
class="pr-1 pl-1"
|
||||
color="success"
|
||||
v-model="item.enable"
|
||||
v-on:change="update(item)"
|
||||
/>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
</v-col>
|
||||
@ -170,6 +128,28 @@
|
||||
reload() {
|
||||
this.readStatus()
|
||||
},
|
||||
|
||||
humanFileSize(bytes, si=false, dp=1) {
|
||||
const thresh = si ? 1000 : 1024;
|
||||
|
||||
if (Math.abs(bytes) < thresh) {
|
||||
return bytes + ' B';
|
||||
}
|
||||
|
||||
const units = si
|
||||
? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
||||
: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
|
||||
let u = -1;
|
||||
const r = 10**dp;
|
||||
|
||||
do {
|
||||
bytes /= thresh;
|
||||
++u;
|
||||
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
|
||||
|
||||
|
||||
return bytes.toFixed(dp) + ' ' + units[u];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user