karafka-web 0.6.3 → 0.7.0

data/lib/karafka/web/ui/public/javascripts/tabs.js

@@ -0,0 +1,59 @@
+// Bootstrap tabs management with local storage for selected tab + restore
+//
+// Because we have pages where tabs are under the same view and some of them include charts, we
+// keep track of them and in case user is back, we restore the last tab that was active
+
+function readAllActiveTabs() {
+  let raw_active_tabs = localStorage.karafkaActiveTabs
+
+  if (raw_active_tabs == undefined) {
+    return {}
+  } else {
+    return JSON.parse(raw_active_tabs)
+  }
+}
+
+function saveAllActiveTabs(data) {
+  localStorage.karafkaActiveTabs = JSON.stringify(data)
+}
+
+function saveCurrentActiveTabs() {
+  let active_tabs = document.querySelectorAll('.tab-content > .active')
+  let url = window.location.href.split('?')[0]
+  let current = []
+  let tabs = readAllActiveTabs()
+
+  for (var i = 0; i < active_tabs.length; i++) {
+    var active_tab = active_tabs[i]
+    current.push(active_tab.id)
+  }
+
+  tabs[url] = current
+  saveAllActiveTabs(tabs)
+}
+
+function setActiveTabs() {
+  let url = window.location.href.split('?')[0]
+  let tabs = readAllActiveTabs()
+  let active_tabs = tabs[url]
+
+  if (tabs[url] == undefined) { return }
+
+  for (var i = 0; i < active_tabs.length; i++) {
+    var active_tab = active_tabs[i]
+    var tab = document.getElementById(active_tab + '-tab')
+
+    if (tab != undefined) {
+      var bsTab = new bootstrap.Tab(tab)
+      bsTab.show()
+    }
+  }
+}
+
+function manageTabs() {
+  setActiveTabs()
+
+  document.addEventListener('shown.bs.tab', function (event) {
+    saveCurrentActiveTabs()
+  })
+}

data/lib/karafka/web/ui/public/stylesheets/application.css

@@ -2,6 +2,9 @@ body {
   background-color: #f5f6fe;
   font-size: 95%;
   color: #393939;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
 }
 
 #content {
@@ -112,3 +115,11 @@ code.wrapped {
 .blurred {
   filter: blur(4px)
 }
+
+main {
+  flex: 1;
+}
+
+.chartjs-wrapper {
+  height: 250px;
+}

data/lib/karafka/web/ui/public/stylesheets/datepicker.min.css

@@ -0,0 +1,12 @@
+/*
+ * Air Datepicker  v3.4.0 (https://air-datepicker.com)
+ * Copyright (c) Timofey Marochkin
+ * Licensed under MIT (https://github.com/t1m0n/air-datepicker/blob/v3/LICENSE.md)
+*/
+.air-datepicker-cell.-year-.-other-decade-,.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.air-datepicker-cell.-year-.-other-decade-:hover,.air-datepicker-cell.-day-.-other-month-:hover{color:var(--adp-color-other-month-hover)}.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.-selected-.air-datepicker-cell.-year-.-other-decade-,.-selected-.air-datepicker-cell.-day-.-other-month-{color:#fff;background:var(--adp-background-color-selected-other-month)}.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-selected-.-focus-.air-datepicker-cell.-day-.-other-month-{background:var(--adp-background-color-selected-other-month-focused)}.-in-range-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range);color:var(--adp-color)}.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range-focused)}.air-datepicker-cell.-year-.-other-decade-:empty,.air-datepicker-cell.-day-.-other-month-:empty{background:none;border:none}.air-datepicker-cell{border-radius:var(--adp-cell-border-radius);box-sizing:border-box;cursor:pointer;display:flex;position:relative;align-items:center;justify-content:center;z-index:1}.air-datepicker-cell.-focus-{background:var(--adp-cell-background-color-hover)}.air-datepicker-cell.-current-{color:var(--adp-color-current-date)}.air-datepicker-cell.-current-.-focus-{color:var(--adp-color)}.air-datepicker-cell.-current-.-in-range-{color:var(--adp-color-current-date)}.air-datepicker-cell.-disabled-{cursor:default;color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-in-range-{color:var(--adp-color-disabled-in-range)}.air-datepicker-cell.-disabled-.-current-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-in-range-{background:var(--adp-cell-background-color-in-range);border-radius:0}.air-datepicker-cell.-in-range-:hover{background:var(--adp-cell-background-color-in-range-hover)}.air-datepicker-cell.-range-from-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius)}.air-datepicker-cell.-range-to-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0}.air-datepicker-cell.-range-to-.-range-from-{border-radius:var(--adp-cell-border-radius)}.air-datepicker-cell.-selected-{color:#fff;border:none;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-current-{color:#fff;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-focus-{background:var(--adp-cell-background-color-selected-hover)}
+.air-datepicker-body{transition:all var(--adp-transition-duration) var(--adp-transition-ease)}.air-datepicker-body.-hidden-{display:none}.air-datepicker-body--day-names{display:grid;grid-template-columns:repeat(7, var(--adp-day-cell-width));margin:8px 0 3px}.air-datepicker-body--day-name{color:var(--adp-day-name-color);display:flex;align-items:center;justify-content:center;flex:1;text-align:center;text-transform:uppercase;font-size:.8em}.air-datepicker-body--day-name.-clickable-{cursor:pointer}.air-datepicker-body--day-name.-clickable-:hover{color:var(--adp-day-name-color-hover)}.air-datepicker-body--cells{display:grid}.air-datepicker-body--cells.-days-{grid-template-columns:repeat(7, var(--adp-day-cell-width));grid-auto-rows:var(--adp-day-cell-height)}.air-datepicker-body--cells.-months-{grid-template-columns:repeat(3, 1fr);grid-auto-rows:var(--adp-month-cell-height)}.air-datepicker-body--cells.-years-{grid-template-columns:repeat(4, 1fr);grid-auto-rows:var(--adp-year-cell-height)}
+.air-datepicker-nav{display:flex;justify-content:space-between;border-bottom:1px solid var(--adp-border-color-inner);min-height:var(--adp-nav-height);padding:var(--adp-padding);box-sizing:content-box}.-only-timepicker- .air-datepicker-nav{display:none}.air-datepicker-nav--title,.air-datepicker-nav--action{display:flex;cursor:pointer;align-items:center;justify-content:center}.air-datepicker-nav--action{width:var(--adp-nav-action-size);border-radius:var(--adp-border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none}.air-datepicker-nav--action:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--action:active{background:var(--adp-background-color-active)}.air-datepicker-nav--action.-disabled-{visibility:hidden}.air-datepicker-nav--action svg{width:32px;height:32px}.air-datepicker-nav--action path{fill:none;stroke:var(--adp-nav-arrow-color);stroke-width:2px}.air-datepicker-nav--title{border-radius:var(--adp-border-radius);padding:0 8px}.air-datepicker-nav--title i{font-style:normal;color:var(--adp-nav-color-secondary);margin-left:.3em}.air-datepicker-nav--title:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--title:active{background:var(--adp-background-color-active)}.air-datepicker-nav--title.-disabled-{cursor:default;background:none}
+.air-datepicker-buttons{display:grid;grid-auto-columns:1fr;grid-auto-flow:column}.air-datepicker-button{display:inline-flex;color:var(--adp-btn-color);border-radius:var(--adp-btn-border-radius);cursor:pointer;height:var(--adp-btn-height);border:none;background:rgba(255,255,255,0)}.air-datepicker-button:hover{color:var(--adp-btn-color-hover);background:var(--adp-btn-background-color-hover)}.air-datepicker-button:focus{color:var(--adp-btn-color-hover);background:var(--adp-btn-background-color-hover);outline:none}.air-datepicker-button:active{background:var(--adp-btn-background-color-active)}.air-datepicker-button span{outline:none;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
+.air-datepicker-time{display:grid;grid-template-columns:max-content 1fr;grid-column-gap:12px;align-items:center;position:relative;padding:0 var(--adp-time-padding-inner)}.-only-timepicker- .air-datepicker-time{border-top:none}.air-datepicker-time--current{display:flex;align-items:center;flex:1;font-size:14px;text-align:center}.air-datepicker-time--current-colon{margin:0 2px 3px;line-height:1}.air-datepicker-time--current-hours,.air-datepicker-time--current-minutes{line-height:1;font-size:19px;font-family:"Century Gothic",CenturyGothic,AppleGothic,sans-serif;position:relative;z-index:1}.air-datepicker-time--current-hours:after,.air-datepicker-time--current-minutes:after{content:"";background:var(--adp-background-color-hover);border-radius:var(--adp-border-radius);position:absolute;left:-2px;top:-3px;right:-2px;bottom:-2px;z-index:-1;opacity:0}.air-datepicker-time--current-hours.-focus-:after,.air-datepicker-time--current-minutes.-focus-:after{opacity:1}.air-datepicker-time--current-ampm{text-transform:uppercase;align-self:flex-end;color:var(--adp-time-day-period-color);margin-left:6px;font-size:11px;margin-bottom:1px}.air-datepicker-time--row{display:flex;align-items:center;font-size:11px;height:17px;background:linear-gradient(to right, var(--adp-time-track-color), var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat}.air-datepicker-time--row:first-child{margin-bottom:4px}.air-datepicker-time--row input[type=range]{background:none;cursor:pointer;flex:1;height:100%;width:100%;padding:0;margin:0;-webkit-appearance:none}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}.air-datepicker-time--row input[type=range]::-ms-tooltip{display:none}.air-datepicker-time--row input[type=range]:hover::-webkit-slider-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:hover::-moz-range-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:hover::-ms-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:focus{outline:none}.air-datepicker-time--row input[type=range]:focus::-webkit-slider-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]:focus::-moz-range-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]:focus::-ms-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-webkit-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-moz-range-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-moz-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-ms-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-ms-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{margin-top:calc(var(--adp-time-thumb-size)/2*-1)}.air-datepicker-time--row input[type=range]::-webkit-slider-runnable-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0,0,0,0);background:rgba(0,0,0,0)}.air-datepicker-time--row input[type=range]::-moz-range-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0,0,0,0);background:rgba(0,0,0,0)}.air-datepicker-time--row input[type=range]::-ms-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0,0,0,0);background:rgba(0,0,0,0)}.air-datepicker-time--row input[type=range]::-ms-fill-lower{background:rgba(0,0,0,0)}.air-datepicker-time--row input[type=range]::-ms-fill-upper{background:rgba(0,0,0,0)}
+.air-datepicker{--adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--adp-font-size: 14px;--adp-width: 246px;--adp-z-index: 100;--adp-padding: 4px;--adp-grid-areas: "nav" "body" "timepicker" "buttons";--adp-transition-duration: .3s;--adp-transition-ease: ease-out;--adp-transition-offset: 8px;--adp-background-color: #fff;--adp-background-color-hover: #f0f0f0;--adp-background-color-active: #eaeaea;--adp-background-color-in-range: rgba(92, 196, 239, .1);--adp-background-color-in-range-focused: rgba(92, 196, 239, .2);--adp-background-color-selected-other-month-focused: #8ad5f4;--adp-background-color-selected-other-month: #a2ddf6;--adp-color: #4a4a4a;--adp-color-secondary: #9c9c9c;--adp-accent-color: #4eb5e6;--adp-color-current-date: var(--adp-accent-color);--adp-color-other-month: #dedede;--adp-color-disabled: #aeaeae;--adp-color-disabled-in-range: #939393;--adp-color-other-month-hover: #c5c5c5;--adp-border-color: #dbdbdb;--adp-border-color-inner: #efefef;--adp-border-radius: 4px;--adp-border-color-inline: #d7d7d7;--adp-nav-height: 32px;--adp-nav-arrow-color: var(--adp-color-secondary);--adp-nav-action-size: 32px;--adp-nav-color-secondary: var(--adp-color-secondary);--adp-day-name-color: #ff9a19;--adp-day-name-color-hover: #8ad5f4;--adp-day-cell-width: 1fr;--adp-day-cell-height: 32px;--adp-month-cell-height: 42px;--adp-year-cell-height: 56px;--adp-pointer-size: 10px;--adp-poiner-border-radius: 2px;--adp-pointer-offset: 14px;--adp-cell-border-radius: 4px;--adp-cell-background-color-hover: var(--adp-background-color-hover);--adp-cell-background-color-selected: #5cc4ef;--adp-cell-background-color-selected-hover: #45bced;--adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);--adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);--adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);--adp-btn-height: 32px;--adp-btn-color: var(--adp-accent-color);--adp-btn-color-hover: var(--adp-color);--adp-btn-border-radius: var(--adp-border-radius);--adp-btn-background-color-hover: var(--adp-background-color-hover);--adp-btn-background-color-active: var(--adp-background-color-active);--adp-time-track-height: 1px;--adp-time-track-color: #dedede;--adp-time-track-color-hover: #b1b1b1;--adp-time-thumb-size: 12px;--adp-time-padding-inner: 10px;--adp-time-day-period-color: var(--adp-color-secondary);--adp-mobile-font-size: 16px;--adp-mobile-nav-height: 40px;--adp-mobile-width: 320px;--adp-mobile-day-cell-height: 38px;--adp-mobile-month-cell-height: 48px;--adp-mobile-year-cell-height: 64px}.air-datepicker-overlay{--adp-overlay-background-color: rgba(0, 0, 0, .3);--adp-overlay-transition-duration: .3s;--adp-overlay-transition-ease: ease-out;--adp-overlay-z-index: 99}
+.air-datepicker{background:var(--adp-background-color);border:1px solid var(--adp-border-color);box-shadow:0 4px 12px rgba(0,0,0,.15);border-radius:var(--adp-border-radius);box-sizing:content-box;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(4, max-content);grid-template-areas:var(--adp-grid-areas);font-family:var(--adp-font-family),sans-serif;font-size:var(--adp-font-size);color:var(--adp-color);width:var(--adp-width);position:absolute;transition:opacity var(--adp-transition-duration) var(--adp-transition-ease),transform var(--adp-transition-duration) var(--adp-transition-ease);z-index:var(--adp-z-index)}.air-datepicker:not(.-custom-position-){opacity:0}.air-datepicker.-from-top-{transform:translateY(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-from-right-{transform:translateX(var(--adp-transition-offset))}.air-datepicker.-from-bottom-{transform:translateY(var(--adp-transition-offset))}.air-datepicker.-from-left-{transform:translateX(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-active-:not(.-custom-position-){transform:translate(0, 0);opacity:1}.air-datepicker.-active-.-custom-position-{transition:none}.air-datepicker.-inline-{border-color:var(--adp-border-color-inline);box-shadow:none;position:static;left:auto;right:auto;opacity:1;transform:none}.air-datepicker.-inline- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-{--adp-font-size: var(--adp-mobile-font-size);--adp-day-cell-height: var(--adp-mobile-day-cell-height);--adp-month-cell-height: var(--adp-mobile-month-cell-height);--adp-year-cell-height: var(--adp-mobile-year-cell-height);--adp-nav-height: var(--adp-mobile-nav-height);--adp-nav-action-size: var(--adp-mobile-nav-height);position:fixed;width:var(--adp-mobile-width);border:none}.air-datepicker.-is-mobile- *{-webkit-tap-highlight-color:rgba(0,0,0,0)}.air-datepicker.-is-mobile- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-:not(.-custom-position-){transform:translate(-50%, calc(-50% + var(--adp-transition-offset)))}.air-datepicker.-is-mobile-.-active-:not(.-custom-position-){transform:translate(-50%, -50%)}.air-datepicker.-custom-position-{transition:none}.air-datepicker-global-container{position:absolute;left:0;top:0}.air-datepicker--pointer{--pointer-half-size: calc(var(--adp-pointer-size) / 2);position:absolute;width:var(--adp-pointer-size);height:var(--adp-pointer-size);z-index:-1}.air-datepicker--pointer:after{content:"";position:absolute;background:#fff;border-top:1px solid var(--adp-border-color-inline);border-right:1px solid var(--adp-border-color-inline);border-top-right-radius:var(--adp-poiner-border-radius);width:var(--adp-pointer-size);height:var(--adp-pointer-size);box-sizing:border-box}.-top-left- .air-datepicker--pointer,.-top-center- .air-datepicker--pointer,.-top-right- .air-datepicker--pointer,[data-popper-placement^=top] .air-datepicker--pointer{top:calc(100% - var(--pointer-half-size) + 1px)}.-top-left- .air-datepicker--pointer:after,.-top-center- .air-datepicker--pointer:after,.-top-right- .air-datepicker--pointer:after,[data-popper-placement^=top] .air-datepicker--pointer:after{transform:rotate(135deg)}.-right-top- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer,[data-popper-placement^=right] .air-datepicker--pointer{right:calc(100% - var(--pointer-half-size) + 1px)}.-right-top- .air-datepicker--pointer:after,.-right-center- .air-datepicker--pointer:after,.-right-bottom- .air-datepicker--pointer:after,[data-popper-placement^=right] .air-datepicker--pointer:after{transform:rotate(225deg)}.-bottom-left- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer,[data-popper-placement^=bottom] .air-datepicker--pointer{bottom:calc(100% - var(--pointer-half-size) + 1px)}.-bottom-left- .air-datepicker--pointer:after,.-bottom-center- .air-datepicker--pointer:after,.-bottom-right- .air-datepicker--pointer:after,[data-popper-placement^=bottom] .air-datepicker--pointer:after{transform:rotate(315deg)}.-left-top- .air-datepicker--pointer,.-left-center- .air-datepicker--pointer,.-left-bottom- .air-datepicker--pointer,[data-popper-placement^=left] .air-datepicker--pointer{left:calc(100% - var(--pointer-half-size) + 1px)}.-left-top- .air-datepicker--pointer:after,.-left-center- .air-datepicker--pointer:after,.-left-bottom- .air-datepicker--pointer:after,[data-popper-placement^=left] .air-datepicker--pointer:after{transform:rotate(45deg)}.-top-left- .air-datepicker--pointer,.-bottom-left- .air-datepicker--pointer{left:var(--adp-pointer-offset)}.-top-right- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer{right:var(--adp-pointer-offset)}.-top-center- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer{left:calc(50% - var(--adp-pointer-size)/2)}.-left-top- .air-datepicker--pointer,.-right-top- .air-datepicker--pointer{top:var(--adp-pointer-offset)}.-left-bottom- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer{bottom:var(--adp-pointer-offset)}.-left-center- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer{top:calc(50% - var(--adp-pointer-size)/2)}.air-datepicker--navigation{grid-area:nav}.air-datepicker--content{box-sizing:content-box;padding:var(--adp-padding);grid-area:body}.-only-timepicker- .air-datepicker--content{display:none}.air-datepicker--time{grid-area:timepicker}.air-datepicker--buttons{grid-area:buttons}.air-datepicker--buttons,.air-datepicker--time{padding:var(--adp-padding);border-top:1px solid var(--adp-border-color-inner)}.air-datepicker-overlay{position:fixed;background:var(--adp-overlay-background-color);left:0;top:0;width:0;height:0;opacity:0;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),left 0s,height 0s,width 0s;transition-delay:0s,var(--adp-overlay-transition-duration),var(--adp-overlay-transition-duration),var(--adp-overlay-transition-duration);z-index:var(--adp-overlay-z-index)}.air-datepicker-overlay.-active-{opacity:1;width:100%;height:100%;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),height 0s,width 0s}

data/lib/karafka/web/ui/views/cluster/_no_partitions.erb

@@ -0,0 +1,3 @@
+<div class="alert alert-info" role="alert">
+  There are no topics partitions to display.
+</div>

data/lib/karafka/web/ui/views/cluster/_partition.erb

@@ -1,24 +1,22 @@
 <% topic = partition[:topic] %>
 
-<% if topic[:topic_name] != '__consumer_offsets' %>
-  <tr>
-    <td>
-      <a href="<%= root_path('explorer', topic[:topic_name], 0) %>">
-        <%= topic[:topic_name] %>
-      </a>
-    <td>
-      <a href="<%= root_path('explorer', topic[:topic_name], partition[:partition_id]) %>">
-        <%= partition[:partition_id] %>
-      </a>
-    </td>
-    <td>
-      <%= partition[:leader] %>
-    </td>
-    <td>
-      <%= partition[:replica_count] %>
-    </td>
-    <td>
-      <%= partition[:in_sync_replica_brokers] %>
-    </td>
-  </tr>
-<% end %>
+<tr>
+  <td>
+    <a href="<%= explorer_path(topic[:topic_name]) %>">
+      <%= topic[:topic_name] %>
+    </a>
+  <td>
+    <a href="<%= explorer_path(topic[:topic_name], partition[:partition_id]) %>">
+      <%= partition[:partition_id] %>
+    </a>
+  </td>
+  <td>
+    <%= partition[:leader] %>
+  </td>
+  <td>
+    <%= partition[:replica_count] %>
+  </td>
+  <td>
+    <%= partition[:in_sync_replica_brokers] %>
+  </td>
+</tr>

data/lib/karafka/web/ui/views/cluster/index.erb

@@ -42,9 +42,13 @@
       <hr/>
     </div>
   </div>
-
   <div class="row">
     <div class="col-lg-12">
+      <% if @partitions.empty? && params.current_page <= 1 %>
+        <%== partial 'cluster/no_partitions' %>
+      <% elsif @partitions.empty? %>
+        <%== partial 'shared/no_paginated_data' %>
+      <% else %>
         <table class="processes bg-white table table-hover table-bordered table-striped">
           <thead>
             <tr class="align-middle">
@@ -64,6 +68,7 @@
             %>
           </tbody>
         </table>
+      <% end %>
     </div>
   </div>
 </div>

data/lib/karafka/web/ui/views/consumers/_consumer.erb

@@ -38,7 +38,7 @@
 
   <td>
     <span class="badge bg-primary badge-topic">
-      <%= process.concurrency %> /
+      <%= process.workers %> /
       <%= process.busy %>
     </span>
   </td>

data/lib/karafka/web/ui/views/consumers/_counters.erb

@@ -14,12 +14,14 @@
                 <div class="desc">Batches</div>
               </li>
               <li class="col-sm">
-                <div class="count mb-1"><%= @processes.sum(&:lag_stored) %></div>
-                <div class="desc">Lag</div>
+                <div class="count mb-1"><%= @counters.lag_stored %></div>
+                <div class="desc">Lag stored</div>
               </li>
               <li class="col-sm">
-                <div class="count mb-1"><%= @counters.busy %></div>
-                <div class="desc">Busy</div>
+                <a href="<%= root_path('jobs') %>">
+                  <div class="count mb-1"><%= @counters.busy %></div>
+                  <div class="desc">Busy</div>
+                </a>
               </li>
               <li class="col-sm">
                 <div class="count mb-1"><%= @counters.enqueued %></div>

data/lib/karafka/web/ui/views/consumers/_summary.erb

@@ -21,10 +21,10 @@
         <div class="card-body">
           <p class="card-text">
             <div class="stat mb-1">
-              <%= @counters.threads_count %>
+              <%= @counters.workers %>
             </div>
             <div class="desc">
-              Worker threads
+              Workers
             </div>
           </p>
         </div>
@@ -36,7 +36,7 @@
         <div class="card-body">
           <p class="card-text">
             <div class="stat mb-1">
-              <%= @counters.listeners_count %>
+              <%= @counters.listeners %>
             </div>
             <div class="desc">
               Listeners

data/lib/karafka/web/ui/views/consumers/index.erb

@@ -4,8 +4,10 @@
 <div class="container">
   <div class="row">
     <div class="col-sm-12">
-      <% if @processes.empty? %>
+      <% if @processes.empty? && params.current_page <= 1 %>
         <%== partial 'consumers/no_consumers' %>
+      <% elsif @processes.empty? %>
+        <%== partial 'shared/no_paginated_data' %>
       <% else %>
         <table class="processes bg-white table table-hover table-bordered table-striped mb-0 align-middle">
           <thead>

data/lib/karafka/web/ui/views/dashboard/_feature_pro.erb

@@ -0,0 +1,3 @@
+<div class="mt-3">
+  <%== partial 'shared/feature_pro' %>
+</div>

data/lib/karafka/web/ui/views/dashboard/_not_enough_data.erb

@@ -0,0 +1,15 @@
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12">
+      <div class="alert alert-info" role="alert">
+        <p>
+          There needs to be more data to draw meaningful graphs.
+        </p>
+
+        <p class="mb-0">
+          If you are sure you are running at least one <code>karafka server</code> instance and you do not see charts in a few minutes, please ensure that it can report to the <code><%= Karafka::Web.config.topics.consumers.reports %></code> topic and that Web-UI is correctly installed.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/ui/views/dashboard/_ranges_selector.erb

@@ -0,0 +1,23 @@
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12 text-end">
+      <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
+        <a type="button" href="<%= root_path('dashboard') %>" class="btn btn-outline-primary active">
+          5 minutes
+        </a>
+
+        <a type="button" href="#" class="btn btn-outline-primary disabled" title="Pro feature">
+          <s>1 hour</s>
+        </a>
+
+        <a type="button" href="#" class="btn btn-outline-primary disabled" title="Pro feature">
+          <s>24 hours</s>
+        </a>
+
+        <a type="button" href="#" class="btn btn-outline-primary disabled" title="Pro feature">
+          <s>7 days</s>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/ui/views/dashboard/index.erb

@@ -0,0 +1,95 @@
+<%
+  # Generates a nice set of semi-random data that does not change more often than once every
+  # 24 hours not to make OSS users angry
+  rand = Random.new(Date.today.to_time.to_i)
+  baseline = Date.today.strftime('%m').to_i + 2
+  set = ->(modifier = 0, range = (-2..2)) do
+    Array.new(60) { |i| [i, baseline + rand.rand(range) + modifier] }
+  end
+%>
+
+<%== partial 'consumers/counters' %>
+
+<% if @aggregated.sufficient? %>
+  <%== partial 'dashboard/ranges_selector' %>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-12">
+        <h5 class="mb-3">Processing metrics</h5>
+
+        <hr class="mb-4"/>
+
+        <ul class="nav nav-tabs" id="graphs1" role="tablist">
+          <%== partial 'shared/tab_nav', locals: { title: 'Messages', id: 'messages', active: true } %>
+          <%== partial 'shared/tab_nav', locals: { title: 'Batches', id: 'batches' } %>
+          <%== partial 'shared/tab_nav', locals: { title: 'Lags stored', id: 'lags-stored' } %>
+          <%== partial 'shared/tab_nav', locals: { title: 'Topics pace', id: 'topics-pace' } %>
+        </ul>
+
+        <div class="tab-content">
+          <div class="tab-pane show active" id="messages" role="tabpanel">
+            <% data = @aggregated_charts.with(:messages) %>
+            <%== partial 'shared/chart', locals: { data: data, id: 'messages' } %>
+          </div>
+
+          <div class="tab-pane" id="batches" role="tabpanel">
+            <%== partial 'dashboard/feature_pro' %>
+            <% data = { batches: set.call(20), errors: set.call, dead: set.call, retries: set.call }.to_json %>
+            <%== partial 'shared/chart', locals: { data: data, id: 'batches', blurred: true } %>
+          </div>
+
+          <div class="tab-pane" id="lags-stored" role="tabpanel">
+            <%== partial 'dashboard/feature_pro' %>
+            <% data = { enqueued: set.call, busy: set.call }.to_json %>
+            <%== partial 'shared/chart', locals: { data: data, id: 'lags-stored', blurred: true } %>
+          </div>
+
+          <div class="tab-pane" id="topics-pace" role="tabpanel">
+            <%== partial 'dashboard/feature_pro' %>
+            <% data = { topic1: set.call(20), topic2: set.call(10), topic3: set.call(100) }.to_json %>
+            <%== partial 'shared/chart', locals: { data: data, id: 'topics-pace', blurred: true } %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-12">
+        <h5 class="mb-3">Utilization metrics</h5>
+
+        <hr class="mb-4"/>
+
+        <ul class="nav nav-tabs" id="graphs2" role="tablist">
+          <%== partial 'shared/tab_nav', locals: { title: 'Utilization', id: 'utilization', active: true } %>
+          <%== partial 'shared/tab_nav', locals: { title: 'RSS', id: 'rss' } %>
+          <%== partial 'shared/tab_nav', locals: { title: 'Concurrency', id: 'concurrency' } %>
+        </ul>
+
+        <div class="tab-content">
+          <div class="tab-pane show active" id="utilization" role="tabpanel">
+            <%== partial 'dashboard/feature_pro' %>
+            <% data = { utilization: set.call(50) }.to_json %>
+            <%== partial 'shared/chart', locals: { data: data, id: 'utilization', blurred: true } %>
+          </div>
+
+          <div class="tab-pane show" id="rss" role="tabpanel">
+            <%== partial 'dashboard/feature_pro' %>
+            <% data = { rss: set.call(1_050), process_rss: set.call(1_000) }.to_json %>
+            <%== partial 'shared/chart', locals: { data: data, id: 'rss', blurred: true } %>
+          </div>
+
+          <div class="tab-pane show" id="concurrency" role="tabpanel">
+            <%== partial 'dashboard/feature_pro' %>
+            <% data = { processes: set.call(2, 0..0), workers: set.call(4, 0..0), listeners: set.call(3, 0..0) }.to_json %>
+            <%== partial 'shared/chart', locals: { data: data, id: 'concurrency', blurred: true } %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<% else %>
+  <%== partial 'dashboard/not_enough_data' %>
+<% end %>

data/lib/karafka/web/ui/views/errors/_detail.erb

@@ -9,6 +9,18 @@
           ***
         <% elsif k2.to_s == 'tags' %>
           <%== tags(v2) %>
+        <% elsif k2.to_s == 'first_offset' %>
+          <a href="<%= explorer_path(v[:topic], v[:partition], v[:first_offset]) %>">
+            <%= v2 %>
+          </a>
+        <% elsif k2.to_s == 'last_offset' %>
+          <a href="<%= explorer_path(v[:topic], v[:partition], v[:last_offset]) %>">
+            <%= v2 %>
+          </a>
+        <% elsif k2.to_s == 'committed_offset' && v2 >=0 %>
+          <a href="<%= explorer_path(v[:topic], v[:partition], v[:committed_offset]) %>">
+            <%= v2 %>
+          </a>
         <% else %>
           <%= v2 %>
         <% end %>

data/lib/karafka/web/ui/views/errors/_error.erb

@@ -1,4 +1,4 @@
-<% if error_msg.is_a?(Integer) %>
+<% if error_msg.is_a?(Array) %>
   <tr>
     <td colspan="5" class="text-center text-muted">
       This error has either been removed or compacted and is no longer available.
@@ -22,7 +22,7 @@
     </td>
     <td>
       <%= error[:error_class] %>:
-      <%= error[:error_message].first(200) %>
+      <%= error[:error_message][0..199] %>
     </td>
     <td>
       <%== relative_time error[:occurred_at] %>

data/lib/karafka/web/ui/views/errors/show.erb

@@ -49,7 +49,7 @@
     <%== partial 'shared/feature_pro' %>
   </div>
 
-  <div class="row mb-4">
+  <div class="row mb-5">
     <div class="col-sm-12">
       <div class="card">
         <div class="card-body">

data/lib/karafka/web/ui/views/jobs/index.erb

@@ -1,7 +1,9 @@
 <%== view_title('Running jobs', hr: true) %>
 
-<% if @jobs.empty? %>
+<% if @jobs.empty? && params.current_page <= 1 %>
   <%== partial 'jobs/no_jobs' %>
+<% elsif @jobs.empty? %>
+  <%== partial 'shared/no_paginated_data' %>
 <% else %>
   <div class="container">
     <div class="row mb-5">

data/lib/karafka/web/ui/views/layout.erb

@@ -9,15 +9,22 @@
       <%== yield %>
     <% else %>
       <nav class="navbar navbar-expand-lg navbar-dark shadow-sm mb-4">
-        <div class="container">
+        <div class="container-fluid">
           <%== partial 'shared/brand' %>
           <%== partial 'shared/navigation' %>
+          <%== partial 'shared/live_poll' %>
         </div>
       </nav>
 
-      <%== partial 'shared/become_pro' %>
+      <main>
+        <%== partial 'shared/become_pro' %>
 
-      <%== partial 'shared/content', locals: { content: yield } %>
+        <%== partial 'shared/flashes' %>
+
+        <%== partial 'shared/content', locals: { content: yield } %>
+      </main>
+
+      <%== partial 'shared/footer' %>
     <% end %>
   </body>
 </html>

data/lib/karafka/web/ui/views/routing/_consumer_group.erb

@@ -1,8 +1,8 @@
 <div class="row mb-4">
   <div class="col-sm-12">
-    <h5 class="mb-2">
+    <h4 class="mb-2">
       <%= consumer_group.id %>
-    </h5>
+    </h4>
     <hr/>
   </div>
 </div>
@@ -19,12 +19,14 @@
         </tr>
       </thead>
       <tbody>
-        <% consumer_group.subscription_groups.each do |subscription_group| %>
+        <% consumer_group.topics.each do |topic| %>
           <%==
-            each_partial(
-              subscription_group.topics,
+            partial(
               'routing/topic',
-              locals: { subscription_group: subscription_group }
+              locals: {
+                subscription_group: topic.subscription_group,
+                topic: topic
+              }
             )
           %>
         <% end %>

data/lib/karafka/web/ui/views/routing/_detail.erb

@@ -1,5 +1,5 @@
-<% if v.is_a?(Hash) %>
-  <% v.each do |k2, v2| %>
+<% if v.is_a?(Hash) || v.respond_to?(:to_h) %>
+  <% v.to_h.each do |k2, v2| %>
     <tr>
       <td>
         <%= "#{k}.#{k2}" %>

data/lib/karafka/web/ui/views/routing/_topic.erb

@@ -1,6 +1,6 @@
 <tr>
   <td>
-    <%= subscription_group.id %>
+    <%= subscription_group %>
   </td>
   <td>
     <%= topic.name %>

data/lib/karafka/web/ui/views/routing/show.erb

@@ -8,7 +8,7 @@
     <div class="col-sm-12">
       <table class="processes bg-white table table-hover table-bordered table-striped mb-0 align-middle">
         <tbody>
-          <% @topic.to_h.each do |k, v| %>
+          <% flat_hash(@topic.to_h).each do |k, v| %>
             <%==
               partial(
                 'routing/detail',

data/lib/karafka/web/ui/views/shared/_brand.erb

@@ -1,3 +1,3 @@
-<a class="navbar-brand" href="<%= root_path %>">
-  <img src="<%= root_path('images/logo.svg') %>" alt="Karafka" height="20" width="95" class="d-inline-block align-text-top"/>
+<a class="navbar-brand ms-4" href="<%= root_path %>">
+  <img src="<%= asset_path('images/logo.svg') %>" alt="Karafka" height="20" width="95" class="d-inline-block align-text-top"/>
 </a>

data/lib/karafka/web/ui/views/shared/_chart.erb

@@ -0,0 +1,14 @@
+<%
+  blurred ||= false
+  label_type_y ||= 'numerical'
+  label_type_x ||= 'date'
+%>
+<div class="mt-4 chartjs-wrapper">
+  <canvas
+    id="<%= id %>-chart"
+    class="chartjs <%= 'blurred' if blurred %>"
+    data-datasets="<%= data %>"
+    data-label_type_y="<%= label_type_y %>"
+    data-label_type_x="<%= label_type_x %>"
+  ></canvas>
+</div>

data/lib/karafka/web/ui/views/shared/_content.erb

@@ -1,5 +1,5 @@
 <div id="content">
-  <main class="mb-5">
+  <div class="mb-4">
     <% if @breadcrumbs != false %>
       <div class="container mb-5">
         <nav aria-label="breadcrumb">
@@ -25,7 +25,7 @@
     <% end %>
 
     <%== content %>
-  </main>
+  </div>
 
   <%== partial 'shared/pagination' %>
 </div>

data/lib/karafka/web/ui/views/shared/_feature_pro.erb

@@ -1,4 +1,4 @@
 <div class="alert alert-light">
-  This Web UI feature is available only to <a target="_blank" href="https://karafka.io/#become-pro">Pro</a>
+  This feature is available only to <a target="_blank" href="https://karafka.io/#become-pro">Pro</a>
   users.
 </div>

data/lib/karafka/web/ui/views/shared/_flashes.erb

@@ -0,0 +1,9 @@
+<% flash.each do |name, message| %>
+  <div class="mb-4">
+    <div class="container">
+      <p class="alert alert-<%= name %>">
+        <%= message %>
+      </p>
+    </div>
+  </div>
+<% end %>

data/lib/karafka/web/ui/views/shared/_footer.erb

@@ -0,0 +1,22 @@
+<div class="container">
+  <footer class="footer mt-auto d-flex flex-wrap justify-content-between align-items-center pt-4 py-3 my-3 ps-3 pe-3 border-top">
+    <div class="col-md-4 d-flex align-items-center">
+      <a href="https://karafka.io" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
+        <img src="<%= asset_path('images/logo-gray.svg') %>" style="max-width: 80px; margin-top: -5px">
+      </a>
+
+      <span class="text-muted">
+        &#169;
+        2015 -
+        <%= Date.today.year %>
+        <a href="https://mensfeld.pl" class="text-muted">Maciej Mensfeld</a>
+      </span>
+    </div>
+
+    <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
+      <li class="ms-3"><a class="text-muted" href="https://karafka.io/docs">Docs</a></li>
+      <li class="ms-3"><a class="text-muted" href="https://karafka.io/#support">Support</a></li>
+      <li class="ms-3"><a class="text-muted" href="https://github.com/karafka/karafka">Github</a></li>
+    </ul>
+  </footer>
+</div>