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

[Optimize][Web]Optimize some web layouts to make them more user-friendly when displayed on small screens #3749

Merged
merged 4 commits into from
Aug 27, 2024
Merged

[Optimize][Web]Optimize some web layouts to make them more user-friendly when displayed on small screens #3749

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
46a34f4
optimize_some_layout
zackyoungh Aug 27, 2024
fdc40a7
Spotless Apply
zackyoungh Aug 27, 2024
f96f908
optimize_some_layout
zackyoungh Aug 27, 2024
5ca2b50
Spotless Apply
zackyoungh Aug 27, 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
26 changes: 13 additions & 13 deletions dinky-web/src/pages/DevOps/JobDetail/JobOverview/components/JobDesc.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@
*/

import StatusTag from '@/components/JobTags/StatusTag';
import { JobProps } from '@/pages/DevOps/JobDetail/data';
import { parseMilliSecondStr } from '@/utils/function';
import { l } from '@/utils/intl';
import { Link } from '@@/exports';
import { RocketOutlined } from '@ant-design/icons';
import { ProCard } from '@ant-design/pro-components';
import { Descriptions, Tag, Typography } from 'antd';
import {JobProps} from '@/pages/DevOps/JobDetail/data';
import {parseMilliSecondStr} from '@/utils/function';
import {l} from '@/utils/intl';
import {Link} from '@@/exports';
import {RocketOutlined} from '@ant-design/icons';
import {ProCard} from '@ant-design/pro-components';
import {Descriptions, Tag, Typography} from 'antd';

const { Text } = Typography;
const {Text} = Typography;

/**
* Renders the JobConfigTab component.
Expand All @@ -35,7 +35,7 @@ const { Text } = Typography;
* @returns {JSX.Element} - The rendered JobConfigTab component.
*/
const JobDesc = (props: JobProps) => {
const { jobDetail } = props;
const {jobDetail} = props;

/**
* Retrieves the savepoint strategy based on the provided strategy value.
Expand Down Expand Up @@ -75,14 +75,14 @@ const JobDesc = (props: JobProps) => {
return (
<>
<ProCard>
<Descriptions bordered size='small' column={5}>
<Descriptions bordered size='small' column={{ xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 5 }} >
<Descriptions.Item label={l('global.table.status')}>
<StatusTag status={jobDetail?.instance?.status} />
<StatusTag status={jobDetail?.instance?.status}/>
</Descriptions.Item>

<Descriptions.Item label={l('devops.jobinfo.config.submitType')}>
<Tag color='pink'>
<RocketOutlined /> {jobDetail?.history?.type}
<RocketOutlined/> {jobDetail?.history?.type}
</Tag>
</Descriptions.Item>

Expand Down Expand Up @@ -136,7 +136,7 @@ const JobDesc = (props: JobProps) => {
</Descriptions.Item>
</Descriptions>
</ProCard>
<br />
<br/>
{/*<ProCard>*/}
{/* <Descriptions title={l('devops.jobinfo.config.UserCustomConf')} bordered size="small">*/}
{/* {getUserConfig(jobDetail?.history?.config?.config)}*/}
Expand Down
8 changes: 4 additions & 4 deletions dinky-web/src/pages/DevOps/JobList/components/Overview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ const JobOverview = (props: any) => {
const statusCount = data as StatusCountOverView;

return (
<Row gutter={[16, 8]}>
<Col span={5}>
<Row gutter={[16, 8]} >
<Col span={5} xs={24} xxl={7}>
<ProCard colSpan={'20%'} boxShadow={true}>
<StatisticsCard
title={l('devops.joblist.status.all')}
Expand All @@ -69,8 +69,8 @@ const JobOverview = (props: any) => {
}
/>
</ProCard>
</Col>
<Col span={19}>
</Col >
<Col span={19} xs={24} xxl={17}>
<ProCard layout='center' boxShadow={true}>
<StatisticsCard
title={l('devops.joblist.status.running')}
Expand Down
1 change: 1 addition & 0 deletions dinky-web/src/pages/RegCenter/Alert/AlertGroup/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,7 @@ const AlertGroupTableList: React.FC = (props: any) => {
headerTitle={l('rc.ag.management')}
toolBarRender={renderToolBar()}
dataSource={renderDataSource}
grid={{ xs:1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 5}}
/>

<AlertGroupForm
Expand Down
1 change: 1 addition & 0 deletions dinky-web/src/pages/RegCenter/Alert/AlertInstance/components/AlertInstanceList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,7 @@ const AlertInstanceList: React.FC = () => {
headerTitle={l('rc.ai.management')}
toolBarRender={renderToolBar()}
dataSource={renderDataSource}
grid={{ xs:1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 5}}
/>

{/* added */}
Expand Down
1 change: 1 addition & 0 deletions dinky-web/src/pages/RegCenter/Cluster/Configuration/components/ConfigurationList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,6 +301,7 @@ export default () => {
actionRef={actionRef}
headerTitle={l('rc.cc.management')}
toolBarRender={toolBarRender}
grid={{ xs:1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 4}}
dataSource={renderData(clusterConfigState.configList)}
/>

Expand Down
83 changes: 40 additions & 43 deletions dinky-web/src/pages/RegCenter/Cluster/Instance/components/InstanceList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,37 +17,32 @@
*
*/

import { CreateBtn } from '@/components/CallBackButton/CreateBtn';
import { EditBtn } from '@/components/CallBackButton/EditBtn';
import { EnableSwitchBtn } from '@/components/CallBackButton/EnableSwitchBtn';
import { PopconfirmDeleteBtn } from '@/components/CallBackButton/PopconfirmDeleteBtn';
import { Authorized, HasAuthority } from '@/hooks/useAccess';
import {CreateBtn} from '@/components/CallBackButton/CreateBtn';
import {EditBtn} from '@/components/CallBackButton/EditBtn';
import {EnableSwitchBtn} from '@/components/CallBackButton/EnableSwitchBtn';
import {PopconfirmDeleteBtn} from '@/components/CallBackButton/PopconfirmDeleteBtn';
import {Authorized, HasAuthority} from '@/hooks/useAccess';
import useHookRequest from '@/hooks/useHookRequest';
import { CLUSTER_TYPE_OPTIONS } from '@/pages/RegCenter/Cluster/constants';
import { renderWebUiRedirect } from '@/pages/RegCenter/Cluster/Instance/components/function';
import {CLUSTER_TYPE_OPTIONS} from '@/pages/RegCenter/Cluster/constants';
import {renderWebUiRedirect} from '@/pages/RegCenter/Cluster/Instance/components/function';
import InstanceModal from '@/pages/RegCenter/Cluster/Instance/components/InstanceModal';
import { getData } from '@/services/api';
import {getData} from '@/services/api';
import {
handleAddOrUpdate,
handleOption,
handlePutDataByParams,
handleRemoveById,
updateDataByParam
} from '@/services/BusinessCrud';
import { PROTABLE_OPTIONS_PUBLIC, PRO_LIST_CARD_OPTIONS } from '@/services/constants';
import { API_CONSTANTS } from '@/services/endpoints';
import { PermissionConstants } from '@/types/Public/constants';
import { Cluster } from '@/types/RegCenter/data.d';
import { InitClusterInstanceState } from '@/types/RegCenter/init.d';
import { ClusterInstanceState } from '@/types/RegCenter/state.d';
import { l } from '@/utils/intl';
import {
CheckCircleOutlined,
ExclamationCircleOutlined,
HeartTwoTone,
StopTwoTone
} from '@ant-design/icons';
import { ProList } from '@ant-design/pro-components';
import {PRO_LIST_CARD_OPTIONS, PROTABLE_OPTIONS_PUBLIC} from '@/services/constants';
import {API_CONSTANTS} from '@/services/endpoints';
import {PermissionConstants} from '@/types/Public/constants';
import {Cluster} from '@/types/RegCenter/data.d';
import {InitClusterInstanceState} from '@/types/RegCenter/init.d';
import {ClusterInstanceState} from '@/types/RegCenter/state.d';
import {l} from '@/utils/intl';
import {CheckCircleOutlined, ExclamationCircleOutlined, HeartTwoTone, StopTwoTone} from '@ant-design/icons';
import {ProList} from '@ant-design/pro-components';
import {
Badge,
Button,
Expand All @@ -64,9 +59,9 @@ import {
Tooltip,
Typography
} from 'antd';
import { useState } from 'react';
import {useState} from 'react';

const { Text, Paragraph, Link } = Typography;
const {Text, Paragraph, Link} = Typography;

export default () => {
/**
Expand All @@ -77,11 +72,11 @@ export default () => {
const [isAutoCreate, setIsAutoCreate] = useState<boolean>(false);
const [searchKeyWord, setSearchKeyword] = useState<string>('');

const { data, loading, refresh } = useHookRequest(getData, {
const {data, loading, refresh} = useHookRequest(getData, {
refreshDeps: [searchKeyWord, isAutoCreate],
defaultParams: [
API_CONSTANTS.CLUSTER_INSTANCE_LIST,
{ searchKeyWord: searchKeyWord, isAutoCreate: isAutoCreate }
{searchKeyWord: searchKeyWord, isAutoCreate: isAutoCreate}
]
});

Expand All @@ -91,9 +86,9 @@ export default () => {
* @returns {Promise<void>}
*/
const executeAndCallback = async (callback: () => void) => {
setClusterInstanceStatus((prevState) => ({ ...prevState, loading: true }));
setClusterInstanceStatus((prevState) => ({...prevState, loading: true}));
await callback();
setClusterInstanceStatus((prevState) => ({ ...prevState, loading: false }));
setClusterInstanceStatus((prevState) => ({...prevState, loading: false}));
await refresh();
};

Expand Down Expand Up @@ -143,7 +138,7 @@ export default () => {
};
const handleKill = async (id: number) => {
await executeAndCallback(async () =>
handlePutDataByParams(API_CONSTANTS.CLUSTER_INSTANCE_KILL, l('rc.ci.kill'), { id })
handlePutDataByParams(API_CONSTANTS.CLUSTER_INSTANCE_KILL, l('rc.ci.kill'), {id})
);
};

Expand All @@ -153,7 +148,7 @@ export default () => {
*/
const handleChangeEnable = async (record: Partial<Cluster.Instance>) => {
await executeAndCallback(async () =>
updateDataByParam(API_CONSTANTS.CLUSTER_INSTANCE_ENABLE, { id: record.id })
updateDataByParam(API_CONSTANTS.CLUSTER_INSTANCE_ENABLE, {id: record.id})
);
};

Expand All @@ -171,12 +166,12 @@ export default () => {
*/
const renderActionButton = (record: Cluster.Instance) => (
<Space wrap direction={'vertical'} align={'center'}>
<br />
<br/>
<Authorized
key={`${record.id}_edit_auth`}
path={PermissionConstants.REGISTRATION_CLUSTER_INSTANCE_EDIT}
>
<EditBtn key={`${record.id}_edit`} onClick={() => handleEdit(record)} />
<EditBtn key={`${record.id}_edit`} onClick={() => handleEdit(record)}/>
</Authorized>
<Authorized
key={`${record.id}_delete_auth`}
Expand All @@ -196,7 +191,7 @@ export default () => {
<PopconfirmDeleteBtn
key={`${record.id}_kill`}
onClick={() => handleKill(record.id)}
buttonIcon={<StopTwoTone />}
buttonIcon={<StopTwoTone/>}
title={l('rc.ci.kill')}
description={l('rc.ci.killConfirm')}
/>
Expand Down Expand Up @@ -240,7 +235,7 @@ export default () => {
{CLUSTER_TYPE_OPTIONS().find((record) => item.type === record.value)?.label}
</Tag>
<Tag
icon={item.status === 1 ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />}
icon={item.status === 1 ? <CheckCircleOutlined/> : <ExclamationCircleOutlined/>}
color={item.status === 1 ? 'success' : 'warning'}
>
{item.status === 1
Expand All @@ -249,7 +244,7 @@ export default () => {
</Tag>
</Space>
</Col>
<Divider type={'vertical'} style={{ height: '100%' }} />
<Divider type={'vertical'} style={{height: '100%'}}/>
<Col className={'card-button-list'} flex='auto'>
{renderActionButton(item)}
</Col>
Expand Down Expand Up @@ -286,7 +281,7 @@ export default () => {
<Authorized key={`_add_auth`} path={PermissionConstants.REGISTRATION_CLUSTER_INSTANCE_ADD}>
<CreateBtn
key={`_add`}
onClick={() => setClusterInstanceStatus((prevState) => ({ ...prevState, addedOpen: true }))}
onClick={() => setClusterInstanceStatus((prevState) => ({...prevState, addedOpen: true}))}
/>
</Authorized>,
<Authorized
Expand All @@ -296,7 +291,7 @@ export default () => {
<Button
key={`_add_heartbeat_btn`}
type={'primary'}
icon={<HeartTwoTone />}
icon={<HeartTwoTone/>}
onClick={() => handleHeartBeat()}
>
{l('button.heartbeat')}
Expand All @@ -314,19 +309,21 @@ export default () => {
item.autoRegisters ? (
l('rc.ci.ar')
) : (
<span style={{ color: '#69b1ff' }}>{l('rc.ci.mr')}</span>
<span style={{color: '#69b1ff'}}>{l('rc.ci.mr')}</span>
)
}
>
<Card
headStyle={{ minHeight: '10px' }}
bodyStyle={{ width: '100%', padding: '10px 4px' }}
styles={{
header: {minHeight: '10px'},
body: {width: '100%', padding: '10px 4px'}
}}
className={'card-list-item'}
key={item.id}
hoverable
title={renderTitle(item)}
>
<Card.Meta style={{ width: '100%' }} description={renderDataContent(item)} />
<Card.Meta style={{width: '100%'}} description={renderDataContent(item)}/>
</Card>
</Badge.Ribbon>
</List.Item>
Expand All @@ -351,8 +348,8 @@ export default () => {
toolBarRender={toolBarRender}
{...PROTABLE_OPTIONS_PUBLIC}
{...(PRO_LIST_CARD_OPTIONS as any)}
grid={{ gutter: 24, column: 4 }}
pagination={{ size: 'small', defaultPageSize: 12, hideOnSinglePage: true }}
grid={{gutter: 24, xs:1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4}}
pagination={{size: 'small', defaultPageSize: 12, hideOnSinglePage: true}}
dataSource={data}
loading={loading}
itemLayout={'vertical'}
Expand Down
1 change: 1 addition & 0 deletions dinky-web/src/pages/RegCenter/DataSource/components/DataSourceList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,7 @@ const DataSourceTable: React.FC<connect & StateType> = (props) => {
headerTitle={l('rc.ds.management')}
toolBarRender={renderToolBar}
dataSource={renderDataSource}
grid={{ xs:1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4}}
/>

{/* added */}
Expand Down
Loading