Skip to content

Commit 37ee90d

Browse files
astandrikastandrik
committed
feat: prototype
1 parent 88ec214 commit 37ee90d

File tree

10 files changed

+491
-11
lines changed

10 files changed

+491
-11
lines changed

‎src/components/MemoryViewer/MemoryViewer.scss‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
@import '../../styles/mixins.scss';
2+
3+
.memory-viewer {
4+
$block: &;
5+
6+
position: relative;
7+
z-index: 0;
8+
min-width: 150px;
9+
padding: 0 4px;
10+
11+
&__progress-container {
12+
position: relative;
13+
height: 23px;
14+
border-radius: 2px;
15+
background: var(--g-color-base-generic);
16+
overflow: hidden;
17+
}
18+
19+
&__container {
20+
display: flex;
21+
align-items: end;
22+
text-align: end;
23+
}
24+
25+
&__legend {
26+
width: 20px;
27+
height: 20px;
28+
29+
margin-right: 4px;
30+
31+
&_type_ExternalConsumption {
32+
background-color: var(--g-color-base-info-medium);
33+
}
34+
35+
&_type_AllocatorCachesMemory {
36+
background-color: var(--g-color-base-warning-medium);
37+
}
38+
39+
&_type_SharedCacheConsumption {
40+
background-color: var(--g-color-base-utility-medium);
41+
}
42+
43+
&_type_MemTableConsumption {
44+
background-color: var(--g-color-base-danger-medium);
45+
}
46+
47+
&_type_QueryExecutionConsumption {
48+
background-color: var(--g-color-base-misc-medium);
49+
}
50+
}
51+
52+
&__segment {
53+
position: absolute;
54+
height: 100%;
55+
56+
&_type_ExternalConsumption {
57+
background-color: var(--g-color-base-info-medium);
58+
}
59+
60+
&_type_AllocatorCachesMemory {
61+
background-color: var(--g-color-base-warning-medium);
62+
}
63+
64+
&_type_SharedCacheConsumption {
65+
background-color: var(--g-color-base-utility-medium);
66+
}
67+
68+
&_type_MemTableConsumption {
69+
background-color: var(--g-color-base-danger-medium);
70+
}
71+
72+
&_type_QueryExecutionConsumption {
73+
background-color: var(--g-color-base-misc-medium);
74+
}
75+
}
76+
77+
&__legend {
78+
display: flex;
79+
flex-wrap: wrap;
80+
gap: 12px;
81+
margin-top: 8px;
82+
color: var(--g-color-text-complementary);
83+
}
84+
85+
&__legend-item {
86+
display: flex;
87+
align-items: center;
88+
gap: 4px;
89+
white-space: nowrap;
90+
}
91+
92+
&__legend-color {
93+
width: 12px;
94+
height: 12px;
95+
border-radius: 2px;
96+
flex-shrink: 0;
97+
}
98+
99+
&_theme_dark {
100+
color: var(--g-color-text-light-primary);
101+
102+
#{$block}__segment {
103+
opacity: 0.75;
104+
}
105+
}
106+
107+
&_status {
108+
&_good {
109+
#{$block}__progress-container {
110+
background-color: var(--g-color-base-positive-light);
111+
}
112+
}
113+
&_warning {
114+
#{$block}__progress-container {
115+
background-color: var(--g-color-base-yellow-light);
116+
}
117+
}
118+
&_danger {
119+
#{$block}__progress-container {
120+
background-color: var(--g-color-base-danger-light);
121+
}
122+
}
123+
}
124+
125+
&_size {
126+
&_xs {
127+
height: 20px;
128+
@include body-2-typography();
129+
}
130+
131+
&_s {
132+
height: 28px;
133+
font-size: var(--g-text-body-1-font-size);
134+
line-height: 28px;
135+
}
136+
137+
&_m {
138+
height: 32px;
139+
font-size: var(--g-text-body-2-font-size);
140+
line-height: 32px;
141+
}
142+
143+
&_ns {
144+
height: 24px;
145+
font-size: 13px;
146+
line-height: var(--g-text-subheader-3-line-height);
147+
}
148+
149+
&_n {
150+
height: 36px;
151+
font-size: var(--g-text-body-1-font-size);
152+
line-height: 36px;
153+
}
154+
155+
&_l {
156+
height: 38px;
157+
font-size: var(--g-text-subheader-3-font-size);
158+
line-height: 38px;
159+
}
160+
161+
&_head {
162+
font-size: var(--g-text-body-1-font-size);
163+
line-height: 36px;
164+
}
165+
166+
#{$block}__progress-container {
167+
height: inherit;
168+
}
169+
}
170+
171+
&__text {
172+
display: flex;
173+
align-items: center;
174+
justify-content: center;
175+
}
176+
177+
&__memory-segment {
178+
display: flex;
179+
align-items: center;
180+
181+
width: 280px;
182+
}
183+
184+
&__hard-limit {
185+
position: absolute;
186+
height: 100%;
187+
background-color: var(--g-color-base-danger-medium);
188+
}
189+
190+
&__soft-limit {
191+
position: absolute;
192+
height: 100%;
193+
background-color: var(--g-color-base-warning-medium);
194+
}
195+
}

0 commit comments

Comments
 (0)