ci: ko build

.ko.yaml

@@ -0,0 +1,16 @@
+defaultBaseImage: alpine
+
+builds:
+- id: frpp
+  # env:
+  # - GOCACHE=/.gocache
+  ldflags:
+  - -s -w
+  - -X github.com/VaalaCat/frp-panel/conf.buildDate={{.Date}}
+  - -X github.com/VaalaCat/frp-panel/conf.gitCommit={{.Git.FullCommit}}
+  - -X github.com/VaalaCat/frp-panel/conf.gitVersion={{.Git.Tag}}
+  - -X github.com/VaalaCat/frp-panel/conf.gitBranch={{.Git.Branch}}
+
+defaultPlatforms:
+- linux/arm64
+- linux/amd64

build.sh

@@ -19,6 +19,7 @@ ARCH="all"
 BUILD_DATE="$(date -u +'%Y-%m-%dT%H:%M:%SZ')"
 GIT_COMMIT="$(git rev-parse HEAD)"
 VERSION="$(git describe --tags --abbrev=0 | tr -d '\n')"
+GIT_BRANCH="$(git rev-parse --abbrev-ref HEAD)"
 
 # Parse arguments
 while [[ "$#" -gt 0 ]]; do
@@ -50,7 +51,7 @@ echo "Build Date: $BUILD_DATE"
 echo "Git Commit: $GIT_COMMIT"
 echo "Version: $VERSION"
 
-BUILD_LD_FLAGS="-X 'github.com/VaalaCat/frp-panel/conf.buildDate=${BUILD_DATE}' -X 'github.com/VaalaCat/frp-panel/conf.gitCommit=${GIT_COMMIT}' -X 'github.com/VaalaCat/frp-panel/conf.gitVersion=${VERSION}'"
+BUILD_LD_FLAGS="-X 'github.com/VaalaCat/frp-panel/conf.buildDate=${BUILD_DATE}' -X 'github.com/VaalaCat/frp-panel/conf.gitCommit=${GIT_COMMIT}' -X 'github.com/VaalaCat/frp-panel/conf.gitVersion=${VERSION}' -X 'github.com/VaalaCat/frp-panel/conf.gitBranch=${GIT_BRANCH}'"
 
 if [[ "$SKIP_FRONTEND" == "true" ]]; then
     echo "Skipping frontend build"

cmd/frpp/master.go

@@ -3,6 +3,7 @@ package main
 import (
 	"context"
 	"embed"
+	"path/filepath"
 
 	bizmaster "github.com/VaalaCat/frp-panel/biz/master"
 	"github.com/VaalaCat/frp-panel/biz/master/auth"
@@ -80,6 +81,12 @@ func initDatabase(c context.Context) {
 
 	switch conf.Get().DB.Type {
 	case "sqlite3":
+		if err := utils.EnsureDirectoryExists(conf.Get().DB.DSN); err != nil {
+			logrus.WithError(err).Warnf("ensure directory failed, data location: [%s], keep data in current directory", conf.Get().DB.DSN)
+			conf.Get().DB.DSN = filepath.Base(conf.Get().DB.DSN)
+			logrus.Infof("new data location: [%s]", conf.Get().DB.DSN)
+		}
+
 		if sqlitedb, err := gorm.Open(sqlite.Open(conf.Get().DB.DSN), &gorm.Config{}); err != nil {
 			logrus.Panic(err)
 		} else {

conf/settings.go

@@ -43,7 +43,7 @@ type Config struct {
 	} `env-prefix:"SERVER_"`
 	DB struct {
 		Type string `env:"TYPE" env-default:"sqlite3" env-description:"db type, mysql or sqlite3 and so on"`
-		DSN  string `env:"DSN" env-default:"data.db" env-description:"db dsn, for sqlite is path, other is dsn, look at https://github.com/go-sql-driver/mysql#dsn-data-source-name"`
+		DSN  string `env:"DSN" env-default:"/data/data.db" env-description:"db dsn, for sqlite is path, other is dsn, look at https://github.com/go-sql-driver/mysql#dsn-data-source-name"`
 	} `env-prefix:"DB_"`
 	Client struct {
 		ID     string `env:"ID" env-description:"client id"`

conf/version.go

@@ -12,12 +12,14 @@ import (
 var (
 	gitVersion = "dev-build"
 	gitCommit  = ""
+	gitBranch  = ""
 	buildDate  = "1970-01-01T00:00:00Z"
 )
 
 type VersionInfo struct {
 	GitVersion string `json:"gitVersion" yaml:"gitVersion"`
 	GitCommit  string `json:"gitCommit" yaml:"gitCommit"`
+	GitBranch  string `json:"gitBranch" yaml:"gitBranch"`
 	BuildDate  string `json:"buildDate" yaml:"buildDate"`
 	GoVersion  string `json:"goVersion" yaml:"goVersion"`
 	Compiler   string `json:"compiler" yaml:"compiler"`
@@ -42,6 +44,7 @@ func (v *VersionInfo) ToProto() *pb.ClientVersion {
 	return &pb.ClientVersion{
 		GitVersion: v.GitVersion,
 		GitCommit:  v.GitCommit,
+		GitBranch:  v.GitBranch,
 		BuildDate:  v.BuildDate,
 		GoVersion:  v.GoVersion,
 		Compiler:   v.Compiler,
@@ -53,6 +56,7 @@ func GetVersion() *VersionInfo {
 	return &VersionInfo{
 		GitVersion: gitVersion,
 		GitCommit:  gitCommit,
+		GitBranch:  gitBranch,
 		BuildDate:  buildDate,
 		GoVersion:  runtime.Version(),
 		Compiler:   runtime.Compiler,

idl/api_master.proto

@@ -27,6 +27,7 @@ message ClientVersion {
 	string GoVersion = 4;
 	string Compiler = 5;
 	string Platform = 6;
+  string GitBranch = 7;
 }
 
 message GetClientsStatusRequest {

utils/files.go

@@ -0,0 +1,18 @@
+package utils
+
+import (
+	"os"
+	"path/filepath"
+)
+
+func EnsureDirectoryExists(filePath string) error {
+	directory := filepath.Dir(filePath)
+
+	if _, err := os.Stat(directory); os.IsNotExist(err) {
+		err = os.MkdirAll(directory, os.ModePerm)
+		if err != nil {
+			return err
+		}
+	}
+	return nil
+}

www/components/stats/client_stats_card.tsx

@@ -12,14 +12,16 @@ import { ProxyInfo } from '@/lib/pb/common'
 import { Button } from '../ui/button'
 import { CheckCircle2, CircleX, RefreshCcw } from "lucide-react"
 import { useTranslation } from 'react-i18next';
+import TrafficStatsCard from './stats-item'
+import { Separator } from '@radix-ui/react-separator'
+import { formatBytes } from '@/lib/utils'
 
 export interface ClientStatsCardProps {
   clientID?: string
 }
 export const ClientStatsCard: React.FC<ClientStatsCardProps> = ({ clientID: defaultClientID }: ClientStatsCardProps = {}) => {
   const { t } = useTranslation();
   const [clientID, setClientID] = useState<string | undefined>()
-  const [proxyName, setProxyName] = useState<string | undefined>()
   const [status, setStatus] = useState<"loading" | "success" | "error" | undefined>()
   const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
 
@@ -69,11 +71,6 @@ export const ClientStatsCard: React.FC<ClientStatsCardProps> = ({ clientID: defa
     return Array.from(mergedMap.values());
   };
 
-  function removeDuplicateCharacters(input: string): string {
-    const uniqueChars = new Set(input);
-    return Array.from(uniqueChars).join('');
-  }
-
   return (
     <Card className="w-full">
       <CardHeader>
@@ -88,18 +85,16 @@ export const ClientStatsCard: React.FC<ClientStatsCardProps> = ({ clientID: defa
         <Label>{t('client.stats.label')}</Label>
         <ClientSelector clientID={clientID} setClientID={handleClientChange} onOpenChange={() => {
           refetchClientStats()
-          setProxyName(undefined)
         }} />
         <Label>{t('proxy.stats.label')}</Label>
-        <ProxySelector
-          // @ts-ignore
-          proxyNames={Array.from(new Set(clientStatsList?.proxyInfos.map((proxyInfo) => proxyInfo.name).filter((value) => value !== undefined))) || []}
-          proxyName={proxyName}
-          setProxyname={setProxyName} />
-        <div className="w-full grid gap-4 grid-cols-1">
+        <div className="w-full grid gap-2 grid-cols-1 overflow-x-auto">
           {clientStatsList && clientStatsList.proxyInfos.length > 0 &&
-            <ProxyStatusCard
-              proxyInfo={mergeProxyInfos(clientStatsList.proxyInfos).find((proxyInfo) => proxyInfo.name === proxyName)} />}
+            clientStatsList.proxyInfos.map((proxyInfo) => {
+              return (
+                <ProxyStatusCard key={proxyInfo.name} proxyInfo={proxyInfo} />
+              )
+            })
+          }
         </div>
       </CardContent>
       <CardFooter>
@@ -135,21 +130,23 @@ const ProxyStatusCard: React.FC<{ proxyInfo: ProxyInfo | undefined }> = ({ proxy
   }
 
   return (
-    <div key={proxyInfo.name} className="flex flex-col space-y-4">
+    <Card key={proxyInfo.name} className="flex flex-row gap-2 p-4 w-full min-w-[900px] shadow-none justify-between">
       <Label>{t('proxy.stats.tunnel_traffic', { name: proxyInfo.name })}</Label>
-      <ProxyTrafficOverview proxyInfo={proxyInfo} />
-      <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'>
-        <ProxyTrafficPieChart
-          title={t('proxy.stats.today_traffic_title')}
-          chartLabel={t('proxy.stats.today_traffic_total')}
-          trafficIn={proxyInfo.todayTrafficIn || BigInt(0)}
-          trafficOut={proxyInfo.todayTrafficOut || BigInt(0)} />
-        <ProxyTrafficPieChart
-          title={t('proxy.stats.history_traffic_title')}
-          chartLabel={t('proxy.stats.history_traffic_total')}
-          trafficIn={proxyInfo.historyTrafficIn || BigInt(0)}
-          trafficOut={proxyInfo.historyTrafficOut || BigInt(0)} />
-      </div>
-    </div>
+      <Separator orientation="vertical" />
+      <ProxyTrafficField label={t('traffic.today.total')} value={formatBytes(Number(proxyInfo.todayTrafficOut || BigInt(0)))} />
+      <ProxyTrafficField label={t('traffic.today.inbound')} value={formatBytes(Number(proxyInfo.todayTrafficIn || BigInt(0)))} />
+      <ProxyTrafficField label={t('traffic.today.outbound')} value={formatBytes(Number(proxyInfo.todayTrafficOut || BigInt(0)))} />
+      <Separator orientation="vertical" />
+      <ProxyTrafficField label={t('traffic.history.total')} value={formatBytes(Number(proxyInfo.historyTrafficOut || BigInt(0)))} />
+      <ProxyTrafficField label={t('traffic.history.inbound')} value={formatBytes(Number(proxyInfo.historyTrafficIn || BigInt(0)))} />
+      <ProxyTrafficField label={t('traffic.history.outbound')} value={formatBytes(Number(proxyInfo.historyTrafficOut || BigInt(0)))} />
+    </Card>
   );
+}
+
+const ProxyTrafficField = ({ label, value }: { label: string, value: string }) => {
+  return <div className="flex w-fit flex-col">
+    <p className="text-xs text-muted-foreground text-nowrap">{label}</p>
+    <div className="flex items-center text-xs font-semibold text-nowrap">{value}</div>
+  </div>
 }