Skip to content

Commit

Permalink
Add skeleton for Group and Hosted pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@ligangty
ligangty committed Nov 14, 2023
1 parent 044c198 commit a0f8d5d
Show file tree
Hide file tree
Showing 6 changed files with 84 additions and 535 deletions.
37 changes: 37 additions & 0 deletions src/main/webui/src/app/components/content/GroupEdit.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/**
* Copyright (C) 2023 Red Hat, Inc. (https://github.com/Commonjava/indy-ui-service)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import React, {useState, useEffect} from 'react';
import {useLocation, useNavigate, useParams} from 'react-router-dom';
import {PropTypes} from 'prop-types';
import {StoreEditControlPanel as EditControlPanel} from './StoreControlPanels.jsx';
import {DisableTimeoutHint, DurationHint, PrefetchHint, Hint} from './Hints.jsx';
import {PackageTypeSelect} from './CommonPageWidget.jsx';
// import ViewJsonDebugger from './Debugger.jsx';
import {Utils} from '../CompUtils.js';
// import Filters from '../Filters.js';
import {TimeUtils} from '../../TimeUtils.js';
import {jsonRest} from '../../RestClient.js';


export default function GroupEdit() {
const [state, setState] = useState({
store: {},
storeView: {}
});

return <div>This is not implemented yet!</div>;
}
127 changes: 4 additions & 123 deletions src/main/webui/src/app/components/content/GroupList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,130 +22,11 @@ import ListControl from "./ListControl.jsx";
import {ListJsonDebugger} from './Debugger.jsx';
import {LocalURLSection, StoreNameSection} from './CommonPageWidget.jsx';

const init = function (state, setState){
useEffect(()=>{
Utils.getStores(state, setState, "group");
}, [state.listing]);
};


const createNew = () => {
// mock
};

const hideAll = () => {
// mock
};

const handleSearch = (event, rawList, setState) => {
setState({
listing: Utils.searchByKeyForNewStores(event.target.value, rawList)
});
};

const handleDebug = (event, setState) => {
setState({
enableDebug: event.target.checked
});
};

const GroupListItem = ({store, storeClass, disableMap}) => {
const [hideCons, setHideCons] = useState(true);
let constituents = store.constituents ? Utils.reConstituents(store) : undefined;
return (
<div className="store-listing-item">
<StoreNameSection store={store} storeClass={storeClass} />
<div className="fieldset">
<div>
<LocalURLSection storeKey={store.key} />
<div className="options-field field right-half">
<div className="inline-label">
{store.constituents && store.constituents.length} Constituent(s) [
<span className="option">
{
hideCons ?
<a href="#" onClick={event => {
event.preventDefault();
setHideCons(false);
}}>+</a> :
<a href="#" onClick={event => {
event.preventDefault();
setHideCons(true);
}}>-</a>
}
</span>
]
</div>
{
!hideCons && constituents &&
<ol className="content-panel subsection">
{
constituents.map(item => {
let itemStoreClass = Utils.isDisabled(item.key, disableMap)? "disabled-store":"enabled-store";
return (
<li key={item.key}>
<Link to={`/${item.type}/${item.packageType}/view/${item.name}`}>
<span className={itemStoreClass}>{item.key}</span>
</Link>
{
item.type==='remote' &&
<div className="subfields">
<span className="description field">(Remote URL: <a target="_new" href={Utils.storeHref(item.key)}>{Utils.storeHref(item.key)}</a>)</span>
</div>
}
</li>
);
})
}
</ol>
}
</div>
</div>
<div className="description field"><span>{store.description}</span></div>
</div>
</div>
);
};

GroupListItem.propTypes={
store: PropTypes.object.isRequired,
storeClass: PropTypes.string,
disableMap: PropTypes.object
};

export default function GroupList() {
export default function GruopList() {
const [state, setState] = useState({
listing: [],
rawListing: [],
disabledMap: {},
enableDebug: false,
store: {},
raw: {},
message: ''
});
init(state, setState);
let listing = state.listing;
let disMap = state.disabledMap;

return (
<div className="container-fluid">
<ListControl
useHideAll={true} handleHideAll={hideAll}
useSearch={true} handleSearch={handleSearch}
useDebug={true} handleDebug={handleDebug}
handleCreateNew={createNew} />
<div className="content-panel">
<div className="store-listing">
{
listing.map(store => {
let storeClass = Utils.isDisabled(store.key, disMap)? "disabled-store":"enabled-store";
return (
<GroupListItem key={store.key} store={store} storeClass={storeClass} disableMap={disMap} />
);
})
}
</div>
</div>

<ListJsonDebugger enableDebug={state.enableDebug} jsonObj={state.listing} />
</div>
);
return <div>This is not implemented yet!</div>;
}
184 changes: 4 additions & 180 deletions src/main/webui/src/app/components/content/GroupView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,187 +24,11 @@ import {Filters} from '../Filters.js';
import {TimeUtils} from '../../TimeUtils.js';
import {jsonGet} from '../../RestClient.js';

const getDisTimeouts = (store, state, setState) => {
jsonGet({
url: '/api/admin/schedule/store/all/disable-timeout',
done: response => {
let newStore = Utils.cloneObj(store);
let disabledMap = Utils.setDisableMap(response, state.listing);
let expiration = disabledMap[store.key];
if(expiration){
newStore.disableExpiration = expiration;
}
setState({
store: newStore,
disabledMap
});
},
fail: () => {
Utils.logMessage("disable timeout getting failed");
setState({
store
});
}
});
};

const getStore = (state, setState) => {
const [packageType, name] = useParams();
let getUrl = `/api/admin/stores/${packageType}/group/${name}`;
jsonGet({
url: getUrl,
done: response => {
let raw = response;
let store = Utils.cloneObj(raw);
store.disabled = raw.disabled === undefined ? false : raw.disabled;
setState({
raw
});
getDisTimeouts(store, state, setState);
},
fail: errorText => {
setState({
message: JSON.parse(errorText).error
});
}
});
};

const init = function (state, setState){
useEffect(()=>{
getStore(state, setState);
}, [state.raw]);
};


const handlers = {
handleDisable: () => {
// Mock
},

handleEnable: () => {
// Mock
},

handleEdit: () => {
// Mock
},

handleCreate: () => {
// Mock
},

handleRemove: () => {
// Mock
}
};
export default function GroupView() {
const [state, setState] = useState({
raw: {}, store: {}, disableMap: [], message: ''
store: {},
raw: {},
message: ''
});

init(state, setState);
let store = state.store;

if(!Utils.isEmptyObj(store)) {
return (
<div className="container-fluid">
<div className="control-panel">
<ControlPanel
enabled={!store.disabled} handleEnable={handlers.handleEnable}
handleDisable={handlers.handleDisable}
handleEdit={handlers.handleEdit}
handleCreate={handlers.handleCreate}
handleRemove={handlers.handleRemove} />
</div>

<div className="content-panel">
<div className="fieldset-caption">Basics</div>
<BasicSection store={store} />

<div className="fieldset-caption">Description</div>
<div className="fieldset">
<div className="text-field">
<textarea readOnly className="text-description" value={store.description} />
</div>
</div>

<div className="fieldset-caption">Constituents</div>
<div className="fieldset">
{
store.constituents && store.constituents.length>0 &&

<ol className="detail-value detail-value-list">
{
store.constituents.map(item=>{
let href = Utils.detailHref(item);
let isDisabled = Utils.isDisabled(item, state.disabledMap);
let storeClassName = isDisabled? 'disabled-store': 'enabled-store';
return (
<li key={item} className="detail-value-list-item">
{
href?
<Link to={href}>
<span className={storeClassName} >{item}</span>
</Link>:
<span>{item}</span>
}
</li>
);
})
}
</ol>
}
</div>
</div>
{
// <ViewJsonDebugger enableDebug={false} storeJson={store} rawJson={raw} />
}
</div>
);
}
return null;
return <div>This is not implemented yet!</div>;
}

const BasicSection = ({store})=> <div className="fieldset">
<div className="detail-field">
<label>Package Type:</label>
<span className="key">{store.packageType}</span>
</div>
<div className="detail-field">
<label>Name:</label>
<span className="key">{store.name}</span>
</div>
<div className="detail-field">
<span>{Filters.checkmark(!store.disabled)}</span>
<label>Enabled?</label>
{
store.disabled && store.disableExpiration &&
<span className="hint">Set to automatically re-enable at {TimeUtils.timestampToDateFormat(store.disableExpiration)}</span>
}
</div>
<div className="detail-field">
<span>{Filters.checkmark(store.prepend_constituent)}</span>
<label>Prepend Constituents?</label>
<span className="hint">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>
<span>{store.disable_timeout}</span>
<DisableTimeoutHint />
</div>
</div>
<div className="detail-field">
<label>Local URL:</label>
{
// TODO: is this store.demo still available now?
store.demo ?
<span>{Utils.storeHref(store.key)}</span> :
<span><a href={Utils.storeHref(store.key)} target="_new">{Utils.storeHref(store.key)}</a></span>
}
</div>
</div>;
BasicSection.propTypes = {
store: PropTypes.object.isRequired
};
Loading

0 comments on commit a0f8d5d

Please sign in to comment.