Skip to content

Commit 7b9922d

Browse files
luizhf42gustavosbarreto
luizhf42
authored and
gustavosbarreto
committed
fix(ui): fix Device Details UI to keep the standard
1 parent 7bc2413 commit 7b9922d

File tree

3 files changed

+361
-341
lines changed

3 files changed

+361
-341
lines changed

‎ui/src/views/DetailsDevice.vue‎

Lines changed: 122 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -2,137 +2,131 @@
22
<div class="d-flex pa-0 align-center">
33
<h1>Device Details</h1>
44
</div>
5-
<v-card class="mt-2 bg-v-theme-surface" v-if="device.uid">
6-
<v-card-title class="pa-4 d-flex align-center justify-space-between">
7-
<div class="d-flex align-center">
5+
<v-card class="mt-2 border rounded bg-background" elevation="0" v-if="device.uid">
6+
<v-card-title class="pa-4 d-flex align-center justify-space-between bg-v-theme-surface">
7+
<div class="d-flex align-center ml-2">
88
<TerminalConnectButton
99
v-if="device.status === 'accepted'"
1010
:deviceUid="device.uid"
1111
:online="device.online"
1212
:sshid="sshidAddress(device)"
1313
data-test="connect-btn"
1414
/>
15-
<span class="ml-4">{{ device.name }}</span>
15+
<span class="ml-6">{{ device.name }}</span>
1616
</div>
1717

18-
<div>
19-
<v-menu location="bottom" scrim eager>
20-
<template v-slot:activator="{ props }">
21-
<v-btn
22-
v-bind="props"
23-
variant="plain"
24-
class="border rounded bg-v-theme-background"
25-
density="comfortable"
26-
size="default"
27-
icon="mdi-format-list-bulleted"
28-
/>
29-
</template>
30-
<v-list class="bg-v-theme-surface" lines="two" density="compact">
31-
<DeviceRename
32-
:uid="device.uid"
33-
:name="device.name"
34-
data-test="device-rename-component"
35-
/>
36-
37-
<div v-if="envVariables.hasWebEndpoints && envVariables.isEnterprise">
38-
<v-list-item
39-
v-bind="$attrs"
40-
@click="showWebEndpointCreate = true"
41-
data-test="tunnel-create-dialog-btn"
42-
:disabled="!canCreateWebEndpoint"
43-
>
44-
<div class="d-flex align-center">
45-
<div class="mr-2" data-test="create-icon">
46-
<v-icon>mdi-web-plus</v-icon>
47-
</div>
48-
<v-list-item-title> Create Web Endpoint </v-list-item-title>
18+
<v-menu location="bottom" scrim eager>
19+
<template v-slot:activator="{ props }">
20+
<v-btn
21+
v-bind="props"
22+
variant="plain"
23+
class="border rounded bg-v-theme-background"
24+
density="comfortable"
25+
size="default"
26+
icon="mdi-format-list-bulleted"
27+
/>
28+
</template>
29+
<v-list class="bg-v-theme-surface" lines="two" density="compact">
30+
<DeviceRename
31+
:uid="device.uid"
32+
:name="device.name"
33+
data-test="device-rename-component"
34+
/>
35+
36+
<div v-if="envVariables.hasWebEndpoints && envVariables.isEnterprise">
37+
<v-list-item
38+
v-bind="$attrs"
39+
@click="showWebEndpointCreate = true"
40+
data-test="tunnel-create-dialog-btn"
41+
:disabled="!canCreateWebEndpoint"
42+
>
43+
<div class="d-flex align-center">
44+
<div class="mr-2" data-test="create-icon">
45+
<v-icon>mdi-web-plus</v-icon>
4946
</div>
50-
</v-list-item>
51-
</div>
52-
53-
<TagFormUpdate
54-
:device-uid="device.uid"
55-
:tags-list="device.tags"
56-
:has-authorization="canUpdateDeviceTag"
57-
@update="refreshDevices"
58-
data-test="tag-form-update-component"
59-
/>
60-
61-
<DeviceDelete
62-
variant="device"
63-
:has-authorization="true"
64-
:redirect="true"
65-
:uid="device.uid"
66-
@update="refreshDevices"
67-
data-test="device-delete-component"
68-
/>
69-
</v-list>
70-
</v-menu>
71-
</div>
47+
<v-list-item-title> Create Web Endpoint </v-list-item-title>
48+
</div>
49+
</v-list-item>
50+
</div>
51+
52+
<TagFormUpdate
53+
:device-uid="device.uid"
54+
:tags-list="device.tags"
55+
:has-authorization="canUpdateDeviceTag"
56+
@update="refreshDevices"
57+
data-test="tag-form-update-component"
58+
/>
59+
60+
<DeviceDelete
61+
variant="device"
62+
:has-authorization="true"
63+
:redirect="true"
64+
:uid="device.uid"
65+
@update="refreshDevices"
66+
data-test="device-delete-component"
67+
/>
68+
</v-list>
69+
</v-menu>
7270
</v-card-title>
7371

7472
<v-divider />
7573

7674
<v-card-text class="pa-4 pt-0">
77-
<div>
78-
<div class="text-overline mt-3">uid:</div>
79-
<div data-test="device-uid-field">
80-
<p>{{ device.uid }}</p>
81-
</div>
82-
</div>
83-
84-
<div v-if="device.identity">
85-
<div class="text-overline mt-3">mac:</div>
86-
<div data-test="device-mac-field">
87-
<code>
88-
{{ device.identity.mac }}
89-
</code>
90-
</div>
91-
</div>
92-
93-
<div v-if="device.info">
94-
<div class="text-overline mt-3">Operating System:</div>
95-
<div data-test="device-pretty-name-field">
96-
<DeviceIcon :icon="device.info.id" class="mr-2" />
97-
<span>{{ device.info.pretty_name }}</span>
98-
</div>
99-
</div>
100-
101-
<div v-if="device.info">
102-
<div class="text-overline mt-3">Agent Version:</div>
103-
<div data-test="device-version-field">
104-
<p>{{ device.info.version }}</p>
105-
</div>
106-
</div>
107-
108-
<div>
109-
<div class="text-overline mt-3">Tags:</div>
110-
<div v-if="device.tags" data-test="device-tags-field">
111-
<v-tooltip
112-
v-for="(tag, index) in device.tags"
113-
:key="index"
114-
bottom
115-
:disabled="!showTag(tag)"
116-
>
117-
<template #activator="{ props }">
118-
<v-chip size="small" v-bind="props" class="mr-2">
119-
{{ displayOnlyTenCharacters(tag) }}
120-
</v-chip>
121-
</template>
122-
123-
<span v-if="showTag(tag)">
124-
{{ tag }}
125-
</span>
126-
</v-tooltip>
127-
</div>
128-
</div>
129-
<div>
130-
<div class="text-overline mt-3">Last Seen:</div>
131-
<div data-test="device-last-seen-field">
132-
<p>{{ formatFullDateTime(device.last_seen) }}</p>
133-
</div>
134-
</div>
135-
75+
<v-row class="py-3">
76+
<v-col cols="12" md="6" class="my-0 py-0">
77+
<div data-test="device-uid-field">
78+
<div class="item-title">UID:</div>
79+
<p class="text-truncate">{{ device.uid }}</p>
80+
</div>
81+
82+
<div v-if="device.identity" data-test="device-mac-field">
83+
<div class="item-title">MAC:</div>
84+
<code>{{ device.identity.mac }}</code>
85+
</div>
86+
87+
<div v-if="device.info" data-test="device-pretty-name-field">
88+
<div class="item-title">Operating System:</div>
89+
<div>
90+
<DeviceIcon :icon="device.info.id" class="mr-2" />
91+
<span>{{ device.info.pretty_name }}</span>
92+
</div>
93+
</div>
94+
</v-col>
95+
96+
<v-col cols="12" md="6" class="my-0 py-0">
97+
<div v-if="device.info" data-test="device-version-field">
98+
<div class="item-title">Agent Version:</div>
99+
<p>{{ device.info.version }}</p>
100+
</div>
101+
102+
<div v-if="device.tags?.length" data-test="device-tags-field">
103+
<div class="item-title">Tags:</div>
104+
<div v-if="device.tags">
105+
<v-tooltip
106+
v-for="(tag, index) in device.tags"
107+
:key="index"
108+
bottom
109+
:disabled="!showTag(tag)"
110+
>
111+
<template #activator="{ props }">
112+
<v-chip size="small" v-bind="props" class="mr-2">
113+
{{ displayOnlyTenCharacters(tag) }}
114+
</v-chip>
115+
</template>
116+
117+
<span v-if="showTag(tag)">
118+
{{ tag }}
119+
</span>
120+
</v-tooltip>
121+
</div>
122+
</div>
123+
124+
<div data-test="device-last-seen-field">
125+
<div class="item-title">Last Seen:</div>
126+
<p>{{ formatFullDateTime(device.last_seen) }}</p>
127+
</div>
128+
</v-col>
129+
</v-row>
136130
</v-card-text>
137131
</v-card>
138132
<v-card class="mt-2 pa-4 bg-v-theme-surface" v-else>
@@ -200,3 +194,15 @@ const refreshDevices = async () => {
200194
};
201195
202196
</script>
197+
198+
<style lang="scss" scoped>
199+
.item-title {
200+
margin-top: 0.75rem;
201+
// Vuetify's text-overline styles
202+
font-size: 0.75rem;
203+
font-weight: 500;
204+
text-transform: uppercase;
205+
letter-spacing: 0.1666666667em;
206+
line-height: 2.667;
207+
}
208+
</style>

‎ui/tests/views/DetailsDevice.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ describe("Details Device", () => {
4848
latitude: 0,
4949
longitude: 0,
5050
},
51-
tags: [],
51+
tags: ["tag"],
5252
public_url: false,
5353
public_url_address: "",
5454
acceptable: false,

0 commit comments

Comments
 (0)