Copy master 2

ui_src/src/App.js

@@ -40,7 +40,7 @@ import errorIcon from './assets/images/errorIcon.svg';
 import MessageJourney from './domain/messageJourney';
 import Administration from './domain/administration';
 import { ApiEndpoints } from './const/apiEndpoints';
-import { isCloud } from './services/valueConvertor';
+import { isCheckoutCompletedTrue, isCloud } from './services/valueConvertor';
 import warnIcon from './assets/images/warnIcon.svg';
 import AppWrapper from './components/appWrapper';
 import StationsList from './domain/stationsList';
@@ -95,6 +95,7 @@ const App = withRouter(() => {
                 stigg.setCustomerId(data.account_name);
                 localStorage.setItem(USER_IMAGE, data.user_image);
                 AuthService.saveToLocalStorage(data);
+                dispatch({ type: 'SET_USER_DATA', payload: data });
                 try {
                     const ws_port = data.ws_port;
                     const SOCKET_URL = ENVIRONMENT === 'production' ? `${WS_PREFIX}://${WS_SERVER_URL_PRODUCTION}:${ws_port}` : `${WS_PREFIX}://localhost:${ws_port}`;
@@ -120,7 +121,6 @@ const App = withRouter(() => {
                 } catch (error) {
                     throw new Error(error);
                 }
-                dispatch({ type: 'SET_USER_DATA', payload: data });
             }
             history.push('/overview');
             setCloudLogedIn(true);
@@ -207,13 +207,13 @@ const App = withRouter(() => {
     };
 
     useEffect(() => {
-        const urlParams = new URLSearchParams(window.location.search);
-        const checkout_completed = urlParams.get('checkoutCompleted');
+        const url = window.location.href;
+        const checkout_completed = isCheckoutCompletedTrue(url);
         if (checkout_completed === null) {
             setRefreshPlan(false);
             return;
         }
-        if (checkout_completed === 'true') {
+        if (checkout_completed) {
             setTimeout(() => {
                 handleUpdatePlan();
             }, 3000);
@@ -670,9 +670,8 @@ const App = withRouter(() => {
                                 component={<AppWrapper content={<Administration />}></AppWrapper>}
                             />
                             <PrivateRoute exact path={`${pathDomains.administration}/usage`} component={<AppWrapper content={<Administration />}></AppWrapper>} />
-                            {state?.userData?.user_type === 'root' && (
-                                <PrivateRoute exact path={`${pathDomains.administration}/payments`} component={<AppWrapper content={<Administration />}></AppWrapper>} />
-                            )}
+                            <PrivateRoute exact path={`${pathDomains.administration}/payments`} component={<AppWrapper content={<Administration />}></AppWrapper>} />
+
                             <PrivateRoute
                                 path="/"
                                 component={

ui_src/src/components/createStationForm/style.scss

@@ -240,7 +240,8 @@
             width: 20px;
         }
     }
-    .upgrade-button-wrapper {    
+    .upgrade-button-wrapper {  
+            padding: 5px 5px;  
             background: var(--yellow);
             width: 94px;
             border-radius: 32px;

ui_src/src/components/lockFeature/style.scss

@@ -34,7 +34,7 @@
         display: flex;
         height: 20px;
         .upgrade-button-wrapper{
-            padding: 0 5px;
+            padding: 5px 5px;
             background: var(--purple);
             border-radius: 32px;
             .upgrade-plan{

ui_src/src/components/sdkExsample/index.js

@@ -214,7 +214,7 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
             } else if (tabValue === 'Consumer') {
                 codeEx.consumer = codeEx.consumer?.replaceAll('<consumer-name>', formFields.producerConsumerName);
             }
-            if (!formFields.blocking && tabValue === 'Producer' && langSelected === 'Python') {
+            if (formFields.blocking && tabValue === 'Producer' && langSelected === 'Python') {
                 codeEx.producer = codeEx.producer?.replaceAll('<blocking>', `, blocking=True`);
             } else codeEx.producer = codeEx.producer?.replaceAll('<blocking>', '');
             if (formFields.async && tabValue === 'Producer' && langSelected !== 'Python') {
@@ -687,10 +687,10 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                                                     </Form.Item>
                                                 </>
                                             )}
-                                            {langSelected === 'Python' && (
+                                            {langSelected === 'Python' && tabValueRest === 'Produce' && (
                                                 <div className="username-section">
                                                     <TitleComponent
-                                                        headerTitle="Non-blocking/Bloking"
+                                                        headerTitle="Bloking"
                                                         typeTitle="sub-header"
                                                         headerDescription="For better performance, the client won't block requests while waiting for an acknowledgment"
                                                     />
@@ -700,10 +700,10 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                                                     </Form.Item>
                                                 </div>
                                             )}
-                                            {langSelected !== 'Python' && (
+                                            {langSelected !== 'Python' && tabValueRest === 'Produce' && (
                                                 <div className="username-section">
                                                     <TitleComponent
-                                                        headerTitle="Sync/Async"
+                                                        headerTitle="Async"
                                                         typeTitle="sub-header"
                                                         headerDescription="For better performance, the client won't block requests while waiting for an acknowledgment"
                                                     />

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

@@ -12,15 +12,13 @@
 
 import '../style.scss';
 
-import React, { useContext } from 'react';
+import React from 'react';
 import PaymentsColor from '../../../assets/images/setting/paymentsColor.svg';
 import PaymentsGray from '../../../assets/images/setting/paymentsGray.svg';
 import RequestsColor from '../../../assets/images/setting/requestsColor.svg';
 import RequestsGray from '../../../assets/images/setting/requestsGray.svg';
-import { Context } from '../../../hooks/store';
 
 function BillingMenu({ selectedMenuItem, setMenuItem }) {
-    const [state, dispatch] = useContext(Context);
     return (
         <div className="side-menu">
             <p className="header">Billing</p>
@@ -29,12 +27,10 @@ function BillingMenu({ selectedMenuItem, setMenuItem }) {
                 <img src={selectedMenuItem === 'usage' ? RequestsColor : RequestsGray} alt="usage report" />
                 Usage Report
             </div>
-            {state?.userData?.user_type === 'root' && (
-                <div className={selectedMenuItem === 'payments' ? 'menu-item selected' : 'menu-item'} onClick={() => setMenuItem('payments')}>
-                    <img src={selectedMenuItem === 'payments' ? PaymentsColor : PaymentsGray} alt="usage report" />
-                    Payments
-                </div>
-            )}
+            <div className={selectedMenuItem === 'payments' ? 'menu-item selected' : 'menu-item'} onClick={() => setMenuItem('payments')}>
+                <img src={selectedMenuItem === 'payments' ? PaymentsColor : PaymentsGray} alt="usage report" />
+                Payments
+            </div>
         </div>
     );
 }

ui_src/src/domain/administration/integrations/components/integrationItem/style.scss

@@ -95,6 +95,9 @@ integ-item{
         padding: 0 15px;
         display: flex;
         align-items: center;
+        .tag-wrapper{
+            max-width: 160px !important;
+        }
     }
 }
 

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

@@ -150,7 +150,7 @@ const Integrations = () => {
 
                         const key = integrationItem.name;
                         const integrationElement = (
-                            <IntegrationItem lockFeature={integrationItem.name === 'S3' && storageTiringLimits} key={key} value={integrationItem} />
+                            <IntegrationItem lockFeature={isCloud() && integrationItem.name === 'S3' && storageTiringLimits} key={key} value={integrationItem} />
                         );
 
                         if (integrationItem.comingSoon) {

ui_src/src/domain/messageJourney/index.js

@@ -16,7 +16,7 @@ import React, { useEffect, useContext, useState } from 'react';
 import { StringCodec, JSONCodec } from 'nats.ws';
 import { useHistory } from 'react-router-dom';
 
-import { convertBytes, parsingDate } from '../../services/valueConvertor';
+import { convertBytes, extractValueFromURL, parsingDate } from '../../services/valueConvertor';
 import PoisonMessage from './components/poisonMessage';
 import { ApiEndpoints } from '../../const/apiEndpoints';
 import BackIcon from '../../assets/images/backIcon.svg';
@@ -32,8 +32,8 @@ import { showMessages } from '../../services/genericServices';
 const MessageJourney = () => {
     const [state, dispatch] = useContext(Context);
     const url = window.location.href;
-    const messageId = parseInt(url.split('stations/')[1].split('/')[1]);
-    const stationName = url.split('stations/')[1].split('/')[0];
+    const messageId = extractValueFromURL(url, 'id');
+    const stationName = extractValueFromURL(url, 'name');
     const [isLoading, setisLoading] = useState(false);
     const [processing, setProcessing] = useState(false);
     const [messageData, setMessageData] = useState({});

ui_src/src/domain/overview/getStarted/hooks/reducer.js

@@ -19,7 +19,7 @@ const initialState = {
         retention_value: 3600,
         storage_type: 'file',
         replicas: 1,
-        days: 7,
+        days: 1,
         hours: 0,
         minutes: 0,
         seconds: 0,

ui_src/src/domain/overview/getStarted/index.js

@@ -75,7 +75,7 @@ const initialState = {
         storage_type: 'file',
         replicas: 'No HA (1)',
         partitions_number: 1,
-        days: 7,
+        days: 1,
         hours: 0,
         minutes: 0,
         seconds: 0,

ui_src/src/domain/overview/integrations/index.js

@@ -26,17 +26,19 @@ import DebeziumIntegration from '../../administration/integrations/components/de
 import { httpRequest } from '../../../services/http';
 import { ApiEndpoints } from '../../../const/apiEndpoints';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
+import LockFeature from '../../../components/lockFeature';
 
 const Integrations = () => {
     const [state, dispatch] = useContext(Context);
     const [modalIsOpen, modalFlip] = useState(false);
     const [integrations, setIntegrations] = useState([
         { name: 'Slack', logo: slackLogo, value: {} },
         { name: 'S3', logo: s3Logo, value: {} },
-        { name: 'Debezium and Postgres', logo: debeziumIcon, value: {} }
+        { name: 'Debezium', logo: debeziumIcon, value: {} }
     ]);
     const history = useHistory();
     const ref = useRef();
+    const storageTiringLimits = state?.userData?.entitlements && state?.userData?.entitlements['feature-storage-tiering'] ? false : true;
 
     useEffect(() => {
         getallIntegration();
@@ -96,7 +98,7 @@ const Integrations = () => {
                         value={integrations[1]?.value}
                     />
                 );
-            case 'Debezium and Postgres':
+            case 'Debezium':
                 return (
                     <DebeziumIntegration
                         close={(value) => {
@@ -126,19 +128,27 @@ const Integrations = () => {
                                 className="integration-item"
                                 key={index}
                                 onClick={() => {
-                                    ref.current = integration.name;
-                                    modalFlip(true);
+                                    if (storageTiringLimits && integration.name === 'S3') {
+                                        return;
+                                    } else {
+                                        ref.current = integration.name;
+                                        modalFlip(true);
+                                    }
                                 }}
                             >
-                                {integrations[index]?.value && Object.keys(integrations[index]?.value).length > 0 && <CheckCircleIcon className="connected" />}
+                                {storageTiringLimits && integration.name === 'S3' ? (
+                                    <LockFeature header={'Storage tiering'} />
+                                ) : (
+                                    integrations[index]?.value && Object.keys(integrations[index]?.value).length > 0 && <CheckCircleIcon className="connected" />
+                                )}
                                 <img className="img-icon" src={integration.logo} alt={integration.name} />
                                 <label className="integration-name">{integration.name}</label>
                             </div>
                         );
                     })}
                 </div>
             </div>
-            <Modal className="integration-modal" height="95vh" width="720px" displayButtons={false} clickOutside={() => modalFlip(false)} open={modalIsOpen}>
+            <Modal className="integration-modal" height="96vh" width="720px" displayButtons={false} clickOutside={() => modalFlip(false)} open={modalIsOpen}>
                 {modalContent()}
             </Modal>
         </div>

ui_src/src/domain/overview/integrations/style.scss

@@ -21,7 +21,7 @@
         justify-content: space-between;
         .integration-item {
             border: 1px solid #f1f1f1;
-            min-width: 85px;
+            min-width: 30%;
             border-radius: 4px;
             padding: 8px 15px 8px 10px;
             cursor: pointer;
@@ -47,6 +47,13 @@
                 margin-left: 10px;
                 cursor: pointer;
             }
+            .lock-feature-icon{
+                position: absolute;
+                width: 17px;
+                height: 17px;
+                top: -5px;
+                right: -5px;   
+            }
         }
     }
 }

ui_src/src/domain/overview/style.scss

@@ -186,8 +186,8 @@
         align-items: center;
         height: 100%;
         img {
-            width: 90px;
-            height: 90px;
+            width: 70px;
+            height: 70px;
         }
         p {
             margin-bottom: 10px;

ui_src/src/domain/overview/tags/style.scss

@@ -10,7 +10,6 @@
         margin-top: 10px;
         display: flex;
         flex-direction: column;
-        justify-content: space-around;
         .tag-item {
             display: flex;
             justify-content: space-between;

ui_src/src/domain/overview/usage/index.js

@@ -18,9 +18,11 @@ import './style.scss';
 const Usage = () => {
     const [state, dispatch] = useContext(Context);
 
-    const actual = state?.monitor_data?.billing_details?.actual_usage || 0;
-    const total = state?.monitor_data?.billing_details?.total_included || 1;
-    const widthInPercentage = (actual / total) * 100 > 100 ? 100 : (actual / total) * 100;
+    const actual = state?.monitor_data?.billing_details?.actual_usage ?? 0;
+    const total = state?.monitor_data?.billing_details?.total_included || 2;
+    const actualCapped = actual > 2 ? 2 : actual;
+
+    const widthInPercentage = (actualCapped / total) * 100 > 100 ? 100 : (actualCapped / total) * 100;
 
     const dataStyle = {
         width: `${widthInPercentage}%`,
@@ -49,7 +51,7 @@ const Usage = () => {
                         >
                             <div className="dividerContainer">
                                 <span className="labelMain">Current usage</span>
-                                <span className="labelSecondary">{`${actual} GB`}</span>
+                                <span className="labelSecondary">{`${actualCapped} GB`}</span>
                             </div>
                         </div>
                         <div className="totalContainer">

ui_src/src/domain/schema/components/schemaBox/style.scss

@@ -27,6 +27,9 @@
                 line-height: 24px;
                 width: 160px;
                 margin-left:7px;
+                span {
+                    cursor: pointer;
+                }
             }
             .is-used{
                 display: flex;

ui_src/src/domain/schema/components/schemaDetails/index.js

@@ -344,7 +344,7 @@ function SchemaDetails({ schemaName, closeDrawer }) {
                     <div className="wrapper">
                         <img src={typeIcon} alt="typeIcon" />
                         <p>Type:</p>
-                        {schemaDetails?.type === 'json' ? <span>JSON schema</span> : <span> {schemaDetails?.type}</span>}
+                        {schemaDetails?.type === 'json' ? <span className="capitalize">JSON schema</span> : <span className="capitalize"> {schemaDetails?.type}</span>}
                     </div>
                     <div className="wrapper">
                         <img src={createdByIcon} alt="createdByIcon" />
@@ -514,7 +514,7 @@ function SchemaDetails({ schemaName, closeDrawer }) {
                             placeholder={
                                 <div className="attach-button">
                                     <AddRounded className="add" />
-                                    <span>Enforce to Station</span>
+                                    <span>Enforce on Station</span>
                                 </div>
                             }
                             radiusType="semi-round"

ui_src/src/domain/schema/components/schemaDetails/style.scss

@@ -32,6 +32,8 @@ schema-details {
                     font-size: 12px;
                     line-height: 14px;
                     font-family: 'InterMedium';
+                }
+                .capitalize{
                     text-transform:capitalize;
                 }
             }

ui_src/src/domain/stationOverview/index.js

@@ -15,7 +15,7 @@ import './style.scss';
 import React, { useEffect, useContext, useState, createContext, useReducer } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { parsingDate } from '../../services/valueConvertor';
+import { extractValueFromURL, parsingDate } from '../../services/valueConvertor';
 import StationOverviewHeader from './stationOverviewHeader';
 import StationObservabilty from './stationObservabilty';
 import { ApiEndpoints } from '../../const/apiEndpoints';
@@ -36,7 +36,7 @@ let sub;
 const StationOverview = () => {
     const [stationState, stationDispatch] = useReducer(Reducer);
     const url = window.location.href;
-    const stationName = url.split('stations/')[1];
+    const stationName = extractValueFromURL(url, 'name');
     const history = useHistory();
     const [state, dispatch] = useContext(Context);
     const [isLoading, setisLoading] = useState(false);