This is an automated email from the ASF dual-hosted git repository.
eallen pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/qpid-dispatch.git
The following commit(s) were added to refs/heads/main by this push:
new d08f33a DISPATCH-1914 Update console's schema page to fix formatting
issues (using PF4 treeview component)
d08f33a is described below
commit d08f33a45ddae8bafb556ad0df2f28eddb2c0003
Author: Ernest Allen <[email protected]>
AuthorDate: Tue May 25 11:44:38 2021 -0400
DISPATCH-1914 Update console's schema page to fix formatting issues (using
PF4 treeview component)
---
console/react/src/details/schema/schemaPage.js | 229 +++++++------------------
1 file changed, 62 insertions(+), 167 deletions(-)
diff --git a/console/react/src/details/schema/schemaPage.js
b/console/react/src/details/schema/schemaPage.js
index b18198b..4dc7ace 100644
--- a/console/react/src/details/schema/schemaPage.js
+++ b/console/react/src/details/schema/schemaPage.js
@@ -18,191 +18,86 @@ under the License.
*/
import React from "react";
-import { PageSection, PageSectionVariants } from "@patternfly/react-core";
-import { Stack, StackItem, TextContent, Text, TextVariants } from
"@patternfly/react-core";
-import { Card, CardBody } from "@patternfly/react-core";
+import { TreeView, Button } from "@patternfly/react-core";
class SchemaPage extends React.Component {
constructor(props) {
super(props);
-
- this.state = {
- root: {
- key: "entities",
- title: "Schema entities",
- description: "List of management entities. Click on an entity to view
its attributes.",
- hidden: false
- }
- };
- this.initRoot(this.state.root, this.props.schema.entityTypes);
+ this.state = { activeItems: {}, allExpanded: false };
+ this.nextId = 0;
}
- initRoot = (root, schema) => {
- root.attributes = [
- {
- key: Object.keys(schema).length,
- value: "Entities"
- }
- ];
- root.children = [];
- const entities = Object.keys(schema).sort();
- for (let i = 0; i < entities.length; i++) {
- const entity = entities[i];
- const child = { title: entity, key: entity };
- this.initChild(child, schema[entity]);
- root.children.push(child);
- }
+ handleTreeClick = (evt, treeViewItem, parentItem) => {
+ this.setState({
+ activeItems: [treeViewItem, parentItem],
+ });
};
- initChild = (child, obj) => {
- child.hidden = true;
- child.description = obj.description;
- child.attributes = [];
- if (obj.attributes) {
- child.hidden = false;
- child.attributes.push({
- key: Object.keys(obj.attributes).length,
- value: "Attributes"
- });
- child.children = [];
- for (const attr in obj.attributes) {
- const sub = { title: attr, key: `${child.key}-${attr}` };
- this.initChild(sub, obj.attributes[attr]);
- child.children.push(sub);
- }
- }
- if (obj.operations) {
- child.attributes.push({
- key: "Operations",
- value: `[${obj.operations.join(", ")}]`
- });
- }
- if (obj.fullyQualifiedType) {
- child.fqt = obj.fullyQualifiedType;
- }
- if (obj.type) {
- child.attributes.push({
- key: "type",
- value: obj.type.constructor === Array ? `[${obj.type.join(", ")}]` :
obj.type
- });
- }
- if (obj.default) {
- child.attributes.push({ key: "default", value: obj.default });
- }
- if (obj.required) {
- child.attributes.push({ key: "required", value: "" });
- }
- if (obj.unique) {
- child.attributes.push({ key: "unique", value: "" });
- }
- if (obj.graph) {
- child.attributes.push({ key: "statistic", value: "" });
- }
+ onToggle = evt => {
+ const { allExpanded } = this.state;
+ this.setState({
+ allExpanded: allExpanded !== undefined ? !allExpanded : true,
+ });
};
- toggleChildren = (event, parent) => {
- event.stopPropagation();
- if (parent.children && parent.children.length > 0) {
- parent.children.forEach(child => {
- child.hidden = !child.hidden;
- });
- this.setState({ root: this.state.root });
- }
+ handleExpandAllToggle = (evt, treeViewItem, parentItem) => {
+ this.handleTreeClick(evt, treeViewItem, parentItem);
};
- folderIconClass = item => {
- if (item.children) {
- return item.children.some(child => !child.hidden)
- ? "pficon-folder-open"
- : "pficon-folder-close";
- }
- return "pficon-catalog";
+ buildTreeOptions = () => {
+ const schema = this.props.schema.entityTypes;
+ const options = [];
+ const entities = Object.keys(schema).sort();
+ entities.forEach(entity => {
+ this.initChild(options, entity, schema);
+ });
+ return options;
};
- attrIconClass = attr => {
- const attrMap = {
- type: "pficon-builder-image",
- Operations: "pficon-maintenance",
- default: "pficon-info",
- unique: "pficon-locked",
- statistic: "fa fa-icon fa-tachometer"
- };
- if (attrMap[attr.key]) return `pficon ${attrMap[attr.key]}`;
- return "pficon pficon-repository";
+ initChild = (parent, entity, schema) => {
+ const child = { name: entity, id: `ID.${this.nextId++}` };
+ const keys = Object.keys(schema[entity]);
+ keys.forEach(key => {
+ console.log(
+ `processing schema[${entity}][${key}] which is type ${typeof
schema[entity][key]}`
+ );
+ const isArray = Array.isArray(schema[entity][key]);
+ if (typeof schema[entity][key] === "object" && !isArray) {
+ if (!child.children) {
+ child.children = [];
+ }
+ this.initChild(child.children, key, schema[entity]);
+ } else {
+ if (!child.children) {
+ child.children = [];
+ }
+ child.children.push({
+ name: `${key}: ${
+ isArray ? schema[entity][key].join(", ") : schema[entity][key]
+ }`,
+ id: `ID.{this.nextId++}`,
+ });
+ }
+ });
+ parent.push(child);
};
render() {
- const TreeItem = itemInfo => {
- return (
- !itemInfo.hidden && (
- <div
- key={itemInfo.key}
- data-testid={itemInfo.key}
- className={`list-group-item-container container-fluid`}
- onClick={event => this.toggleChildren(event, itemInfo)}
- >
- <div className="list-group-item">
- <div className="list-group-item-header">
- <div className="list-view-pf-main-info">
- <div className="list-view-pf-left">
- <span
- className={`pficon ${this.folderIconClass(itemInfo)}
list-view-pf-icon-sm`}
- ></span>
- </div>
- <div className="list-view-pf-body">
- <div className="list-view-pf-description">
- <div
className="list-group-item-heading">{itemInfo.title}</div>
- <div className="list-group-item-text">
- {itemInfo.description}
- {itemInfo.fqt && <div
className="list-group-item-fqt">{itemInfo.fqt}</div>}
- </div>
- </div>
- <div className="list-view-pf-additional-info">
- {itemInfo.attributes &&
- itemInfo.attributes.map((attr, i) => (
- <div
- className="list-view-pf-additional-info-item"
- key={`${itemInfo.key}-${i}`}
- >
- <span className={this.attrIconClass(attr)}></span>
- <strong>{attr.key}</strong>
- {attr.value}
- </div>
- ))}
- </div>
- </div>
- </div>
- </div>
- {itemInfo.children && itemInfo.children.map(childInfo =>
TreeItem(childInfo))}
- </div>
- </div>
- )
- );
- };
-
+ const { activeItems, allExpanded } = this.state;
+ const options = this.buildTreeOptions();
return (
- <PageSection variant={PageSectionVariants.light} id="schema-page">
- <Stack>
- <StackItem>
- <TextContent>
- <Text className="overview-title" component={TextVariants.h1}>
- Schema
- </Text>
- </TextContent>
- </StackItem>
- <StackItem>
- <Card>
- <CardBody>
- <div className="container-fluid">
- <div className="list-group tree-list-view-pf"
data-testid="root">
- {TreeItem(this.state.root)}
- </div>
- </div>
- </CardBody>
- </Card>
- </StackItem>
- </Stack>
- </PageSection>
+ <React.Fragment>
+ <Button variant="link" onClick={this.onToggle}>
+ {allExpanded && "Collapse all"}
+ {!allExpanded && "Expand all"}
+ </Button>
+ <TreeView
+ data={options}
+ activeItems={activeItems}
+ onSelect={this.handleTreeClick}
+ allExpanded={allExpanded}
+ />
+ </React.Fragment>
);
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
