Skip to content

Commit 7eabeef

Browse files
marle3003marle3003
committed
improve responsiveness
1 parent 5d0bfa4 commit 7eabeef

File tree

12 files changed

+309
-292
lines changed

12 files changed

+309
-292
lines changed

‎webui/src/assets/dashboard.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
position: fixed;
9191
top: 4rem;
9292
z-index: 10;
93-
width: 100%;
93+
width: 90%;
9494
padding-top: 15px;
9595
padding-left: 8px;
9696
padding-bottom: 30px;

‎webui/src/components/dashboard/JobCard.vue‎

Lines changed: 99 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -109,110 +109,112 @@ function getStatus(data: JobExecution) {
109109
<section class="card" aria-labelledby="jobs-title">
110110
<div class="card-body">
111111
<h2 id="jobs-title" class="card-title text-center">Recent Jobs</h2>
112-
<table class="table dataTable events" aria-labelledby="jobs-title">
113-
<thead>
114-
<tr>
115-
<th scope="col" class="text-left" style="width: 15px;"></th>
116-
<th scope="col" class="text-left col-1">Status</th>
117-
<th scope="col" class="text-left col">Name</th>
118-
<th scope="col" class="text-center col-1">Schedule</th>
119-
<th scope="col" class="text-center col-2">Time</th>
120-
<th scope="col" class="text-center col-2">Next Run</th>
121-
</tr>
122-
</thead>
123-
<tbody>
124-
<template v-for="(event, index) of events" >
125-
<tr data-bs-toggle="collapse" :data-bs-target="'#event_'+index" aria-expanded="false" :set="data = eventData(event)" >
126-
<td style="padding-left: 5px;"><span class="bi bi-chevron-right"></span><span class="bi bi-chevron-down"></span></td>
127-
<td :set="status = getStatus(data!)">
128-
<span class="badge bg-danger me-2" v-if="status === 'error'">Error</span>
129-
<span class="badge bg-warning me-2" v-else-if="status === 'warning'">Warning</span>
130-
<span class="badge bg-success me-2" v-else>Success</span>
131-
</td>
132-
<td>{{ data!.tags.name }}</td>
133-
<td class="text-center">{{ data!.schedule }}</td>
134-
<td class="text-center">{{ format(event.time) }}</td>
135-
<td class="text-center" :set="timer = timers[event.id]">
136-
<span v-if="timer" :title="format(data!.nextRun)">{{ formatTimer(timer) }}</span>
137-
<span v-else-if="data?.nextRun">{{ format(data.nextRun) }}</span>
138-
<span v-else>-</span>
139-
</td>
112+
<div class="table-responsive-sm">
113+
<table class="table dataTable events" aria-labelledby="jobs-title">
114+
<thead>
115+
<tr>
116+
<th scope="col" class="text-left" style="width: 15px;"></th>
117+
<th scope="col" class="text-left col-1">Status</th>
118+
<th scope="col" class="text-left col">Name</th>
119+
<th scope="col" class="text-center col-1">Schedule</th>
120+
<th scope="col" class="text-center col-2">Time</th>
121+
<th scope="col" class="text-center col-2">Next Run</th>
140122
</tr>
141-
<tr class="collapse-row" :set="data = eventData(event)">
142-
<td colspan="6" v-if="data" >
143-
<div class="collapse" :id="'event_'+index" style="padding: 2rem;">
144-
<h5>Info</h5>
145-
<div class="mb-3">
146-
<div class="row">
147-
<div class="col-3" :set="timer = timers[event.id]">
148-
<div class="label">Next Run</div>
149-
<div>
150-
<span>{{ format(data.nextRun) }}</span>
123+
</thead>
124+
<tbody>
125+
<template v-for="(event, index) of events" >
126+
<tr data-bs-toggle="collapse" :data-bs-target="'#event_'+index" aria-expanded="false" :set="data = eventData(event)" >
127+
<td style="padding-left: 5px;"><span class="bi bi-chevron-right"></span><span class="bi bi-chevron-down"></span></td>
128+
<td :set="status = getStatus(data!)">
129+
<span class="badge bg-danger me-2" v-if="status === 'error'">Error</span>
130+
<span class="badge bg-warning me-2" v-else-if="status === 'warning'">Warning</span>
131+
<span class="badge bg-success me-2" v-else>Success</span>
132+
</td>
133+
<td>{{ data!.tags.name }}</td>
134+
<td class="text-center">{{ data!.schedule }}</td>
135+
<td class="text-center">{{ format(event.time) }}</td>
136+
<td class="text-center" :set="timer = timers[event.id]">
137+
<span v-if="timer" :title="format(data!.nextRun)">{{ formatTimer(timer) }}</span>
138+
<span v-else-if="data?.nextRun">{{ format(data.nextRun) }}</span>
139+
<span v-else>-</span>
140+
</td>
141+
</tr>
142+
<tr class="collapse-row" :set="data = eventData(event)">
143+
<td colspan="6" v-if="data" >
144+
<div class="collapse" :id="'event_'+index" style="padding: 2rem;">
145+
<h5>Info</h5>
146+
<div class="mb-3">
147+
<div class="row">
148+
<div class="col-3" :set="timer = timers[event.id]">
149+
<div class="label">Next Run</div>
150+
<div>
151+
<span>{{ format(data.nextRun) }}</span>
152+
</div>
153+
</div>
154+
<div class="col-2">
155+
<div class="label">Runs</div>
156+
<div v-if="data.maxRuns > 0">{{ data.runs }} / {{ data.maxRuns }}</div>
157+
<div v-else>{{ data.runs }}</div>
158+
</div>
159+
<div class="col-2">
160+
<div class="label">Duration</div>
161+
<div>{{ prettyDuration(data!.duration) }}</div>
151162
</div>
152-
</div>
153-
<div class="col-2">
154-
<div class="label">Runs</div>
155-
<div v-if="data.maxRuns > 0">{{ data.runs }} / {{ data.maxRuns }}</div>
156-
<div v-else>{{ data.runs }}</div>
157-
</div>
158-
<div class="col-2">
159-
<div class="label">Duration</div>
160-
<div>{{ prettyDuration(data!.duration) }}</div>
161163
</div>
162164
</div>
165+
<h5>Logs</h5>
166+
<div class="mb-3">
167+
<ul class="list-group">
168+
<li v-for="log in data.logs" class="list-group-item">
169+
<span class="text-body log">
170+
<span class="bi bi-exclamation-triangle-fill text-warning" v-if="log.level == 'warn'"></span>
171+
<span class="bi bi-x-circle-fill text-danger" v-else-if="log.level == 'error'"></span>
172+
<span class="bi bi-bug-fill text-info" v-else-if="log.level == 'debug'"></span>
173+
<span class="bi bi-chat-dots text-primary" v-else></span>
174+
<span class="ms-2" v-html="parseUrls(log.message)"></span>
175+
</span>
176+
</li>
177+
</ul>
178+
<p v-if="!data.logs || data.logs.length == 0">This job did not produce any logs. You can use <code>console.log()</code> or <code>console.error()</code> in your script to output information.</p>
163179
</div>
164-
<h5>Logs</h5>
165-
<div class="mb-3">
166-
<ul class="list-group">
167-
<li v-for="log in data.logs" class="list-group-item">
168-
<span class="text-body log">
169-
<span class="bi bi-exclamation-triangle-fill text-warning" v-if="log.level == 'warn'"></span>
170-
<span class="bi bi-x-circle-fill text-danger" v-else-if="log.level == 'error'"></span>
171-
<span class="bi bi-bug-fill text-info" v-else-if="log.level == 'debug'"></span>
172-
<span class="bi bi-chat-dots text-primary" v-else></span>
173-
<span class="ms-2" v-html="parseUrls(log.message)"></span>
174-
</span>
175-
</li>
176-
</ul>
177-
<p v-if="!data.logs || data.logs.length == 0">This job did not produce any logs. You can use <code>console.log()</code> or <code>console.error()</code> in your script to output information.</p>
178-
</div>
179-
<div class="alert alert-danger" role="alert" v-if="data.error">
180-
<h5 class="alert-heading">Error</h5>
181-
<p>{{ data.error.message }}</p>
182-
</div>
183-
<h5>
184-
Tags
185-
<a href="/docs/javascript-api/mokapi/eventhandler/scheduledeventargs" class="ms-1" title="Learn how to define tags for your job" rel="noopener">
186-
<span class="bi bi-question-circle" aria-hidden="true"></span>
187-
</a>
188-
</h5>
189-
<table class="table dataTable">
190-
<thead>
191-
<tr>
192-
<th scope="col" class="text-left">Name</th>
193-
<th scope="col" class="text-left w-75">Value</th>
194-
</tr>
195-
</thead>
196-
<tbody>
197-
<template v-for="(value, key) of data.tags">
180+
<div class="alert alert-danger" role="alert" v-if="data.error">
181+
<h5 class="alert-heading">Error</h5>
182+
<p>{{ data.error.message }}</p>
183+
</div>
184+
<h5>
185+
Tags
186+
<a href="/docs/javascript-api/mokapi/eventhandler/scheduledeventargs" class="ms-1" title="Learn how to define tags for your job" rel="noopener">
187+
<span class="bi bi-question-circle" aria-hidden="true"></span>
188+
</a>
189+
</h5>
190+
<table class="table dataTable">
191+
<thead>
198192
<tr>
199-
<td>{{ key }}</td>
200-
<td>
201-
<router-link v-if="key === 'file' && data.tags.fileKey" :to="{ name: getRouteName('config').value, params: { id: data.tags.fileKey } }">
202-
{{ value }}
203-
</router-link>
204-
<span v-else>{{ value }}</span>
205-
</td>
193+
<th scope="col" class="text-left">Name</th>
194+
<th scope="col" class="text-left w-75">Value</th>
206195
</tr>
207-
</template>
208-
</tbody>
209-
</table>
210-
</div>
211-
</td>
212-
</tr>
213-
</template>
214-
</tbody>
215-
</table>
196+
</thead>
197+
<tbody>
198+
<template v-for="(value, key) of data.tags">
199+
<tr>
200+
<td>{{ key }}</td>
201+
<td>
202+
<router-link v-if="key === 'file' && data.tags.fileKey" :to="{ name: getRouteName('config').value, params: { id: data.tags.fileKey } }">
203+
{{ value }}
204+
</router-link>
205+
<span v-else>{{ value }}</span>
206+
</td>
207+
</tr>
208+
</template>
209+
</tbody>
210+
</table>
211+
</div>
212+
</td>
213+
</tr>
214+
</template>
215+
</tbody>
216+
</table>
217+
</div>
216218
</div>
217219
</section>
218220
</template>

0 commit comments

Comments
 (0)