[add-description]：Added service drop-down

platform/ui/src/elements/form/DropdownMenu.js

@@ -28,13 +28,13 @@ class DropdownMenu extends Component {
   getListItems = () => {
     const { list, align } = this.props;
 
-    return list.map(({ icon, title, link, onClick }, key) => {
+    return list.map(({ icon, title, link, onClick, active }, key) => {
       if (link) {
         return (
           <a
             href={link || '#'}
             key={key}
-            className="dd-item"
+            className={`dd-item  ${active && 'active'}`}
             onClick={() => this.handleOnClick(onClick)}
           >
             {icon && <Icon {...icon} className="dd-item-icon" />}
@@ -45,7 +45,7 @@ class DropdownMenu extends Component {
         return (
           <button
             key={key}
-            className="dd-item"
+            className={`dd-item  ${active && 'active'}`}
             data-cy="dd-item-menu"
             onClick={() => this.handleOnClick(onClick)}
           >
@@ -121,7 +121,7 @@ class DropdownMenu extends Component {
   render() {
     return (
       <div
-        className="dd-menu"
+        className={`dd-menu ${this.props.className}`}
         data-cy="options-menu"
         ref={node => (this.node = node)}
       >

platform/viewer/src/components/Header/Header.css

@@ -144,3 +144,12 @@
     display: none;
   }
 }
+
+
+.add-serve .dd-menu-list {
+min-width: 150px;
+}
+.add-serve .active{
+  color: #91b9cd;
+  background: #3e474c;
+}

platform/viewer/src/components/Header/Header.js

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Dropdown, AboutContent, withModal } from '@ohif/ui';
-//
+import { useHistory } from 'react-router-dom'
 import { UserPreferences } from './../UserPreferences';
 import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
 import './Header.css';
@@ -22,8 +22,9 @@ function Header(props) {
     location,
     children,
   } = props;
-
+  const history = useHistory()
   const [options, setOptions] = useState([]);
+  const [optionsServe, setOptionsServe] = useState([]);
   const hasLink = linkText && linkPath;
 
   useEffect(() => {
@@ -48,20 +49,11 @@ function Header(props) {
             title: t('User Preferences'),
           }),
       },
-      {
-        title: '服务',//t(Modify service)
-        icon: {
-          name: 'edit',
-        },
-        onClick: () => {
-          return show({
-            content: () => <EditServerContent onClose={hide} />,
-            title: '服务',
-          })
-        }
-      },
+
     ];
 
+
+
     if (user && userManager) {
       optionsValue.push({
         title: t('Logout'),
@@ -71,8 +63,51 @@ function Header(props) {
     }
 
     setOptions(optionsValue);
+    getServeList()
   }, [setOptions, show, t, user, userManager]);
 
+  const getServeList = () => {
+    //get form data
+    let currentIp = JSON.parse(localStorage.getItem('serve'))
+
+    if (JSON.stringify(currentIp) == "{}" || !currentIp) {
+      currentIp = JSON.parse(localStorage.getItem('defaultServe'))
+
+    }
+
+    console.log('currentIp: ', currentIp);
+
+
+    let serverListMid = JSON.parse(localStorage.getItem('serverList'))
+    let res = serverListMid.map(item => {
+      return {
+        title: item.alias ? `${item.alias}(${item.ip})` : item.ip,
+        active: item.ip == currentIp,
+        onClick: () => {
+          localStorage.setItem('serve', JSON.stringify(item.ip))
+          history.push({ pathname: '/', search: '' })
+          history.go(0)
+        }
+      }
+    })
+    const serveOptionsValue = [
+      {
+        title: '新增服务',//t(Modify service)
+        icon: {
+          name: 'edit',
+        },
+        onClick: () => {
+          return show({
+            content: () => <EditServerContent onClose={hide} getServeList={getServeList} />,
+            title: '服务',
+          })
+        }
+      },
+    ]
+    setOptionsServe([...serveOptionsValue, ...res])
+  }
+
+
   return (
     <>
       <div className="notification-bar">{t('INVESTIGATIONAL USE ONLY')}</div>
@@ -106,7 +141,14 @@ function Header(props) {
 
         <div className="header-menu">
           <span className="research-use">{t('INVESTIGATIONAL USE ONLY')}</span>
+          <Dropdown
+            title={t('服务器')}
+            list={optionsServe}
+            align="right"
+            className='add-serve'
+          />
           <Dropdown title={t('Options')} list={options} align="right" />
+
         </div>
       </div>
     </>

platform/viewer/src/components/Header/editServerContent.css

@@ -177,7 +177,7 @@
 }
 
 .add-server{
-flex: 3;
+flex: 5;
 display: flex;
       align-items: center;
 
@@ -191,4 +191,10 @@ display: flex;
 
 .add-server .input-ohif-container .input-ohif {
   margin: 20px 0px 20px;
+}
+
+.add-server-alias{
+    padding: 0px 23px;
+      display: flex;
+      width: 85%;
 }

platform/viewer/src/components/Header/editServerContent.js

@@ -13,13 +13,15 @@ import { servicesManager } from '../../App';
 function EditServerContent(props) {
   const {
     onClose,
+    getServeList
   } = props;
   const { t } = useTranslation('UserPreferencesModal');
   const { UINotificationService } = servicesManager.services;
   // const [serveForm, setServeForm] = useState({})
   const [currentServer, setCurrentServer] = useState()
   const [serverList, setServerList] = useState([])
   const [addServerValue, setAddServerValue] = useState();
+  const [addServerValueAlias, setAddServerValueAlias] = useState();
   const history = useHistory()
 
   useEffect(() => {
@@ -38,21 +40,36 @@ function EditServerContent(props) {
   }, [])
 
   const onChange = (value) => {
+    // if (!addServerValueAlias) {
+    //   setAddServerValueAlias(value)
+    // }
     setAddServerValue(value)
   }
+  const onChangeAlias = (value) => {
+    setAddServerValueAlias(value)
+  }
 
   //save serve and change
   const onSave = () => {
-    let serve = new ReplaceStr(currentServer)
 
+    let serve = new ReplaceStr(currentServer)
     localStorage.setItem('serve', JSON.stringify(serve.ip))
-
+    getServeList()
     onClose()
-    history.push({ pathname: '/', search: '' })
-    history.go(0)
+    // history.push({ pathname: '/', search: '' })
+    // history.go(0)
   }
 
   const pingServer = () => {
+    if (addServerValue && !addServerValueAlias) {
+      UINotificationService.show({
+        title: 'Alias Is Required',
+        message: 'Please input an alias',
+        type: 'warning',
+        autoClose: true,
+      });
+      return
+    }
     const start = (new Date()).getTime()
     let server = process.env.NODE_ENV === "development" ? `/${addServerValue}:2099` : `http://${addServerValue}:2099`
     fetch(server, { mode: 'no-cors', }).then(() => {
@@ -68,7 +85,7 @@ function EditServerContent(props) {
         addServerList()
       }
     }).catch((err) => {
-      console.log('err: ', err.message);
+
       UINotificationService.show({
         title: 'Error Message Prompt',
         message: err.message ? err.message : 'Failed to fetch',
@@ -86,22 +103,23 @@ function EditServerContent(props) {
   const addServerList = () => {
     if (serverList.some(item => item.key == addServerValue)) {
       UINotificationService.show({
-        title: 'Error Message Prompt',
+        title: 'Waning Message Prompt',
         message: 'Service already exists',
-        type: 'error',
+        type: 'warning',
         autoClose: true,
       });
       return
     }
     setServerList(v => {
       let list = [
         ...v,
-        { key: addServerValue, ip: addServerValue }
+        { key: addServerValue, ip: addServerValue, alias: addServerValueAlias }
       ]
       localStorage.setItem('serverList', JSON.stringify(list))
       return list
     })
     setAddServerValue()
+    setAddServerValueAlias()
   }
 
 
@@ -132,10 +150,10 @@ function EditServerContent(props) {
         />
 
       </div> */}
-      <div className='current-server'>
+      <div className='add-server-alias'>
         <div className="wlColumn preset">Add Server
         </div>
-        <div className="wlColumn add-server " >
+        <div className="wlColumn add-server" >
           {/* <input
             type="text"
             className="preferencesInput"
@@ -146,8 +164,17 @@ function EditServerContent(props) {
             type="string"
             value={addServerValue}
             // label={t('Add Server')}
+            placeholder={t('Please Input IP')}
             onChange={evt => onChange(evt.target.value)}
           />
+          <TextInput
+            type="string"
+            value={addServerValueAlias}
+            // label={t('Add Server')}
+            placeholder={t('Please Server Alias')}
+            onChange={evt => onChangeAlias(evt.target.value)}
+            style={{ marginLeft: '20px' }}
+          />
           <button
             className="btn btn-primary add-button"
             onClick={pingServer}
@@ -156,7 +183,7 @@ function EditServerContent(props) {
           </button>
         </div>
       </div>
-      <div className='current-server'>
+      {/* <div className='current-server'>
         <div className="wlColumn preset">Current Server
         </div>
         <div className="wlColumn description">
@@ -167,19 +194,20 @@ function EditServerContent(props) {
             disabled={true}
           />
         </div>
-      </div>
+      </div> */}
       <div className="WindowLevelPreferences">
         <div className="wlColumn">
           <div className="wlRow header">
             <div className="wlColumn preset">Serial Number</div>
             <div className="wlColumn description">Server IP</div>
-            <div className="wlColumn window">Option</div>
+            <div className="wlColumn window">Server Alias</div>
+            {/* <div className="wlColumn preset">Option</div> */}
           </div>
           {serverList.map((item, index) => {
             return (
               <div className="wlRow" key={item.key}>
                 <div className="wlColumn preset form-center">{index + 1}</div>
-                <div className="wlColumn description">
+                <div className="wlColumn description" >
                   <input
                     type="text"
                     className="preferencesInput"
@@ -191,18 +219,29 @@ function EditServerContent(props) {
                   />
                 </div>
                 <div className="wlColumn window form-center">
+                  <input
+                    type="text"
+                    className="preferencesInput"
+                    value={item.alias}
+                    data-key={item.key}
+                    data-inputname="description"
+                    disabled={true}
+                  // onChange={handleInputChange}
+                  />
+                </div>
+                {/* <div className="wlColumn preset form-center">
                   <input
                     type="radio"
                     className="server-radio"
                     checked={currentServer == item.key}
                     data-key={item.key}
-                    data-inputname="window"
+                    data-inputname="preset"
                     onChange={e => {
                       handleRadioChange(e);
                     }}
                     value={item.key}
-                  />
-                </div>
+                  /> */}
+                {/* </div> */}
 
               </div>
             );

platform/viewer/src/index.js

@@ -75,7 +75,7 @@ let serverList = JSON.parse(localStorage.getItem("serverList"))
 
 if (JSON.stringify(serverList) == "{}" || !serverList) {
   localStorage.setItem('serverList', JSON.stringify([
-    { key: serve.ip, ip: serve.ip }
+    { key: serve.ip, ip: serve.ip, alias: serve.ip }
   ]))
 }