From 58e57ed7076fe3ef6f2f63377b529efe3f09ee2d Mon Sep 17 00:00:00 2001
From: hevp <hevp101@outlook.com>
Date: Wed, 29 Apr 2020 11:29:54 +0200
Subject: [PATCH] Support units in metadata schemas and display them

---
 webui/src/components/editrecord.jsx | 12 ++++++++++--
 webui/src/components/record.jsx     |  4 +++-
 webui/src/components/schema.jsx     | 27 ++++++++++++---------------
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/webui/src/components/editrecord.jsx b/webui/src/components/editrecord.jsx
index 2a024b6b18..c9ffcfb556 100644
--- a/webui/src/components/editrecord.jsx
+++ b/webui/src/components/editrecord.jsx
@@ -384,8 +384,16 @@ const EditRecord = React.createClass({
                 <div key={id} style={{marginBottom:'0.5em'}} title={schema.get('description')}>
                     {!title ? false :
                         <label htmlFor={id} className="col-sm-3 control-label" style={{fontWeight:'bold'}}>
-                            <span style={{float:'right', color:isError?'red':'black'}}>
-                                {title} {schema.get('isRequired') ? "*":""}
+                            <span style={{float:'right'}}>
+                                <span style={{color:isError?'red':'black'}}>
+                                    {title}&nbsp;
+                                </span>
+                                <span>
+                                    {schema.get('unit') ? <span style={{color: 'grey'}}> {'(' + schema.get('unit') + ')'} </span> : false }
+                                </span>
+                                <span>
+                                    {schema.get('isRequired') ? "*" : ""}&nbsp;
+                                </span>
                             </span>
                         </label> }
                     <div className={title ? "col-sm-9":"col-sm-12"} style={arrstyle} onFocus={onfocus} onBlur={onblur}>
diff --git a/webui/src/components/record.jsx b/webui/src/components/record.jsx
index f6543cd673..9f912afc39 100644
--- a/webui/src/components/record.jsx
+++ b/webui/src/components/record.jsx
@@ -445,7 +445,9 @@ const Record = React.createClass({
                 }
                 <div className={
                     (title ? "col-sm-8" : "col-sm-12") + " " + (type === 'object' ? "metadata-object" : "metadata")}>
-                     {inner} </div>
+                     {inner}
+                     {schema.get('unit') ? <span style={{color: 'grey'}}>  { schema.get('unit') } </span> : false }
+                </div>
             </li>
         );
     },
diff --git a/webui/src/components/schema.jsx b/webui/src/components/schema.jsx
index 09cbc13446..62267c4425 100644
--- a/webui/src/components/schema.jsx
+++ b/webui/src/components/schema.jsx
@@ -67,23 +67,20 @@ export const Schema = React.createClass({
             inner = <span className="mono-style">{inner}</span>
         }
 
-        const leftcolumn = !id ? false :
-            <div className="col-sm-6">
-                <p className={requiredClass}>
-                    <span className="bold">{title}</span>
-                    <span className="mono-style">
-                        {title?" :: ":""}
-                        {id}
-                        {schema.get('isRequired') ? " (required)":false}
-                    </span>
-                </p>
-                <p> {schema.get('description')} </p>
-            </div>;
-        const rightcolumnsize = leftcolumn ? "col-sm-6" : "col-sm-12";
         return (
             <li key={id} className="row field-general">
-                {leftcolumn}
-                <div className={rightcolumnsize}> {inner} </div>
+                <div className="col-sm-6">
+                    <p className={requiredClass}>
+                        <span className="bold">{title} {schema.get('unit') ? ' [' + schema.get('unit') + ']' : false }</span>
+                        <span className="mono-style">
+                            {title ? " :: " : ""}
+                            {id}
+                            {schema.get('isRequired') ? " (required)" : false}
+                        </span>
+                    </p>
+                    <p> {schema.get('description')} </p>
+                </div>
+                <div className="col-sm-6"> {inner} </div>
             </li>
         );
     },