fix(ui): harmonize utc labels (#1403)

close #1400 Co-authored-by: Fredrik Lysén <[email protected]>
tchiotludo · Apr 4, 2023 · 301937c · 301937c
1 parent b021966
commit 301937c
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 8 deletions.
diff --git a/.../containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupUpdate/ConsumerGroupUpdate.jsx b/.../containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupUpdate/ConsumerGroupUpdate.jsx
@@ -291,7 +291,7 @@ class ConsumerGroupUpdate extends Form {
           style={{ marginRight: '0.5rem', padding: 0 }}
         >
           <Dropdown>
-            <Dropdown.Toggle>Filter datetime</Dropdown.Toggle>
+            <Dropdown.Toggle>Filter Timestamp UTC</Dropdown.Toggle>
             {!loading && (
               <Dropdown.Menu>
                 <div>

diff --git a/client/src/containers/Topic/Topic/TopicData/TopicData.jsx b/client/src/containers/Topic/Topic/TopicData/TopicData.jsx
@@ -260,8 +260,7 @@ class TopicData extends Root {
             second: timestamp.second(),
             milli: timestamp.millisecond()
           },
-          'YYYY-MM-DDTHH:mm:ss.SSS',
-          true
+          'YYYY-MM-DDTHH:mm:ss.SSS'
         ) + 'Z';
       filters.push(`timestamp=${timestamp}`);
     }
@@ -831,7 +830,7 @@ class TopicData extends Root {
               <li className="nav-item dropdown">
                 <Dropdown>
                   <Dropdown.Toggle className="nav-link dropdown-toggle">
-                    <strong>Timestamp:</strong>
+                    <strong>Timestamp UTC:</strong>
                     {datetime !== '' &&
                       ' ' +
                         formatDateTime(
@@ -1012,7 +1011,7 @@ class TopicData extends Root {
               {
                 id: 'timestamp',
                 accessor: 'timestamp',
-                colName: 'Date',
+                colName: 'Timestamp',
                 type: 'text',
                 cell: (obj, col) => {
                   return (

diff --git a/client/src/containers/Topic/TopicCopy/TopicCopy.jsx b/client/src/containers/Topic/TopicCopy/TopicCopy.jsx
@@ -340,7 +340,7 @@ class TopicCopy extends Form {
           style={{ marginRight: '0.5rem', padding: 0 }}
         >
           <Dropdown>
-            <Dropdown.Toggle>Filter datetime</Dropdown.Toggle>
+            <Dropdown.Toggle>Filter Timestamp UTC</Dropdown.Toggle>
             {!loading && (
               <Dropdown.Menu>
                 <div>

diff --git a/client/src/containers/Topic/TopicProduce/TopicProduce.jsx b/client/src/containers/Topic/TopicProduce/TopicProduce.jsx
@@ -531,7 +531,7 @@ class TopicProduce extends Form {
               style={{ padding: 0, alignItems: 'center', display: 'flex' }}
               className="col-sm-2 col-form-label"
             >
-              Timestamp
+              Timestamp UTC
             </label>
             <Dropdown style={{ width: '100%', padding: 0, margin: 0 }}>
               <Dropdown.Toggle

diff --git a/client/src/utils/converters.js b/client/src/utils/converters.js
@@ -30,7 +30,13 @@ export function groupedTopicOffset(offsets) {
   }, Object.create(null));
 }
 
-export function formatDateTime(value, format, utc = false) {
+/**
+ * If the utc parameter is true (which is the default value),
+ * the date and time will be converted to UTC time before formatting.
+ * If utc is false, the date and time will be formatted in the local time zone.
+ * Finally, the formatted date and time string is returned as a string
+ */
+export function formatDateTime(value, format, utc = true) {
   let milli = value.milli || 0;
   const date = new Date(
     value.year,