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

feat(dashboard): move config modal to page #1174

Merged
merged 3 commits into from
Nov 11, 2024
Merged

feat(dashboard): move config modal to page #1174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6bb2420
feat(dashboard): move config modal to page
zxh326 Nov 11, 2024
e4c9c47
fix icons
zxh326 Nov 11, 2024
14eea3b
i18n
zxh326 Nov 11, 2024
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
2 changes: 2 additions & 0 deletions dashboard-ui-v2/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
import { SWRConfig } from 'swr'

import { Layout, ResourceDetail, ResourceList } from '@/components'
import ConfigDetail from '@/pages/config-detail'
import { getBasePath, getHost } from '@/utils'

async function fetcher<T>(url: string, init?: RequestInit): Promise<T> {
Expand Down Expand Up @@ -69,6 +70,7 @@ const App = () => (
element={<ResourceDetail />}
/>
<Route path="/:resources/:name" element={<ResourceDetail />} />
<Route path="/config" element={<ConfigDetail />} />
</Routes>
</Layout>
</BrowserRouter>
Expand Down
135 changes: 0 additions & 135 deletions dashboard-ui-v2/src/components/config-modal.tsx
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions dashboard-ui-v2/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
* limitations under the License.
*/

import ConfigModal from '@/components/config-modal'
import Containers from '@/components/containers'
import DebugModal from '@/components/debug-modal'
import EventTable from '@/components/event-table'
Expand All @@ -28,7 +27,6 @@ import ResourceList from '@/components/resource-list'
import YamlModal from '@/components/yaml-modal'

export {
ConfigModal,
Containers,
EventTable,
Layout,
Expand Down
101 changes: 53 additions & 48 deletions dashboard-ui-v2/src/components/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { ReactNode, useEffect, useState } from 'react'
import {
GithubOutlined,
QuestionCircleOutlined,
SettingOutlined,
ToolOutlined,
} from '@ant-design/icons'
import {
Layout as AntdLayout,
Expand All @@ -34,47 +34,63 @@ import zhCN from 'antd/locale/zh_CN'
import { FormattedMessage, IntlProvider } from 'react-intl'
import { Link, useLocation } from 'react-router-dom'

import ConfigModal from './config-modal'
import { DSIcon, LocaleIcon, PODIcon, PVCIcon, PVIcon, SCIcon, UpgradeIcon } from '@/icons'
import BatchUpgradeModal from '@/components/batch-upgrade-modal.tsx'
import { LocaleIcon, ResourcesIcon, UpgradeIcon } from '@/icons'
import en from '@/locales/en-US'
import cn from '@/locales/zh-CN'
import BatchUpgradeModal from '@/components/batch-upgrade-modal.tsx'

const { Header, Sider, Content } = AntdLayout

const items: MenuProps['items'] = [
{
icon: <PODIcon />,
label: (
<Link to="/pods">
<FormattedMessage id="appPodTable" />
</Link>
),
key: '/pods',
},
{
icon: <DSIcon />,
label: (
<Link to="/syspods">
<FormattedMessage id="sysPodTable" />
</Link>
),
key: '/syspods',
},
{
icon: <PVIcon />,
label: <Link to="/pvs">PV</Link>,
key: '/pvs',
},
{
icon: <PVCIcon />,
label: <Link to="/pvcs">PVC</Link>,
key: '/pvcs',
key: 'resources',
label: <FormattedMessage id="resources" />,
icon: <ResourcesIcon />,
children: [
{
label: (
<Link to="/pods">
<FormattedMessage id="appPodTable" />
</Link>
),
key: '/pods',
},
{
label: (
<Link to="/syspods">
<FormattedMessage id="sysPodTable" />
</Link>
),
key: '/syspods',
},
{
label: <Link to="/pvs">PV</Link>,
key: '/pvs',
},
{
label: <Link to="/pvcs">PVC</Link>,
key: '/pvcs',
},
{
label: <Link to="/storageclass">Storage Class</Link>,
key: '/storageclass',
},
],
},
{
icon: <SCIcon />,
label: <Link to="/storageclass">Storage Class</Link>,
key: '/storageclass',
key: 'tools',
label: <FormattedMessage id="tool" />,
icon: <ToolOutlined />,
children: [
{
label: (
<Link to="/config">
<FormattedMessage id="setting" />
</Link>
),
key: '/config',
},
],
},
]

Expand Down Expand Up @@ -123,17 +139,6 @@ export default function Layout(props: { children: ReactNode }) {
}}
/>
</Tooltip>
<ConfigModal>
{({ onClick }) => (
<Tooltip title={<FormattedMessage id="config" />}>
<Button
icon={<SettingOutlined />}
className="header-button"
onClick={onClick}
/>
</Tooltip>
)}
</ConfigModal>
<BatchUpgradeModal>
{({ onClick }) => (
<Tooltip title={<FormattedMessage id="batchUpgrade" />}>
Expand All @@ -144,7 +149,6 @@ export default function Layout(props: { children: ReactNode }) {
/>
</Tooltip>
)}

</BatchUpgradeModal>
<Tooltip title="English / 中文">
<Button
Expand Down Expand Up @@ -176,6 +180,7 @@ export default function Layout(props: { children: ReactNode }) {
position: 'fixed',
marginTop: '64px',
}}
width={220}
>
<Menu
mode="inline"
Expand All @@ -184,13 +189,13 @@ export default function Layout(props: { children: ReactNode }) {
? '/pods'
: `/${location.pathname.split('/')[1]}`,
]}
defaultOpenKeys={['/pods']}
style={{ height: '100%' }}
defaultOpenKeys={['resources', 'tools']}
style={{ height: '100%', width: '100%' }}
items={items}
/>
</Sider>
</AntdLayout>
<AntdLayout style={{ marginLeft: 200, marginTop: '64px' }}>
<AntdLayout style={{ marginLeft: 220, marginTop: '64px' }}>
<ConfigProvider
theme={{
token: {
Expand Down
47 changes: 41 additions & 6 deletions dashboard-ui-v2/src/icons/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,7 @@ const LocaleIcon = (props: Partial<CustomIconComponentProps>) => (
<Icon
component={() => (
<svg viewBox="0 0 1024 1024" width="1em" height="1em">
<path
d="M549.12 642.986667l-108.373333-107.093334 1.28-1.28A747.52 747.52 0 0 0 600.32 256H725.333333V170.666667h-298.666666V85.333333H341.333333v85.333334H42.666667v84.906666h476.586666C490.666667 337.92 445.44 416 384 484.266667 344.32 440.32 311.466667 392.106667 285.44 341.333333h-85.333333c31.146667 69.546667 73.813333 135.253333 127.146666 194.56l-217.173333 214.186667L170.666667 810.666667l213.333333-213.333334 132.693333 132.693334 32.426667-87.04zM789.333333 426.666667h-85.333333L512 938.666667h85.333333l47.786667-128h202.666667L896 938.666667h85.333333l-192-512z m-111.786666 298.666666l69.12-184.746666L815.786667 725.333333h-138.24z"></path>
<path d="M549.12 642.986667l-108.373333-107.093334 1.28-1.28A747.52 747.52 0 0 0 600.32 256H725.333333V170.666667h-298.666666V85.333333H341.333333v85.333334H42.666667v84.906666h476.586666C490.666667 337.92 445.44 416 384 484.266667 344.32 440.32 311.466667 392.106667 285.44 341.333333h-85.333333c31.146667 69.546667 73.813333 135.253333 127.146666 194.56l-217.173333 214.186667L170.666667 810.666667l213.333333-213.333334 132.693333 132.693334 32.426667-87.04zM789.333333 426.666667h-85.333333L512 938.666667h85.333333l47.786667-128h202.666667L896 938.666667h85.333333l-192-512z m-111.786666 298.666666l69.12-184.746666L815.786667 725.333333h-138.24z"></path>
</svg>
)}
{...props}
Expand All @@ -82,9 +81,7 @@ const TerminalIcon = (props: Partial<CustomIconComponentProps>) => (
<Icon
component={() => (
<svg viewBox="0 0 1024 1024" width="1em" height="1em">
<path
d="M93.568 984.234667c-12.416 0-23.296-4.650667-32.64-13.994667-18.645333-18.645333-18.645333-48.213333 0-65.28l388.693333-388.693333-388.693333-388.693334c-18.645333-18.645333-18.645333-48.213333 0-65.28 18.645333-18.645333 48.213333-18.645333 65.28 0l421.333333 421.333334c18.688 18.645333 18.688 48.213333 0 65.28L126.208 970.24a44.757333 44.757333 0 0 1-32.64 13.994667zM934.698667 982.698667h-419.797334c-26.453333 0-46.634667-20.224-46.634666-46.634667 0-26.453333 20.224-46.634667 46.634666-46.634667h419.797334c26.453333 0 46.634667 20.181333 46.634666 46.634667s-20.224 46.634667-46.634666 46.634667z"></path>
{' '}
<path d="M93.568 984.234667c-12.416 0-23.296-4.650667-32.64-13.994667-18.645333-18.645333-18.645333-48.213333 0-65.28l388.693333-388.693333-388.693333-388.693334c-18.645333-18.645333-18.645333-48.213333 0-65.28 18.645333-18.645333 48.213333-18.645333 65.28 0l421.333333 421.333334c18.688 18.645333 18.688 48.213333 0 65.28L126.208 970.24a44.757333 44.757333 0 0 1-32.64 13.994667zM934.698667 982.698667h-419.797334c-26.453333 0-46.634667-20.224-46.634666-46.634667 0-26.453333 20.224-46.634667 46.634666-46.634667h419.797334c26.453333 0 46.634667 20.181333 46.634666 46.634667s-20.224 46.634667-46.634666 46.634667z"></path>{' '}
</svg>
)}
{...props}
Expand Down Expand Up @@ -202,7 +199,44 @@ const UpgradeIcon = (props: Partial<CustomIconComponentProps>) => (
<svg viewBox="0 0 1024 1024" width="16" height="16">
<path
d="M410.282667 126.421333l-264.362667 309.333334A74.666667 74.666667 0 0 0 128 484.48l0.256 6.144c3.242667 38.357333 35.456 68.437333 74.666667 68.309333l104.149333-0.384 0.042667 145.664c0 41.258667 33.450667 74.666667 74.666666 74.666667h234.666667l6.144-0.256a74.666667 74.666667 0 0 0 68.522667-74.410667v-146.773333l106.837333-0.298667a74.666667 74.666667 0 0 0 56.32-123.52l-266.026667-307.669333a117.333333 117.333333 0 0 0-177.92 0.469333z m238.165333 716.458667a32 32 0 1 1 0 64h-298.666667a32 32 0 1 1 0-64h298.666667zM529.536 158.592l4.608 3.541333c2.048 1.706667 3.925333 3.626667 5.717333 5.674667l265.941334 307.669333a10.666667 10.666667 0 0 1-8.021334 17.664l-138.752 0.384a32 32 0 0 0-31.914666 32v178.688a10.666667 10.666667 0 0 1-10.666667 10.666667h-234.666667a10.666667 10.666667 0 0 1-10.666666-10.666667V526.506667a32 32 0 0 0-32.085334-32l-136.32 0.426666a10.666667 10.666667 0 0 1-8.149333-17.578666l264.405333-309.333334a53.333333 53.333333 0 0 1 70.570667-9.429333z"
fill="#000000" p-id="2445"></path>
fill="#000000"
p-id="2445"
></path>
</svg>
)}
{...props}
/>
)

const ResourcesIcon = (props: Partial<CustomIconComponentProps>) => (
<Icon
component={() => (
<svg viewBox="0 0 1024 1024" width="16" height="16">
<path
d="M355.925333 298.026667c-133.034667 0-231.168-46.293333-248.618666-92.330667 0-57.941333 115.584-98.389333 248.618666-98.389333 138.624 0 254.464 40.448 254.464 98.389333-17.536 46.037333-115.669333 92.330667-254.464 92.330667z"
fill="#2c2c2c"
p-id="4477"
></path>
<path
d="M355.925333 673.834667H384v121.386666h-28.074667c-138.837333 0-248.618667-34.645333-248.618666-81.066666v-103.936a438.442667 438.442667 0 0 0 248.618666 63.616zM384 505.898667v126.464h-28.074667c-133.034667 0-231.168-46.293333-248.618666-92.586667v-97.109333a438.442667 438.442667 0 0 0 248.618666 63.488z m-28.074667-167.424a498.261333 498.261333 0 0 0 254.464-63.488v63.488c-115.84 11.648-219.776 52.096-225.621333 126.464h-22.997333c-133.034667 0-231.424-46.293333-248.618667-92.586667V274.986667a451.712 451.712 0 0 0 242.773333 63.488z"
fill="#2c2c2c"
p-id="4478"
></path>
<path
d="M668.032 558.293333c-133.034667 0-231.168-46.293333-248.618667-92.586666 0-52.096 110.037333-98.133333 248.618667-98.133334 133.034667 5.546667 248.618667 46.037333 248.618667 98.133334-17.450667 52.053333-115.584 92.586667-248.618667 92.586666z"
fill="#2c2c2c"
p-id="4479"
></path>
<path
d="M668.032 743.168c-133.034667 0-231.168-46.293333-248.618667-92.330667v-104.192a413.354667 413.354667 0 0 0 248.618667 63.744 420.309333 420.309333 0 0 0 248.618667-63.744v104.192c-17.450667 46.037333-115.584 92.330667-248.618667 92.330667z"
fill="#2c2c2c"
p-id="4480"
></path>
<path
d="M668.032 795.264a425.386667 425.386667 0 0 0 248.618667-63.488v103.936c0 46.293333-115.584 81.066667-248.618667 81.066667s-248.618667-34.816-248.618667-81.066667v-103.936a459.306667 459.306667 0 0 0 248.618667 63.488z"
fill="#2c2c2c"
p-id="4481"
></path>
</svg>
)}
{...props}
Expand All @@ -225,4 +259,5 @@ export {
DebugIcon,
WarmupIcon,
UpgradeIcon,
ResourcesIcon,
}
Loading
Loading