UI enhancements

ui_src/src/App.js

@@ -461,6 +461,11 @@ const App = withRouter((props) => {
                                 path={`${pathDomains.administration}/integrations`}
                                 component={<AppWrapper content={<Administration step={'integrations'} />}></AppWrapper>}
                             />
+                            <PrivateRoute
+                                exact
+                                path={`${pathDomains.administration}/cluster_configuration`}
+                                component={<AppWrapper content={<Administration step={'cluster_configuration'} />}></AppWrapper>}
+                            />
                             <PrivateRoute
                                 exact
                                 path={`${pathDomains.administration}/usage`}

ui_src/src/components/sideBar/index.js

@@ -206,7 +206,15 @@ function SideBar() {
     return (
         <div className="sidebar-container">
             <div className="upper-icons">
-                <img src={Logo} width="45" className="logoimg" alt="logo" onClick={() => history.push(pathDomains.overview)} />
+                <img
+                    src={isCloud() ? state?.companyLogo || Logo : Logo}
+                    width="45"
+                    height="45"
+                    className="logoimg"
+                    alt="logo"
+                    onClick={() => history.push(pathDomains.overview)}
+                />
+
                 <div
                     className="item-wrapper"
                     onMouseEnter={() => setHoveredItem('overview')}

ui_src/src/domain/administration/accountMenu.js

@@ -37,28 +37,19 @@ function AccountMenu({ selectedMenuItem, setMenuItem }) {
                     <img src={selectedMenuItem === 'integrations' ? IntegrationColor : IntegrationGray} alt="notifications" />
                     Integrations
                 </div>
+                <div className={selectedMenuItem === 'cluster_configuration' ? 'menu-item selected' : 'menu-item'} onClick={() => setMenuItem('cluster_configuration')}>
+                    <img src={selectedMenuItem === 'cluster_configuration' ? ClusterConfColor : ClusterConfGray} alt="clusterConfiguration" />
+                    Environment configuration
+                </div>
                 {!isCloud() && (
                     <>
-                        <div
-                            className={selectedMenuItem === 'cluster_configuration' ? 'menu-item selected' : 'menu-item'}
-                            onClick={() => setMenuItem('cluster_configuration')}
-                        >
-                            <img src={selectedMenuItem === 'cluster_configuration' ? ClusterConfColor : ClusterConfGray} alt="clusterConfiguration" />
-                            Environment configuration
-                        </div>
                         <div className={selectedMenuItem === 'version_upgrade' ? 'menu-item selected' : 'menu-item'} onClick={() => setMenuItem('version_upgrade')}>
                             <img src={selectedMenuItem === 'version_upgrade' ? versionUpgradeColor : versionUpgradeGray} alt="versionUpgrade" />
                             System information
                             {!state.isLatest && <div className="update-available">Update available</div>}
                         </div>
                     </>
                 )}
-                {isCloud() && (
-                    <div className={selectedMenuItem === 'usage' ? 'menu-item selected' : 'menu-item'} onClick={() => setMenuItem('usage')}>
-                        <img src={selectedMenuItem === 'usage' ? RequestsColor : RequestsGray} alt="usage report" />
-                        Usage Report
-                    </div>
-                )}
             </div>
         </>
     );

ui_src/src/domain/administration/billing/billingMenu.js

@@ -21,6 +21,8 @@ import RequestsGray from '../../../assets/images/setting/requestsGray.svg';
 function BillingMenu({ selectedMenuItem, setMenuItem }) {
     return (
         <div className="side-menu">
+            <p className="header">Billing</p>
+            <p className="sub-header">View your monthly usage</p>
             <div className={selectedMenuItem === 'usage' ? 'menu-item selected' : 'menu-item'} onClick={() => setMenuItem('usage')}>
                 <img src={selectedMenuItem === 'usage' ? RequestsColor : RequestsGray} alt="usage report" />
                 Usage Report

ui_src/src/domain/administration/clusterConfiguration/index.js

@@ -14,7 +14,7 @@ import './style.scss';
 
 import React, { useEffect, useState } from 'react';
 
-import { compareObjects } from '../../../services/valueConvertor';
+import { compareObjects, isCloud } from '../../../services/valueConvertor';
 import BrokerHostname from '../../../assets/images/BrokerHostname.svg';
 import UIHostname from '../../../assets/images/UIHostname.svg';
 import DeadLetterInHours from '../../../assets/images/DeadLetterInHours.svg';
@@ -51,10 +51,12 @@ function ClusterConfiguration() {
     const getConfigurationValue = async () => {
         try {
             const data = await httpRequest('GET', ApiEndpoints.GET_CLUSTER_CONFIGURATION);
-            localStorage.setItem(LOCAL_STORAGE_BROKER_HOST, data.broker_host);
-            localStorage.setItem(LOCAL_STORAGE_REST_GW_HOST, data.rest_gw_host);
-            localStorage.setItem(LOCAL_STORAGE_UI_HOST, data.ui_host);
-            localStorage.setItem(LOCAL_STORAGE_TIERED_STORAGE_TIME, data.tiered_storage_time_sec);
+            if (!isCloud()) {
+                localStorage.setItem(LOCAL_STORAGE_BROKER_HOST, data.broker_host);
+                localStorage.setItem(LOCAL_STORAGE_REST_GW_HOST, data.rest_gw_host);
+                localStorage.setItem(LOCAL_STORAGE_UI_HOST, data.ui_host);
+                localStorage.setItem(LOCAL_STORAGE_TIERED_STORAGE_TIME, data.tiered_storage_time_sec);
+            }
             setOldValues(data);
             setFormFields(data);
             setIsLoading(false);
@@ -67,11 +69,12 @@ function ClusterConfiguration() {
     const updateConfiguration = async () => {
         try {
             const data = await httpRequest('PUT', ApiEndpoints.EDIT_CLUSTER_CONFIGURATION, { ...formFields });
-            localStorage.setItem(LOCAL_STORAGE_BROKER_HOST, formFields.broker_host);
-            localStorage.setItem(LOCAL_STORAGE_REST_GW_HOST, formFields.rest_gw_host);
-            localStorage.setItem(LOCAL_STORAGE_UI_HOST, formFields.ui_host);
-            localStorage.setItem(LOCAL_STORAGE_TIERED_STORAGE_TIME, formFields.tiered_storage_time_sec);
-
+            if (!isCloud()) {
+                localStorage.setItem(LOCAL_STORAGE_BROKER_HOST, formFields.broker_host);
+                localStorage.setItem(LOCAL_STORAGE_REST_GW_HOST, formFields.rest_gw_host);
+                localStorage.setItem(LOCAL_STORAGE_UI_HOST, formFields.ui_host);
+                localStorage.setItem(LOCAL_STORAGE_TIERED_STORAGE_TIME, formFields.tiered_storage_time_sec);
+            }
             setIsChanged(false);
             setOldValues(data);
             message.success({
@@ -111,46 +114,61 @@ function ClusterConfiguration() {
             {!isLoading && (
                 <>
                     <div className="configuration-body">
-                        <SliderRow
-                            title="MAX MESSAGE SIZE"
-                            desc="Maximum  message size (payload + headers) in megabytes"
-                            value={formFields?.max_msg_size_mb}
-                            img={DeadLetterInHours}
-                            min={1}
-                            max={12}
-                            unit={'mb'}
-                            onChanges={(e) => handleChange('max_msg_size_mb', e)}
-                        />
-                        <SliderRow
-                            title="DEAD LETTERED MESSAGES RETENTION IN HOURS"
-                            desc="Amount of hours to retain dead lettered messages in a DLS"
-                            value={formFields?.dls_retention}
-                            img={DeadLetterInHours}
-                            min={1}
-                            max={30}
-                            unit={'h'}
-                            onChanges={(e) => handleChange('dls_retention', e)}
-                        />
-                        <SliderRow
-                            title="LOGS RETENTION IN DAYS"
-                            desc="Amount of days to retain system logs"
-                            img={LogsRetentionInDays}
-                            value={formFields?.logs_retention}
-                            min={1}
-                            max={100}
-                            unit={'d'}
-                            onChanges={(e) => handleChange('logs_retention', e)}
-                        />
-                        <TieredInputRow
-                            title="TIERED STORAGE UPLOAD INTERVAL"
-                            desc="(if configured) The interval which the broker will migrate a batch of messages to the second storage tier"
-                            img={TieredStorageInterval}
-                            value={formFields?.tiered_storage_time_sec}
-                            onChanges={(e, err) => {
-                                handleChange('tiered_storage_time_sec', e, err);
-                            }}
-                        />
-                        {localStorage.getItem(LOCAL_STORAGE_ENV) !== 'docker' && (
+                        {!isCloud() ? (
+                            <SliderRow
+                                title="MAX MESSAGE SIZE"
+                                desc="Maximum  message size (payload + headers) in megabytes"
+                                value={formFields?.max_msg_size_mb}
+                                img={DeadLetterInHours}
+                                min={1}
+                                max={12}
+                                unit={'mb'}
+                                onChanges={(e) => handleChange('max_msg_size_mb', e)}
+                            />
+                        ) : (
+                            <>
+                                <SliderRow
+                                    title="DEAD LETTERED MESSAGES RETENTION IN HOURS"
+                                    desc="Amount of hours to retain dead lettered messages in a DLS"
+                                    value={formFields?.dls_retention}
+                                    img={DeadLetterInHours}
+                                    min={1}
+                                    max={30}
+                                    unit={'h'}
+                                    onChanges={(e) => handleChange('dls_retention', e)}
+                                />
+                                <SliderRow
+                                    title="MAX MESSAGE SIZE"
+                                    desc="Maximum  message size (payload + headers) in megabytes"
+                                    value={formFields?.max_msg_size_mb}
+                                    img={DeadLetterInHours}
+                                    min={1}
+                                    max={12}
+                                    unit={'mb'}
+                                    onChanges={(e) => handleChange('max_msg_size_mb', e)}
+                                />
+                                <SliderRow
+                                    title="LOGS RETENTION IN DAYS"
+                                    desc="Amount of days to retain system logs"
+                                    img={LogsRetentionInDays}
+                                    value={formFields?.logs_retention}
+                                    min={1}
+                                    max={100}
+                                    unit={'d'}
+                                    onChanges={(e) => handleChange('logs_retention', e)}
+                                />
+                                <TieredInputRow
+                                    title="TIERED STORAGE UPLOAD INTERVAL"
+                                    desc="(if configured) The interval which the broker will migrate a batch of messages to the second storage tier"
+                                    img={TieredStorageInterval}
+                                    value={formFields?.tiered_storage_time_sec}
+                                    onChanges={(e, err) => {
+                                        handleChange('tiered_storage_time_sec', e, err);
+                                    }}
+                                />
+                            </>
+                        )}
+                        {localStorage.getItem(LOCAL_STORAGE_ENV) !== 'docker' && !isCloud() && (
                             <>
                                 <InputRow
                                     title="BROKER HOSTNAME"

ui_src/src/domain/administration/index.js

@@ -45,13 +45,11 @@ function Administration({ step }) {
                     break;
                 }
             case 'cluster_configuration':
-                if (!isCloud()) {
-                    if (window.location.href.split('/cluster_configuration').length > 1) {
-                        return <ClusterConfiguration />;
-                    } else {
-                        history.replace(`${pathDomains.administration}/cluster_configuration`);
-                        break;
-                    }
+                if (window.location.href.split('/cluster_configuration').length > 1) {
+                    return <ClusterConfiguration />;
+                } else {
+                    history.replace(`${pathDomains.administration}/cluster_configuration`);
+                    break;
                 }
             case 'version_upgrade':
                 if (!isCloud()) {
@@ -84,7 +82,7 @@ function Administration({ step }) {
         <div className="setting-container">
             <div className="menu-container">
                 <AccountMenu selectedMenuItem={selectedMenuItem} setMenuItem={(item) => selectMenuItem(item)} />
-                {/* {isCloud() && <BillingMenu selectedMenuItem={selectedMenuItem} setMenuItem={(item) => selectMenuItem(item)} />} */}
+                {isCloud() && <BillingMenu selectedMenuItem={selectedMenuItem} setMenuItem={(item) => selectMenuItem(item)} />}
             </div>
 
             <div className="setting-items">{getComponent()}</div>

ui_static_files/build/asset-manifest.json

@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/static/css/main.8eb13981.css",
-    "main.js": "/static/js/main.61322955.js",
+    "main.js": "/static/js/main.975cd586.js",
     "static/js/617.a5f8c4fc.chunk.js": "/static/js/617.a5f8c4fc.chunk.js",
     "static/js/2542.27de8743.chunk.js": "/static/js/2542.27de8743.chunk.js",
     "static/js/1737.e134cfd4.chunk.js": "/static/js/1737.e134cfd4.chunk.js",
@@ -275,6 +275,6 @@
   },
   "entrypoints": [
     "static/css/main.8eb13981.css",
-    "static/js/main.61322955.js"
+    "static/js/main.975cd586.js"
   ]
 }

ui_static_files/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Memphis.dev console is designed to simplify your work and give you a graphical user interface for controlling your stations, security, integrations, and observing your data and other vital metrics"/><link rel="manifest" href="/manifest.json"/><title>Memphis.dev Console</title><link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png"><link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png"><link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png"><meta name="theme-color" content="#ffffff"><script defer="defer" src="/static/js/main.61322955.js"></script><link href="/static/css/main.8eb13981.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Memphis.dev console is designed to simplify your work and give you a graphical user interface for controlling your stations, security, integrations, and observing your data and other vital metrics"/><link rel="manifest" href="/manifest.json"/><title>Memphis.dev Console</title><link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png"><link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png"><link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png"><meta name="theme-color" content="#ffffff"><script defer="defer" src="/static/js/main.975cd586.js"></script><link href="/static/css/main.8eb13981.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>