Skip to content

Commit 3f32ad4

Browse files
XunzhuoXunzhuo
committed
project: add observability wg
Signed-off-by: bitliu <[email protected]>
1 parent 4b45157 commit 3f32ad4

File tree

2 files changed

+57
-174
lines changed

2 files changed

+57
-174
lines changed

‎website/src/pages/community/work-groups.js‎

Lines changed: 49 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,7 @@ import Layout from '@theme/Layout';
33
import styles from './work-groups.module.css';
44

55
const workingGroups = [
6-
{
7-
name: 'Docs',
8-
description: 'User docs, information architecture, infrastructure',
9-
label: 'area/document',
10-
icon: '📚',
11-
skills: ['Technical writing', 'Documentation tools', 'User experience design'],
12-
needs: ['API documentation', 'Tutorials', 'Deployment guides']
13-
},
14-
{
15-
name: 'Environment',
16-
description: 'Docker Compose, Kubernetes, Local support, Cloud Foundry Integration',
17-
label: 'area/environment',
18-
icon: '🐳',
19-
skills: ['Docker', 'Kubernetes', 'Cloud platforms', 'DevOps'],
20-
needs: ['Helm charts', 'Deployment automation', 'Cloud integrations']
21-
},
6+
// First column - Core areas
227
{
238
name: 'RouterCore',
249
description: 'Using embedded SLM, implement advanced routing algorithm like classify, security detection, auto reasoning etc.',
@@ -43,14 +28,32 @@ const workingGroups = [
4328
skills: ['Envoy proxy', 'Network protocols', 'Performance optimization'],
4429
needs: ['Load balancing', 'Traffic routing', 'Network security']
4530
},
31+
// Second column - Operations and monitoring
32+
{
33+
name: 'Observability',
34+
description: 'Metrics collection, distributed tracing, monitoring dashboards, and structured logging for production visibility',
35+
label: 'area/observability',
36+
icon: '📈',
37+
skills: ['Prometheus/Grafana', 'OpenTelemetry', 'Log aggregation', 'Monitoring systems'],
38+
needs: ['Metrics implementation', 'Tracing integration', 'Dashboard creation', 'Log standardization']
39+
},
4640
{
4741
name: 'Bench',
48-
description: 'Reasoning Benchmark Framework, Performance',
42+
description: 'Reasoning Benchmark Framework, Performance Optimization',
4943
label: 'area/benchmark',
5044
icon: '📊',
5145
skills: ['Performance testing', 'Benchmarking tools', 'Data analysis'],
5246
needs: ['Benchmark frameworks', 'Performance metrics', 'Testing automation']
5347
},
48+
{
49+
name: 'Environment',
50+
description: 'Docker Compose, Kubernetes, Local support, Cloud Foundry Integration',
51+
label: 'area/environment',
52+
icon: '🐳',
53+
skills: ['Docker', 'Kubernetes', 'Cloud platforms', 'DevOps'],
54+
needs: ['Helm charts', 'Deployment automation', 'Cloud integrations']
55+
},
56+
// Third column - Development and user experience
5457
{
5558
name: 'Test and Release',
5659
description: 'CI/CD, Build, test, release',
@@ -66,66 +69,44 @@ const workingGroups = [
6669
icon: '👥',
6770
skills: ['API design', 'UX/UI', 'Developer experience'],
6871
needs: ['API improvements', 'CLI enhancements', 'User feedback integration']
72+
},
73+
{
74+
name: 'Docs',
75+
description: 'User docs, information architecture, infrastructure',
76+
label: 'area/document',
77+
icon: '📚',
78+
skills: ['Technical writing', 'Documentation tools', 'User experience design'],
79+
needs: ['API documentation', 'Tutorials', 'Deployment guides']
6980
}
7081
];
7182

72-
function WorkGroupCard({ group, featured = false }) {
73-
const cardClass = featured
74-
? `${styles.workGroupCard} ${styles.featuredWorkGroup}`
75-
: styles.workGroupCard;
76-
83+
function WorkGroupCard({ group }) {
7784
return (
78-
<div className={cardClass}>
85+
<div className={styles.workGroupCard}>
7986
<div className={styles.cardHeader}>
8087
<span className={styles.icon}>{group.icon}</span>
8188
<h3 className={styles.groupName}>{group.name}</h3>
8289
<span className={styles.label}>{group.label}</span>
8390
</div>
8491
<p className={styles.description}>{group.description}</p>
8592

86-
{featured ? (
87-
// Featured layout with side-by-side skills and needs
88-
<div className={styles.skillsAndNeeds}>
89-
<div className={styles.skillsSection}>
90-
<h4>Skills Needed:</h4>
91-
<ul className={styles.skillsList}>
92-
{group.skills && group.skills.map((skill, index) => (
93-
<li key={index}>{skill}</li>
94-
))}
95-
</ul>
96-
</div>
97-
98-
<div className={styles.needsSection}>
99-
<h4>Current Needs:</h4>
100-
<ul className={styles.needsList}>
101-
{group.needs && group.needs.map((need, index) => (
102-
<li key={index}>{need}</li>
103-
))}
104-
</ul>
105-
</div>
106-
</div>
107-
) : (
108-
// Regular layout with stacked skills and needs
109-
<>
110-
<div className={styles.skillsSection}>
111-
<h4>Skills Needed:</h4>
112-
<ul className={styles.skillsList}>
113-
{group.skills && group.skills.map((skill, index) => (
114-
<li key={index}>{skill}</li>
115-
))}
116-
</ul>
117-
</div>
93+
<div className={styles.skillsSection}>
94+
<h4>Skills Needed:</h4>
95+
<ul className={styles.skillsList}>
96+
{group.skills && group.skills.map((skill, index) => (
97+
<li key={index}>{skill}</li>
98+
))}
99+
</ul>
100+
</div>
118101

119-
<div className={styles.needsSection}>
120-
<h4>Current Needs:</h4>
121-
<ul className={styles.needsList}>
122-
{group.needs && group.needs.map((need, index) => (
123-
<li key={index}>{need}</li>
124-
))}
125-
</ul>
126-
</div>
127-
</>
128-
)}
102+
<div className={styles.needsSection}>
103+
<h4>Current Needs:</h4>
104+
<ul className={styles.needsList}>
105+
{group.needs && group.needs.map((need, index) => (
106+
<li key={index}>{need}</li>
107+
))}
108+
</ul>
109+
</div>
129110
</div>
130111
);
131112
}
@@ -165,26 +146,9 @@ export default function WorkGroups() {
165146
<p>This section is about setting WG around this project, to gather focus on specify areas.</p>
166147

167148
<div className={styles.workGroupsGrid}>
168-
{/* Featured RouterCore and Research groups */}
169-
<div className={styles.featuredGroupsRow}>
170-
{workingGroups
171-
.filter(group => group.name === 'RouterCore')
172-
.map((group, index) => (
173-
<WorkGroupCard key={`featured-routercore-${index}`} group={group} featured={true} />
174-
))}
175-
{workingGroups
176-
.filter(group => group.name === 'Research')
177-
.map((group, index) => (
178-
<WorkGroupCard key={`featured-research-${index}`} group={group} featured={true} />
179-
))}
180-
</div>
181-
182-
{/* Other working groups */}
183-
{workingGroups
184-
.filter(group => group.name !== 'RouterCore' && group.name !== 'Research')
185-
.map((group, index) => (
186-
<WorkGroupCard key={index} group={group} />
187-
))}
149+
{workingGroups.map((group, index) => (
150+
<WorkGroupCard key={index} group={group} />
151+
))}
188152
</div>
189153
</section>
190154

‎website/src/pages/community/work-groups.module.css‎

Lines changed: 8 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -50,57 +50,7 @@
5050
grid-template-columns: repeat(3, 1fr);
5151
gap: 2rem;
5252
margin-top: 2rem;
53-
}
54-
55-
.featuredGroupsRow {
56-
grid-column: 1 / -1;
57-
display: grid;
58-
grid-template-columns: 1fr 1fr;
59-
gap: 2rem;
60-
margin-bottom: 2rem;
61-
}
62-
63-
.featuredWorkGroup {
64-
background: linear-gradient(135deg, #f6f8fa 0%, #e1e7f0 50%, #d0d7de 100%);
65-
color: #24292f !important;
66-
border: 2px solid #0969da !important;
67-
box-shadow: 0 8px 32px rgba(9, 105, 218, 0.2);
68-
}
69-
70-
.featuredWorkGroup .skillsAndNeeds {
71-
display: grid;
72-
grid-template-columns: 1fr 1fr;
73-
gap: 3rem;
74-
margin-top: 1.5rem;
75-
}
76-
77-
.featuredWorkGroup .groupName,
78-
.featuredWorkGroup .skillsSection h4,
79-
.featuredWorkGroup .needsSection h4 {
80-
color: #0969da !important;
81-
}
82-
83-
.featuredWorkGroup .description,
84-
.featuredWorkGroup .skillsList,
85-
.featuredWorkGroup .needsList {
86-
color: #24292f !important;
87-
}
88-
89-
.featuredWorkGroup .skillsList li,
90-
.featuredWorkGroup .needsList li {
91-
color: #656d76 !important;
92-
}
93-
94-
.featuredWorkGroup .label {
95-
background: #0969da !important;
96-
color: white !important;
97-
border: 1px solid #0969da !important;
98-
}
99-
100-
.featuredWorkGroup:hover {
101-
transform: translateY(-8px);
102-
box-shadow: 0 16px 48px rgba(9, 105, 218, 0.3);
103-
border-color: #8250df !important;
53+
align-items: start;
10454
}
10555

10656
.workGroupCard {
@@ -264,6 +214,13 @@
264214
}
265215

266216
/* Responsive design */
217+
@media (max-width: 1024px) {
218+
.workGroupsGrid {
219+
grid-template-columns: repeat(2, 1fr);
220+
gap: 1.5rem;
221+
}
222+
}
223+
267224
@media (max-width: 768px) {
268225
.container {
269226
padding: 1rem;
@@ -278,16 +235,6 @@
278235
gap: 1.5rem;
279236
}
280237

281-
.featuredGroupsRow {
282-
grid-template-columns: 1fr;
283-
gap: 1.5rem;
284-
}
285-
286-
.featuredWorkGroup .skillsAndNeeds {
287-
grid-template-columns: 1fr;
288-
gap: 1.5rem;
289-
}
290-
291238
.cardHeader {
292239
flex-direction: column;
293240
align-items: flex-start;
@@ -334,31 +281,3 @@
334281
[data-theme='dark'] .link {
335282
color: #58a6ff;
336283
}
337-
338-
/* Featured work group in dark mode should keep its special styling */
339-
[data-theme='dark'] .featuredWorkGroup {
340-
background: linear-gradient(135deg, #21262d 0%, #30363d 50%, #161b22 100%) !important;
341-
border-color: #58a6ff !important;
342-
}
343-
344-
[data-theme='dark'] .featuredWorkGroup .groupName,
345-
[data-theme='dark'] .featuredWorkGroup .skillsSection h4,
346-
[data-theme='dark'] .featuredWorkGroup .needsSection h4 {
347-
color: #58a6ff !important;
348-
}
349-
350-
[data-theme='dark'] .featuredWorkGroup .description,
351-
[data-theme='dark'] .featuredWorkGroup .skillsList,
352-
[data-theme='dark'] .featuredWorkGroup .needsList {
353-
color: #f0f6fc !important;
354-
}
355-
356-
[data-theme='dark'] .featuredWorkGroup .skillsList li,
357-
[data-theme='dark'] .featuredWorkGroup .needsList li {
358-
color: #8b949e !important;
359-
}
360-
361-
[data-theme='dark'] .featuredWorkGroup .label {
362-
background: #58a6ff !important;
363-
color: #0d1117 !important;
364-
}

0 commit comments

Comments
 (0)