UI updates (#821)

* UI updates
cloudamqp · Dec 16, 2024 · 5d0da2b · 5d0da2b
1 parent e027ee3
commit 5d0da2b
Show file tree

Hide file tree

Showing 39 changed files with 1,565 additions and 595 deletions.
diff --git a/.gitignore b/.gitignore
@@ -18,3 +18,4 @@ package-lock.json
 /playwright/
 /playwright-report/
 /static/views/
+.DS_Store
diff --git a/src/lavinmq/http/controller/views.cr b/src/lavinmq/http/controller/views.cr
@@ -60,7 +60,7 @@ module LavinMQ
             context.response.headers.add("ETag", ETag)
             context.response.headers.add("X-Frame-Options", "SAMEORIGIN")
             context.response.headers.add("Referrer-Policy", "same-origin")
-            context.response.headers.add("Content-Security-Policy", "default-src 'none'; style-src 'self'; img-src 'self'; connect-src 'self'; script-src 'self' 'sha256-9nCxy0qjWUXfAqDk5MjMKgu+tHDTvI8ZUAmbmYoCEF8='")
+            context.response.headers.add("Content-Security-Policy", "default-src 'none'; style-src 'self'; font-src 'self'; img-src 'self'; connect-src 'self'; script-src 'self' 'sha256-9nCxy0qjWUXfAqDk5MjMKgu+tHDTvI8ZUAmbmYoCEF8='")
             {{block.body if block}}
             render {{view}}
           end

diff --git a/static/fonts/Inter-Italic.woff2 b/static/fonts/Inter-Italic.woff2
diff --git a/static/fonts/Inter-Regular.woff2 b/static/fonts/Inter-Regular.woff2
diff --git a/static/fonts/Inter-SemiBold.woff2 b/static/fonts/Inter-SemiBold.woff2
diff --git a/static/fonts/Inter-SemiBoldItalic.woff2 b/static/fonts/Inter-SemiBoldItalic.woff2
diff --git a/static/img/icon-cross.svg b/static/img/icon-cross.svg
diff --git a/static/img/logo-lavinmq-all-white.svg b/static/img/logo-lavinmq-all-white.svg
diff --git a/static/js/chart.js b/static/js/chart.js
@@ -11,8 +11,8 @@ Chart.register(Tooltip)
 Chart.register(Title)
 Chart.register(Filler)
 
-const chartColors = ['#003f5c', '#ffa600', '#665191', '#a05195', '#d45087', '#f95d6a', '#ff7c43', '#2f4b7c',
-  '#EE6868', '#2F6497', '#6C8893']
+const chartColors = ['#54be7e', '#4589ff', '#d12771', '#d2a106', '#08bdba', '#bae6ff', '#ba4e00',
+  '#d4bbff', '#8a3ffc', '#33b1ff', '#007d79']
 
 const POLLING_RATE = 5000
 const X_AXIS_LENGTH = 600000 // 10 min
@@ -59,6 +59,12 @@ function render (id, unit, options = {}, stacked = false) {
           gridLines: {
             display: false
           },
+          grid: {
+            color: '#2D2C2C'
+          },
+          border: {
+            dash: [2, 4]
+          },
           time: {
             unit: 'second',
             displayFormats: {
@@ -72,6 +78,12 @@ function render (id, unit, options = {}, stacked = false) {
             text: unit,
             fontsize: 14
           },
+          grid: {
+            color: '#2D2C2C'
+          },
+          border: {
+            dash: [2, 4]
+          },
           ticks: {
             beginAtZero: true,
             min: 0,

diff --git a/static/js/consumers.js b/static/js/consumers.js
@@ -26,7 +26,7 @@ Table.renderTable('table', tableOptions, function (tr, item, firstRender) {
   const exclusive = item.exclusive ? '●' : '○'
   const cancelForm = document.createElement('form')
   const btn = document.createElement('button')
-  btn.classList.add('btn-primary')
+  btn.classList.add('btn-small-outlined-danger')
   btn.type = 'submit'
   btn.textContent = 'Cancel'
 

diff --git a/static/js/layout.js b/static/js/layout.js
@@ -33,3 +33,11 @@ document.getElementById('signoutLink').onclick = () => {
   document.cookie = 'm=; max-age=0'
   window.location.assign('login')
 }
+
+const usermenuButton = document.getElementById('usermenu-button')
+const usermenuContent = document.getElementById('user-menu')
+
+usermenuButton.onclick = (e) => {
+  usermenuButton.classList.toggle('open-menu')
+  usermenuContent.classList.toggle('visible')
+}
diff --git a/static/js/policies.js b/static/js/policies.js
@@ -32,7 +32,7 @@ const policiesTable = Table.renderTable('table', tableOptions, (tr, item) => {
   const buttons = document.createElement('div')
   buttons.classList.add('buttons')
   const deleteBtn = document.createElement('button')
-  deleteBtn.classList.add('btn-danger')
+  deleteBtn.classList.add('btn-small-outlined-danger')
   deleteBtn.textContent = 'Delete'
   deleteBtn.onclick = function () {
     const name = encodeURIComponent(item.name)
@@ -44,7 +44,7 @@ const policiesTable = Table.renderTable('table', tableOptions, (tr, item) => {
     }
   }
   const editBtn = document.createElement('button')
-  editBtn.classList.add('btn-secondary')
+  editBtn.classList.add('btn-small')
   editBtn.textContent = 'Edit'
   editBtn.onclick = function () {
     Form.editItem('#createPolicy', item, {

diff --git a/static/js/user.js b/static/js/user.js
@@ -36,7 +36,7 @@ const permissionsTable = Table.renderTable('permissions', tableOptions, (tr, ite
     const buttons = document.createElement('div')
     buttons.classList.add('buttons')
     const deleteBtn = document.createElement('button')
-    deleteBtn.classList.add('btn-danger')
+    deleteBtn.classList.add('btn-small-outlined-danger')
     deleteBtn.innerText = 'Clear'
     deleteBtn.onclick = function () {
       const username = encodeURIComponent(item.user)
@@ -48,7 +48,7 @@ const permissionsTable = Table.renderTable('permissions', tableOptions, (tr, ite
         })
     }
     const editBtn = document.createElement('button')
-    editBtn.classList.add('btn-secondary')
+    editBtn.classList.add('btn-small')
     editBtn.innerText = 'Edit'
     editBtn.onclick = function () {
       Form.editItem('#setPermission', item)

diff --git a/static/js/users.js b/static/js/users.js
@@ -24,7 +24,7 @@ HTTP.request('GET', 'api/permissions').then(permissions => {
     const vhosts = permissions.filter(p => p.user === item.name).map(p => p.vhost).join(', ')
     Table.renderCell(tr, 1, item.tags)
     Table.renderCell(tr, 2, vhosts)
-    Table.renderCell(tr, 3, hasPassword, 'center')
+    Table.renderCell(tr, 3, hasPassword)
   })
 }).catch(e => {
   Table.toggleDisplayError('users', e.status === 403 ? 'You need administrator role to see this view' : e.body)