NMS-16535: Reorganize date time and notification in main navigation

Clarify date and time in separate lines, to a) save some space and b) make it easier to read. Group notification components for user and team notification and the indicator if the system has notifications enabled together.
OpenNMS · Sep 23, 2024 · b52dc5a · b52dc5a
1 parent db57b0a
commit b52dc5a
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 64 deletions.
diff --git a/core/lib/src/main/java/org/opennms/core/time/CentralizedDateTimeFormat.java b/core/lib/src/main/java/org/opennms/core/time/CentralizedDateTimeFormat.java
@@ -43,7 +43,7 @@ public class CentralizedDateTimeFormat {
 
     public final static String SYSTEM_PROPERTY_DATE_FORMAT = "org.opennms.ui.datettimeformat";
     public final static String SESSION_PROPERTY_TIMEZONE_ID = "org.opennms.ui.timezoneid";
-    public final static String DEFAULT_FORMAT_PATTERN = "yyyy-MM-dd'T'HH:mm:ssxxx";
+    public final static String DEFAULT_FORMAT_PATTERN = "yyyy-MM-dd HH:mm:ssxxx";
 
     public static final Logger LOG = LoggerFactory.getLogger(CentralizedDateTimeFormat.class);
 

diff --git a/core/lib/src/test/java/org/opennms/core/time/CentralizedDateTimeFormatTest.java b/core/lib/src/test/java/org/opennms/core/time/CentralizedDateTimeFormatTest.java
@@ -36,7 +36,7 @@ public class CentralizedDateTimeFormatTest {
 
     @Test
     public void shouldOutputeDateTimeIncludingTimeZone() throws IOException {
-        test("yyyy-MM-dd'T'HH:mm:ssxxx", Instant.now());
+        test("yyyy-MM-dd HH:mm:ssxxx", Instant.now());
     }
 
     @Test

diff --git a/core/web-assets/src/main/assets/js/apps/onms-date-formatter/index.js b/core/web-assets/src/main/assets/js/apps/onms-date-formatter/index.js
@@ -30,7 +30,7 @@ function OnmsDateFormatter() {
 
 OnmsDateFormatter.prototype.init = function init(readyCallback) {
 	var self = this;
-	var defaultFormat = "yyyy-MM-dd'T'HH:mm:ssxxx"; // eslint-disable-line quotes
+	var defaultFormat = "yyyy-MM-dd HH:mm:ssxxx"; // eslint-disable-line quotes
 	window._onmsZoneId = undefined;
 
 	var xhr = new XMLHttpRequest();

diff --git a/core/web-assets/src/main/assets/style/opennms-theme.scss b/core/web-assets/src/main/assets/style/opennms-theme.scss
@@ -329,9 +329,7 @@ div.NLnode:hover span.NLdbid, div.NLnode:hover span.NLfs, div.NLnode:hover span.
 }
 /* Resource Graph sidebar classes inspired by Bootstrap Docs: End */
 
-#navbar {
-  margin-top: auto;
-}
+#navbar {}
 
 #footer {
   text-align: center;
@@ -390,7 +388,7 @@ iframe.vaadin-fullscreen {
 }
 
 .opennms-bg-chromatic-black {
-     background-color: $opennms-dark-blue;
+  background-color: $opennms-dark-blue;
 }
 
 .navbar-brand {
@@ -423,16 +421,16 @@ iframe.vaadin-fullscreen {
     font-size:14px;
     color:rgba(255, 255, 255, 0.8);
     letter-spacing: 0.12px;
-    margin-right:1rem;
-    padding-top:13px;
+    width: 100px;
+    text-align: right;
   }
   .navbar-bell {
     margin-right:60px;
     padding-top:13px;
   }
   .form-control {
-      border-radius:0px;
-      background-color:transparent;
+    border-radius:0px;
+    background-color:transparent;
   }
   .input-group {
     .form-control:not(:last-child) {
@@ -449,7 +447,7 @@ iframe.vaadin-fullscreen {
       background-color:white;
     }
   }
-  .search-bar .input-group-text { 
+  .search-bar .input-group-text {
     border-radius:4px;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -514,7 +512,7 @@ iframe.vaadin-fullscreen {
     height:23px;
     color: #000;
   }
- 
+
 .nav-item.dropdown a.dropdown-toggle:after {
   vertical-align: 2px;
   margin-left: 6px;

diff --git a/core/web-assets/src/test/javascript/ng-requisitions/controllers/Asset.test.js b/core/web-assets/src/test/javascript/ng-requisitions/controllers/Asset.test.js
@@ -46,7 +46,7 @@ function createController() {
 }
 
 beforeEach(function() {
-  window._onmsDateTimeFormat = "yyyy-MM-dd'T'HH:mm:ssxxx";
+  window._onmsDateTimeFormat = "yyyy-MM-dd HH:mm:ssxxx";
   window._onmsZoneId = 'America/New_York';
   window._onmsFormatter = new OnmsDateFormatter();
 });

diff --git a/core/web-assets/src/test/javascript/ng-requisitions/controllers/Requisitions.test.js b/core/web-assets/src/test/javascript/ng-requisitions/controllers/Requisitions.test.js
@@ -50,7 +50,7 @@ function createController() {
 }
 
 beforeEach(function() {
-  window._onmsDateTimeFormat = "yyyy-MM-dd'T'HH:mm:ssxxx";
+  window._onmsDateTimeFormat = "yyyy-MM-dd HH:mm:ssxxx";
   window._onmsZoneId = 'America/New_York';
   window._onmsFormatter = new OnmsDateFormatter();
 });

diff --git a/docs/modules/development/pages/rest/info.adoc b/docs/modules/development/pages/rest/info.adoc
@@ -30,7 +30,7 @@ Service that provides information about the {page-component-title} instance.
     },
     "datetimeformatConfig": {
         "zoneId": "UTC",
-        "datetimeformat": "yyyy-MM-dd'T'HH:mm:ssxxx"
+        "datetimeformat": "yyyy-MM-dd HH:mm:ssxxx"
     },
     "services": {
         "Eventd": "running",

diff --git a/opennms-base-assembly/src/main/filtered/etc/opennms.properties b/opennms-base-assembly/src/main/filtered/etc/opennms.properties
@@ -362,7 +362,7 @@ org.eclipse.jetty.server.Request.maxFormKeys=2000
 
 # Choose the format how the date is displayed in the UI. It needs to follow the pattern in DateTimeFormatter:
 # see https://docs.oracle.com/javase/8/docs/api/java/time/format/DateTimeFormatter.html
-# org.opennms.ui.datettimeformat=yyyy-MM-dd'T'HH:mm:ssxxx
+# org.opennms.ui.datettimeformat=yyyy-MM-dd HH:mm:ssxxx
 
 # Enable displaying stack traces in the ui:
 # org.opennms.ui.show_stacktrace=true

diff --git a/opennms-taglib/src/test/java/org/opennms/web/tags/DateTimeTagTest.java b/opennms-taglib/src/test/java/org/opennms/web/tags/DateTimeTagTest.java
@@ -62,7 +62,7 @@ public void tearDown() {
 
     @Test
     public void shouldOutputeDateTimeIncludingTimeZone() throws IOException {
-        test("yyyy-MM-dd'T'HH:mm:ssxxx");
+        test("yyyy-MM-dd HH:mm:ssxxx");
     }
 
     @Test
@@ -85,7 +85,7 @@ public void shouldHonorUserTimezone() throws IOException {
         // Martinique has no daylight savings => offset to UTC should be always the same
         final ZoneId martinique = ZoneId.of("America/Martinique");
         attributes.put(CentralizedDateTimeFormat.SESSION_PROPERTY_TIMEZONE_ID, martinique);
-        String result = test("yyyy-MM-dd'T'HH:mm:ssxxx", martinique, Instant.now(), attributes);
+        String result = test("yyyy-MM-dd HH:mm:ssxxx", martinique, Instant.now(), attributes);
         assertEquals("-04:00", result.substring(result.length()-6));
     }
 

diff --git a/opennms-webapp/src/main/webapp/WEB-INF/templates/navbar.ftl b/opennms-webapp/src/main/webapp/WEB-INF/templates/navbar.ftl
@@ -12,28 +12,6 @@
     </button>
 
     <div id="navbar" class="navbar-collapse collapse">
-        <#if request.remoteUser?has_content >
-            <ul class="navbar-nav ml-1">
-                <li class="nav-item">
-                    <span class="navbar-text navbar-formatted-time">${formattedTime}</span>
-                </li>
-                <li class="nav-item">
-                    <span class="navbar-text navbar-bell ml-1">
-                        <#if noticeStatus = 'Unknown'>
-                            <!-- Gray circle with bell inside -->
-                            <i class="fa fa-bell text-secondary"></i>
-                        </#if>
-                        <#if noticeStatus = 'Off'>
-                            <i class="fa fa-bell-slash text-danger" title="Notices: Off"></i>
-                        </#if>
-                        <#if noticeStatus = 'On'>
-                            <i class="fa fa-bell text-horizon" title="Notices: On"></i>
-                        </#if>
-                    </span>
-                </li>
-            </ul>
-        </#if>
-
         <div ng-app="onms.default.apps">
             <onms-central-search></onms-central-search>
         </div>
@@ -142,6 +120,33 @@
                     </a>
                 </div>
             </li>
+        </ul>
+        <ul class="navbar-nav">
+            <#if isAdmin || isProvision >
+                <li class="nav-item">
+                    <a class="nav-link" style="font-size: 1.25rem" name="nav-admin-quick-add"
+                       href="${baseHref}admin/ng-requisitions/quick-add-node.jsp#/" title="Quick-Add Node">
+                        <i class="fa fa-plus-circle"></i>
+                    </a>
+                </li>
+            </#if>
+            <#if isFlow >
+                <li class="nav-item">
+                    <a class="nav-link" style="font-size: 1.25rem" name="nav-admin-flow"
+                       href="${baseHref}admin/classification/index.jsp" title="Flow Management">
+                        <i class="fa fa-minus-circle"></i>
+                    </a>
+                </li>
+            </#if>
+            <#if isAdmin >
+                <li class="nav-item">
+                    <a class="nav-link" style="font-size: 1.25rem" title="Configure OpenNMS"
+                       href="${baseHref}admin/index.jsp"><i class="fa fa-cogs"></i></a>
+                </li>
+            </#if>
+            </#if>
+        </ul>
+        <ul class="navbar-nav">
             <li class="nav-item dropdown">
                 <a href="#" class="nav-link dropdown-toggle badge-wrapper" data-toggle="dropdown" role="button"
                    aria-expanded="false">
@@ -159,7 +164,8 @@
 
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="${baseHref}notification/browse?acktype=unack">
-                        <i class="fa fa-fw fa-users"></i>&nbsp; <span class="teamNotificationCount">0</span> of <span
+                        <i class="fa fa-fw fa-users"></i>&nbsp; <span class="teamNotificationCount">0</span> of
+                        <span
                                 class="totalNotificationCount"></span> assigned to anyone but you
                     </a>
                     <a class="dropdown-item" href="${baseHref}roles">
@@ -168,31 +174,25 @@
                 </div>
             </li>
         </ul>
-        <ul class="navbar-nav">
-            <#if isAdmin || isProvision >
-                <li class="nav-item">
-                    <a class="nav-link" style="font-size: 1.25rem" name="nav-admin-quick-add"
-                       href="${baseHref}admin/ng-requisitions/quick-add-node.jsp#/" title="Quick-Add Node">
-                        <i class="fa fa-plus-circle"></i>
-                    </a>
-                </li>
+        <div>
+            <#if noticeStatus = 'Unknown'>
+                <!-- Gray circle with bell inside -->
+                <i class="fa fa-bell text-secondary"></i>
             </#if>
-            <#if isFlow >
-                <li class="nav-item">
-                    <a class="nav-link" style="font-size: 1.25rem" name="nav-admin-flow"
-                       href="${baseHref}admin/classification/index.jsp" title="Flow Management">
-                        <i class="fa fa-minus-circle"></i>
-                    </a>
-                </li>
+            <#if noticeStatus = 'Off'>
+                <i class="fa fa-bell-slash text-danger" title="Notices: Off"></i>
             </#if>
-            <#if isAdmin >
+            <#if noticeStatus = 'On'>
+                <i class="fa fa-bell text-horizon" title="Notices: On"></i>
+            </#if>
+        </div>
+        <#if request.remoteUser?has_content >
+            <ul class="navbar-nav ml-1">
                 <li class="nav-item">
-                    <a class="nav-link" style="font-size: 1.25rem" title="Configure OpenNMS"
-                       href="${baseHref}admin/index.jsp"><i class="fa fa-cogs"></i></a>
+                    <span class="navbar-text navbar-formatted-time">${formattedTime}</span>
                 </li>
-            </#if>
-            </#if>
-        </ul>
+            </ul>
+        </#if>
     </div>
 </nav>
 
@@ -339,3 +339,4 @@
 
     </script>
 </#if>
+
diff --git a/ui/src/directives/v-date.ts b/ui/src/directives/v-date.ts
@@ -34,7 +34,7 @@ const timeZone = computed<string>(
 
 const formatString = computed<string>(
   // eslint-disable-next-line quotes
-  () => appInfo.value.datetimeformatConfig?.datetimeformat || "yyyy-MM-dd'T'HH:mm:ssxxx"
+  () => appInfo.value.datetimeformatConfig?.datetimeformat || "yyyy-MM-dd HH:mm:ssxxx"
 )
 
 const dateFormatDirective = {