Skip to content

Commit

Permalink
implement group UI
Browse files Browse the repository at this point in the history 
Signed-off-by: Harsh Modi <[email protected]>
  • Loading branch information
@hjmodi
hjmodi committed Jan 11, 2024
1 parent 6a7a579 commit 4f12019
Show file tree
Hide file tree
Showing 2 changed files with 301 additions and 5 deletions.
199 changes: 197 additions & 2 deletions src/main/webui/src/app/components/content/group/GroupEdit.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,203 @@
* limitations under the License.
*/

import React from 'react';
import React, {useState, useEffect} from "react";
import {useLocation, useParams} from "react-router-dom";
import {useForm} from "react-hook-form";
import {PropTypes} from "prop-types";
import {StoreEditControlPanel as EditControlPanel} from "../common/StoreControlPanels.jsx";
import {DisableTimeoutHint, Hint} from "../common/Hints.jsx";
import {PackageTypeSelect} from "../common/PackageTypeSelect.jsx";
// import ViewJsonDebugger from './Debugger.jsx';
import {Utils} from "#utils/AppUtils.js";
import {IndyRest} from "#utils/RestClient.js";

const {storeRes, disableRes} = IndyRest;

export default function GroupEdit() {
return <div>This is not implemented yet!</div>;
const [state, setState] = useState({
store: {},
storeView: {},
});
const location = useLocation();
const {packageType, name} = useParams();
const {
register,
reset,
trigger,
handleSubmit,
formState: {errors},
} = useForm();

const path = location.pathname;
const mode = path.match(/.*\/new$/u) ? "new" : "edit";
// Give a default packageType
let store = {packageType: "maven", type: "group"};
useEffect(() => {
if (mode === "edit") {
const fetchStore = async () => {
// get Store data
const res = await storeRes.get(packageType, "group", name);
if (res.success) {
const raw = res.result;
const storeView = Utils.cloneObj(raw);
storeView.disabled =
raw.disabled === undefined ? false : raw.disabled;
// get Store disablement data
const timeoutRes = await disableRes.getStoreTimeout(
packageType,
"group",
name,
);
const cloned = Utils.cloneObj(storeView);
if (timeoutRes.success) {
const timeout = timeoutRes.result;
cloned.disableExpiration = timeout.expiration;
} else {
Utils.logMessage(`disable timeout getting failed! Error reason: ${timeoutRes.error.message}`,);
}
// Change state and re-rendering
setState({
storeView: cloned,
store: raw,
});
reset(raw);
} else {
// TODO: find another way to do error handling
Utils.logMessage(`Failed to get store data. Error reason: ${res.error.status}->${res.error.message}`,);
}
};

fetchStore();
}
}, [packageType, name, mode, reset]);

if (mode === "edit") {
store = state.store;
}

const changelog = register("changelog");
return (
<form onSubmit={e => e.preventDefault()}>
<div className="control-panel">
<EditControlPanel
mode={mode}
store={store}
handleSubmit={handleSubmit}
validate={trigger}
changelog={changelog}
/>
</div>

<div className="content-panel">
<div className="fieldset-caption">Basics</div>
<div className="fieldset">
<div className="detail-field">
<label>Package Type:</label>
{mode === "new" ?
<PackageTypeSelect register={register} formErrors={errors} />
:
<span className="key">{store.packageType}</span>
}
</div>
<div className="detail-field">
<label>Name:</label>
{mode === "new" ?
<span>
<input
type="text"
size="25"
{...register("name", {required: true, maxLength: 50})}
/>{" "}
{errors.name?.type === "required" &&
<span className="alert">Name is required</span>
}
{errors.name?.type === "maxLength" &&
<span className="alert">
Name&apos;s length should be less than 50
</span>
}
</span>
:
<span className="key">{store.name}</span>
}
</div>

<div className="detail-field">
<input
type="checkbox"
defaultChecked={!store.disabled}
{...register("enabled")}
/>{" "}
<label>Enabled?</label>
{store.disabled && store.disableExpiration &&
<span>
<Hint hintKey="Set to automatically re-enable at {TimeUtils.timestampToDateFormat(store.disableExpiration)}" />
</span>
}
</div>
<div className="detail-field">
<input
type="checkbox"
defaultChecked={store.prepend_constituent}
{...register("prepend_constituent")}
/>{" "}
<label>Prepend Constituents?</label>
<span>
<Hint hintKey="If enabled, all new constituents which are added not manually(like promotion) will be at the top of constituents list" />
</span>
</div>

<div className="sub-fields">
<div className="detail-field">
<label>Disable Timeout:</label>
<input
type="number"
defaultValue={store.disable_timeout}
{...register("disable_timeout", {min: -1, max: 999999999})}
/>{" "}
{errors.disable_timeout &&
<span className="alert">Not a valid number</span>
}
<br />
<DisableTimeoutHint />
</div>
</div>
</div>

<div className="fieldset-caption">Description</div>
<div className="fieldset">
<textarea
rows="3"
className="text-description"
{...register("description")}
>
{store.description}
</textarea>
</div>

<div className="fieldset-caption">Constituents</div>
<div className="fieldset">
<ol className="left-col detail-value detail-edit-list">
<lt><label>Current:</label><span className="hint">(hover for controls)</span></lt>
{store.constituents.map((constituent, i) => <li key={i} className="detail-value-list-item">{constituent}</li>)}

</ol>
<ol className="right-col detail-value detail-edit-list">
<lt><label>Available:</label><span className="hint">(click to add to constituents)</span></lt>
{store.available.map((available, i) => <li key={i} className="detail-value-list-item">{available}</li>)}
</ol>
</div>
</div>
{
// <ViewJsonDebugger enableDebug={enableDebug} storeJson={storeJson} rawJson={rawJson}
}
</form>
);
}

GroupEdit.propTypes = {
store: PropTypes.object,
location: PropTypes.object,
match: PropTypes.object,
};
107 changes: 104 additions & 3 deletions src/main/webui/src/app/components/content/group/GroupList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,109 @@
* limitations under the License.
*/

import React from 'react';
import React, {useEffect, useState} from "react";
import {useParams} from "react-router-dom";
import {ListJsonDebugger} from "../common/Debugger.jsx";
import ListControl from "../common/ListControl.jsx";
import {groupOptionLegend as options} from "../../ComponentConstants.js";
import {StoreListingWidget} from "../common/StoreListingWidget.jsx";
import {LoadingSpiner} from "../common/LoadingSpiner.jsx";
import {Utils} from "#utils/AppUtils.js";
import {IndyRest} from "#utils/RestClient.js";

export default function GruopList() {
return <div>This is not implemented yet!</div>;
const {storeRes, disableRes} = IndyRest;

const handlers = {
handleDebug: (event, setState) => {
setState({
enableDebug: event.target.checked,
});
},
handleSearch: (event, rawList, setState) => {
setState({
rawList,
listing: Utils.searchByKeyForNewStores(event.target.value, rawList),
});
},
handleSortBy: (event, rawList, setState) => {
setState({
rawList,
listing: Utils.sortByPropForStores(event.target.value, rawList),
});
},
};

export default function GroupList() {
const {packageType} = useParams();
const [state, setState] = useState({
rawList: [],
listing: [],
disabledMap: {},
enableDebug: false,
message: "",
});
const [loading, setLoading] = useState(true);

useEffect(() => {
setLoading(true);
const fetchdData = async () => {
const res = await storeRes.getStores(packageType, "group");
if (res.success) {
const timeoutRes = await disableRes.getAllStoreTimeout();
let disabledMap = {};
if (timeoutRes.success) {
const timeoutData = timeoutRes.result;
disabledMap = Utils.setDisableMap(timeoutData);
} else {
Utils.logMessage(`disable timeout get failed in group listing! Error reason: ${timeoutRes.error.message}`,);
}
let data = res.result;
if (typeof data === "string") {
data = JSON.parse(data);
}
setState({
rawList: data.items,
listing: data.items,
disabledMap,
});
} else {
setState({
message: res.error.message,
});
}
setLoading(false);
};
fetchdData();
}, [packageType]);

if (loading) {
return <LoadingSpiner />;
}

return (
<React.Fragment>
<ListControl
type="group"
legends={options}
handleSearch={event => handlers.handleSearch(event, state.rawList, setState)
}
handleDebug={event => handlers.handleDebug(event, setState)}
handleSortBy={event => handlers.handleSortBy(event, state.rawList, setState)
}
/>
{state.listing ?
<StoreListingWidget
storeList={state.listing}
disableMap={state.disabledMap}
storeType="group"
/>
:
<div className="container-fluid">No content fetched!</div>
}
<ListJsonDebugger
enableDebug={state.enableDebug}
jsonObj={state.listing}
/>
</React.Fragment>
);
}

0 comments on commit 4f12019

Please sign in to comment.