Skip to content

Commit

Permalink
Merge pull request #63 from ligangty/2.0-refactor
Browse files Browse the repository at this point in the history 
Use fetch instead of axios to reduce bundle size
  • Loading branch information
@ligangty
ligangty authored Nov 10, 2023
2 parents 33a922f + 3fc2186 commit be5e215
Show file tree
Hide file tree
Showing 9 changed files with 102 additions and 139 deletions.
25 changes: 8 additions & 17 deletions src/main/webui/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion src/main/webui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
"repository": "https://github.com/Commonjava/indy-ui-service",
"license": "ASLv2",
"dependencies": {
"axios": "^1.5.1",
"bootstrap": "^5.3.2",
"prop-types": "^15.8.1",
"react": "^18.2.0",
Expand Down
36 changes: 20 additions & 16 deletions src/main/webui/src/app/RestClient.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,24 @@
* limitations under the License.
*/

export const jsonGet = async function(payload){
const response = await fetch(payload.url, {
method: "GET",
credentials: 'same-origin',
headers: {
"Content-Type": "application/json",
},
body: payload.data ? payload.data : undefined
});
if(response.ok && payload.done){
await response.json().then(data=>payload.done(data));
}else if(!response.ok && payload.fail){
await response.text().then(data=>{
payload.fail(data, response.status, response.statusText);
});
}
const httpCall = (url, method, headers={}, payload) => fetch(url, {
method,
credentials: 'same-origin',
headers,
body: payload? payload : undefined
});

const http = {
get: (url, headers, payload) => httpCall(url, "GET", headers, payload),
post: (url, headers, payload) => httpCall(url, "POST", headers, payload),
put: (url, headers, payload) => httpCall(url, "PUT", headers, payload),
delete: (url, headers, payload) => httpCall(url, "DELETE", headers, payload)
};

const jsonRest ={
get: (url, payload) => httpCall(url, "GET", {"Content-type": "application/json"}, payload),
post: (url, payload) => httpCall(url, "POST", {"Content-type": "application/json"}, payload),
put: (url, payload) => httpCall(url, "PUT", {"Content-type": "application/json"}, payload)
};

export {http, jsonRest};
10 changes: 5 additions & 5 deletions src/main/webui/src/app/components/CompUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,11 +104,11 @@ export const Utils = {
return false;
},
reConstituents: store => {
let oldConstituents = store.constituents;
let constituents = [oldConstituents.length];
const oldConstituents = store.constituents;
const constituents = [oldConstituents.length];
for(let j=0; j<oldConstituents.length; j++){
let key = oldConstituents[j];
let c = {
const key = oldConstituents[j];
const c = {
key: oldConstituents[j],
detailHref: Utils.detailHref(key),
storeHref: Utils.storeHref(key),
Expand All @@ -128,7 +128,7 @@ export const Utils = {
isEmptyObj: obj => Object.keys(obj).length === 0 && obj.constructor === Object,
cloneObj: src => {
let target = {};
for (let prop in src) {
for (const prop in src) {
if (prop in src) {
target[prop] = src[prop];
}
Expand Down
51 changes: 19 additions & 32 deletions src/main/webui/src/app/components/content/RemoteEdit.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,36 +18,24 @@
import React, {useState, useEffect} from 'react';
import {useLocation, useNavigate, useParams} from 'react-router-dom';
import {PropTypes} from 'prop-types';
import axios from 'axios';
import {StoreEditControlPanel as EditControlPanel} from './StoreControlPanels.jsx';
import {DisableTimeoutHint, DurationHint, PrefetchHint, Hint} from './Hints.jsx';
// import ViewJsonDebugger from './Debugger.jsx';
import {Utils} from '../CompUtils.js';
// import Filters from '../Filters.js';
import {TimeUtils} from '../../TimeUtils.js';
import {PACKAGE_TYPES} from '../ComponentConstants.js';
// import jsonGet from '../../RestClient.js';
import {jsonRest} from '../../RestClient.js';

const init = (pkgType, storeName, setState) => {
const getUrl = `/api/admin/stores/${pkgType}/remote/${storeName}`;
useEffect(()=>{
const fetchStore = async () =>{
// get Store data
let isError = false;
const response = await axios.get(getUrl).catch(error =>{
isError = true;
let message = "";
if (error.response) {
message = JSON.parse(error.response.data).error;
}else{
message = error;
}
setState({
message
});
});
if (!isError){
let raw = response.data;
const response = await jsonRest.get(getUrl);
if (response.ok){
let raw = await response.json();
let storeView = Utils.cloneObj(raw);
storeView.disabled = raw.disabled === undefined ? false : raw.disabled;
storeView.useX509 = raw.server_certificate_pem || raw.key_certificate_pem;
Expand All @@ -57,19 +45,24 @@ const init = (pkgType, storeName, setState) => {

// get Store disablement data
const timeoutUrl = `/api/admin/schedule/store/${storeView.packageType}/${storeView.type}/${storeView.name}/disable-timeout`;
const timeoutResponse = await axios.get(timeoutUrl).catch(error=>{
isError = true;
Utils.logMessage(`disable timeout getting failed! Error reason: ${error}`);
});
const timeoutResponse = await jsonRest.get(timeoutUrl);
let cloned = Utils.cloneObj(storeView);
if (!isError){
cloned.disableExpiration = timeoutResponse.data.expiration;
if (timeoutResponse.ok){
const timeout = await timeoutResponse.json();
cloned.disableExpiration = timeout.expiration;
}else{
response.text().then(error=>Utils.logMessage(`disable timeout getting failed! Error reason: ${error}`));
}

// Change state and re-rendering
setState({
storeView: cloned,
store: raw
});
}else{
response.text().then(error=>setState({
message: error
}));
}
};

Expand All @@ -82,16 +75,10 @@ const saveStore = store => {
const postStore = async () =>{
// get Store data
let isError = false;
const response = await axios.post(getUrl, store).catch(error =>{
isError = true;
let message = "";
if (error.response) {
message = JSON.parse(error.response.data).error;
}else{
message = error;
}
Utils.logMessage(message);
});
const response = await jsonRest.post(getUrl, store);
if (!response.ok){
response.text().then(error=>Utils.logMessage(error));
}
const navigate = useNavigate();
if(!isError && (response.status >= 200 || response.status < 300)){
navigate(`/remote/${store.packageType}/view/${store.name}`);
Expand Down
44 changes: 21 additions & 23 deletions src/main/webui/src/app/components/content/RemoteList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,43 +15,41 @@
*/

import React, {useEffect, useState} from 'react';
import axios from 'axios';
import {ListJsonDebugger} from './Debugger.jsx';
import ListControl from "./ListControl.jsx";
import {remoteOptionLegend as options} from "../ComponentConstants.js";
import {Utils} from '../CompUtils.js';
import {StoreListingWidget} from './CommonPageWidget.jsx';
import {jsonRest} from '../../RestClient.js';
import {DisableTimeoutHint} from './Hints.jsx';

const init = (state, setState) => {
useEffect(()=>{
const fetchdData = async ()=>{
let isError = false;
const response = await axios.get(`/api/admin/stores/_all/remote`).catch(error=>{
isError = true;
let message = "";
if (error.response) {
message = JSON.parse(error.response.data).error;
}else{
message = error;
}
setState({
message
});
});
if (!isError){
const timeoutResponse = await axios.get('/api/admin/schedule/store/all/disable-timeout').catch(error=>{
isError=true;
Utils.logMessage(`disable timeout get failed in remote listing! Error reason: ${error}`);
});
const response = await jsonRest.get(`/api/admin/stores/_all/remote`);
if (response.ok){
const timeoutResponse = await jsonRest.get('/api/admin/schedule/store/all/disable-timeout');
let disabledMap = {};
if (!isError){
disabledMap = Utils.setDisableMap(timeoutResponse.data, state.listing);
Utils.logMessage(timeoutResponse);
if (timeoutResponse.ok){
const timeoutData = await timeoutResponse.json();
Utils.logMessage(timeoutData);
disabledMap = Utils.setDisableMap(timeoutData);
}else{
timeoutResponse.text().then(data=>Utils.logMessage(`disable timeout get failed in remote listing! Error reason: ${data}`));
}
const data = await response.json();
setState({
listing: response.data.items,
rawListing: response.data.items,
listing: data.items,
rawListing: data.items,
disabledMap
});
}else{
response.text().then(data=>{
setState({
message: data
});
});
}
};
fetchdData();
Expand Down
37 changes: 13 additions & 24 deletions src/main/webui/src/app/components/content/RemoteView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,28 +24,15 @@ import {DisableTimeoutHint, PrefetchHint, Hint, PasswordMask} from './Hints.jsx'
import {Utils} from '../CompUtils.js';
import {Filters} from '../Filters.js';
import {TimeUtils} from '../../TimeUtils.js';
import axios from 'axios';
import {jsonRest} from '../../RestClient.js';

const init = (pkgType, storeName, setState) => {
const storeUrl = `/api/admin/stores/${pkgType}/remote/${storeName}`;
useEffect(()=>{
const fetchStore = async () =>{
// get Store data
let isError = false;
const response = await axios.get(storeUrl).catch(error =>{
isError = true;
let message = "";
if (error.response) {
message = JSON.parse(error.response.data).error;
}else{
message = error;
}
setState({
message
});
});
if (!isError){
let raw = response.data;
const fetchStore = async () => {
const response = await jsonRest.get(storeUrl);
if (response.ok){
let raw = await response.json();
let store = Utils.cloneObj(raw);
store.disabled = raw.disabled === undefined ? false : raw.disabled;
store.useX509 = raw.server_certificate_pem || raw.key_certificate_pem;
Expand All @@ -55,18 +42,20 @@ const init = (pkgType, storeName, setState) => {

// get Store disablement data
const timeoutUrl = `/api/admin/schedule/store/${store.packageType}/${store.type}/${store.name}/disable-timeout`;
const timeoutResponse = await axios.get(timeoutUrl).catch(error=>{
isError = true;
Utils.logMessage(`disable timeout getting failed! Error reason: ${error}`);
});
const timeoutResponse = await jsonRest.get(timeoutUrl);
let newStore = Utils.cloneObj(store);
if (!isError){
newStore.disableExpiration = timeoutResponse.data.expiration;
if(timeoutResponse.ok){
const timeoutData = await timeoutResponse.json();
newStore.disableExpiration = timeoutData.expiration;
}
// Change state and re-rendering
setState({
store: newStore
});
}else{
response.text().then(data=>{
Utils.logMessage(`Failed to get store data. Error reason: ${response.status}->${response.statusText}`);
});
}
};

Expand Down
Loading

0 comments on commit be5e215

Please sign in to comment.