diff --git a/frontend/src/components/AppInfo.jsx b/frontend/src/components/AppInfo.jsx new file mode 100644 index 0000000..351799e --- /dev/null +++ b/frontend/src/components/AppInfo.jsx @@ -0,0 +1,37 @@ +// Copyright DB InfraGO AG and contributors +// SPDX-License-Identifier: Apache-2.0 + +import { useState, useEffect } from 'react'; +import { ROUTE_PREFIX } from '../APIConfig'; +import { SquareMousePointer } from 'lucide-react'; + +export const AppInfo = () => { + const [currentVersion, setcurrentVersion] = useState(null); + + useEffect(() => { + fetch(`${ROUTE_PREFIX}/static/version.json`) + .then((response) => response.json()) + .then((data) => setcurrentVersion(data.git)) + .catch((error) => { + console.error(error); + setcurrentVersion({ version: 'Fetch failed' }); + }); + }, []); + + return ( +
+ {currentVersion &&

Version: {currentVersion.version}

} + + Contribute on GitHub + + +
+ ); +}; diff --git a/frontend/src/components/InstanceView.jsx b/frontend/src/components/InstanceView.jsx index 425a65b..7c291d3 100644 --- a/frontend/src/components/InstanceView.jsx +++ b/frontend/src/components/InstanceView.jsx @@ -5,7 +5,7 @@ import { useEffect, useRef, useState } from 'react'; import { SVGDisplay } from './SVGDisplay'; import { Spinner } from './Spinner'; import { Printer } from 'lucide-react'; -import { SoftwareVersion } from './SoftwareVersion'; +import { AppInfo } from './AppInfo'; export const InstanceView = ({ templateName, objectID, endpoint }) => { const [details, setDetails] = useState([]); @@ -112,7 +112,7 @@ export const InstanceView = ({ templateName, objectID, endpoint }) => { })}
- +
); diff --git a/frontend/src/components/SoftwareVersion.jsx b/frontend/src/components/SoftwareVersion.jsx deleted file mode 100644 index 8b9e0e0..0000000 --- a/frontend/src/components/SoftwareVersion.jsx +++ /dev/null @@ -1,39 +0,0 @@ -// Copyright DB InfraGO AG and contributors -// SPDX-License-Identifier: Apache-2.0 - -import { useState, useEffect } from 'react'; -import { API_BASE_URL, ROUTE_PREFIX } from '../APIConfig'; - -export const SoftwareVersion = () => { - const [frontendVersion, setFrontendVersion] = useState(null); - const [backendVersion, setBackendVersion] = useState(null); - - useEffect(() => { - fetch(`${ROUTE_PREFIX}/static/version.json`) - .then((response) => response.json()) - .then((data) => setFrontendVersion(data.git)) - .catch((error) => { - console.error(error); - setFrontendVersion({ version: 'Fetch failed' }); - }); - }, []); - - useEffect(() => { - fetch(`${API_BASE_URL}/metadata`) - .then((response) => response.json()) - .then((data) => setBackendVersion(data.version)) - .catch((error) => { - console.error(error); - setBackendVersion('Fetch failed'); - }); - }, []); - - return ( -
- {frontendVersion && ( -

Frontend Version: {frontendVersion.version}

- )} - {backendVersion &&

Backend Version: {backendVersion}

} -
- ); -}; diff --git a/frontend/src/views/HomeView.jsx b/frontend/src/views/HomeView.jsx index 4f73082..9aacffb 100644 --- a/frontend/src/views/HomeView.jsx +++ b/frontend/src/views/HomeView.jsx @@ -1,11 +1,10 @@ // Copyright DB InfraGO AG and contributors // SPDX-License-Identifier: Apache-2.0 -import React, { useState, useEffect } from "react"; -import { WiredTemplatesList } from "../components/WiredTemplatesList"; -import { API_BASE_URL } from "../APIConfig"; -import { ThemeSwitcher } from "../components/ThemeSwitcher"; -import { SoftwareVersion } from "../components/SoftwareVersion"; +import React, { useState, useEffect } from 'react'; +import { WiredTemplatesList } from '../components/WiredTemplatesList'; +import { API_BASE_URL } from '../APIConfig'; +import { AppInfo } from '../components/AppInfo'; export const HomeView = () => { const [modelInfo, setModelInfo] = useState(null); @@ -14,13 +13,13 @@ export const HomeView = () => { useEffect(() => { const fetchModelInfo = async () => { try { - const response = await fetch(API_BASE_URL + "/model-info"); + const response = await fetch(API_BASE_URL + '/model-info'); const data = await response.json(); setModelInfo(data); } catch (err) { - setError("Failed to fetch model info: " + err.message); + setError('Failed to fetch model info: ' + err.message); } - document.body.style.height = "auto"; + document.body.style.height = 'auto'; }; fetchModelInfo(); @@ -28,7 +27,10 @@ export const HomeView = () => { if (error) { return ( -
+
{error}
); @@ -38,7 +40,10 @@ export const HomeView = () => {
{modelInfo && ( -
+

{modelInfo.title}

{modelInfo.capella_version && (

Capella Version: {modelInfo.capella_version}

@@ -48,16 +53,18 @@ export const HomeView = () => { {modelInfo.hash &&

Commit Hash: {modelInfo.hash}

}
+ dangerouslySetInnerHTML={{ __html: modelInfo.badge }}>
)}
-
- +
+
); diff --git a/frontend/src/views/TemplateView.jsx b/frontend/src/views/TemplateView.jsx index 2025049..225ca9a 100644 --- a/frontend/src/views/TemplateView.jsx +++ b/frontend/src/views/TemplateView.jsx @@ -9,27 +9,27 @@ selected we show a hint to select one. */ -import React, { useEffect, useState } from "react"; -import { useParams } from "react-router-dom"; -import { useMediaQuery } from "react-responsive"; -import { Header } from "../components/Header"; -import { InstanceView } from "../components/InstanceView"; -import { TemplateDetails } from "../components/TemplateDetails"; -import { SoftwareVersion } from "../components/SoftwareVersion"; +import React, { useEffect, useState } from 'react'; +import { useParams } from 'react-router-dom'; +import { useMediaQuery } from 'react-responsive'; +import { Header } from '../components/Header'; +import { InstanceView } from '../components/InstanceView'; +import { TemplateDetails } from '../components/TemplateDetails'; +import { AppInfo } from '../components/AppInfo'; export const TemplateView = ({ endpoint }) => { let { templateName, objectID } = useParams(); const [singleObjectID, setObjectID] = useState(null); - const isSmallScreen = useMediaQuery({ query: "(max-width: 1080px)" }); + const isSmallScreen = useMediaQuery({ query: '(max-width: 1080px)' }); const [isSidebarVisible, setIsSidebarVisible] = useState(!isSmallScreen); useEffect(() => { - document.body.style.overflow = "hidden"; - document.documentElement.style.overflow = "hidden"; + document.body.style.overflow = 'hidden'; + document.documentElement.style.overflow = 'hidden'; return () => { - document.body.style.overflow = ""; - document.documentElement.style.overflow = ""; + document.body.style.overflow = ''; + document.documentElement.style.overflow = ''; }; }, []); useEffect(() => { @@ -54,25 +54,26 @@ export const TemplateView = ({ endpoint }) => { {isSmallScreen && ( )}
-