diff --git a/packages/yii-dev-panel/src/Application/Component/Layout.tsx b/packages/yii-dev-panel/src/Application/Component/Layout.tsx index fcf74f5..5185b13 100644 --- a/packages/yii-dev-panel/src/Application/Component/Layout.tsx +++ b/packages/yii-dev-panel/src/Application/Component/Layout.tsx @@ -54,6 +54,7 @@ const pages = [ name: 'Inspector', icon: , items: [ + {name: 'Config Management', link: '/inspector/config'}, {name: 'Tests', link: '/inspector/tests'}, {name: 'Analyse', link: '/inspector/analyse'}, {name: 'File Explorer', link: '/inspector/files'}, diff --git a/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts b/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts index 42d5148..1c88712 100644 --- a/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts +++ b/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts @@ -189,6 +189,10 @@ export type EventsResponse = { console: EventListenersType; web: EventListenersType; }; +export type MergePlanResponseType = { + path: string; + data: any; +}; type Response = { data: T; @@ -330,6 +334,10 @@ export const inspectorApi = createApi({ transformResponse: (result: Response) => result.data, invalidatesTags: ['inspector/composer'], }), + getMergePlan: builder.query({ + query: (key) => `config/merge-plan`, + transformResponse: (result: Response) => result.data, + }), }), }); @@ -361,5 +369,6 @@ export const { usePostComposerRequirePackageMutation, usePostCurlBuildMutation, useGetEventsQuery, + useGetMergePlanQuery, useGetOpcacheQuery, } = inspectorApi; diff --git a/packages/yii-dev-panel/src/Module/Inspector/Pages/ConfigManagementPage.tsx b/packages/yii-dev-panel/src/Module/Inspector/Pages/ConfigManagementPage.tsx new file mode 100644 index 0000000..13d9bad --- /dev/null +++ b/packages/yii-dev-panel/src/Module/Inspector/Pages/ConfigManagementPage.tsx @@ -0,0 +1,91 @@ +import {Button, LinearProgress, Stack, Tab, Tabs, Typography} from '@mui/material'; +import Box from '@mui/material/Box'; +import {CodeHighlight} from '@yiisoft/yii-dev-panel-sdk/Component/CodeHighlight'; +import {JsonRenderer} from '@yiisoft/yii-dev-panel-sdk/Component/JsonRenderer'; +import {useGetMergePlanQuery} from '@yiisoft/yii-dev-panel/Module/Inspector/API/Inspector'; +import * as React from 'react'; +import {SyntheticEvent, useEffect, useMemo, useState} from 'react'; +import {useSearchParams} from 'react-router-dom'; + +type TabPanelProps = { + children?: React.ReactNode; + index: string; + value: string; +}; + +function TabPanel(props: TabPanelProps) { + const {children, value, index, ...other} = props; + + return ( + + ); +} +export const ConfigManagementPage = () => { + const [searchParams, setSearchParams] = useSearchParams(); + const searchString = searchParams.get('filter') || ''; + const mergePlanQuery = useGetMergePlanQuery(); + const [env, setEnv] = useState(''); + const [group, setGroup] = useState(''); + const handleChangeEnv = (event: SyntheticEvent, newValue: string) => setEnv(newValue); + const handleChangeGroup = (event: SyntheticEvent, newValue: string) => setGroup(newValue); + const data = mergePlanQuery.data?.data; + + const envs = useMemo(() => { + if (!mergePlanQuery.data || !data) { + return []; + } + return Object.keys(data || {}); + }, [mergePlanQuery.isFetching]); + + const groups = useMemo(() => { + if (!env || !data) { + return []; + } + return Object.keys(data[env] || {}); + }, [data, env]); + + useEffect(() => { + setGroup(groups[0] || ''); + }, [env]); + useEffect(() => { + setEnv(envs[0] || ''); + }, [data]); + + const handleReload = () => mergePlanQuery.refetch(); + + return ( + <> +

{'Config Management'}

+ {mergePlanQuery.isFetching && } + {!mergePlanQuery.isFetching && ( + + + + Path:{' '} + + + + + + + + {envs.map((group) => ( + + ))} + + + + + {groups.map((group) => ( + + ))} + + + + + )} + + ); +}; diff --git a/packages/yii-dev-panel/src/Module/Inspector/Pages/index.ts b/packages/yii-dev-panel/src/Module/Inspector/Pages/index.ts index 7e370ad..dd9bea4 100644 --- a/packages/yii-dev-panel/src/Module/Inspector/Pages/index.ts +++ b/packages/yii-dev-panel/src/Module/Inspector/Pages/index.ts @@ -6,6 +6,7 @@ export {ConfigurationPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/C export {ContainerPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/Config/ContainerPage'; export {DefinitionsPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/Config/DefinitionsPage'; export {ParametersPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/Config/ParametersPage'; +export {ConfigManagementPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/ConfigManagementPage'; export {ContainerEntryPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/ContainerEntryPage'; export {DatabasePage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/DatabasePage'; export {EventsPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/EventsPage'; diff --git a/packages/yii-dev-panel/src/Module/Inspector/router.tsx b/packages/yii-dev-panel/src/Module/Inspector/router.tsx index 57b20c2..4c2f5e9 100644 --- a/packages/yii-dev-panel/src/Module/Inspector/router.tsx +++ b/packages/yii-dev-panel/src/Module/Inspector/router.tsx @@ -84,6 +84,10 @@ export const routes = [ path: 'cache', element: , }, + { + path: 'config', + element: , + }, { path: 'config', element: ,