Skip to content

Commit af9e5e6

Browse files
rob-aslanianrob-aslanian
authored
(feature) extract bitmain immersion components (#117)
* (feature) extract bitmain immersion components * fix eslint * fix typecheck * remove unused basic switch component * added demo page * update demo pages * added demo pages for system components * remove console log
1 parent 669862a commit af9e5e6

54 files changed

Lines changed: 4287 additions & 402 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/demo/src/constants/navigation.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,8 +133,9 @@ export const COMPONENT_NAV: SidebarMenuItem[] = [
133133
id: 'explorer-containers',
134134
label: 'Containers',
135135
items: [
136-
{ id: 'bitdeer-container', label: 'Bitdeer Contaienr' },
137-
{ id: 'bitmain-container', label: 'Bitmain Contaienr' },
136+
{ id: 'bitdeer-container', label: 'Bitdeer Container' },
137+
{ id: 'bitmain-container', label: 'Bitmain Container' },
138+
{ id: 'bitmain-immersion-container', label: 'Bitmain Immersion Container Settingg' },
138139
],
139140
},
140141
],

‎apps/demo/src/pages/explorer-containers/bitdeer/home/bitdeer-options-demo.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { UnknownRecord } from '@mining-sdk/core'
22
import { Button } from '@mining-sdk/core'
3+
import type { Device } from '@mining-sdk/foundation'
34
import { BitdeerOptions } from '@mining-sdk/foundation'
45
import type { ReactElement } from 'react'
56
import { useState } from 'react'
@@ -364,7 +365,7 @@ export const BitdeerOptionsDemo = (): ReactElement => {
364365
<section className="dry-cooler-demo__component">
365366
<h2>Component Output</h2>
366367
<div className="dry-cooler-demo__component-wrapper">
367-
<BitdeerOptions data={currentScenario.data} />
368+
<BitdeerOptions data={currentScenario.data as Device} />
368369
</div>
369370
</section>
370371
</div>

‎apps/demo/src/pages/explorer-containers/bitdeer/settings/bitdeer-settings-page.scss‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,4 @@
11
.bitdeer-settings-demo {
2-
&__scenarios {
3-
margin-bottom: 2rem;
4-
padding: 1.5rem;
5-
6-
h2 {
7-
color: var(--mining-sdk-color-light);
8-
margin-bottom: 1rem;
9-
}
10-
}
11-
12-
&__scenario-buttons {
13-
@include flex_wrap;
14-
15-
gap: 0.75rem;
16-
}
17-
182
&__current {
193
margin-bottom: 2rem;
204
}

‎apps/demo/src/pages/explorer-containers/bitdeer/settings/bitdeer-settings-page.tsx‎

Lines changed: 4 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import type { UnknownRecord } from '@mining-sdk/core'
2-
import { Button } from '@mining-sdk/core'
31
import type { ReactElement } from 'react'
4-
import { useState } from 'react'
52

63
import { BitdeerSettings } from '@mining-sdk/foundation'
74
import './bitdeer-settings-page.scss'
@@ -13,10 +10,9 @@ import './bitdeer-settings-page.scss'
1310
* with different data configurations and states.
1411
*/
1512
export const BitdeerSettingsPage = (): ReactElement => {
16-
const [activeScenario, setActiveScenario] = useState<string>('normal')
17-
18-
// Scenario 1: Normal Operation
19-
const normalData: UnknownRecord = {
13+
// Normal Operation
14+
const normalData = {
15+
id: 'container-bd-d40-001',
2016
type: 'container-bd-d40',
2117
status: 'online',
2218
name: 'Bitdeer Container D40',
@@ -60,112 +56,13 @@ export const BitdeerSettingsPage = (): ReactElement => {
6056
},
6157
}
6258

63-
// Scenario 2: High Temperature Warning
64-
const highTempData: UnknownRecord = {
65-
...normalData,
66-
oilTemperature: 47,
67-
status: 'warning',
68-
}
69-
70-
// Scenario 3: Critical High Temperature
71-
const criticalHighData: UnknownRecord = {
72-
...normalData,
73-
oilTemperature: 50,
74-
status: 'critical',
75-
}
76-
77-
// Scenario 4: Low Pressure Warning
78-
const lowPressureData: UnknownRecord = {
79-
...normalData,
80-
tankPressure: 1.8,
81-
status: 'warning',
82-
}
83-
84-
// Scenario 5: Multiple Alerts
85-
const multipleAlertsData: UnknownRecord = {
86-
...normalData,
87-
oilTemperature: 47,
88-
tankPressure: 1.9,
89-
status: 'warning',
90-
}
91-
92-
// Scenario 6: Offline Container
93-
const offlineData: UnknownRecord = {
94-
...normalData,
95-
status: 'offline',
96-
oilTemperature: 0,
97-
tankPressure: 0,
98-
}
99-
100-
// Scenario 7: Minimal Data
101-
const minimalData: UnknownRecord = {
102-
type: 'container-bd-d40',
103-
status: 'online',
104-
}
105-
106-
const scenarios = {
107-
normal: {
108-
title: 'Normal Operation',
109-
description: 'Container operating within normal parameters',
110-
data: normalData,
111-
},
112-
highTemp: {
113-
title: 'High Temperature Warning',
114-
description: 'Oil temperature approaching critical level',
115-
data: highTempData,
116-
},
117-
criticalHigh: {
118-
title: 'Critical High Temperature',
119-
description: 'Oil temperature in critical zone with sound alerts',
120-
data: criticalHighData,
121-
},
122-
lowPressure: {
123-
title: 'Low Pressure Warning',
124-
description: 'Tank pressure below normal range',
125-
data: lowPressureData,
126-
},
127-
multipleAlerts: {
128-
title: 'Multiple Alerts',
129-
description: 'Both temperature and pressure warnings active',
130-
data: multipleAlertsData,
131-
},
132-
offline: {
133-
title: 'Offline Container',
134-
description: 'Container is offline with no readings',
135-
data: offlineData,
136-
},
137-
minimal: {
138-
title: 'Minimal Data',
139-
description: 'Container with minimal configuration',
140-
data: minimalData,
141-
},
142-
}
143-
144-
const currentScenario = scenarios[activeScenario as keyof typeof scenarios]
145-
14659
return (
14760
<div className="bitdeer-settings-demo">
148-
{/* Scenario Selector */}
149-
<section className="bitdeer-settings-demo__scenarios">
150-
<h2>Select Scenario</h2>
151-
<div className="bitdeer-settings-demo__scenario-buttons">
152-
{Object.entries(scenarios).map(([key, scenario]) => (
153-
<Button
154-
key={key}
155-
onClick={() => setActiveScenario(key)}
156-
variant={activeScenario === key ? 'primary' : 'secondary'}
157-
>
158-
{scenario.title}
159-
</Button>
160-
))}
161-
</div>
162-
</section>
163-
16461
{/* Component Demo */}
16562
<section className="bitdeer-settings-demo__component">
16663
<h2>Component Output</h2>
16764
<div className="bitdeer-settings-demo__component-wrapper">
168-
<BitdeerSettings data={currentScenario.data} />
65+
<BitdeerSettings data={normalData} />
16966
</div>
17067
</section>
17168
</div>

‎apps/demo/src/pages/explorer-containers/bitmain-immersion/bitmain-immersion-page.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@mining-sdk/core'
2+
import type { ReactElement } from 'react'
3+
import '../styles/_contaienrs-page-common.scss'
4+
import { BitMainImmersionControlsDemo } from './controls/bitmain-immersion-controls-demo'
5+
import { BitMainImmersionSettingsDemo } from './settings/bitmain-immersion-settings-demo'
6+
import { BitMainImmersionSystemDemo } from './system/bitmain-immersion-system-demo'
7+
/**
8+
* Bitmain Immersion Container Demo Page
9+
*
10+
*/
11+
export const BitmainImmersionPage = (): ReactElement => {
12+
return (
13+
<div className="explorer-containers-page">
14+
<header className="explorer-containers-page__header">
15+
<h1>Bitmain Immersion Container Components</h1>
16+
<p>Interactive demonstrations of container management and monitoring components</p>
17+
</header>
18+
19+
<Tabs defaultValue="settings" className="explorer-containers-page__tabs">
20+
<TabsList>
21+
<TabsTrigger value="settings">Settings</TabsTrigger>
22+
<TabsTrigger value="controls">Controls</TabsTrigger>
23+
<TabsTrigger value="system">System</TabsTrigger>
24+
</TabsList>
25+
26+
<TabsContent value="settings">
27+
<BitMainImmersionSettingsDemo />
28+
</TabsContent>
29+
30+
<TabsContent value="controls">
31+
<BitMainImmersionControlsDemo />
32+
</TabsContent>
33+
34+
<TabsContent value="system">
35+
<BitMainImmersionSystemDemo />
36+
</TabsContent>
37+
</Tabs>
38+
</div>
39+
)
40+
}

‎apps/demo/src/pages/explorer-containers/bitmain-immersion/controls/bitmain-immersion-controls-demo.scss‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
.bitmain-immersion-controls-demo {
2+
@include flex_column;
3+
4+
&__section {
5+
padding: 1.5rem;
6+
7+
h2,
8+
h3 {
9+
margin: 0 0 1.5rem;
10+
}
11+
}
12+
13+
&__presets {
14+
margin-bottom: 2rem;
15+
}
16+
17+
&__preset-buttons {
18+
@include flex_wrap;
19+
gap: 0.75rem;
20+
}
21+
22+
&__grid {
23+
display: grid;
24+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
25+
gap: 1rem;
26+
}
27+
28+
&__gps-grid {
29+
display: grid;
30+
grid-template-columns: 2fr 1fr 2fr 1fr;
31+
gap: 1rem;
32+
}
33+
34+
&__fan-controls {
35+
@include flex_column;
36+
37+
gap: 0.75rem;
38+
}
39+
40+
&__unit-controls {
41+
@include flex_column;
42+
43+
gap: 1.5rem;
44+
}
45+
46+
&__checkbox-group {
47+
@include flex_column;
48+
49+
gap: 0.75rem;
50+
margin-top: 1rem;
51+
}
52+
53+
&__checkbox-label {
54+
@include flex_align;
55+
56+
gap: 0.5rem;
57+
}
58+
59+
&__preview {
60+
@include flex_column;
61+
62+
gap: 2rem;
63+
}
64+
65+
&__preview-section {
66+
padding: 1.5rem;
67+
background: var(--mining-sdk-color-bg-primary);
68+
border: 1px solid var(--mining-sdk-color-border);
69+
70+
h3 {
71+
margin: 0 0 1.5rem;
72+
}
73+
}
74+
75+
&__units-grid {
76+
display: grid;
77+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
78+
gap: 1rem;
79+
}
80+
}

0 commit comments

Comments
 (0)