Skip to content
This repository was archived by the owner on Oct 28, 2023. It is now read-only.

Commit c2abc58

Browse files
olblakolblak
authored
Refactor Project Visualization (#49)
* Add endline Signed-off-by: Olivier Vernin <[email protected]> * Merge Project in one table Signed-off-by: Olivier Vernin <[email protected]> * fix project description Signed-off-by: Olivier Vernin <[email protected]> Signed-off-by: Olivier Vernin <[email protected]>
1 parent d6c1be8 commit c2abc58

File tree

2 files changed

+76
-128
lines changed

2 files changed

+76
-128
lines changed

‎src/components/HeadNavigation.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,4 @@
99
data: () => ({
1010
}),
1111
}
12-
</script>
12+
</script>

‎src/components/ReleaseDashboard.vue‎

Lines changed: 75 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -8,129 +8,41 @@
88
>
99
<v-row>
1010
<v-col
11-
class="text-right"
12-
cols="auto"
13-
lg="8"
14-
md="8"
15-
sm="12"
11+
class="text-center"
1612
>
1713
<h1>
1814
Dashboards
1915
</h1>
2016
</v-col>
2117
</v-row>
22-
2318
<v-row>
2419
<v-col
25-
class="text-right"
26-
cols="auto"
27-
lg="8"
28-
md="8"
29-
sm="12"
30-
>
31-
<p>
32-
Dashboards allow to visualize version information
33-
</p>
34-
<p>
35-
First, pick a dashboard
36-
</p>
37-
<p>
38-
Then a project within that dashboard
39-
</p>
40-
<p>
41-
Finally, you can detailed application information
42-
</p>
43-
</v-col>
44-
<v-col
45-
class="text-left"
46-
cols="auto"
47-
lg="2"
48-
md="2"
49-
sm="12"
20+
class="text-center"
5021
>
51-
<div
52-
v-for="dashboardInfo in dashboards" :key="dashboardInfo.name"
53-
>
54-
<v-btn
55-
v-if="dashboard.name == dashboardInfo.name"
56-
@click="setCurrentDashboardID(dashboardInfo.id)"
57-
class="mx-4"
58-
variant="text"
59-
:active="true"
60-
prepend-icon="mdi-arrow-right-circle"
61-
>
62-
{{ dashboardInfo.name }}
63-
</v-btn>
64-
<v-btn
65-
v-else
66-
@click="setCurrentDashboardID(dashboardInfo.id)"
67-
class="mx-4"
68-
variant="text"
69-
prepend-icon="mdi-arrow-right-circle-outline"
70-
>
71-
{{ dashboardInfo.name }}
72-
</v-btn>
73-
</div>
74-
</v-col>
75-
<v-col
76-
class="text-left"
77-
v-if="dashboard"
78-
cols="auto"
79-
lg="2"
80-
md="2"
81-
sm="12"
22+
<v-btn-toggle
23+
v-model="toggle_exclusive"
24+
divided rounded="xl"
25+
variant="outlined"
8226
>
8327
<div
84-
v-for="project in dashboard.projects" :key="project.name"
28+
class="d-flex align-center flex-column"
29+
v-for="dashboardInfo in dashboards" :key="dashboardInfo.name"
8530
>
86-
<v-btn
87-
v-if="currentProject.name == project.name"
88-
@click="setCurrentProject(project)"
89-
class="mx-4"
90-
variant="text"
91-
:active="true"
92-
prepend-icon="mdi-circle"
93-
>
94-
{{ project.name }}
95-
</v-btn>
96-
<v-btn
97-
v-else
98-
@click="setCurrentProject(project)"
99-
class="mx-4"
100-
variant="text"
101-
prepend-icon="mdi-circle-outline"
102-
>
103-
{{ project.name }}
104-
</v-btn>
31+
<v-btn
32+
@click="setCurrentDashboardID(dashboardInfo.id)"
33+
variant="text"
34+
size="x-large"
35+
>
36+
{{ dashboardInfo.name }}
37+
</v-btn>
10538
</div>
39+
</v-btn-toggle>
10640
</v-col>
10741
</v-row>
10842
</v-container>
10943

11044
<!-- Show Project Description -->
111-
<v-container v-if="currentProject">
112-
<v-row
113-
class="mx-auto">
114-
<v-col
115-
cols="auto"
116-
lg="12"
117-
md="12"
118-
sm="12"
119-
>
120-
<v-card
121-
elevation="1"
122-
shaped
123-
outline
124-
>
125-
<v-card-title>
126-
{{ currentProject.name }}
127-
</v-card-title>
128-
<v-card-text >
129-
<p>{{ currentProject.description }}</p>
130-
</v-card-text>
131-
</v-card>
132-
</v-col>
133-
</v-row>
45+
<v-container v-if="currentDashboardID">
13446
<!--
13547
Show Project application in a table
13648
-->
@@ -153,10 +65,16 @@
15365
Status
15466
</th>
15567
<th class="text-left">
156-
Name
68+
Project
15769
</th>
15870
<th class="text-left">
159-
Description
71+
Application
72+
</th>
73+
<th class="text-left">
74+
Created At
75+
</th>
76+
<th class="text-left">
77+
Updated At
16078
</th>
16179
<th class="text-left">
16280
Apps
@@ -165,31 +83,44 @@
16583
</th>
16684
</tr>
16785
</thead>
168-
<tbody>
86+
<tbody
87+
v-for="project in dashboard.projects" :key="project.name"
88+
>
16989
<tr
170-
v-for="item in currentProject.apps"
90+
v-for="item in project.apps"
17191
:key="item.name"
17292
>
17393
<td><v-icon :icon=getStatusIcon(item.status) :color=getStatusColor(item.status)></v-icon></td>
94+
<td>{{ project.name }}</td>
17495
<td>{{ item.name }}</td>
175-
<td>{{ item.description }}</td>
96+
<td>{{ item.createdAt }}</td>
97+
<td>{{ item.updatedAt }}</td>
17698
<td>
177-
<v-btn
178-
rounded
179-
density="compact"
180-
small
181-
v-for="spec in item.spec"
182-
:key="spec.name"
183-
>
184-
{{ spec.version }}
185-
</v-btn>
99+
<v-btn-toggle
100+
>
101+
<v-btn
102+
rounded
103+
density="compact"
104+
small
105+
v-for="spec in item.spec"
106+
:key="spec.name"
107+
>
108+
{{ spec.version }}
109+
</v-btn>
110+
</v-btn-toggle>
186111
</td>
187112
<td>
188113
<v-chip
189-
class="ma-2"
190-
@click="app=item"
114+
@click="app=item;currentProject=project"
115+
v-if="app.name == item.name"
116+
append-icon="mdi-arrow-down-circle"
117+
>
118+
</v-chip>
119+
<v-chip
120+
v-else
121+
@click="app=item;currentProject=project"
122+
append-icon="mdi-arrow-right-circle"
191123
>
192-
Details
193124
</v-chip>
194125
</td>
195126
</tr>
@@ -206,9 +137,10 @@
206137
>
207138
<v-card
208139
v-if="app"
209-
:flat=true
210140
shaped
211141
outline
142+
:border=true
143+
variant="elevated"
212144
>
213145
<v-row>
214146
<v-col
@@ -220,7 +152,24 @@
220152
<v-card
221153
:flat=true
222154
>
223-
<v-card-title>{{ app.name }}</v-card-title>
155+
<v-card-title>Project: {{ currentProject.name }}</v-card-title>
156+
<v-card-text>
157+
<p>{{ currentProject.description }}</p>
158+
</v-card-text>
159+
</v-card>
160+
</v-col>
161+
</v-row>
162+
<v-row>
163+
<v-col
164+
cols="auto"
165+
lg="12"
166+
md="12"
167+
sm="12"
168+
>
169+
<v-card
170+
:flat=true
171+
>
172+
<v-card-title>Application: {{ app.name }}</v-card-title>
224173
<v-card-text>
225174
<p>{{ app.description }}</p>
226175
</v-card-text>
@@ -240,9 +189,8 @@
240189
sm="12"
241190
>
242191
<v-card
243-
:border="true"
244-
variant="outlined"
245-
>
192+
:flat=true
193+
>
246194
<v-card-title>
247195
<v-row
248196
align-center="center"

0 commit comments

Comments
 (0)