Skip to content

Commit 501f146

Browse files
CrimCrim
authored
Minor UI Tweaks (#92)
* Fix minor UI issues * Fix minor UI issues * minor UI tweaks * minor UI tweaks * Rework Views index datatable
1 parent 0a37535 commit 501f146

File tree

7 files changed

+103
-40
lines changed

7 files changed

+103
-40
lines changed

‎kafka-webview-ui/src/main/frontend/css/app.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.overflow-scroll {
2+
overflow: scroll;
3+
}
4+
5+
input.overflow {
6+
background: transparent;
7+
border: none;
8+
width: 100%;
9+
}
10+
11+
.overflow-wrap {
12+
overflow-wrap: break-word;
13+
word-wrap: break-word;
14+
}

‎kafka-webview-ui/src/main/frontend/css/style.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8814,7 +8814,3 @@ hr.transparent {
88148814
top: 0;
88158815
width: 20px;
88168816
height: 20px; }
8817-
8818-
.overflow-scroll {
8819-
overflow: scroll;
8820-
}

‎kafka-webview-ui/src/main/java/org/sourcelab/kafka/webview/ui/controller/view/ViewController.java‎

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
import org.springframework.web.bind.annotation.PathVariable;
3838
import org.springframework.web.bind.annotation.RequestMapping;
3939
import org.springframework.web.bind.annotation.RequestMethod;
40+
import org.springframework.web.bind.annotation.RequestParam;
4041
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
4142

4243
import java.util.HashMap;
@@ -59,25 +60,49 @@ public class ViewController extends BaseController {
5960
* GET views index.
6061
*/
6162
@RequestMapping(path = "", method = RequestMethod.GET)
62-
public String index(final Model model) {
63-
63+
public String index(
64+
final Model model,
65+
@RequestParam(name = "clusterId", required = false) final Long clusterId
66+
) {
6467
// Setup breadcrumbs
65-
new BreadCrumbManager(model)
66-
.addCrumb("View", null);
67-
68-
// Retrieve all clusters
69-
final Iterable<Cluster> clusters = clusterRepository.findAllByOrderByNameAsc();
70-
final Map<Long, Iterable<View>> viewsByClusterId = new HashMap<>();
71-
72-
for (final Cluster cluster: clusters) {
73-
// Retrieve all views for cluster
74-
final Iterable<View> views = viewRepository.findAllByClusterIdOrderByNameAsc(cluster.getId());
75-
viewsByClusterId.put(cluster.getId(), views);
68+
final BreadCrumbManager breadCrumbManager = new BreadCrumbManager(model);
69+
70+
// Retrieve all clusters and index by id
71+
final Map<Long, Cluster> clustersById = new HashMap<>();
72+
clusterRepository
73+
.findAllByOrderByNameAsc()
74+
.forEach((cluster) -> clustersById.put(cluster.getId(), cluster));
75+
76+
final Iterable<View> views;
77+
if (clusterId == null) {
78+
// Retrieve all views order by name asc.
79+
views = viewRepository.findAllByOrderByNameAsc();
80+
} else {
81+
// Retrieve only views for the cluster
82+
views = viewRepository.findAllByClusterIdOrderByNameAsc(clusterId);
7683
}
7784

7885
// Set model Attributes
79-
model.addAttribute("viewsByClusterId", viewsByClusterId);
80-
model.addAttribute("clusters", clusters);
86+
model.addAttribute("viewList", views);
87+
model.addAttribute("clustersById", clustersById);
88+
89+
final String clusterName;
90+
if (clusterId != null && clustersById.containsKey(clusterId)) {
91+
// If filtered by a cluster
92+
clusterName = clustersById.get(clusterId).getName();
93+
94+
// Add top level breadcrumb
95+
breadCrumbManager
96+
.addCrumb("View", "/view")
97+
.addCrumb("Cluster: " + clusterName);
98+
} else {
99+
// If showing all views
100+
clusterName = null;
101+
102+
// Add top level breadcrumb
103+
breadCrumbManager.addCrumb("View", null);
104+
}
105+
model.addAttribute("clusterName", clusterName);
81106

82107
return "view/index";
83108
}

‎kafka-webview-ui/src/main/resources/templates/cluster/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<a th:href="'/cluster/' + ${cluster.id}" th:text="${cluster.name}"></a>
3333
</td>
3434
<td>
35-
<a th:href="'/view#cluster' + ${cluster.id}" th:text="${viewsByClusterId.get(cluster.getId())} + ' Views'"></a>
35+
<a th:href="'/view?clusterId=' + ${cluster.id}" th:text="${viewsByClusterId.get(cluster.getId())} + ' Views'"></a>
3636
</td>
3737
<td>
3838
<span

‎kafka-webview-ui/src/main/resources/templates/cluster/readBroker.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,11 @@ <h4 class="alert-heading">Broker Not Found</h4>
263263
<tr>
264264
<td>{{name}}</td>
265265
<td>
266-
{{value}}
266+
<input
267+
class="overflow"
268+
type="text"
269+
value="{{value}}"
270+
readonly/>
267271
</td>
268272
<td>
269273
{{#if isDefault}}

‎kafka-webview-ui/src/main/resources/templates/layout.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030

3131
<!-- Main styles for this application -->
3232
<link href="/css/style.css" rel="stylesheet">
33+
<link href="/css/app.css" rel="stylesheet">
3334
<link href="/vendors/css/jquery-ui.min.css" rel="stylesheet">
3435
<link href="/vendors/css/jquery-ui-timepicker-addon.min.css" rel="stylesheet">
3536

@@ -109,7 +110,7 @@
109110
<i class="icon-layers"></i> Clusters
110111
</a>
111112
<ul class="nav-dropdown-items">
112-
<li class="nav-item" th:each="cluster : ${MenuClusters}">
113+
<li class="nav-item" th:title="${cluster.name}" th:each="cluster : ${MenuClusters}">
113114
<a class="nav-link" th:href="'/cluster/' + ${cluster.id}">
114115
<i class="icon-layers"></i>
115116
[[${cluster.name}]]
@@ -124,7 +125,7 @@
124125
<i class="icon-eye"></i> Views
125126
</a>
126127
<ul class="nav-dropdown-items">
127-
<li class="nav-item" th:each="view : ${MenuViews}">
128+
<li class="nav-item" th:title="${view.name}" th:each="view : ${MenuViews}">
128129
<a class="nav-link" th:href="@{/view/{id}(id=${view.id})}">
129130
<i class="icon-eye"></i>
130131
[[${view.name}]]
@@ -237,7 +238,7 @@
237238

238239
<!-- Start footer -->
239240
<footer class="app-footer">
240-
<a href="https://www.github.com/crim/kafka-webview">Kafka WebView</a>
241+
<a href="https://www.github.com/sourcelaborg/kafka-webview">Kafka WebView</a>
241242
<span class="float-right">
242243
UI by <a href="http://coreui.io">CoreUI</a>
243244
</span>

‎kafka-webview-ui/src/main/resources/templates/view/index.html‎

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<section layout:fragment="content">
1313
<div class="container">
1414

15-
<div class="row" th:if="${clusters.isEmpty()}">
15+
<div class="row" th:if="${clustersById.isEmpty()}">
1616
<!-- No Clusters Found -->
1717
<div class="col-lg-12">
1818
<div class="card">
@@ -34,42 +34,65 @@ <h4 class="alert-heading"><strong>No Kafka Clusters Found</strong></h4>
3434
</div>
3535
</div>
3636
</div>
37-
<div class="row">
38-
<div class="col-lg-6" th:each="cluster: ${clusters}">
37+
38+
<div class="row" th:if="${!clustersById.isEmpty()} and ${viewList.isEmpty()}">
39+
<!-- No Views Found -->
40+
<div class="col-lg-12">
41+
<div class="card">
42+
<div class="alert alert-warning" role="alert">
43+
<h4 class="alert-heading"><strong>No Views Found</strong></h4>
44+
<p>
45+
It looks like you have no Views configured yet!<br/>
46+
</p>
47+
<p class="mb-0">
48+
<span sec:authorize="hasRole('ROLE_ADMIN')">
49+
Let's head over and set one up now!
50+
<a href="/configuration/view/create">Setup new View</a>
51+
</span>
52+
<span sec:authorize="!hasRole('ROLE_ADMIN')">
53+
Ask an Administrator to configure a view.
54+
</span>
55+
</p>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
61+
<div class="row" th:if="${not clustersById.isEmpty()} and ${not viewList.isEmpty()}">
62+
<div class="col-lg-12">
3963
<div class="card">
40-
<div class="card-header">
64+
<div class="card-header" th:if="${clusterName != null}">
4165
<i class="fa fa-align-justify"></i>
42-
Cluster <strong th:text="${cluster.name}"></strong>
66+
Views for <b>[[${clusterName}]]</b> Cluster
67+
</div>
68+
<div class="card-header" th:if="${clusterName == null}">
69+
<i class="fa fa-align-justify"></i>
70+
All Views
4371
</div>
4472
<div class="card-body">
4573
<table class="table table-bordered table-striped table-sm">
4674
<thead>
4775
<tr>
4876
<th>View</th>
4977
<th>Topic</th>
50-
<th>Partitions</th>
78+
<th>Cluster</th>
5179
<th colspan="2"></th>
5280
</tr>
5381
</thead>
5482
<tbody>
55-
<tr th:unless="${viewsByClusterId.get(cluster.getId()).isEmpty()}" th:each="view : ${viewsByClusterId.get(cluster.getId())}">
56-
<td th:text="${view.name}">
57-
</td>
83+
<tr th:each="view : ${viewList}">
84+
<td th:text="${view.name}"></td>
5885
<td th:text="${view.topic}"></td>
59-
<td th:text="${view.displayPartitions()}"></td>
86+
<td>
87+
<a th:href="'/cluster/' + ${view.cluster.id}" th:text="${clustersById.get(view.cluster.id).name}"></a>
88+
</td>
6089
<td>
6190
<a th:href="'/view/' + ${view.id}">Browse</a>
6291
</td>
6392
<td>
6493
<a th:href="'/stream/' + ${view.id}">Stream</a>
6594
</td>
6695
</tr>
67-
<!-- Empty List -->
68-
<tr th:if="${viewsByClusterId.get(cluster.getId()).isEmpty()}" >
69-
<td colspan="3" class="text-center">
70-
No Views Found!
71-
</td>
72-
</tr>
7396
</tbody>
7497
</table>
7598
</div>

0 commit comments

Comments
 (0)