diff --git a/ui/public/index.html b/ui/public/index.html index f054de3d3..55d5ab7f6 100644 --- a/ui/public/index.html +++ b/ui/public/index.html @@ -6,7 +6,6 @@ React App - -
+ \ No newline at end of file diff --git a/ui/src/App.css b/ui/src/App.css index 1780dc194..6ea8eeaaa 100644 --- a/ui/src/App.css +++ b/ui/src/App.css @@ -1,6 +1,3 @@ -.App { - text-align: center; -} .App-logo { height: 40vmin; @@ -13,16 +10,6 @@ } } -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} .App-link { color: #61dafb; @@ -40,8 +27,3 @@ html { background-color: #D6D9DC; } - -body { - margin: 0px auto; - width: 100vw; -} \ No newline at end of file diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 94dae94b6..35fd706ab 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -3,10 +3,8 @@ import View from "./components/View"; function App() { return ( -
-
+
-
); } diff --git a/ui/src/components/CreateInstanceForm.tsx b/ui/src/components/CreateInstanceForm.tsx index 05bd32a7b..1f820f35c 100644 --- a/ui/src/components/CreateInstanceForm.tsx +++ b/ui/src/components/CreateInstanceForm.tsx @@ -23,7 +23,7 @@ function CreateInstanceForm(props: any) { setLoading(true) axios .post(api("service-instances"), - {name: name, planID: planId}) + {name: name, service_plan_id: planId}) .then((response) => { setLoading(false); // setServiceInstances(response.data); @@ -45,7 +45,7 @@ function CreateInstanceForm(props: any) { setName(generateServiceInstanceName( props.plan?.name, - props.offering?.catalogName + props.offering?.catalog_name )) setPlanId(props.plan.id) @@ -59,7 +59,7 @@ function CreateInstanceForm(props: any) { Name}> diff --git a/ui/src/components/SecretsView.tsx b/ui/src/components/SecretsView.tsx index 60e4e5276..3d201b419 100644 --- a/ui/src/components/SecretsView.tsx +++ b/ui/src/components/SecretsView.tsx @@ -62,7 +62,7 @@ function SecretsView(props: any) { return ( <> { props.handler(e.target.value); }} diff --git a/ui/src/components/ServiceInstancesView.tsx b/ui/src/components/ServiceInstancesView.tsx index c19dfe520..6b09b0a54 100644 --- a/ui/src/components/ServiceInstancesView.tsx +++ b/ui/src/components/ServiceInstancesView.tsx @@ -15,7 +15,7 @@ function ServiceInstancesView() { const [portal, setPortal] = useState(); useEffect(() => { - var useTestData = process.env.REACT_APP_USE_TEST_DATA + var useTestData = process.env.REACT_APP_USE_TEST_DATA === "true" if (!useTestData) { setLoading(true) axios @@ -55,7 +55,8 @@ function ServiceInstancesView() { { console.log("Row clicked") - const instanceView = + const instanceView = const portal = createPortal( instanceView, document.getElementById("App")!!) setPortal(portal) }} @@ -78,18 +79,25 @@ function ServiceInstancesView() { return ( <> { + + + + + Service Instance + + + + Service Namespace + + + } + > + {renderData()} + + - - - Service Instance - - - } - > - {renderData()} - } {portal != null && portal} diff --git a/ui/src/components/ServiceOfferingsDetailsView.tsx b/ui/src/components/ServiceOfferingsDetailsView.tsx index cc9371fdc..4c595247a 100644 --- a/ui/src/components/ServiceOfferingsDetailsView.tsx +++ b/ui/src/components/ServiceOfferingsDetailsView.tsx @@ -76,7 +76,7 @@ function ServiceOfferingsDetailsView(props: any) { startContent={ <> - Create {offering?.catalogName} Service Instance + Create {offering?.metadata.displayName} Service Instance } @@ -96,7 +96,7 @@ function ServiceOfferingsDetailsView(props: any) { - {offering?.catalogName} + {offering?.metadata.displayName} {offering?.description} diff --git a/ui/src/components/ServiceOfferingsView.tsx b/ui/src/components/ServiceOfferingsView.tsx index 43ae89a4c..c7c3aaf17 100644 --- a/ui/src/components/ServiceOfferingsView.tsx +++ b/ui/src/components/ServiceOfferingsView.tsx @@ -10,9 +10,10 @@ import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js"; import Ok from "../shared/validator"; import {createPortal} from "react-dom"; import ServiceOfferingsDetailsView from "./ServiceOfferingsDetailsView"; +import { ResponsiveGridLayout } from "@ui5/webcomponents-react"; function ServiceOfferingsView(props: any) { - const greyImg = "data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" + const greyImg = "data:image/svg+xml;base64,PHN2ZyBpZD0icGxhY2Vob2xkZXIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU2IDU2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzVhN2E5NDt9LmNscy0ye2ZpbGw6IzA0OTFkMDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPnBsYWNlaG9sZGVyPC90aXRsZT48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00Ni45NTMsMjAuNTg4YTQuMzYzLDQuMzYzLDAsMCwwLTEuODM3LS40NTksMy4yOTEsMy4yOTEsMCwwLDAtMy40LDMuMzc2LDQuMDg0LDQuMDg0LDAsMCwwLC45LDIuNjI1LDMuMDExLDMuMDExLDAsMCwwLDIuNSwxLjEyNiwzLjA4NSwzLjA4NSwwLDAsMCwxLjQ2Mi0uMzc1LDcuNTEyLDcuNTEyLDAsMCwwLDEuMzItLjg5MSwxMC4xMzUsMTAuMTM1LDAsMCwxLDEuMjI2LS44OTEsMi4yNywyLjI3LDAsMCwxLDEuMTc5LS4zNzVBMS41LDEuNSwwLDAsMSw1MiwyNi40MTJWMzkuMDcxYTIuODQzLDIuODQzLDAsMCwxLS41NzYsMiwyLjkyNiwyLjkyNiwwLDAsMS0yLjE1OS42MjZxLTIuOTIzLDAtNC4zODUuMDQ3dC0yLjEyMi4wNDdINDEuOTFhMy4zMjEsMy4zMjEsMCwwLDAsLjYuNjQ0LDUuNzE3LDUuNzE3LDAsMCwxLDIuMDc0LDQuMjIsNS4wNTQsNS4wNTQsMCwwLDEtMS42NSwzLjc1MUE1LjMzMSw1LjMzMSwwLDAsMSwzOS4xMTgsNTJhNS42LDUuNiwwLDAsMS00LjA1NS0xLjU0Nyw1LjA3MSw1LjA3MSwwLDAsMS0xLjYtMy44LDQuODYyLDQuODYyLDAsMCwxLC41MTktMi4zLDExLjQwNywxMS40MDcsMCwwLDEsMS41MTYtMS45NywyLjMzMywyLjMzMywwLDAsMCwuNDc1LS42OUgyOC4zM2ExLjM5NCwxLjM5NCwwLDAsMS0xLjA4NC0uNDY5LDIuMDExLDIuMDExLDAsMCwxLS41MTktMS4wMzJWMTUuOTA5YTEuOCwxLjgsMCwwLDEsLjQyNC0xLjE3MiwxLjQ0NCwxLjQ0NCwwLDAsMSwxLjE3OS0uNTE2aDcuNzMzYTEuOTQ5LDEuOTQ5LDAsMCwwLS4zNzctLjU2MmwtLjgtMS4xNzFhOC43ODgsOC43ODgsMCwwLDEtLjg0Ny0xLjUsNC43ODMsNC43ODMsMCwwLDEtLjQwNi0xLjY3NkE1LjM0OCw1LjM0OCwwLDAsMSwzOS4wODEsNGE1LjU1Miw1LjU1MiwwLDAsMSwzLjc5LDEuNTUzQTQuNjM1LDQuNjM1LDAsMCwxLDQ0LjU1LDkuMzQ1Yy0uMDI4LDEuNjg4LTIuMDIzLDQuMTI1LTIuMjQxLDQuMzc1YTEuNTc2LDEuNTc2LDAsMCwwLS4zLjVoNy4yNjFBMi42NSwyLjY1LDAsMCwxLDUyLDE2Ljg0N3Y0LjEyNnEwLDEuNzgyLTEuNywxLjc4MmExLjc0MywxLjc0MywwLDAsMS0xLjMxOS0uNTQ5QTEzLjE1MiwxMy4xNTIsMCwwLDAsNDYuOTUzLDIwLjU4OFpNMjguMzMsMzkuMDcxYS41ODIuNTgyLDAsMCwwLC42Ni42NTdoNy4xNjdhMS41NzksMS41NzksMCwwLDEsMS43OTIsMS43ODEsMi4yMzgsMi4yMzgsMCwwLDEtLjM4NywxLjI1NGMtLjI4My40MDgtLjU4Mi44MTMtLjksMS4yMTlzLS42MTMuODMtLjksMS4yNjZhMi41NDYsMi41NDYsMCwwLDAtLjQyNCwxLjQwNywzLjExNSwzLjExNSwwLDAsMCwxLjEzMSwyLjUzMiw0LjAyMiw0LjAyMiwwLDAsMCwyLjY0MS45MzgsMy43NzYsMy43NzYsMCwwLDAsMi40NTItLjkzOEEzLjExNSwzLjExNSwwLDAsMCw0Mi43LDQ2LjY1NWEyLjU0NiwyLjU0NiwwLDAsMC0uNDI0LTEuNDA3LDEyLjUxMywxMi41MTMsMCwwLDAtLjk0My0xLjI2NnEtLjUxOS0uNjA5LS45NDMtMS4xNzJhMi4yNjEsMi4yNjEsMCwwLDEtLjQ2Mi0xLjMsMS42MTQsMS42MTQsMCwwLDEsLjU2Ni0xLjMxMywyLjAwNiwyLjAwNiwwLDAsMSwxLjMyLS40NjhoNy40NXEuOTQyLDAsLjk0My0uNjU3VjI2LjUwNmExLjYwOSwxLjYwOSwwLDAsMC0uNzA3LjQyMnEtLjUxOS40MjEtMS4xNzkuODlhMTEuMDY5LDExLjA2OSwwLDAsMS0xLjUwOS44OTEsMy43NywzLjc3LDAsMCwxLTEuNy40MjIsNS40NSw1LjQ1LDAsMCwxLTMuNjc4LTEuNSw0LjI1LDQuMjUsMCwwLDEtMS4yMjYtMS44NzYsNy4wNTMsNy4wNTMsMCwwLDEtLjM3Ny0yLjI1LDUuMTY2LDUuMTY2LDAsMCwxLDEuNi0zLjcsNS4wMDksNS4wMDksMCwwLDEsMy42NzgtMS42NDEsNC44ODQsNC44ODQsMCwwLDEsMi4zNTcuNTE1QTcuNTg3LDcuNTg3LDAsMCwxLDQ5LjUxOCwyMC4yYy41MDYuNTg4Ljc4NS42MjQuNzg1LjYyNFYxNi44NDdhLjU0NC41NDQsMCwwLDAtLjMzMS0uNDY5LDEuNDIyLDEuNDIyLDAsMCwwLS43MDctLjE4N2gtNy40NWEyLjE0NywyLjE0NywwLDAsMS0xLjMyLS40MjIsMS41ODcsMS41ODcsMCwwLDEtLjU2Ni0xLjM2LDIuMDY3LDIuMDY3LDAsMCwxLC40MjUtMS4xNzJxLjQyNS0uNjA5Ljk0My0xLjIxOWExMi4yMjIsMTIuMjIyLDAsMCwwLC45NDMtMS4yNjYsMi41NDEsMi41NDEsMCwwLDAsLjQyNC0xLjQwNywzLjExOCwzLjExOCwwLDAsMC0xLjEzMi0yLjUzMiwzLjc3MSwzLjc3MSwwLDAsMC0yLjQ1MS0uOTM4LDMuODM5LDMuODM5LDAsMCwwLTIuNTk0LjkzOEEzLjE3OCwzLjE3OCwwLDAsMCwzNS40LDkuMzQ1YTIuNzc2LDIuNzc2LDAsMCwwLC40MjQsMS40NTQsMTAuMDM3LDEwLjAzNywwLDAsMCwuOSwxLjI2NWwuODQ5LDEuMjJhMi45MDksMi45MDksMCwwLDEsLjQ3MSwxLjEyNSwxLjYyNSwxLjYyNSwwLDAsMS0uNTE4LDEuMzYsMS45NTYsMS45NTYsMCwwLDEtMS4yNzQuNDIySDI5LjA4NHEtLjc1NSwwLS43NTQuNjU2Wm0yMy42NywwYTIuNywyLjcsMCwwLDEtLjU3NiwyLDIuNjc1LDIuNjc1LDAsMCwxLTIuMTU5LjYyNiIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTM3LjE0NywzMS4wNzRhMy4zMjgsMy4zMjgsMCwwLDAtMi44NzgtMS4zNiw0LjQ0NSw0LjQ0NSwwLDAsMC0yLjEyLjQyMiw2LjE4NSw2LjE4NSwwLDAsMC0xLjE3OC44OTFxLS41NjcuNDcxLTEuMTMyLjg5MWMtLjM3My4yNzgtLjgwOC43NzMtMS4zLjc3NkgyNi43MjdWMTYuNDZhMy4zMzUsMy4zMzUsMCwwLDAtLjM3Ny0xLjUsMS40MzYsMS40MzYsMCwwLDAtMS40MTUtLjc1MUgxOS4yNzdjLS41LDAtLjc1NC4yNTEtLjc1NC44NDRhMS45MDcsMS45MDcsMCwwLDAsLjM3NywxLjEyNiw5LjE0Niw5LjE0NiwwLDAsMCwuOTQzLDEuMTI1LDUuMzQxLDUuMzQxLDAsMCwxLC45NDMsMS4yNjYsMy4yMzYsMy4yMzYsMCwwLDEsLjM3NywxLjU0Nyw0LjQ1NCw0LjQ1NCwwLDAsMS0xLjI3MywzLjE0MSw0LjA0OSw0LjA0OSwwLDAsMS0zLjA2NSwxLjM2LDMuOSwzLjksMCwwLDEtMy4wMTgtMS4zNiw0LjU0Nyw0LjU0NywwLDAsMS0xLjIyNS0zLjE0MSwyLjkzNiwyLjkzNiwwLDAsMSwuNDI0LTEuNTQ3LDEzLjU0OCwxMy41NDgsMCwwLDEsLjktMS4zMTNjLjMxNC0uNDA2LjYyNy0uNzgxLjk0My0xLjEyNWExLjU4OCwxLjU4OCwwLDAsMCwuNDcxLTEuMDc5cTAtLjg0My0xLjAzNy0uODQ0SDUuN2ExLjU4NywxLjU4NywwLDAsMC0xLjIyNi41MTZBMS44MDYsMS44MDYsMCwwLDAsNCwxNS45OTFWMzkuOWExLjgsMS44LDAsMCwwLC40NzEsMS4yNjYsMS41ODMsMS41ODMsMCwwLDAsMS4yMjYuNTE2aDguNDg4Yy42OTEsMCwxLjAzNS4yMzgsMS4wMzcuNzVhMS41NDcsMS41NDcsMCwwLDEtLjQyMi45NDRMMTMuODA3LDQ0LjVhNi41NDksNi41NDksMCwwLDAtLjk5LDEuMjY2LDMuMTE2LDMuMTE2LDAsMCwwLS40MjQsMS42NDEsNC4yMzcsNC4yMzcsMCwwLDAsMS4zNjcsMy40Nyw0Ljc5MSw0Ljc5MSwwLDAsMCw2LjIyNC0uMDQ3LDQuNTE3LDQuNTE3LDAsMCwwLDEuNDQ1LTMuMjgzLDMuNjMxLDMuNjMxLDAsMCwwLS41MTQtMS44ODljLS4yMTUtLjMwNy0uOTc4LTEuMTU4LS45NzgtMS4xNThMMTguOSw0My4zNzNhMS40OTIsMS40OTIsMCwwLDEtLjM3Ny0uOTM4cTAtLjc1Ljg0OC0uNzVoNS42NThxMS4yMjYsMCwxLjctMS41VjM1LjM0MUgyOC4zNWMuNTU3LDAsMS4wNTQuNTE5LDEuNDg5LjhhMTIuMjkxLDEyLjI5MSwwLDAsMSwxLjIyNi44OTFxLjU2NS40NjksMS4xNzkuODlhMy43ODYsMy43ODYsMCwwLDAsMS44MTYuNDIyLDMuMjU2LDMuMjU2LDAsMCwwLDMuMDg3LTEuNDA2LDUuMTE5LDUuMTE5LDAsMCwwLC45OS0zQTQuNzg4LDQuNzg4LDAsMCwwLDM3LjE0NywzMS4wNzRaIi8+PC9zdmc+" const [offerings, setOfferings] = useState(); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -66,12 +67,8 @@ function ServiceOfferingsView(props: any) { const cards = offerings?.items.map((offering, index) => { // @ts-ignore return ( - <> { setPortal(createPortal( , document.getElementById("App")!!, window.crypto.randomUUID())) }} @@ -82,22 +79,29 @@ function ServiceOfferingsView(props: any) { } - style={{ - width: "100%" - }} - subtitleText={offering.description} - titleText={offering.catalogName} + subtitleText={offering.catalog_name} + titleText={offering.metadata.displayName} status={formatStatus(index, offerings?.numItems)} interactive - /> + /> } - /> - + > + ); }); return <> - {cards} + + + {/* */} + {cards} + {/* */} + {portal != null && portal} }; diff --git a/ui/src/components/View.tsx b/ui/src/components/View.tsx index 30e567d6b..57b4840d9 100644 --- a/ui/src/components/View.tsx +++ b/ui/src/components/View.tsx @@ -18,57 +18,49 @@ function Overview(props: any) { return ( <> - Service Management UI} - > - Service Marketplace - + SAP BTP, Kyma runtime} startContent={Select your credentials:} > - handler(e)} style={{width: "100vw"}} /> + handler(e)} style={{width: "100%"}} /> + + +
+ + + <> -
- - - { - setPageContent(); - }} - /> - { - setPageContent(); - }} - /> - - +
+ + + { + setPageContent(); + }} + /> + { + setPageContent(); + }} + /> + +
+ + +
{pageContent} - - -
+
+
+ ); } diff --git a/ui/src/index.css b/ui/src/index.css index ec2585e8c..a3d249f7d 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -5,9 +5,56 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + overflow: hidden; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +* { + box-sizing: border-box; +} + +#root { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: 0.5rem 0.5rem 0 0.5rem; +} + +.flex-container { + display: flex; +} + +.flex-column { + flex-direction: column; + width: 100%; +} + +.flex-row { + flex-direction: row; + height: 100%; +} + + +#App { + display: flex; + min-height: 0; + position: relative; + height: 100%; +} + +.margin-wrapper { + margin: 0.5rem 0.5rem 0 0.5rem; + padding: 0.5rem 0.5rem 0 0.5rem; +} + +.scrollable { + overflow-y: auto; + height: 100%; + width: 100%; +} diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 80878705b..018648421 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -1,9 +1,10 @@ -import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import { ThemeProvider } from "@ui5/webcomponents-react"; +import '@ui5/webcomponents-react/dist/Assets'; + const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); diff --git a/ui/src/shared/models.tsx b/ui/src/shared/models.tsx index 655eb5fb8..59a7b4eb7 100644 --- a/ui/src/shared/models.tsx +++ b/ui/src/shared/models.tsx @@ -16,7 +16,7 @@ export interface ServiceOffering { id: string; description: string; catalogId: string; - catalogName: string; + catalog_name: string; metadata: ServiceOfferingMetadata; } @@ -48,10 +48,14 @@ export interface ServiceInstance { name: string; context: string[]; namespace: string; - serviceBindings: ServiceInstanceBindings[]; + serviceBindings: ServiceInstanceBinding[]; } export interface ServiceInstanceBindings { + items: ServiceInstanceBinding[]; +} + +export interface ServiceInstanceBinding { id: string; name: string; namespace: string;