Skip to content

Commit 1e99079

Browse files
JayCC1JayCC1
authored
feat: 【新版告警中心】告警详情-视图tab-告警预览图表-事件散点图接口联调 --Story=129860894 (#9440)
1 parent dae75c8 commit 1e99079

File tree

8 files changed

+917
-26
lines changed

8 files changed

+917
-26
lines changed

‎bkmonitor/webpack/src/trace/pages/alarm-center/common-detail/components/alarm-view/echarts/alarm-chart-event-detail.scss‎

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
.alarm-chart-event-detail {
2+
position: fixed;
3+
z-index: 9999;
4+
display: flex;
5+
flex-direction: column;
6+
width: 720px;
7+
min-height: fit-content;
8+
padding: 2px 12px;
9+
font-size: 12px;
10+
color: #4d4f56;
11+
background: #fff;
12+
border: 1px solid #dcdee5;
13+
border-radius: 4px;
14+
box-shadow: 0 2px 12px 0 #00000029;
15+
16+
.is-url {
17+
color: #699df4;
18+
cursor: pointer;
19+
}
20+
21+
.no-data {
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
width: 100%;
26+
height: 100px;
27+
margin: 16px 0;
28+
}
29+
30+
// opacity: 0.8;
31+
&-header {
32+
display: flex;
33+
flex: 0 0 36px;
34+
width: 100%;
35+
margin-top: -2px;
36+
border-top-left-radius: 2px;
37+
border-top-right-radius: 2px;
38+
39+
.header-tab {
40+
display: flex;
41+
flex: 1;
42+
align-items: center;
43+
justify-content: center;
44+
height: 36px;
45+
cursor: pointer;
46+
border-top: 4px solid transparent;
47+
48+
&:first-child {
49+
margin-left: -12px;
50+
}
51+
52+
&:last-child {
53+
margin-right: -12px;
54+
}
55+
}
56+
}
57+
58+
&-title {
59+
display: flex;
60+
align-items: center;
61+
width: 100%;
62+
height: 36px;
63+
line-height: 20px;
64+
border-bottom: 1px solid #eaebf0;
65+
66+
.event-name {
67+
display: inline;
68+
flex: 1;
69+
flex-wrap: nowrap;
70+
overflow: hidden;
71+
text-overflow: ellipsis;
72+
white-space: nowrap;
73+
}
74+
75+
.detail-btn {
76+
display: inline-flex;
77+
align-items: center;
78+
margin-left: auto;
79+
font-size: 12px;
80+
81+
.detail-icon {
82+
display: flex;
83+
align-items: center;
84+
justify-content: center;
85+
margin-right: 4px;
86+
font-size: 12px;
87+
}
88+
}
89+
}
90+
91+
&-content {
92+
display: flex;
93+
flex-direction: column;
94+
margin: 8px 0;
95+
}
96+
97+
.content-item {
98+
display: flex;
99+
align-items: center;
100+
width: 100%;
101+
min-height: 22px;
102+
padding: 0 4px;
103+
line-height: 28px;
104+
color: #4d4f56;
105+
border-radius: 2px;
106+
107+
&:nth-child(odd) {
108+
background-color: #f5f7fa;
109+
}
110+
111+
&-label {
112+
display: flex;
113+
flex: 0 0 100px;
114+
align-items: center;
115+
justify-content: flex-end;
116+
width: 100px;
117+
color: #8a8f99;
118+
text-align: right;
119+
word-break: break-all;
120+
}
121+
122+
&-value {
123+
display: flex;
124+
flex: 1;
125+
align-items: center;
126+
margin-left: 6px;
127+
color: #313238;
128+
word-break: break-all;
129+
}
130+
131+
&-content {
132+
display: inline;
133+
align-items: center;
134+
margin-right: 4px;
135+
overflow: hidden;
136+
text-overflow: ellipsis;
137+
white-space: nowrap;
138+
139+
.bk-link {
140+
display: inline;
141+
vertical-align: baseline;
142+
143+
&-text {
144+
font-size: 12px;
145+
}
146+
}
147+
}
148+
}
149+
150+
.event-icon {
151+
display: inline-flex;
152+
flex: 0 0 16px;
153+
align-items: center;
154+
justify-content: center;
155+
width: 16px;
156+
height: 16px;
157+
margin-right: 4px;
158+
background-position: center;
159+
background-size: contain;
160+
}
161+
162+
.link-icon {
163+
display: inline-flex;
164+
align-items: center;
165+
justify-content: center;
166+
margin-left: auto;
167+
font-size: 12px;
168+
color: #699df4;
169+
cursor: pointer;
170+
}
171+
172+
.content-progress {
173+
display: flex;
174+
flex-direction: column;
175+
justify-content: center;
176+
width: 100%;
177+
height: 28px;
178+
margin-bottom: 8px;
179+
180+
.progress-title {
181+
display: flex;
182+
align-items: center;
183+
margin-bottom: 2px;
184+
}
185+
186+
.proportions-num {
187+
display: inline-flex;
188+
align-items: center;
189+
justify-content: center;
190+
height: 20px;
191+
margin-right: 10px;
192+
margin-left: auto;
193+
font-weight: bold;
194+
color: #4d4f56;
195+
}
196+
197+
.bk-progress {
198+
padding-left: 20px;
199+
}
200+
}
201+
202+
.common-more {
203+
display: flex;
204+
flex: 0 0 20px;
205+
align-items: center;
206+
height: 20px;
207+
padding-left: 24px;
208+
margin-top: 5px;
209+
210+
.bk-button-small {
211+
/* stylelint-disable-next-line declaration-no-important */
212+
padding-left: 5px !important;
213+
214+
.bk-button-text {
215+
display: inline-flex;
216+
align-items: center;
217+
}
218+
}
219+
220+
i {
221+
position: relative;
222+
display: flex;
223+
align-items: center;
224+
justify-content: center;
225+
width: 14px;
226+
height: 14px;
227+
margin-left: 4px;
228+
font-size: 14px;
229+
230+
&::before {
231+
position: absolute;
232+
left: -2px;
233+
display: flex;
234+
align-items: center;
235+
justify-content: center;
236+
height: 14px;
237+
}
238+
}
239+
}
240+
241+
.custom-menu-skeleton {
242+
height: 18px;
243+
margin: 6px;
244+
border-radius: 2px;
245+
}
246+
}

0 commit comments

Comments
 (0)