Skip to content

Commit 50524d3

Browse files
sanjay7178sanjay7178
authored
V2 (#1)
* feat: Implement new React application with dashboard, browser, file scanner, architecture, and logs components, replacing the Astro documentation site and assets. * refactor: Replace `withastro/action` with explicit pnpm build steps and `upload-pages-artifact`, and update push branch to master.
1 parent 8fcfcc1 commit 50524d3

33 files changed

+2510
-4335
lines changed

‎.github/workflows/astro.yml‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
name: Deploy to GitHub Pages
22

33
on:
4-
# Trigger the workflow every time you push to the `main` branch
5-
# Using a different branch name? Replace `main` with your branch’s name
64
push:
75
branches: [ master ]
8-
# Allows you to run this workflow manually from the Actions tab on GitHub.
96
workflow_dispatch:
107

11-
12-
# Allow this job to clone the repo and create a page deployment
138
permissions:
149
contents: read
1510
pages: write
@@ -19,21 +14,37 @@ jobs:
1914
build:
2015
runs-on: ubuntu-latest
2116
steps:
22-
- name: Checkout your repository using git
17+
- name: Checkout
2318
uses: actions/checkout@v4
24-
- name: Install, build, and upload your site
25-
uses: withastro/action@v3
19+
20+
- name: Install pnpm
21+
uses: pnpm/action-setup@v3
22+
with:
23+
version: 9
24+
25+
- name: Set up Node
26+
uses: actions/setup-node@v4
27+
with:
28+
node-version: 20
29+
cache: 'pnpm'
30+
31+
- name: Install dependencies
32+
run: pnpm install
33+
34+
- name: Build
35+
run: pnpm run build
36+
37+
- name: Upload artifact
38+
uses: actions/upload-pages-artifact@v3
2639
with:
27-
path: . # The root location of your Astro project inside the repository. (optional)
28-
node-version: 22 # The specific version of Node that should be used to build your site. Defaults to 22. (optional)
29-
package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
40+
path: ./dist
3041

3142
deploy:
32-
needs: build
33-
runs-on: ubuntu-latest
3443
environment:
3544
name: github-pages
3645
url: ${{ steps.deployment.outputs.page_url }}
46+
runs-on: ubuntu-latest
47+
needs: build
3748
steps:
3849
- name: Deploy to GitHub Pages
3950
id: deployment

‎App.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React, { useState } from 'react';
2+
import { Sidebar } from './components/Sidebar';
3+
import { Dashboard } from './components/Dashboard';
4+
import { BrowserSession } from './components/BrowserSession';
5+
import { FileScanner } from './components/FileScanner';
6+
import { Architecture } from './components/Architecture';
7+
import { Logs } from './components/Logs';
8+
import { LandingPage } from './components/LandingPage';
9+
import { View } from './types';
10+
11+
const App: React.FC = () => {
12+
const [currentView, setCurrentView] = useState<View>(View.LANDING);
13+
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
14+
15+
const renderView = () => {
16+
switch (currentView) {
17+
case View.DASHBOARD: return <Dashboard />;
18+
case View.BROWSER: return <BrowserSession />;
19+
case View.FILE_SCANNER: return <FileScanner />;
20+
case View.ARCHITECTURE: return <Architecture />;
21+
case View.LOGS: return <Logs />;
22+
default: return <Dashboard />;
23+
}
24+
};
25+
26+
// If on Landing Page, render full screen without sidebar
27+
if (currentView === View.LANDING) {
28+
return <LandingPage onNavigate={setCurrentView} />;
29+
}
30+
31+
// Main App Layout
32+
return (
33+
<div className="min-h-screen bg-slate-950 text-slate-200 flex font-sans">
34+
<Sidebar
35+
currentView={currentView}
36+
onChangeView={setCurrentView}
37+
collapsed={sidebarCollapsed}
38+
setCollapsed={setSidebarCollapsed}
39+
/>
40+
41+
<main
42+
className={`flex-1 transition-all duration-300 ${
43+
sidebarCollapsed ? 'ml-16' : 'ml-64'
44+
}`}
45+
>
46+
<header className="h-16 border-b border-slate-800 bg-slate-950/50 backdrop-blur-md sticky top-0 z-40 px-8 flex items-center justify-between">
47+
<div className="flex items-center gap-4">
48+
<h1 className="text-lg font-medium text-white tracking-wide">
49+
{currentView === View.DASHBOARD && 'Platform Overview'}
50+
{currentView === View.BROWSER && 'Secure Remote Browser'}
51+
{currentView === View.FILE_SCANNER && 'Safe File Viewer'}
52+
{currentView === View.ARCHITECTURE && 'Architecture Diagram'}
53+
{currentView === View.LOGS && 'Security Logs'}
54+
</h1>
55+
</div>
56+
<div className="flex items-center gap-4">
57+
<div className="flex flex-col items-end">
58+
<span className="text-sm font-medium text-white">Admin User</span>
59+
<span className="text-xs text-slate-500">KubeBrowse Cluster 1</span>
60+
</div>
61+
<div className="w-9 h-9 rounded-full bg-gradient-to-tr from-indigo-500 to-purple-500 border-2 border-slate-800 shadow-sm"></div>
62+
</div>
63+
</header>
64+
65+
<div className="p-8 max-w-7xl mx-auto">
66+
{renderView()}
67+
</div>
68+
</main>
69+
</div>
70+
);
71+
};
72+
73+
export default App;

‎README.md‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
## BrowserSec
1+
<div align="center">
2+
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
3+
</div>
24

3-
[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
5+
# Run and deploy your AI Studio app
46

7+
This contains everything you need to run your app locally.
58

9+
View your app in AI Studio: https://ai.studio/apps/drive/1G205aDT99ugrYOqd4O8LlrKMHt9zMWKF
610

11+
## Run Locally
712

8-
### 🧞 Commands
13+
**Prerequisites:** Node.js
914

10-
All commands are run from the root of the project, from a terminal:
1115

12-
| Command | Action |
13-
| :------------------------ | :----------------------------------------------- |
14-
| `pnpm install` | Installs dependencies |
15-
| `pnpm dev` | Starts local dev server at `localhost:4321` |
16-
| `pnpm build` | Build your production site to `./dist/` |
17-
| `pnpm preview` | Preview your build locally, before deploying |
18-
| `pnpm astro ...` | Run CLI commands like `astro add`, `astro check` |
19-
| `pnpm astro -- --help` | Get help using the Astro CLI |
16+
1. Install dependencies:
17+
`npm install`
18+
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
19+
3. Run the app:
20+
`npm run dev`

‎astro.config.mjs‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎components/Architecture.tsx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import React from 'react';
2+
import { Card } from './ui/Card';
3+
import { Database, Server, Globe, Shield, Layers, Workflow } from 'lucide-react';
4+
5+
export const Architecture: React.FC = () => {
6+
return (
7+
<div className="space-y-6 animate-[fadeIn_0.5s_ease-out]">
8+
<div className="mb-8">
9+
<h2 className="text-2xl font-bold text-white">System Architecture</h2>
10+
<p className="text-slate-400">Visualizing the KubeBrowse internal Kubernetes flow and isolation layers.</p>
11+
</div>
12+
13+
{/* Interactive-looking Diagram */}
14+
<div className="bg-slate-900 border border-slate-800 rounded-xl p-8 relative overflow-hidden">
15+
<div className="absolute inset-0 bg-[linear-gradient(to_right,#1e293b_1px,transparent_1px),linear-gradient(to_bottom,#1e293b_1px,transparent_1px)] bg-[size:24px_24px] opacity-20"></div>
16+
17+
<div className="relative z-10 flex flex-col items-center space-y-12">
18+
19+
{/* User Layer */}
20+
<div className="flex flex-col items-center">
21+
<div className="p-4 bg-indigo-600 rounded-full shadow-lg shadow-indigo-500/30 mb-2">
22+
<Globe size={32} className="text-white" />
23+
</div>
24+
<span className="text-slate-300 font-medium">User (Client)</span>
25+
</div>
26+
27+
{/* Ingress/Frontend Layer */}
28+
<div className="w-full max-w-4xl grid grid-cols-3 gap-8 relative">
29+
{/* Connecting lines */}
30+
<div className="absolute top-[-48px] left-1/2 w-px h-12 bg-gradient-to-b from-indigo-600 to-slate-600 -translate-x-1/2"></div>
31+
32+
<Node
33+
title="Frontend Service"
34+
icon={<Layers size={20} />}
35+
desc="React UI + WebSocket Handler"
36+
color="bg-blue-500"
37+
/>
38+
39+
<Node
40+
title="API Gateway"
41+
icon={<Server size={20} />}
42+
desc="Go-based REST API"
43+
color="bg-purple-500"
44+
/>
45+
46+
<Node
47+
title="Auth & Session"
48+
icon={<Database size={20} />}
49+
desc="Redis + Postgres"
50+
color="bg-cyan-500"
51+
/>
52+
</div>
53+
54+
{/* Isolation Layer */}
55+
<div className="w-full max-w-5xl border-2 border-dashed border-slate-700 rounded-3xl p-8 bg-slate-900/80 relative">
56+
<span className="absolute -top-3 left-8 bg-slate-900 px-2 text-slate-400 text-sm font-mono">KUBERNETES CLUSTER - WORKER NODES</span>
57+
58+
<div className="grid grid-cols-2 gap-12">
59+
<div className="space-y-4">
60+
<div className="flex items-center justify-center mb-4">
61+
<span className="px-3 py-1 rounded-full bg-slate-800 text-slate-300 text-xs border border-slate-700">Guacamole Protocol (RDP/VNC)</span>
62+
</div>
63+
<div className="p-6 bg-slate-800 border border-slate-700 rounded-xl">
64+
<div className="flex items-center gap-3 mb-4">
65+
<div className="p-2 bg-orange-500/20 text-orange-400 rounded-lg"><Workflow size={20} /></div>
66+
<h4 className="font-bold text-white">Guacd Pod</h4>
67+
</div>
68+
<p className="text-xs text-slate-400">Translates RDP traffic to HTML5 for the frontend. Handles TCP connections.</p>
69+
</div>
70+
</div>
71+
72+
<div className="space-y-4">
73+
<div className="grid grid-cols-2 gap-4">
74+
<BrowserPod id="1" region="US-East" />
75+
<BrowserPod id="2" region="EU-West" />
76+
</div>
77+
<p className="text-center text-xs text-slate-500 mt-2">Ephemeral Browser Pods (Chromium)</p>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
84+
{/* Tech Stack Details */}
85+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
86+
<Card title="Orchestration">
87+
<ul className="space-y-2 text-sm text-slate-400">
88+
<li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-blue-500 rounded-full"/>Kubernetes v1.29</li>
89+
<li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-blue-500 rounded-full"/>Calico CNI (Network Policies)</li>
90+
<li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-blue-500 rounded-full"/>Horizontal Pod Autoscaler</li>
91+
</ul>
92+
</Card>
93+
<Card title="Security Core">
94+
<ul className="space-y-2 text-sm text-slate-400">
95+
<li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-emerald-500 rounded-full"/>Firejail Sandbox</li>
96+
<li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-emerald-500 rounded-full"/>ClamAV + VirusTotal</li>
97+
<li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-emerald-500 rounded-full"/>Zero Trust Microsegmentation</li>
98+
</ul>
99+
</Card>
100+
<Card title="Data Layer">
101+
<ul className="space-y-2 text-sm text-slate-400">
102+
<li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-purple-500 rounded-full"/>MinIO (Object Storage)</li>
103+
<li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-purple-500 rounded-full"/>Redis (Session State)</li>
104+
<li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-purple-500 rounded-full"/>PostgreSQL (Audit Logs)</li>
105+
</ul>
106+
</Card>
107+
</div>
108+
</div>
109+
);
110+
};
111+
112+
const Node = ({title, icon, desc, color}: {title: string, icon: any, desc: string, color: string}) => (
113+
<div className="bg-slate-800 p-4 rounded-xl border border-slate-700 relative group hover:border-slate-500 transition-colors">
114+
<div className={`absolute -top-3 -left-3 p-2 ${color.replace('bg-', 'bg-')}/20 ${color.replace('bg-', 'text-')} rounded-lg shadow-lg`}>
115+
{icon}
116+
</div>
117+
<h4 className="font-bold text-white mt-2 ml-2">{title}</h4>
118+
<p className="text-xs text-slate-400 mt-2">{desc}</p>
119+
</div>
120+
);
121+
122+
const BrowserPod = ({id, region}: {id: string, region: string}) => (
123+
<div className="bg-slate-800 p-3 rounded-lg border border-slate-700 flex flex-col gap-2 relative overflow-hidden">
124+
<div className="absolute top-0 right-0 p-1 bg-slate-700 rounded-bl-lg">
125+
<div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
126+
</div>
127+
<Globe size={16} className="text-slate-400" />
128+
<div>
129+
<div className="text-xs font-bold text-slate-200">Browser Pod #{id}</div>
130+
<div className="text-[10px] text-slate-500">{region}</div>
131+
</div>
132+
</div>
133+
);

0 commit comments

Comments
 (0)