Skip to content

Commit 709124c

Browse files
amitamrutiyaamitamrutiya
committed
feat(ResourceDetailFormatters): add index and styles files for resource detail formatting
Signed-off-by: Amit Amrutiya <[email protected]>
1 parent 4fb0136 commit 709124c

File tree

2 files changed

+342
-0
lines changed

2 files changed

+342
-0
lines changed

‎src/custom/ResourceDetailFormatters/index.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { KeyValueInRow, NumberStateFormatter } from './Component';
2+
import { OperatorDataFormatter } from './Details';
3+
import {
4+
CodeFormatter,
5+
CollapsibleSectionFormatter,
6+
ContainerFormatter,
7+
LabelFormatter,
8+
ListFormatter,
9+
MemoryUsage,
10+
NumberState,
11+
OperatorDynamicFormatter,
12+
SecretFormatter,
13+
StatusFormatter,
14+
TableDataFormatter,
15+
TextWithLinkFormatter
16+
} from './Formatter';
17+
import { useResourceCleanData } from './useResourceCleanData';
18+
import { extractPodVolumnTables, splitCamelCaseString } from './utils';
19+
20+
export {
21+
CodeFormatter,
22+
CollapsibleSectionFormatter,
23+
ContainerFormatter,
24+
KeyValueInRow,
25+
LabelFormatter,
26+
ListFormatter,
27+
MemoryUsage,
28+
NumberState,
29+
NumberStateFormatter,
30+
OperatorDataFormatter,
31+
OperatorDynamicFormatter,
32+
SecretFormatter,
33+
StatusFormatter,
34+
TableDataFormatter,
35+
TextWithLinkFormatter,
36+
extractPodVolumnTables,
37+
splitCamelCaseString,
38+
useResourceCleanData
39+
};

‎src/custom/ResourceDetailFormatters/styles.ts

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
import { alpha, Theme } from '@mui/material';
2+
import { Box, Chip, Grid, IconButton, Typography } from '../../base';
3+
import { charcoal, KEPPEL, styled, TRANSPARENT_WHITE } from '../../theme';
4+
5+
interface StyledProps {
6+
noPadding?: boolean;
7+
openSection?: boolean;
8+
display?: string;
9+
theme?: Theme;
10+
}
11+
12+
export const FlexContainer = styled(Box)({
13+
display: 'flex',
14+
flexWrap: 'wrap',
15+
gap: 24
16+
});
17+
18+
export const FlexItem = styled(Box)({
19+
flex: '1 1 calc(50% - 12px)',
20+
minWidth: '300px'
21+
});
22+
23+
export const FullWidthItem = styled(Box)({
24+
flex: '1 1 100%'
25+
});
26+
27+
export const StyledPaper = styled(Box)(({ theme }) => ({
28+
padding: theme.spacing(4),
29+
backgroundColor: '#202020',
30+
color: theme.palette.text.primary
31+
}));
32+
33+
export const StyledArrayUl = styled('ol')(() => ({
34+
listStyleType: 'none',
35+
paddingInline: '0rem',
36+
display: 'flex',
37+
flexDirection: 'column',
38+
margin: '0.5rem'
39+
}));
40+
41+
export const StyledPortsUl = styled('ul')({
42+
listStyleType: 'none',
43+
marginBlock: '0.25rem',
44+
paddingInline: '0.5rem',
45+
display: 'flex',
46+
flexDirection: 'column'
47+
});
48+
49+
export const Title = styled('span')({
50+
fontSize: '0.5rem',
51+
fontWeight: 'bold',
52+
fontFamily: 'Qanelas Soft, sans-serif'
53+
});
54+
55+
export const ElementData = styled('span')({
56+
display: 'flex',
57+
alignItems: 'center',
58+
justifyContent: 'space-between',
59+
paddingLeft: '0'
60+
});
61+
62+
export const Wrap = styled('div')(() => ({
63+
width: '100%',
64+
whiteSpace: 'nowrap',
65+
overflow: 'hidden',
66+
textOverflow: 'ellipsis'
67+
}));
68+
69+
export const VariableSubfield = styled('div')(({ theme }) => ({
70+
color: 'rgb(134, 183, 235)',
71+
letterSpacing: '1px',
72+
fontSize: '.85rem',
73+
fontFamily: theme.typography.fontFamily
74+
}));
75+
76+
export const LongWrap = styled('div')<StyledProps>(({ display }) => ({
77+
width: '100%',
78+
textOverflow: 'ellipsis',
79+
wordWrap: 'break-word',
80+
overflowWrap: 'break-word',
81+
wordBreak: 'break-all',
82+
display: display || 'block',
83+
gap: display === 'flex' ? '0.5rem' : '0'
84+
}));
85+
86+
export const KeyValField = styled('span')(({ theme }) => ({
87+
color: theme.palette.mode === 'dark' ? charcoal[60] : charcoal[20],
88+
fontWeight: 'bold'
89+
}));
90+
91+
export const State = styled('span')(() => ({
92+
verticalAlign: 'middle',
93+
paddingRight: '8px',
94+
display: 'flex'
95+
}));
96+
97+
export const Heading = styled('div')({
98+
display: 'flex',
99+
alignItems: 'center',
100+
paddingInline: '1rem',
101+
margin: '1.5rem auto'
102+
});
103+
104+
export const ElementDataWrap = styled('span')({
105+
paddingLeft: '0',
106+
width: '100%',
107+
whiteSpace: 'nowrap',
108+
overflow: 'hidden',
109+
textOverflow: 'ellipsis'
110+
});
111+
112+
export const Details = styled('div', {
113+
shouldForwardProp: (prop): prop is keyof StyledProps => prop !== 'noPadding'
114+
})<StyledProps>(({ noPadding }) => ({
115+
fontSize: '1rem',
116+
paddingLeft: noPadding ? '' : '1rem',
117+
width: 'fit-content'
118+
}));
119+
120+
export const StyledTitle = styled(Typography)({
121+
cursor: 'pointer',
122+
padding: '0.25rem',
123+
width: '100%',
124+
paddingLeft: '0'
125+
});
126+
127+
export const CollapsibleSectionContainer = styled(Box)({
128+
borderRadius: '0.25rem',
129+
marginBottom: '0.5rem',
130+
overflow: 'hidden'
131+
});
132+
133+
export const CollapsibleSectionTitle = styled('div', {
134+
shouldForwardProp: (prop): prop is keyof StyledProps => prop !== 'openSection'
135+
})<StyledProps>(({ theme, openSection }) => ({
136+
display: 'flex',
137+
cursor: 'pointer',
138+
flexDirection: 'row',
139+
justifyContent: 'space-between',
140+
alignItems: 'center',
141+
padding: '0rem',
142+
fontWeight: 'regular',
143+
borderBottom: openSection ? `1px solid ${KEPPEL}` : `1px solid ${theme?.palette.divider}`,
144+
backgroundColor: openSection ? alpha(KEPPEL, 0.1) : 'transparent',
145+
marginBlock: '0.25rem'
146+
}));
147+
148+
export const CollapsibleSectionContent = styled(Box)({
149+
display: 'flex',
150+
flexDirection: 'column',
151+
gap: '0.5rem',
152+
padding: '0.2rem',
153+
backgroundColor: 'transparent'
154+
});
155+
156+
export const StyledEnvironmentVariablesCode = styled('code')(({ theme }) => ({
157+
backgroundColor: theme.palette.mode === 'light' ? TRANSPARENT_WHITE : '#253137',
158+
color: 'white',
159+
width: '100%',
160+
display: 'flex',
161+
flexDirection: 'column',
162+
gap: '0.5rem'
163+
}));
164+
165+
export const StyledEnvironmentVariablesPre = styled('pre')(({ theme }) => ({
166+
backgroundColor: theme.palette.mode === 'light' ? TRANSPARENT_WHITE : '#253137',
167+
color: 'white',
168+
padding: '0.5rem',
169+
margin: '0',
170+
width: '100%'
171+
}));
172+
173+
export const EnvironmentVariablesContainer = styled('div')({
174+
display: 'flex',
175+
flexDirection: 'column',
176+
gap: '1rem'
177+
});
178+
179+
export const EnvironmentVariableValue = styled('span')({
180+
maxWidth: '50px',
181+
whiteSpace: 'pre-wrap'
182+
});
183+
184+
export const CodeFormatterPre = styled('pre')(({ theme }) => ({
185+
backgroundColor: theme.palette.mode === 'light' ? TRANSPARENT_WHITE : '#212121',
186+
color: 'white',
187+
width: '100%',
188+
wordWrap: 'break-word',
189+
overflowWrap: 'break-word',
190+
wordBreak: 'break-all',
191+
margin: 0,
192+
padding: '0.5rem'
193+
}));
194+
195+
export const CodeFormatterCode = styled('code')(({ theme }) => ({
196+
backgroundColor: theme.palette.mode === 'light' ? TRANSPARENT_WHITE : '#212121',
197+
color: 'white',
198+
fontFamily: theme.typography.fontFamily
199+
}));
200+
201+
export const NumberStateContainer = styled('div')({
202+
textAlign: 'center'
203+
});
204+
205+
export const NumberStateTitle = styled(Typography)({
206+
paddingRight: '1vh',
207+
marginTop: '0.35rem',
208+
marginBottom: '0'
209+
});
210+
211+
export const NumberStateValueContainer = styled('div')({
212+
display: 'inline-flex',
213+
alignItems: 'center',
214+
paddingRight: '1vh'
215+
});
216+
217+
export const NumberStateValue = styled(Typography)(({ theme }) => ({
218+
marginRight: '0.25rem',
219+
marginBottom: '0',
220+
whiteSpace: 'nowrap',
221+
color: theme.palette.mode === 'dark' ? charcoal[60] : charcoal[20]
222+
}));
223+
224+
export const NumberStateQuantity = styled(Typography)({
225+
fontSize: '1rem',
226+
marginTop: '1.5rem'
227+
});
228+
229+
export const StyledNumberBox = styled(Box)({
230+
display: 'flex',
231+
flexDirection: 'row',
232+
flexWrap: 'wrap',
233+
gap: '1.5rem'
234+
});
235+
236+
export const StyledChip = styled(Chip)({
237+
borderRadius: '0.25rem',
238+
minHeight: '1.5rem',
239+
height: 'auto',
240+
'& .MuiChip-label': {
241+
display: 'block',
242+
whiteSpace: 'normal'
243+
}
244+
});
245+
246+
export const ResourceProgressContainer = styled(Box)({
247+
marginTop: 1,
248+
display: 'flex',
249+
flexDirection: 'column',
250+
alignItems: 'center',
251+
flexWrap: 'wrap'
252+
});
253+
254+
export const FlexResourceContainer = styled(Box)({
255+
display: 'flex',
256+
flexDirection: 'row',
257+
justifyContent: 'space-between',
258+
width: '100%',
259+
flexWrap: 'wrap'
260+
});
261+
262+
export const SecretContainer = styled(Box)({
263+
display: 'flex',
264+
flexDirection: 'column',
265+
gap: 1
266+
});
267+
268+
export const SecretItemContainer = styled(Box)({
269+
display: 'flex',
270+
gap: 4,
271+
alignItems: 'center'
272+
});
273+
274+
export const SecretValueContainer = styled(Box)({
275+
display: 'flex',
276+
alignItems: 'center',
277+
gap: 1
278+
});
279+
280+
export const SecretIconButton = styled(IconButton)({
281+
padding: '4px'
282+
});
283+
284+
export const OperatorDataContainer = styled('div')({
285+
border: '1px solid gray',
286+
padding: '1rem',
287+
borderRadius: '0.5rem',
288+
marginTop: '1rem'
289+
});
290+
291+
export const KeyValueGrid = styled(Grid)(({ theme }) => ({
292+
borderBottom: `1px solid ${theme.palette.divider}`,
293+
paddingBlock: '0.3rem'
294+
}));
295+
296+
export const KeyValueGridTitle = styled(Typography)({
297+
fontWeight: 'bold',
298+
textTransform: 'capitalize'
299+
});
300+
301+
export const KeyValueGridCell = styled(Grid)({
302+
placeSelf: 'center'
303+
});

0 commit comments

Comments
 (0)