diff --git a/app/packages/app/src/main.tsx b/app/packages/app/src/main.tsx index 5449e718..425af14e 100644 --- a/app/packages/app/src/main.tsx +++ b/app/packages/app/src/main.tsx @@ -7,7 +7,6 @@ import Github from '@kobsio/github'; import Grafana from '@kobsio/grafana'; import Harbor from '@kobsio/harbor'; import Helm from '@kobsio/helm'; -import Jaeger from '@kobsio/jaeger'; import Jira from '@kobsio/jira'; import Kiali from '@kobsio/kiali'; import Klogs from '@kobsio/klogs'; @@ -30,35 +29,7 @@ import '@fontsource/roboto/500.css'; import '@fontsource/roboto/700.css'; import '@kobsio/core/dist/style.css'; -import '@kobsio/jaeger/dist/style.css'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - - - , + ); diff --git a/app/packages/app/vite.config.ts b/app/packages/app/vite.config.ts index f72e5069..a33b5e92 100644 --- a/app/packages/app/vite.config.ts +++ b/app/packages/app/vite.config.ts @@ -128,7 +128,7 @@ export default defineConfig(({ command, mode, ssrBuild }) => { port: 3000, proxy: { '/api': { - target: 'http://localhost:15220', + target: 'http://localhost:3003', }, }, strictPort: true, diff --git a/app/packages/core/src/components/app/App.tsx b/app/packages/core/src/components/app/App.tsx index ef5cc7cb..79ead483 100644 --- a/app/packages/core/src/components/app/App.tsx +++ b/app/packages/core/src/components/app/App.tsx @@ -1,31 +1,13 @@ -import { CssBaseline, ThemeProvider, Box, CircularProgress } from '@mui/material'; -import { useQuery } from '@tanstack/react-query'; -import { FunctionComponent, ReactNode, useContext } from 'react'; -import { Helmet } from 'react-helmet'; -import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom'; +import {Box, CircularProgress} from '@mui/material'; +import {useQuery} from '@tanstack/react-query'; +import {FunctionComponent, ReactNode, useContext} from 'react'; +import {BrowserRouter, Route, Routes, useLocation, useNavigate} from 'react-router-dom'; -import Home from './Home'; -import Layout from './layout/Layout'; -import Signin from './signin/Signin'; -import SigninOIDCCallback from './signin/SigninOIDCCallback'; - -import { APIContextProvider, APIContext, IAPIContext, APIError, IAPIUser } from '../../context/APIContext'; -import { AppContextProvider, IAppIcons } from '../../context/AppContext'; -import { PluginContextProvider, IPlugin } from '../../context/PluginContext'; -import { QueryClientProvider } from '../../context/QueryClientProvider'; -import theme from '../../utils/theme'; -import ApplicationPage from '../applications/ApplicationPage'; -import ApplicationsPage from '../applications/ApplicationsPage'; -import TopologyPage from '../applications/TopologyPage'; -import DashboardsPage from '../dashboards/DashboardsPage'; -import EditPage from '../edit/EditPage'; +import {APIContext, APIError, IAPIContext, IAPIUser} from '../../context/APIContext'; +import {IAppIcons} from '../../context/AppContext'; +import {IPlugin} from '../../context/PluginContext'; +import {QueryClientProvider} from '../../context/QueryClientProvider'; import PluginPage from '../plugins/PluginPage'; -import PluginsPage from '../plugins/PluginsPage'; -import ResourcesLogsPage from '../resources/ResourcesLogsPage'; -import ResourcesPage from '../resources/ResourcesPage'; -import ResourcesTerminalPage from '../resources/ResourcesTerminalPage'; -import TeamPage from '../teams/TeamPage'; -import TeamsPage from '../teams/TeamsPage'; /** * `IAuthWrapper` is the interface which defines the properties for the `AuthWrapper` component. We only have to provide @@ -41,20 +23,20 @@ interface IAuthWrapper { * returns the authenticated user. If we can not get a user within the `auth` method and our API returns a unauthorized * error we automatically redirecting the user to the sign in page. */ -const AuthWrapper: FunctionComponent = ({ children }) => { +const AuthWrapper: FunctionComponent = ({children}) => { const navigate = useNavigate(); const location = useLocation(); const apiContext = useContext(APIContext); - const { isLoading, isError, error } = useQuery(['core/authwrapper'], async () => { + const {isLoading, isError, error} = useQuery(['core/authwrapper'], async () => { return apiContext.client.auth(); }); if (isLoading) { return ( - - + + ); @@ -66,8 +48,8 @@ const AuthWrapper: FunctionComponent = ({ children }) => { return ( - - + + ); @@ -75,8 +57,8 @@ const AuthWrapper: FunctionComponent = ({ children }) => { return ( - - + + ); @@ -98,52 +80,15 @@ interface IAppProps { * The `App` component defines, defines all the contexts and routes we are using in our app. The `App` component is also * responsible for defining our layout and registering the theme. */ -export const App: FunctionComponent = ({ icons, plugins }) => { +export const App: FunctionComponent = ({icons, plugins}) => { return ( - - - - - - - - - } /> - } /> - - - - - } /> - } /> - } - /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - - - - } - /> - - - - - - + + + + }> + + + + ); }; diff --git a/app/packages/core/src/components/plugins/PluginPage.tsx b/app/packages/core/src/components/plugins/PluginPage.tsx index 0efbf08e..31a77b6f 100644 --- a/app/packages/core/src/components/plugins/PluginPage.tsx +++ b/app/packages/core/src/components/plugins/PluginPage.tsx @@ -5,6 +5,7 @@ import { useNavigate } from 'react-router-dom'; import { useParams } from 'react-router-dom'; import { PluginContext } from '../../context/PluginContext'; +import Klogs from '@kobsio/klogs'; interface IPluginPageParams extends Record { cluster?: string; @@ -25,8 +26,15 @@ const PluginPage: FunctionComponent = () => { const type = params['type']; const name = params['name']; - const instance = name ? getInstance(`/cluster/${cluster}/type/${type}/name/${name}`) : undefined; - const Page = instance ? getPlugin(instance.type)?.page : undefined; + // const instance = name ? getInstance(`/cluster/${cluster}/type/${type}/name/${name}`) : undefined; + const instance = { + cluster: "dev-de1-fake", + id: "id-fake", + name: "klogs-fake", + type: "type-klogs-fake" + } + // const Page = instance ? getPlugin(instance.type)?.page : undefined; + const Page = Klogs.page return ( = ({ instance }) => { timeStart: Math.floor(Date.now() / 1000) - 900, }); - const { isError, isLoading, error, data, refetch } = useQuery( - ['klogs/logs', options.query, options.order, options.orderBy, options.timeStart, options.timeEnd], - () => { - const path = `/api/plugins/klogs/logs?query=${encodeURIComponent(options.query)}&order=${ - options.order - }&orderBy=${encodeURIComponent(options.orderBy)}&timeStart=${options.timeStart}&timeEnd=${options.timeEnd}`; - - return apiContext.client.get(path, { - headers: { - 'x-kobs-cluster': instance.cluster, - 'x-kobs-plugin': instance.name, - }, - }); - }, - ); + const data: ILogsData = {/* TODO: provide mock data here */} + + // const { isError, isLoading, error, data, refetch } = useQuery( + // ['klogs/logs', options.query, options.order, options.orderBy, options.timeStart, options.timeEnd], + // () => { + // const path = `/api/plugins/klogs/logs?query=${encodeURIComponent(options.query)}&order=${ + // options.order + // }&orderBy=${encodeURIComponent(options.orderBy)}&timeStart=${options.timeStart}&timeEnd=${options.timeEnd}`; + // + // return apiContext.client.get(path, { + // headers: { + // 'x-kobs-cluster': instance.cluster, + // 'x-kobs-plugin': instance.name, + // }, + // }); + // }, + // ); /** * selectField is used to add a field as parameter, when it isn't present and to remove a fields from as parameter, @@ -416,10 +418,9 @@ const LogsPage: FunctionComponent = ({ instance }) => { actions={} >