Skip to content

Commit 3981887

Browse files
FancMa01FancMa01
authored
adjust backend to handle new mysql server, adjust front-end functiona… (#695)
* adjust backend to handle new mysql server, adjust front-end functionality slightly * Update orbitMegaphone.js
1 parent b17ed1c commit 3981887

File tree

9 files changed

+337
-289
lines changed

9 files changed

+337
-289
lines changed

‎client-reactjs/src/components/application/orbitMonitoring/BasicTab.jsx

+35-66
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React, { useState, useRef } from 'react';
22
import { message, Form, Row, Col, AutoComplete, Spin, Select, Input } from 'antd';
33
import { authHeader, handleError } from '../../common/AuthHeader.js';
44
import { useSelector } from 'react-redux';
@@ -11,71 +11,24 @@ const BasicTab = ({
1111
setSelectedOrbitBuild,
1212
monitoringDetails,
1313
setMonitoringDetails,
14+
businessUnits,
15+
products,
16+
domainLoading,
17+
domainStatus,
18+
productLoading,
19+
productStatus,
1420
}) => {
15-
const [products, setProducts] = useState([]);
16-
const [businessUnits, setBusinessUnits] = useState([]);
21+
const [orbitBuildSuggestions, setOrbitBuildSuggestions] = useState([]);
22+
const [displayBuildInfo, setDisplayBuildInfo] = useState();
23+
const [loading, setLoading] = useState(false);
24+
const [status, setStatus] = useState(null);
25+
26+
const searchRef = useRef(null);
1727

1828
const {
1929
application: { applicationId },
2030
} = useSelector((state) => state.applicationReducer);
2131

22-
useEffect(() => {
23-
getProducts();
24-
getDomains();
25-
}, [applicationId]);
26-
27-
const getProducts = async () => {
28-
try {
29-
const options = {
30-
method: 'GET',
31-
headers: authHeader(),
32-
};
33-
const response = await fetch(`/api/orbit/getProducts/${applicationId}`, options);
34-
if (!response.ok) handleError(response);
35-
36-
const productOptions = await response.json();
37-
38-
let finalProductOptions = [];
39-
40-
productOptions.map((product) => {
41-
finalProductOptions.push({ label: product.product_name, value: product.product_name });
42-
});
43-
44-
setProducts(finalProductOptions);
45-
} catch (error) {
46-
console.log(error);
47-
message.error('There was an error getting Products from Fido');
48-
}
49-
};
50-
51-
const getDomains = async () => {
52-
try {
53-
const options = {
54-
method: 'GET',
55-
headers: authHeader(),
56-
};
57-
const response = await fetch(`/api/orbit/getDomains/${applicationId}`, options);
58-
if (!response.ok) handleError(response);
59-
60-
const domainOptions = await response.json();
61-
62-
let finalDomainOptions = [];
63-
64-
domainOptions.map((domain) => {
65-
finalDomainOptions.push({ label: domain.business_unit, value: domain.business_unit });
66-
});
67-
68-
setBusinessUnits(finalDomainOptions);
69-
} catch (error) {
70-
console.log(error);
71-
message.error('There was an error getting Domains from Fido');
72-
}
73-
};
74-
75-
const [orbitBuildSuggestions, setOrbitBuildSuggestions] = useState([]);
76-
const [displayBuildInfo, setDisplayBuildInfo] = useState();
77-
const [loading, setLoading] = useState(false);
78-
7932
const handleOrbitBuildSelect = async (selectedOrbitBuild) => {
8033
setSelectedOrbitBuild(selectedOrbitBuild);
8134
try {
@@ -107,9 +60,11 @@ const BasicTab = ({
10760
//loader to get suggestions
10861
const loadOrbitBuildSuggestions = async (searchText) => {
10962
setLoading(true);
63+
setStatus('warning');
11064
setSelectedOrbitBuild(searchText);
11165
if (searchText.length <= 3) {
11266
setLoading(false);
67+
setStatus(null);
11368
return;
11469
}
11570
if (!searchText.match(/^[a-zA-Z0-9:_ -]*$/)) {
@@ -131,11 +86,17 @@ const BasicTab = ({
13186
finalSuggestions.push({ value: build.Name, label: build.Name });
13287
});
13388

134-
setOrbitBuildSuggestions(finalSuggestions);
135-
setLoading(false);
89+
//if the searchText being returned isn't the same as the current value, then don't update the suggestions
90+
if (searchText === searchRef.current) {
91+
setOrbitBuildSuggestions(finalSuggestions);
92+
setLoading(false);
93+
setStatus(null);
94+
}
13695
} catch (error) {
13796
console.log(error);
13897
message.error('There was an error getting Builds from Orbit');
98+
setLoading(false);
99+
setStatus('error');
139100
}
140101
};
141102

@@ -147,9 +108,11 @@ const BasicTab = ({
147108
name="businessUnit"
148109
rules={[{ required: true, message: 'Required field' }]}>
149110
<Select
150-
placeholder="Select one"
111+
placeholder={domainLoading ? 'Fetching Options..' : 'Select one'}
151112
mode="single"
152113
options={businessUnits}
114+
loading={domainLoading}
115+
status={domainStatus}
153116
onChange={(value) => {
154117
setMonitoringDetails({
155118
...monitoringDetails,
@@ -163,9 +126,11 @@ const BasicTab = ({
163126
name="product"
164127
rules={[{ required: true, message: 'Required field' }]}>
165128
<Select
166-
placeholder="Select one"
129+
placeholder={productLoading ? 'Fetching Options..' : 'Select one'}
167130
mode="single"
168131
options={products}
132+
loading={productLoading}
133+
status={productStatus}
169134
onChange={(value) => {
170135
setMonitoringDetails({
171136
...monitoringDetails,
@@ -195,9 +160,13 @@ const BasicTab = ({
195160
<AutoComplete
196161
options={orbitBuildSuggestions}
197162
onSelect={handleOrbitBuildSelect}
198-
onSearch={(searchText) => loadOrbitBuildSuggestions(searchText)}
163+
onSearch={(searchText) => {
164+
searchRef.current = searchText;
165+
166+
loadOrbitBuildSuggestions(searchText);
167+
}}
199168
value={selectedOrbitBuild}
200-
status={loading ? 'warning' : null}></AutoComplete>
169+
status={status}></AutoComplete>
201170
<Spin spinning={loading} style={{ marginTop: '-1.6rem', float: 'right', marginRight: '1rem' }}></Spin>
202171
</Col>
203172
</Row>

‎client-reactjs/src/components/application/orbitMonitoring/OrbitMonitoring.jsx

+74
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,14 @@ const OrbitMonitoring = () => {
1414
const [selectedOrbitBuild, setSelectedOrbitBuild] = useState(null);
1515
const [editing, setEditing] = useState(null);
1616

17+
//product and business units, we fetch these on page load to avoid loading them every time the modal is opened
18+
const [products, setProducts] = useState([]);
19+
const [businessUnits, setBusinessUnits] = useState([]);
20+
const [domainLoading, setDomainLoading] = useState(false);
21+
const [domainStatus, setDomainStatus] = useState(null);
22+
const [productLoading, setProductLoading] = useState(false);
23+
const [productStatus, setProductStatus] = useState(null);
24+
1725
const {
1826
application: { applicationId },
1927
} = useSelector((state) => state.applicationReducer);
@@ -30,6 +38,8 @@ const OrbitMonitoring = () => {
3038
async function fetchBuilds() {
3139
if (applicationId) {
3240
await getOrbitMonitoring(applicationId);
41+
await getProducts();
42+
await getDomains();
3343
}
3444
}
3545
fetchBuilds();
@@ -82,6 +92,64 @@ const OrbitMonitoring = () => {
8292
}
8393
};
8494

95+
const getProducts = async () => {
96+
try {
97+
setProductLoading(true);
98+
setProductStatus('warning');
99+
const options = {
100+
method: 'GET',
101+
headers: authHeader(),
102+
};
103+
const response = await fetch(`/api/orbit/getProducts/${applicationId}`, options);
104+
if (!response.ok) handleError(response);
105+
106+
const productOptions = await response.json();
107+
108+
let finalProductOptions = [];
109+
110+
productOptions.map((product) => {
111+
finalProductOptions.push({ label: product.product_name, value: product.product_name });
112+
});
113+
114+
setProducts(finalProductOptions);
115+
setProductLoading(false);
116+
setProductStatus(null);
117+
} catch (error) {
118+
console.log(error);
119+
message.error('There was an error getting Products from Fido');
120+
setProductStatus('error');
121+
}
122+
};
123+
124+
const getDomains = async () => {
125+
try {
126+
setDomainLoading(true);
127+
setDomainStatus('warning');
128+
const options = {
129+
method: 'GET',
130+
headers: authHeader(),
131+
};
132+
const response = await fetch(`/api/orbit/getDomains/${applicationId}`, options);
133+
if (!response.ok) handleError(response);
134+
135+
const domainOptions = await response.json();
136+
137+
let finalDomainOptions = [];
138+
139+
domainOptions.map((domain) => {
140+
finalDomainOptions.push({ label: domain.business_unit, value: domain.business_unit });
141+
});
142+
143+
setBusinessUnits(finalDomainOptions);
144+
setDomainLoading(false);
145+
setDomainStatus(null);
146+
} catch (error) {
147+
console.log(error);
148+
message.error('There was an error getting Domains from Fido');
149+
setDomainStatus('error');
150+
}
151+
};
152+
85153
return (
86154
<>
87155
<BreadCrumbs
@@ -112,6 +180,12 @@ const OrbitMonitoring = () => {
112180
editing={editing}
113181
setEditing={setEditing}
114182
getOrbitMonitoring={getOrbitMonitoring}
183+
businessUnits={businessUnits}
184+
products={products}
185+
domainLoading={domainLoading}
186+
domainStatus={domainStatus}
187+
productLoading={productLoading}
188+
productStatus={productStatus}
115189
/>
116190
</>
117191
);

‎client-reactjs/src/components/application/orbitMonitoring/OrbitMonitoringModal.jsx

+13
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,12 @@ const OrbitMonitoringModal = ({
1919
editing,
2020
setEditing,
2121
getOrbitMonitoring,
22+
businessUnits,
23+
products,
24+
domainLoading,
25+
domainStatus,
26+
productLoading,
27+
productStatus,
2228
}) => {
2329
//modal states
2430
const [modalWidth, setModalWidth] = useState(0);
@@ -215,6 +221,7 @@ const OrbitMonitoringModal = ({
215221
isActive: true,
216222
monitoringConditions: [],
217223
});
224+
await setNotificationDetails({});
218225
await getOrbitMonitoring(applicationId);
219226
};
220227

@@ -322,6 +329,12 @@ const OrbitMonitoringModal = ({
322329
setSelectedOrbitBuild={setSelectedOrbitBuild}
323330
monitoringDetails={monitoringDetails}
324331
setMonitoringDetails={setMonitoringDetails}
332+
businessUnits={businessUnits}
333+
products={products}
334+
domainLoading={domainLoading}
335+
domainStatus={domainStatus}
336+
productLoading={productLoading}
337+
productStatus={productStatus}
325338
/>
326339
</TabPane>
327340
<TabPane tab="Monitoring Parameters" key="2">

0 commit comments

Comments
 (0)