This is an automated email from the ASF dual-hosted git repository.
jbonofre pushed a commit to branch ui
in repository https://gitbox.apache.org/repos/asf/polaris-tools.git
The following commit(s) were added to refs/heads/ui by this push:
new cdec64d Update
cdec64d is described below
commit cdec64d656f8e1dd0b2b6ea33d6d6bd75bc79669
Author: JB Onofré <[email protected]>
AuthorDate: Sat Oct 25 14:46:27 2025 +0200
Update
---
ui/src/home.tsx | 89 ++++++++++++++++++++++++++++++++++++++++++----------
ui/src/workspace.tsx | 61 +++++++++++++++++++++++++++++------
2 files changed, 125 insertions(+), 25 deletions(-)
diff --git a/ui/src/home.tsx b/ui/src/home.tsx
index d0f6b93..84c3f07 100644
--- a/ui/src/home.tsx
+++ b/ui/src/home.tsx
@@ -16,29 +16,86 @@
* specific language governing permissions and limitations
* under the License.
*/
+import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
-import { Breadcrumb, Row, Col, Card } from 'antd';
-import { HomeOutlined } from '@ant-design/icons';
+import { Breadcrumb, Card, Row, Col, Space, Button, Table, Spin, message }
from 'antd';
+import { HomeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
export default function Home(props) {
+ const [ catalogs, setCatalogs] = useState();
+ const [ principals, setPrincipals ] = useState();
+
+ const bearer = 'Bearer ' + props.token;
+
+ const fetchCatalogs = () => {
+ fetch('./api/management/v1/catalogs', {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': bearer,
+ }
+ })
+ .then((response) => {
+ if (!response.ok) {
+ throw new Error(response.status);
+ }
+ return response.json();
+ })
+ .then((data) => {
+ console.log(data);
+ setCatalogs(data.catalogs);
+ })
+ .catch((error) => {
+ message.error('An error occurred: ' + error.message);
+ console.error(error);
+ })
+ };
+
+ useEffect(fetchCatalogs, []);
+
+ if (!catalogs) {
+ return(<Spin/>);
+ }
+
+ const catalogColumns = [
+ {
+ title: 'Catalog',
+ dataIndex: 'catalog',
+ key: 'catalog'
+ },
+ {
+ title: 'Type',
+ dataIndex: 'type',
+ key: 'type'
+ },
+ {
+ title: 'Base Location',
+ dataIndex: 'location',
+ key: 'location'
+ },
+ {
+ title: '',
+ key: 'action',
+ render: (_,record) => (
+ <Space>
+ <Button><EditOutlined/></Button>
+ <Button><DeleteOutlined/></Button>
+ </Space>
+ )
+ }
+ ];
+
return(
<>
<Breadcrumb items={[ { title: <Link to="/"><HomeOutlined/></Link> } ]}
/>
- <Row>
- <Col>
- <Card title="Catalogs Overview">
- Catalogs
- </Card>
- </Col>
- </Row>
- <Row>
- <Col>
- <Card title="Governance Overview">
- Governance
- </Card>
- </Col>
- </Row>
+ <Card title="Overview" style={{ width: '100%' }}>
+ <Row gutter={[16,16]}>
+ <Col span={24}>
+ <Table columns={catalogColumns} dataSource={catalogs} />
+ </Col>
+ </Row>
+ </Card>
</>
);
}
\ No newline at end of file
diff --git a/ui/src/workspace.tsx b/ui/src/workspace.tsx
index eb21d99..5c2d51e 100644
--- a/ui/src/workspace.tsx
+++ b/ui/src/workspace.tsx
@@ -17,24 +17,67 @@
* under the License.
*/
-import React, { useState } from 'react';
-import { Layout, Input, Col, Row, Image, Menu, Space } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Layout, Input, Col, Row, Image, Menu, Space, Spin, message } from
'antd';
import { Route, Switch } from 'react-router';
import { BrowserRouter as Router } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { UserOutlined, BlockOutlined, SettingOutlined, DeleteOutlined,
PlayCircleOutlined, LogoutOutlined, ApartmentOutlined, DashboardOutlined,
AreaChartOutlined, NotificationOutlined, SafetyOutlined, TeamOutlined,
BuildOutlined, CrownOutlined, ProfileOutlined, CheckSquareOutlined,
PlusCircleOutlined } from '@ant-design/icons';
import Home from './home.tsx';
-function SideMenu() {
+function SideMenu(props) {
const[ collapsed, setCollapsed ] = useState(false);
+ const[ catalogs, setCatalogs ] = useState();
+
+ const bearer = 'Bearer ' + props.token;
+
+ const fetchCatalogs = () => {
+ fetch('./api/management/v1/catalogs', {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': bearer
+ }
+ })
+ .then((response) => {
+ if (!response.ok) {
+ throw new Error(response.status);
+ }
+ return response.json();
+ })
+ .then((data) => setCatalogs(data.catalogs))
+ .catch((error) => {
+ message.error('An error occured: ' + error.message);
+ console.error(error);
+ });
+ };
+
+ useEffect(fetchCatalogs, []);
+
+ if (!catalogs) {
+ return(<Spin/>);
+ }
+
+ const catalogElementsMenu = catalogs.map((element) => {
+ return({
+ key: element.name,
+ label:element.name,
+ icon: <ApartmentOutlined/>
+ });
+ });
+ const newCatalogMenu = [
+ {
+ key: 'catalog/create',
+ label: 'Create New',
+ icon: <PlusCircleOutlined/>,
+ }
+ ];
+
+ const catalogMenu = newCatalogMenu.concat(catalogElementsMenu);
const mainMenu = [
- { key: 'catalogs', label: 'Catalogs', icon: <BlockOutlined/>,
children: [
- { key: 'new', label: 'Create catalog', icon: <PlusCircleOutlined/>
},
- { key: 'default', label: 'Default', icon: <ApartmentOutlined/> },
- { key: 'my', label: 'My Catalog', icon: <ApartmentOutlined/> }
- ] },
+ { key: 'catalogs', label: 'Catalogs', icon: <BlockOutlined/>,
children: catalogMenu },
{ key: 'governance', label: 'Governance', icon: <SafetyOutlined/>,
children: [
{ key: 'principals', label: 'Principals', icon: <UserOutlined/> },
{ key: 'principal_roles', label: 'Principal Roles', icon:
<TeamOutlined/> },
@@ -98,7 +141,7 @@ export default function Workspace(props) {
<Header user={props.user} setUser={props.setUser} />
<Layout hasSider={true}>
<Router>
- <SideMenu />
+ <SideMenu token={props.token} />
<Layout.Content style={{ margin: "15px" }}>
<Switch>
<Route path="/" key="home" exact={true}>
