Skip to content

Commit 0fa4d1f

Browse files
PramithaMJPramithaMJ
committed
feat: Add JDBC module with an interactive simulator for connection pooling, queries, and transactions, alongside a theory component.
1 parent 3bdbe49 commit 0fa4d1f

File tree

8 files changed

+1432
-1
lines changed

8 files changed

+1432
-1
lines changed

‎src/App.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import { NavigationProvider, ConsoleProvider, SearchProvider, useNavigation, isModuleView } from './contexts';
77
import { Layout, ModuleHub, ModuleTabs } from './components';
8-
import { GCModule, ThreadsModule, JITModule, JMMModule, StaticModule, ArchitectureModule, PlatformModule } from './features';
8+
import { GCModule, ThreadsModule, JITModule, JMMModule, StaticModule, ArchitectureModule, PlatformModule, JDBCModule } from './features';
99
import type { ModuleId } from './types';
1010

1111
/**
@@ -28,6 +28,7 @@ function ModuleRenderer() {
2828
static: StaticModule,
2929
architecture: ArchitectureModule,
3030
platform: PlatformModule,
31+
jdbc: JDBCModule,
3132
};
3233

3334
const ModuleComponent = moduleComponents[currentView];

‎src/contexts/ConsoleContext.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const createInitialState = (): ModuleConsoleState => ({
2222
static: [],
2323
architecture: [],
2424
platform: [],
25+
jdbc: [],
2526
});
2627

2728
interface ConsoleProviderProps {

‎src/features/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,5 @@ export { JMMModule } from './jmm';
55
export { StaticModule } from './static';
66
export { ArchitectureModule } from './architecture';
77
export { PlatformModule } from './platform';
8+
export { JDBCModule } from './jdbc';
9+

‎src/features/jdbc/JDBCModule.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* JDBC Module Container
3+
* Main entry point for the JDBC & Database module
4+
*/
5+
6+
import { useNavigation } from '../../contexts';
7+
import { JDBCSimulator } from './JDBCSimulator';
8+
import { JDBCTheory } from './JDBCTheory';
9+
10+
export function JDBCModule() {
11+
const { activeTab } = useNavigation();
12+
13+
return activeTab === 'simulator' ? <JDBCSimulator /> : <JDBCTheory />;
14+
}

‎src/features/jdbc/JDBCSimulator.module.css‎

Lines changed: 333 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,333 @@
1+
/* JDBC Simulator Styles */
2+
3+
.container {
4+
width: 100%;
5+
height: 100%;
6+
padding: var(--space-6);
7+
overflow-y: auto;
8+
background-color: var(--color-bg-primary);
9+
}
10+
11+
.grid {
12+
display: grid;
13+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
14+
gap: var(--space-6);
15+
max-width: 1200px;
16+
margin: 0 auto;
17+
}
18+
19+
/* Panel */
20+
.panel {
21+
background-color: var(--color-bg-secondary);
22+
border: 1px solid var(--color-border-default);
23+
border-radius: var(--radius-xl);
24+
padding: var(--space-6);
25+
}
26+
27+
.panelTitle {
28+
font-size: var(--text-xl);
29+
font-weight: 700;
30+
color: var(--color-text-primary);
31+
margin: 0 0 var(--space-1) 0;
32+
}
33+
34+
.panelSubtitle {
35+
font-size: var(--text-sm);
36+
color: var(--color-text-muted);
37+
margin: 0 0 var(--space-4) 0;
38+
}
39+
40+
/* Pool Stats */
41+
.poolStats {
42+
display: flex;
43+
gap: var(--space-4);
44+
margin-bottom: var(--space-4);
45+
}
46+
47+
.stat {
48+
flex: 1;
49+
text-align: center;
50+
background-color: rgba(34, 211, 238, 0.1);
51+
border-radius: var(--radius-lg);
52+
padding: var(--space-3);
53+
}
54+
55+
.statValue {
56+
display: block;
57+
font-size: var(--text-2xl);
58+
font-weight: 800;
59+
color: #22d3ee;
60+
}
61+
62+
.statLabel {
63+
font-size: var(--text-xs);
64+
color: var(--color-text-muted);
65+
}
66+
67+
/* Connections Grid */
68+
.connectionsGrid {
69+
display: grid;
70+
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
71+
gap: var(--space-2);
72+
margin-bottom: var(--space-4);
73+
}
74+
75+
.connection {
76+
background-color: rgba(255, 255, 255, 0.05);
77+
border: 2px solid var(--color-border-default);
78+
border-radius: var(--radius-md);
79+
padding: var(--space-2);
80+
text-align: center;
81+
cursor: pointer;
82+
transition: all 0.2s ease;
83+
}
84+
85+
.connection.idle {
86+
border-color: #22d3ee;
87+
background-color: rgba(34, 211, 238, 0.1);
88+
}
89+
90+
.connection.inUse {
91+
border-color: #86efac;
92+
background-color: rgba(134, 239, 172, 0.1);
93+
}
94+
95+
.connection.inUse:hover {
96+
background-color: rgba(134, 239, 172, 0.2);
97+
}
98+
99+
.connId {
100+
display: block;
101+
font-weight: 700;
102+
font-size: var(--text-sm);
103+
color: var(--color-text-primary);
104+
}
105+
106+
.connStatus {
107+
display: block;
108+
font-size: var(--text-xs);
109+
color: var(--color-text-muted);
110+
text-transform: uppercase;
111+
}
112+
113+
.connUser {
114+
display: block;
115+
font-size: var(--text-xs);
116+
color: #86efac;
117+
margin-top: var(--space-1);
118+
}
119+
120+
/* Action Buttons */
121+
.actionBtn {
122+
width: 100%;
123+
padding: var(--space-3);
124+
background-color: #22d3ee;
125+
color: #0f172a;
126+
border: none;
127+
border-radius: var(--radius-md);
128+
font-weight: 700;
129+
cursor: pointer;
130+
transition: background-color 0.2s;
131+
}
132+
133+
.actionBtn:hover {
134+
background-color: #06b6d4;
135+
}
136+
137+
/* Query Input */
138+
.queryInput,
139+
.paramInput {
140+
margin-bottom: var(--space-3);
141+
}
142+
143+
.queryInput label,
144+
.paramInput label {
145+
display: block;
146+
font-size: var(--text-sm);
147+
color: var(--color-text-muted);
148+
margin-bottom: var(--space-1);
149+
}
150+
151+
.queryInput textarea {
152+
width: 100%;
153+
background-color: #0a0a0a;
154+
border: 1px solid var(--color-border-default);
155+
border-radius: var(--radius-md);
156+
padding: var(--space-3);
157+
font-family: var(--font-mono);
158+
font-size: var(--text-sm);
159+
color: #e2e8f0;
160+
resize: none;
161+
}
162+
163+
.paramInput input {
164+
width: 100%;
165+
background-color: #0a0a0a;
166+
border: 1px solid var(--color-border-default);
167+
border-radius: var(--radius-md);
168+
padding: var(--space-2) var(--space-3);
169+
font-family: var(--font-mono);
170+
font-size: var(--text-sm);
171+
color: #e2e8f0;
172+
}
173+
174+
.executeBtn {
175+
width: 100%;
176+
padding: var(--space-3);
177+
background-color: #86efac;
178+
color: #0f172a;
179+
border: none;
180+
border-radius: var(--radius-md);
181+
font-weight: 700;
182+
cursor: pointer;
183+
transition: background-color 0.2s;
184+
margin-bottom: var(--space-3);
185+
}
186+
187+
.executeBtn:hover {
188+
background-color: #4ade80;
189+
}
190+
191+
.securityNote {
192+
font-size: var(--text-xs);
193+
color: var(--color-text-muted);
194+
background-color: rgba(255, 255, 255, 0.03);
195+
border-radius: var(--radius-md);
196+
padding: var(--space-2);
197+
}
198+
199+
/* Transaction Status */
200+
.txStatus {
201+
display: flex;
202+
align-items: center;
203+
gap: var(--space-3);
204+
margin-bottom: var(--space-4);
205+
padding: var(--space-3);
206+
background-color: rgba(255, 255, 255, 0.03);
207+
border-radius: var(--radius-md);
208+
}
209+
210+
.txLabel {
211+
color: var(--color-text-muted);
212+
font-size: var(--text-sm);
213+
}
214+
215+
.txOn {
216+
color: #86efac;
217+
font-weight: 700;
218+
}
219+
220+
.txOff {
221+
color: #fcd34d;
222+
font-weight: 700;
223+
}
224+
225+
/* Transaction Buttons */
226+
.txButtons {
227+
display: flex;
228+
gap: var(--space-2);
229+
margin-bottom: var(--space-4);
230+
}
231+
232+
.beginBtn,
233+
.commitBtn,
234+
.rollbackBtn {
235+
flex: 1;
236+
padding: var(--space-2);
237+
border: none;
238+
border-radius: var(--radius-md);
239+
font-weight: 700;
240+
font-size: var(--text-sm);
241+
cursor: pointer;
242+
transition: all 0.2s;
243+
}
244+
245+
.beginBtn {
246+
background-color: #60a5fa;
247+
color: white;
248+
}
249+
250+
.beginBtn:hover:not(:disabled) {
251+
background-color: #3b82f6;
252+
}
253+
254+
.commitBtn {
255+
background-color: #86efac;
256+
color: #0f172a;
257+
}
258+
259+
.commitBtn:hover:not(:disabled) {
260+
background-color: #4ade80;
261+
}
262+
263+
.rollbackBtn {
264+
background-color: #f87171;
265+
color: white;
266+
}
267+
268+
.rollbackBtn:hover:not(:disabled) {
269+
background-color: #ef4444;
270+
}
271+
272+
.beginBtn:disabled,
273+
.commitBtn:disabled,
274+
.rollbackBtn:disabled {
275+
opacity: 0.4;
276+
cursor: not-allowed;
277+
}
278+
279+
/* Transaction Log */
280+
.txLog {
281+
background-color: #0a0a0a;
282+
border: 1px solid var(--color-border-default);
283+
border-radius: var(--radius-md);
284+
padding: var(--space-3);
285+
}
286+
287+
.txLog h4 {
288+
margin: 0 0 var(--space-2) 0;
289+
font-size: var(--text-sm);
290+
color: var(--color-text-muted);
291+
}
292+
293+
.logEntry {
294+
display: flex;
295+
gap: var(--space-2);
296+
align-items: center;
297+
padding: var(--space-1) 0;
298+
border-bottom: 1px solid var(--color-border-default);
299+
}
300+
301+
.logEntry:last-child {
302+
border-bottom: none;
303+
}
304+
305+
.logTime {
306+
font-size: var(--text-xs);
307+
color: var(--color-text-muted);
308+
font-family: var(--font-mono);
309+
}
310+
311+
.logOp {
312+
flex: 1;
313+
font-size: var(--text-xs);
314+
color: var(--color-text-secondary);
315+
}
316+
317+
.logStatus {
318+
font-size: var(--text-xs);
319+
font-weight: 700;
320+
text-transform: uppercase;
321+
}
322+
323+
.logEntry.pending .logStatus {
324+
color: #fcd34d;
325+
}
326+
327+
.logEntry.committed .logStatus {
328+
color: #86efac;
329+
}
330+
331+
.logEntry.rolled_back .logStatus {
332+
color: #f87171;
333+
}

0 commit comments

Comments
 (0)