Skip to content

Commit cb9481c

Browse files
anheftianhefti
committed
SEBSERV-830
1 parent 83404cc commit cb9481c

2 files changed

Lines changed: 192 additions & 176 deletions

File tree

‎client/src/components/views/seb-server/monitoring/client-detail/MonitoringDetailsInfo.vue‎

Lines changed: 187 additions & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -49,177 +49,193 @@
4949
</v-col>
5050
</v-row>
5151

52-
<v-row style="background-color: #fffffe">
53-
<!-- User Name -->
54-
<v-col cols="12" md="3">
55-
<div
56-
v-if="nameParts.length"
57-
class="top-container ml-10 d-flex align-center flex-nowrap"
58-
>
59-
<div
60-
v-for="(part, index) in nameParts"
61-
:key="index"
62-
class="name-part mr-2"
63-
>
64-
{{ part }}
65-
</div>
66-
</div>
67-
</v-col>
68-
69-
<v-col class="user-info-col" cols="12" md="3">
70-
<div class="top-container">
71-
<!-- Status -->
72-
<div v-if="currentStatus">
73-
<v-card
74-
class="rounded-lg pa-2 text-center"
75-
:color="getConnectionStatusColor(currentStatus)"
76-
max-width="130"
77-
variant="flat"
78-
>
79-
<div class="status-row">
80-
<span class="status-label text-body-3">
81-
{{ translate(currentStatus) }}
82-
</span>
83-
<v-icon
84-
:icon="getConnectionStatusIcon(currentStatus)"
85-
size="18"
86-
/>
52+
<v-row class="pt-0 pl-4 pr-4 pb-6">
53+
<v-col class="pt-0">
54+
<v-sheet class="rounded-lg pl-4 pr-4" elevation="4">
55+
<v-row style="background-color: #fffffe">
56+
<!-- User Name -->
57+
<v-col cols="12" md="3">
58+
<div
59+
v-for="(part, index) in nameParts"
60+
:key="index"
61+
class="name-part mr-2 d-flex align-center flex-nowrap pt-4"
62+
>
63+
{{ part }}
8764
</div>
88-
</v-card>
89-
</div>
90-
91-
<!-- Group -->
92-
<div class="mt-2 d-flex align-center flex-wrap group-container">
93-
<span class="group-label mr-2">Group:</span>
94-
<v-chip
95-
v-for="clientGroup in monitoringStore.clientGroupsSingle"
96-
:key="clientGroup.id"
97-
class="mr-1 pl-5 pr-5 text-body-4"
98-
size="default"
99-
variant="tonal"
100-
>
101-
{{ clientGroup.name }}
102-
</v-chip>
103-
</div>
104-
105-
<!-- SEB info tags -->
106-
<div class="mt-2">
107-
<v-chip
108-
v-for="(info, index) in sebInfoParts"
109-
:key="index"
110-
class="mr-1 mb-1 text-body-3 info-chip"
111-
size="default"
112-
variant="text"
113-
>
114-
{{ info }}
115-
</v-chip>
116-
</div>
117-
</div>
118-
</v-col>
119-
120-
<!-- Indicators -->
121-
<v-col cols="12" md="3">
122-
<v-card
123-
v-if="
124-
filteredIndicators.length > 0 &&
125-
currentStatus !== ConnectionStatusEnum.CLOSED &&
126-
currentStatus !== ConnectionStatusEnum.DISABLED
127-
"
128-
class="ml-4 top-container pa-3"
129-
style="
130-
height: 100%;
131-
display: flex;
132-
flex-wrap: wrap;
133-
align-content: flex-start;
134-
"
135-
>
136-
<div
137-
v-for="indicator in filteredIndicators"
138-
:key="indicator.id"
139-
class="indicator-item d-flex align-center mb-5 mt-5"
140-
style="width: 33%"
141-
>
142-
<v-icon
143-
class="mr-1"
144-
:color="indicator.color"
145-
:icon="indicator.icon"
146-
/>
147-
<span>{{ indicator.displayValue }}</span>
148-
</div>
149-
</v-card>
150-
</v-col>
151-
152-
<!-- Action Buttons -->
153-
<v-col class="button-col" cols="12" md="3">
154-
<div
155-
class="top-container d-flex flex-column align-end justify-center h-100 mr-5"
156-
>
157-
<v-btn
158-
class="action-btn mb-2"
159-
color="black"
160-
:disabled="
161-
!connectionStateBehavior[currentStatus || 'UNKNOWN']
162-
?.cancel
163-
"
164-
prepend-icon="mdi-monitor-lock"
165-
rounded="sm"
166-
variant="outlined"
167-
@click="
168-
openInstructionConfirmDialog(
169-
InstructionEnum.SEB_MARK_AS_CANCELLED,
170-
)
171-
"
172-
>
173-
{{ translate("monitoringDetails.info.mark-cancelled") }}
174-
</v-btn>
175-
176-
<v-btn
177-
class="action-btn mb-2"
178-
color="black"
179-
:disabled="!canLockScreen()"
180-
prepend-icon="mdi-monitor-lock"
181-
rounded="sm"
182-
variant="outlined"
183-
@click="
184-
openInstructionConfirmDialog(
185-
InstructionEnum.SEB_FORCE_LOCK_SCREEN,
186-
)
187-
"
188-
>
189-
{{ translate("monitoringDetails.info.lock") }}
190-
</v-btn>
191-
192-
<v-btn
193-
class="action-btn"
194-
color="black"
195-
:disabled="
196-
!connectionStateBehavior[currentStatus || 'UNKNOWN']
197-
?.quit
198-
"
199-
prepend-icon="mdi-backspace-outline"
200-
rounded="sm"
201-
variant="outlined"
202-
@click="
203-
openInstructionConfirmDialog(InstructionEnum.SEB_QUIT)
204-
"
205-
>
206-
{{ translate("monitoringDetails.info.quit") }}
207-
</v-btn>
208-
</div>
209-
</v-col>
210-
</v-row>
211-
212-
<v-row class="pb-4 pr-4 pl-4" style="background-color: #fffffe">
213-
<v-col class="d-flex justify-start">
214-
<v-icon
215-
icon="mdi-arrow-left"
216-
@click="
217-
navigateTo(
218-
constants.MONITORING_CLIENTS_ROUTE + '/' + examId,
219-
monitoringStore.currentMonitoringQuery,
220-
)
221-
"
222-
/>
65+
</v-col>
66+
67+
<v-col class="user-info-col pt-6" cols="12" md="3">
68+
<div class="top-container">
69+
<!-- Status -->
70+
<div v-if="currentStatus">
71+
<v-card
72+
class="rounded-lg pa-2 text-center"
73+
:color="
74+
getConnectionStatusColor(currentStatus)
75+
"
76+
max-width="130"
77+
variant="flat"
78+
>
79+
<div class="status-row">
80+
<span class="status-label text-body-3">
81+
{{ translate(currentStatus) }}
82+
</span>
83+
<v-icon
84+
:icon="
85+
getConnectionStatusIcon(
86+
currentStatus,
87+
)
88+
"
89+
size="18"
90+
/>
91+
</div>
92+
</v-card>
93+
</div>
94+
95+
<!-- Group -->
96+
<div
97+
class="mt-2 d-flex align-center flex-wrap group-container"
98+
>
99+
<span class="group-label mr-2">Group:</span>
100+
<v-chip
101+
v-for="clientGroup in monitoringStore.clientGroupsSingle"
102+
:key="clientGroup.id"
103+
class="mr-1 pl-5 pr-5 text-body-4"
104+
size="default"
105+
variant="tonal"
106+
>
107+
{{ clientGroup.name }}
108+
</v-chip>
109+
</div>
110+
111+
<!-- SEB info tags -->
112+
<div class="mt-2">
113+
<v-chip
114+
v-for="(info, index) in sebInfoParts"
115+
:key="index"
116+
class="mr-1 mb-1 text-body-3 info-chip"
117+
size="default"
118+
variant="text"
119+
>
120+
{{ info }}
121+
</v-chip>
122+
</div>
123+
</div>
124+
</v-col>
125+
126+
<!-- Indicators -->
127+
<v-col cols="12" md="3">
128+
<v-card
129+
v-if="
130+
filteredIndicators.length > 0 &&
131+
currentStatus !== ConnectionStatusEnum.CLOSED &&
132+
currentStatus !== ConnectionStatusEnum.DISABLED
133+
"
134+
class="ml-4 pa-3"
135+
variant="text"
136+
>
137+
<div
138+
v-for="indicator in filteredIndicators"
139+
:key="indicator.id"
140+
class="indicator-item d-flex align-center mb-5 mt-5"
141+
>
142+
<span class="pl-4 pr-4">
143+
{{ indicator.name }}:
144+
</span>
145+
<v-icon
146+
class="mr-1"
147+
:color="indicator.color"
148+
:icon="indicator.icon"
149+
/>
150+
<span>{{ indicator.displayValue }}</span>
151+
</div>
152+
</v-card>
153+
</v-col>
154+
155+
<!-- Action Buttons -->
156+
<v-col class="button-col" cols="12" md="3">
157+
<div
158+
class="top-container d-flex flex-column align-end pt-4 h-100 mr-5"
159+
>
160+
<v-btn
161+
class="action-btn mb-2"
162+
color="black"
163+
:disabled="
164+
!connectionStateBehavior[
165+
currentStatus || 'UNKNOWN'
166+
]?.cancel
167+
"
168+
prepend-icon="mdi-monitor-lock"
169+
rounded="sm"
170+
variant="outlined"
171+
@click="
172+
openInstructionConfirmDialog(
173+
InstructionEnum.SEB_MARK_AS_CANCELLED,
174+
)
175+
"
176+
>
177+
{{
178+
translate(
179+
"monitoringDetails.info.mark-cancelled",
180+
)
181+
}}
182+
</v-btn>
183+
184+
<v-btn
185+
class="action-btn mb-2"
186+
color="black"
187+
:disabled="!canLockScreen()"
188+
prepend-icon="mdi-monitor-lock"
189+
rounded="sm"
190+
variant="outlined"
191+
@click="
192+
openInstructionConfirmDialog(
193+
InstructionEnum.SEB_FORCE_LOCK_SCREEN,
194+
)
195+
"
196+
>
197+
{{ translate("monitoringDetails.info.lock") }}
198+
</v-btn>
199+
200+
<v-btn
201+
class="action-btn"
202+
color="black"
203+
:disabled="
204+
!connectionStateBehavior[
205+
currentStatus || 'UNKNOWN'
206+
]?.quit
207+
"
208+
prepend-icon="mdi-backspace-outline"
209+
rounded="sm"
210+
variant="outlined"
211+
@click="
212+
openInstructionConfirmDialog(
213+
InstructionEnum.SEB_QUIT,
214+
)
215+
"
216+
>
217+
{{ translate("monitoringDetails.info.quit") }}
218+
</v-btn>
219+
</div>
220+
</v-col>
221+
</v-row>
222+
223+
<v-row class="pb-4 pr-4 pl-4" style="background-color: #fffffe">
224+
<v-col class="d-flex justify-start">
225+
<v-icon
226+
icon="mdi-arrow-left"
227+
@click="
228+
navigateTo(
229+
constants.MONITORING_CLIENTS_ROUTE +
230+
'/' +
231+
examId,
232+
monitoringStore.currentMonitoringQuery,
233+
)
234+
"
235+
/>
236+
</v-col>
237+
</v-row>
238+
</v-sheet>
223239
</v-col>
224240
</v-row>
225241

@@ -276,7 +292,7 @@ function closeInstructionConfirmDialog() {
276292
const nameParts = computed(() => {
277293
const rawName =
278294
monitoringStore.selectedSingleConn?.cdat.examUserSessionId || "";
279-
return rawName.split(" ").filter((p) => p.trim() !== "");
295+
return rawName.split("|").filter((p) => p.trim() !== "");
280296
});
281297
282298
//= ==============groups, tags, and status====================

0 commit comments

Comments
 (0)