Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hack start single plugin locally #607

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Hack start single plugin locally #607

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
96ca632
hack in klogs plugin for local dev
matthiastz Dec 21, 2023
96c29cf
provide mock data in LogsPage.tsx
matthiastz Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 1 addition & 30 deletions app/packages/app/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import Azure from '@kobsio/azure';

Check failure on line 1 in app/packages/app/src/main.tsx

View workflow job for this annotation

GitHub Actions / Node.js (app) 

'Azure' is defined but never used
import { App } from '@kobsio/core';
import Datadog from '@kobsio/datadog';

Check failure on line 3 in app/packages/app/src/main.tsx

View workflow job for this annotation

GitHub Actions / Node.js (app) 

'Datadog' is defined but never used
import Elasticsearch from '@kobsio/elasticsearch';

Check failure on line 4 in app/packages/app/src/main.tsx

View workflow job for this annotation

GitHub Actions / Node.js (app) 

'Elasticsearch' is defined but never used
import Flux from '@kobsio/flux';

Check failure on line 5 in app/packages/app/src/main.tsx

View workflow job for this annotation

GitHub Actions / Node.js (app) 

'Flux' is defined but never used
import Github from '@kobsio/github';

Check failure on line 6 in app/packages/app/src/main.tsx

View workflow job for this annotation

GitHub Actions / Node.js (app) 

'Github' is defined but never used
import Grafana from '@kobsio/grafana';

Check failure on line 7 in app/packages/app/src/main.tsx

View workflow job for this annotation

GitHub Actions / Node.js (app) 

'Grafana' is defined but never used
import Harbor from '@kobsio/harbor';

Check failure on line 8 in app/packages/app/src/main.tsx

View workflow job for this annotation

GitHub Actions / Node.js (app) 

'Harbor' is defined but never used
import Helm from '@kobsio/helm';

Check failure on line 9 in app/packages/app/src/main.tsx

View workflow job for this annotation

GitHub Actions / Node.js (app) 

'Helm' is defined but never used
import Jaeger from '@kobsio/jaeger';
import Jira from '@kobsio/jira';

Check failure on line 10 in app/packages/app/src/main.tsx

View workflow job for this annotation

GitHub Actions / Node.js (app) 

'Jira' is defined but never used
import Kiali from '@kobsio/kiali';

Check failure on line 11 in app/packages/app/src/main.tsx

View workflow job for this annotation

GitHub Actions / Node.js (app) 

'Kiali' is defined but never used
import Klogs from '@kobsio/klogs';
import MongoDB from '@kobsio/mongodb';
import Opsgenie from '@kobsio/opsgenie';
Expand All @@ -30,35 +29,7 @@
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(
<StrictMode>
<App
plugins={[
Azure,
Datadog,
Elasticsearch,
Flux,
Github,
Grafana,
Harbor,
Helm,
Jaeger,
Jira,
Kiali,
Klogs,
MongoDB,
Opsgenie,
Prometheus,
RSS,
Runbooks,
SignalSciences,
SonarQube,
SQL,
TechDocs,
Velero,
]}
/>
</StrictMode>,
<App plugins={[Klogs]}/>
);
2 changes: 1 addition & 1 deletion app/packages/app/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export default defineConfig(({ command, mode, ssrBuild }) => {
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:15220',
target: 'http://localhost:3003',
},
},
strictPort: true,
Expand Down
105 changes: 25 additions & 80 deletions app/packages/core/src/components/app/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Check failure on line 1 in app/packages/core/src/components/app/App.tsx

View workflow job for this annotation

GitHub Actions / Node.js (core) 

Replace `Box,·CircularProgress` with `·Box,·CircularProgress·`
import {useQuery} from '@tanstack/react-query';

Check failure on line 2 in app/packages/core/src/components/app/App.tsx

View workflow job for this annotation

GitHub Actions / Node.js (core) 

Replace `useQuery` with `·useQuery·`
import {FunctionComponent, ReactNode, useContext} from 'react';

Check failure on line 3 in app/packages/core/src/components/app/App.tsx

View workflow job for this annotation

GitHub Actions / Node.js (core) 

Replace `FunctionComponent,·ReactNode,·useContext` with `·FunctionComponent,·ReactNode,·useContext·`
import {BrowserRouter, Route, Routes, useLocation, useNavigate} from 'react-router-dom';

Check failure on line 4 in app/packages/core/src/components/app/App.tsx

View workflow job for this annotation

GitHub Actions / Node.js (core) 

Replace `BrowserRouter,·Route,·Routes,·useLocation,·useNavigate` with `·BrowserRouter,·Route,·Routes,·useLocation,·useNavigate·`

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';

Check failure on line 6 in app/packages/core/src/components/app/App.tsx

View workflow job for this annotation

GitHub Actions / Node.js (core) 

Replace `APIContext,·APIError,·IAPIContext,·IAPIUser` with `·APIContext,·APIError,·IAPIContext,·IAPIUser·`
import {IAppIcons} from '../../context/AppContext';

Check failure on line 7 in app/packages/core/src/components/app/App.tsx

View workflow job for this annotation

GitHub Actions / Node.js (core) 

Replace `IAppIcons` with `·IAppIcons·`
import {IPlugin} from '../../context/PluginContext';

Check failure on line 8 in app/packages/core/src/components/app/App.tsx

View workflow job for this annotation

GitHub Actions / Node.js (core) 

Replace `IPlugin` with `·IPlugin·`
import {QueryClientProvider} from '../../context/QueryClientProvider';

Check failure on line 9 in app/packages/core/src/components/app/App.tsx

View workflow job for this annotation

GitHub Actions / Node.js (core) 

Replace `QueryClientProvider` with `·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
Expand All @@ -41,20 +23,20 @@
* 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<IAuthWrapper> = ({ children }) => {
const AuthWrapper: FunctionComponent<IAuthWrapper> = ({children}) => {

Check failure on line 26 in app/packages/core/src/components/app/App.tsx

View workflow job for this annotation

GitHub Actions / Node.js (core) 

'AuthWrapper' is assigned a value but never used

Check failure on line 26 in app/packages/core/src/components/app/App.tsx

View workflow job for this annotation

GitHub Actions / Node.js (core) 

Replace `children` with `·children·`
const navigate = useNavigate();
const location = useLocation();
const apiContext = useContext<IAPIContext>(APIContext);

const { isLoading, isError, error } = useQuery<IAPIUser, APIError>(['core/authwrapper'], async () => {
const {isLoading, isError, error} = useQuery<IAPIUser, APIError>(['core/authwrapper'], async () => {
return apiContext.client.auth();
});

if (isLoading) {
return (
<Box minHeight="100vh" minWidth="100%" display="flex" flexDirection="column" justifyContent="center">
<Box sx={{ display: 'inline-flex', mx: 'auto' }}>
<CircularProgress />
<Box sx={{display: 'inline-flex', mx: 'auto'}}>
<CircularProgress/>
</Box>
</Box>
);
Expand All @@ -66,17 +48,17 @@

return (
<Box minHeight="100vh" minWidth="100%" display="flex" flexDirection="column" justifyContent="center">
<Box sx={{ display: 'inline-flex', mx: 'auto' }}>
<CircularProgress />
<Box sx={{display: 'inline-flex', mx: 'auto'}}>
<CircularProgress/>
</Box>
</Box>
);
}

return (
<Box minHeight="100vh" minWidth="100%" display="flex" flexDirection="column" justifyContent="center">
<Box sx={{ display: 'inline-flex', mx: 'auto' }}>
<CircularProgress />
<Box sx={{display: 'inline-flex', mx: 'auto'}}>
<CircularProgress/>
</Box>
</Box>
);
Expand All @@ -98,52 +80,15 @@
* 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<IAppProps> = ({ icons, plugins }) => {
export const App: FunctionComponent<IAppProps> = ({icons, plugins}) => {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Helmet titleTemplate="kobs - %s" defaultTitle="kobs" />
<QueryClientProvider>
<AppContextProvider icons={icons}>
<APIContextProvider>
<BrowserRouter>
<Routes>
<Route path="/auth" element={<Signin />} />
<Route path="/auth/callback" element={<SigninOIDCCallback />} />
<Route
path="*"
element={
<AuthWrapper>
<PluginContextProvider plugins={plugins}>
<Layout>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/applications" element={<ApplicationsPage />} />
<Route
path="/applications/cluster/:cluster/namespace/:namespace/name/:name"
element={<ApplicationPage />}
/>
<Route path="/topology" element={<TopologyPage />} />
<Route path="/teams" element={<TeamsPage />} />
<Route path="/teams/:id" element={<TeamPage />} />
<Route path="/dashboards/:page" element={<DashboardsPage />} />
<Route path="/resources" element={<ResourcesPage />} />
<Route path="/resources/logs" element={<ResourcesLogsPage />} />
<Route path="/resources/terminal" element={<ResourcesTerminalPage />} />
<Route path="/plugins" element={<PluginsPage />} />
<Route path="/plugins/:cluster/:type/:name/*" element={<PluginPage />} />
<Route path="/edit/:type" element={<EditPage />} />
</Routes>
</Layout>
</PluginContextProvider>
</AuthWrapper>
}
/>
</Routes>
</BrowserRouter>
</APIContextProvider>
</AppContextProvider>
</QueryClientProvider>
</ThemeProvider>
<QueryClientProvider>
<BrowserRouter>
<Routes>
<Route path="*" element={<PluginPage/>}>
</Route>
</Routes>
</BrowserRouter>
</QueryClientProvider>
);
};
12 changes: 10 additions & 2 deletions app/packages/core/src/components/plugins/PluginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, string | undefined> {
cluster?: string;
Expand All @@ -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 (
<ErrorBoundary
Expand Down
39 changes: 20 additions & 19 deletions app/packages/klogs/src/components/LogsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,7 @@
const LogsPage: FunctionComponent<IPluginPageProps> = ({ instance }) => {
const theme = useTheme();
const isLgUp = useMediaQuery(theme.breakpoints.up('lg'));
const apiContext = useContext<IAPIContext>(APIContext);

Check failure on line 322 in app/packages/klogs/src/components/LogsPage.tsx

View workflow job for this annotation

GitHub Actions / Node.js (klogs) 

'apiContext' is assigned a value but never used

const [options, setOptions] = useQueryState<IOptions>({
fields: [],
Expand All @@ -333,21 +333,23 @@
timeStart: Math.floor(Date.now() / 1000) - 900,
});

const { isError, isLoading, error, data, refetch } = useQuery<ILogsData, APIError>(
['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<ILogsData>(path, {
headers: {
'x-kobs-cluster': instance.cluster,
'x-kobs-plugin': instance.name,
},
});
},
);
const data: ILogsData = {/* TODO: provide mock data here */}

Check failure on line 336 in app/packages/klogs/src/components/LogsPage.tsx

View workflow job for this annotation

GitHub Actions / Node.js (klogs) 

Replace `/*·TODO:·provide·mock·data·here·*/}` with `⏎····/*·TODO:·provide·mock·data·here·*/⏎··};`

// const { isError, isLoading, error, data, refetch } = useQuery<ILogsData, APIError>(
// ['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<ILogsData>(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,
Expand Down Expand Up @@ -416,10 +418,9 @@
actions={<LogsActions instance={instance} options={options} />}
>
<UseQueryWrapper
error={error}
isError={isError}
isLoading={isLoading}
refetch={refetch}
error={null}
isError={false}
isLoading={false}
errorTitle="Failed to get logs"
isNoData={!data || !data.documents || data.documents.length === 0}
noDataTitle="No logs were found"
Expand Down
Loading