Merge branch 'main' into shifraBranch

.env.local.template

@@ -0,0 +1,4 @@
+# Next secrets
+NEXTAUTH_URL=http://localhost:3000/
+NEXTAUTH_SECRET=SECRET
+NEXT_PUBLIC_GOOGLE_ANALYTICS=ANALYTICS

.eslintrc.json

@@ -1,3 +1,33 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "airbnb",
+    "airbnb-typescript",
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  },
+  "parser": "@typescript-eslint/parser",
+  "ignorePatterns": ["components/ui/"],
+  "overrides": [
+    {
+      "files": [
+        "*.ts",
+        "*.tsx",
+        "*.js",
+        "*.jsx"
+      ],
+      "parserOptions": {
+        "project": [
+          "./tsconfig.json"
+        ]
+      }
+    }
+  ]
+}

.github/workflows/nextjs.yml

@@ -2,7 +2,7 @@ name: Build
 
 on:
   push:
-    branches: ["main", "stagging"]
+    branches: ["main", "staging"]
 
   pull_request:
 

.github/workflows/release-image.yml

@@ -0,0 +1,37 @@
+name: Release image to DockerHub
+
+on:
+  workflow_dispatch:
+  push:
+    tags: ["v*.*.*"]
+    branches:
+      - main
+
+jobs:
+  build-and-release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set tags
+        run: |
+          if ${{ github.event_name == 'push' && startsWith(github.ref, 'refs/tags') }}; then
+            echo "TAGS=falkordb/falkordb-browser:latest,falkordb/falkordb-browser:${{ github.ref_name }}" >> $GITHUB_ENV
+          else
+            echo "TAGS=falkordb/falkordb-browser:edge" >> $GITHUB_ENV
+          fi
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile
+          push: true
+          tags: ${{ env.TAGS }}

Dockerfile

@@ -0,0 +1,71 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN \
+  if [ -f yarn.lock ]; then yarn run build; \
+  elif [ -f package-lock.json ]; then npm run build; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/.env.local.template ./.env.local
+
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+ENV HOSTNAME "0.0.0.0"
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD ["node", "server.js"]

README.md

@@ -1,14 +1,25 @@
-FalkorDB-Browser is a vizualization UI for FalkorDB.
+
+[![Dockerhub](https://img.shields.io/docker/pulls/falkordb/falkordb-browser?label=Docker)](https://hub.docker.com/r/falkordb/falkordb-browser/)
+[![Discord](https://img.shields.io/discord/1146782921294884966?style=flat-square)](https://discord.gg/6M4QwDXn2w)
+[![Workflow](https://github.com/FalkorDB/falkordb-browser/actions/workflows/nextjs.yml/badge.svg?branch=main)](https://github.com/FalkorDB/falkordb-browser/actions/workflows/nextjs.yml)
+
+FalkorDB-Browser is a visualization UI for FalkorDB.
 
 To see a running demo check: https://browser.falkordb.com/
 
 ![image](https://github.com/FalkorDB/falkordb-browser/assets/753206/51a81ef9-6bb2-40ce-ad9b-6381978c7562)
 
+## Run in Docker
 
+```
+sudo docker run -p 3000:3000 -it falkordb/falkordb-browser:edge
+```
 
-## Getting Started
+## Development - Getting Started 
 
-It is a [Next.js](https://nextjs.org/) project. First, run the development server:
+First copy the `.env.local.template` as `.env.local`.
+
+Then, it is a [Next.js](https://nextjs.org/) project. To run the development server:
 
 ```bash
 npm run dev
@@ -29,3 +40,5 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 docker run -p 6379:6379 -it --rm falkordb/falkordb:latest
 ```
 
+
+

app/api/auth/[...nextauth]/options.ts

@@ -16,19 +16,20 @@ const authOptions: AuthOptions = {
                 username: { label: "Username", type: "text" },
                 password: { label: "Password", type: "password" }
             },
-            async authorize(credentials, req) {
+            async authorize(credentials) {
 
                 if (!credentials) {
                     return null
                 }
 
                 try {
-                    const id = userId++;
+                    const id = userId;
+                    userId += 1;
 
                     const client = await createClient({
                         socket: {
                             host: credentials.host ?? "localhost",
-                            port: credentials.port ? parseInt(credentials.port) : 6379,
+                            port: credentials.port ? parseInt(credentials.port, 10) : 6379,
                             reconnectStrategy: false
                         },
                         password: credentials.password ?? undefined,
@@ -41,22 +42,23 @@ const authOptions: AuthOptions = {
                     await client.on('error', err => {
                         // Close coonection on error and remove from connections map
                         console.error('FalkorDB Client Error', err)
-                        let connection = connections.get(id)
+                        const connection = connections.get(id)
                         if (connection) {
                             connections.delete(id)
                             connection.disconnect()
+                            .catch((e) => {
+                                console.warn('FalkorDB Client Disconnect Error', e)
+                            })
                         }
                     }).connect();
 
                     // Verify connection
                     await client.ping()
 
-                    connections.set(id, client as RedisClientType)
-
-                    let res: any = {
-                        id: id,
+                    const res = {
+                        id,
                         host: credentials.host,
-                        port: credentials.port,
+                        port: credentials.port ? parseInt(credentials.port, 10) : 6379,
                         password: credentials.password,
                         username: credentials.username,
                     }
@@ -72,23 +74,30 @@ const authOptions: AuthOptions = {
     callbacks: {
         async jwt({ token, user }) {
             if (user) {
-                token.id = user.id;
-                token.host = user.host;
-                token.port = user.port;
-                token.username = user.username;
-                token.password = user.password;
+                return {
+                    ...token,
+                    id: user.id,
+                    host: user.host,
+                    port: user.port,
+                    username: user.username,
+                    password: user.password
+                };
             }
-
             return token;
         },
-        async session({ session, token, user }) {
+        async session({ session, token }) {
             if (session.user) {
-                session.user.id = token.id as number;
-                session.user.host = token.host as string;
-                session.user.port = parseInt(token.port as string);
-                session.user.username = token.username as string;
-                session.user.password = token.password as string;
-
+                return {
+                    ...session,
+                    user: {
+                        ...session.user,
+                        id: token.id as number,
+                        host: token.host as string,
+                        port: parseInt(token.port as string, 10),
+                        username: token.username as string,
+                        password: token.password as string,
+                    },
+                };
             }
             return session;
         }

app/api/graph/[graph]/[node]/route.ts

@@ -3,6 +3,7 @@ import { Graph } from 'falkordb';
 import { getServerSession } from "next-auth/next";
 import authOptions, { connections } from "../../../auth/[...nextauth]/options";
 
+// eslint-disable-next-line import/prefer-default-export
 export async function GET(request: NextRequest, { params }: { params: { graph: string, node: string } }) {
 
     const session = await getServerSession(authOptions)
@@ -11,12 +12,12 @@ export async function GET(request: NextRequest, { params }: { params: { graph: s
         return NextResponse.json({ message: "Not authenticated" }, { status: 401 })
     }
 
-    let client = connections.get(id)
+    const client = connections.get(id)
     if (!client) {
         return NextResponse.json({ message: "Not authenticated" }, { status: 401 })
     }
 
-    const nodeId = parseInt(params.node);
+    const nodeId = parseInt(params.node, 10);
     const graphId = params.graph;
 
     const graph = new Graph(client, graphId);
@@ -27,9 +28,9 @@ export async function GET(request: NextRequest, { params }: { params: { graph: s
                       RETURN e, n`;
 
     try {
-        let result: any = await graph.query(query, { params: { nodeId: nodeId } });
-        return NextResponse.json({ result: result }, { status: 200 })
-    } catch (err: any) {
-        return NextResponse.json({ message: err.message }, { status: 400 })
+        const result = await graph.query(query, { params: { nodeId } });
+        return NextResponse.json({ result }, { status: 200 })
+    } catch (err: unknown) {
+        return NextResponse.json({ message: (err as Error).message }, { status: 400 })
     }
 }

app/api/graph/route.ts

@@ -3,6 +3,7 @@ import { Graph } from 'falkordb';
 import { getServerSession } from "next-auth/next";
 import authOptions, { connections } from "../auth/[...nextauth]/options";
 
+// eslint-disable-next-line import/prefer-default-export
 export async function GET(request: NextRequest) {
 
     const session = await getServerSession(authOptions)
@@ -11,7 +12,7 @@ export async function GET(request: NextRequest) {
         return NextResponse.json({ message: "Not authenticated" }, { status: 401 })
     }
 
-    let client = connections.get(id)
+    const client = connections.get(id)
     if(!client) {
         return NextResponse.json({ message: "Not authenticated" }, { status: 401 })
     }
@@ -24,14 +25,12 @@ export async function GET(request: NextRequest) {
                 return NextResponse.json({ message: "Missing query parameter 'q'" }, { status: 400 })
             }
             const graph = new Graph(client, graphID);
-            let result = await graph.query(query)
-            return NextResponse.json({ result: result }, { status: 200 })
-        } else {
-
-            let result = await client.graph.list()
-            return NextResponse.json({ result: { graphs: result } }, { status: 200 })
+            const result = await graph.query(query)
+            return NextResponse.json({ result }, { status: 200 })
         }
-    } catch (err: any) {
-        return NextResponse.json({ message: err.message }, { status: 400 })
+        const result = await client.graph.list()
+        return NextResponse.json({ result: { graphs: result } }, { status: 200 })
+    } catch (err: unknown) {
+        return NextResponse.json({ message: (err as Error).message }, { status: 400 })
     }
 }