diff --git a/packages/console-app/src/components/AppLink.js b/packages/console-app/src/components/AppLink.js new file mode 100644 index 0000000..301b431 --- /dev/null +++ b/packages/console-app/src/components/AppLink.js @@ -0,0 +1,42 @@ +// +// Copyright 2020 DxOS.org.org +// + +import React from 'react'; +import Link from '@material-ui/core/Link'; + +import { getServiceUrl } from '../util/config'; + +const getAppUrl = (config, { name, version, text }) => { + const base = getServiceUrl(config, 'app.server'); + const pathComponents = [base]; + + // TODO(burdon): Fix. + // `wire app serve` expects the /wrn/ prefix. + // That is OK in the production config where we can make it part of the the route, + // but in development it must be prepended since we don't want to make it part of services.app.server. + if (!base.startsWith(`/${config.services.app.prefix}`) && !base.endsWith(`/${config.services.app.prefix}`)) { + pathComponents.push(config.services.app.prefix.substring(1)); + } + + if (version) { + pathComponents.push(`${name}@${version}`); + } else { + pathComponents.push(name); + } + return `${pathComponents.join('/')}/`; +}; + +/** + * Render link to record in WNS. + * @param {Object} config + * @param {string} name + * @param {string} [text] + * @param {string} [version] + */ +const AppLink = ({ config, name, version, text }) => { + const fullURL = getAppUrl(config, {name, version}); + return {text || name}; +}; + +export default AppLink; diff --git a/packages/console-app/src/components/PackageLink.js b/packages/console-app/src/components/PackageLink.js index f9bcfb3..82a1c27 100644 --- a/packages/console-app/src/components/PackageLink.js +++ b/packages/console-app/src/components/PackageLink.js @@ -4,6 +4,8 @@ import React from 'react'; import Link from '@material-ui/core/Link'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; import { getServiceUrl } from '../util/config'; @@ -12,12 +14,13 @@ import { getServiceUrl } from '../util/config'; * @param {Object} config * @param {string} [type] * @param {string} pkg + * @param {string} [text] */ -const PackageLink = ({ config, type, pkg }) => { +const PackageLink = ({ config, type, pkg, text }) => { // TODO(burdon): Pass in expected arg types. if (typeof pkg === 'string') { const ipfsUrl = getServiceUrl(config, 'ipfs.gateway', { path: `${pkg}` }); - return {pkg}; + return {text || pkg}; } // eslint-disable-next-line default-case @@ -28,16 +31,17 @@ const PackageLink = ({ config, type, pkg }) => { Object.keys(pkg[platform]).forEach(arch => { const cid = pkg[platform][arch]; const ipfsUrl = getServiceUrl(config, 'ipfs.gateway', { path: `${cid}` }); - packageLinks.push( - - {platform}/{arch}: {cid} - +
+ + {platform}/{arch} + +
); }); }); diff --git a/packages/console-app/src/components/QueryLink.js b/packages/console-app/src/components/QueryLink.js new file mode 100644 index 0000000..7e1fcd6 --- /dev/null +++ b/packages/console-app/src/components/QueryLink.js @@ -0,0 +1,38 @@ +// +// Copyright 2020 DxOS.org.org +// + +import React from 'react'; + +import ExitToApp from '@material-ui/icons/ExitToApp'; +import Link from '@material-ui/core/Link'; + +import { getServiceUrl } from '../util/config'; + +const QUERY = `{ + queryRecords(attributes: [ + { key: "name", value: { string: "%NAME%" }}]) { + id type name bondId createTime expiryTime owners attributes { key, value { string, json } } + } +}`; + +/** + * Render link to record in WNS. + * @param {Object} config + * @param {string} name + * @param {string} [text] + */ +const QueryLink = ({ config, name, text, icon = false}) => { + const baseURL = getServiceUrl(config, 'wns.webui'); + const query = QUERY.replace('%NAME%', name); + const fullURL= encodeURI(`${baseURL}?query=${query}`); + + if (icon) { + return + + + } + return {text || name}; +}; + +export default QueryLink; diff --git a/packages/console-app/src/components/TableCell.js b/packages/console-app/src/components/TableCell.js index fa63db1..51f4650 100644 --- a/packages/console-app/src/components/TableCell.js +++ b/packages/console-app/src/components/TableCell.js @@ -11,6 +11,12 @@ import { makeStyles } from '@material-ui/core'; const useStyles = makeStyles(() => ({ small: { width: 160 + }, + medium: { + width: 220 + }, + icon: { + width: 120 } })); diff --git a/packages/console-app/src/containers/panels/apps/AppRecords.js b/packages/console-app/src/containers/panels/apps/AppRecords.js index 35d6665..995ea40 100644 --- a/packages/console-app/src/containers/panels/apps/AppRecords.js +++ b/packages/console-app/src/containers/panels/apps/AppRecords.js @@ -20,6 +20,7 @@ import { BooleanIcon } from '../../../components/BooleanIcon'; import Table from '../../../components/Table'; import TableCell from '../../../components/TableCell'; import { getServiceUrl } from '../../../util/config'; +import AppLink from "../../../components/AppLink"; const AppRecords = () => { const { config } = useContext(ConsoleContext); @@ -41,27 +42,6 @@ const AppRecords = () => { const localRefs = new Set(ipfsData.refs.local); - // TODO(burdon): Test if app is deployed. - const getAppUrl = ({ name, version }) => { - const base = getServiceUrl(config, 'app.server'); - const pathComponents = [base]; - - // TODO(burdon): Fix. - // `wire app serve` expects the /wrn/ prefix. - // That is OK in the production config where we can make it part of the the route, - // but in development it must be prepended since we don't want to make it part of services.app.server. - if (!base.startsWith(`/${config.services.app.prefix}`) && !base.endsWith(`/${config.services.app.prefix}`)) { - pathComponents.push(config.services.app.prefix.substring(1)); - } - - if (version) { - pathComponents.push(`${name}@${version}`); - } else { - pathComponents.push(name); - } - return `${pathComponents.join('/')}/`; - }; - return ( @@ -70,22 +50,19 @@ const AppRecords = () => { Name Version Created - Downloaded + Downloaded {appData.sort(sorter).map(({ id, name, version, createTime, attributes: { displayName, publicUrl, package: hash } }) => { - const verLink = getAppUrl({ id, name, version, publicUrl }); - const appLink = getAppUrl({ id, name, publicUrl }); - return ( - {name} + {displayName} - {version} + {moment.utc(createTime).fromNow()} diff --git a/packages/console-app/src/containers/panels/ipfs/IPFS.js b/packages/console-app/src/containers/panels/ipfs/IPFS.js index be7e74f..827c410 100644 --- a/packages/console-app/src/containers/panels/ipfs/IPFS.js +++ b/packages/console-app/src/containers/panels/ipfs/IPFS.js @@ -122,9 +122,9 @@ const IPFS = () => {
- Identifier - Description - Connected + Identifier + Description + Connected Address diff --git a/packages/console-app/src/containers/panels/wns/WNSRecords.js b/packages/console-app/src/containers/panels/wns/WNSRecords.js index d64d5e1..ce8bb81 100644 --- a/packages/console-app/src/containers/panels/wns/WNSRecords.js +++ b/packages/console-app/src/containers/panels/wns/WNSRecords.js @@ -11,6 +11,7 @@ import Button from '@material-ui/core/Button'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import TableBody from '@material-ui/core/TableBody'; +import Tooltip from '@material-ui/core/Tooltip'; import WNS_RECORDS from '../../../gql/wns_records.graphql'; @@ -20,6 +21,8 @@ import Table from '../../../components/Table'; import TableCell from '../../../components/TableCell'; import PackageLink from '../../../components/PackageLink'; +import QueryLink from "../../../components/QueryLink"; +import AppLink from "../../../components/AppLink"; const types = [ { key: null, label: 'ALL' }, @@ -67,14 +70,14 @@ const WNSRecords = ({ type }) => { const [sorter, sortBy] = useSorter('createTime', false); const data = useQueryStatusReducer(useQuery(WNS_RECORDS, { pollInterval: config.api.intervalQuery, - variables: { type } + variables: { attributes: { type } } })); if (!data) { return null; } - const records = data.wns_records.json; + const records = JSON.parse(data.wns_records.json); return (
@@ -82,28 +85,51 @@ const WNSRecords = ({ type }) => { Type Identifier + Query + Name Version Created - Name - Package Hash + Package {records.sort(sorter) - .map(({ id, type, name, version, createTime, attributes: { displayName, package: pkg } }) => ( - - {type} - {name} - {version} - {moment.utc(createTime).fromNow()} - {displayName} - - {pkg && ( - - )} - - - ))} + .map((record) => { + const { id, type, name, version, createTime, attributes: { displayName, description, service, package: pkg } } = record; + + let pkgLink = undefined; + let appLink = undefined; + let verLink = undefined; + + if (pkg) { + pkgLink = (); + } + + if (type === 'wrn:app') { + appLink = (); + verLink = (); + } + + return ( + {type} + + {appLink && appLink || name} + + + + + {displayName || service || description} + + {verLink && verLink || version} + + {moment.utc(createTime).fromNow()} + + {pkgLink} + + + ); + } + )}
);