Skip to content

Commit

Permalink
Merge pull request #190 from webzard-io/bowen/improve-node
Browse files Browse the repository at this point in the history 
Bowen/improve node
  • Loading branch information
@tanbowensg
tanbowensg authored Oct 25, 2024
2 parents 2d1cf40 + 9515da2 commit 4ee27d8
Show file tree
Hide file tree
Showing 5 changed files with 89 additions and 66 deletions.
14 changes: 6 additions & 8 deletions packages/refine/src/components/DropdownMenuItems/EditAnnotationDropdownMenuItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Icon, Menu, usePushModal } from '@cloudtower/eagle';
import { EditPen16BlueIcon } from '@cloudtower/icons-react';
import { MenuItemProps } from 'antd/lib/menu/MenuItem';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { ResourceModel } from '../../models';
Expand All @@ -11,7 +12,7 @@ type EditMenuItemProps<Model extends ResourceModel> = {
submit: () => Promise<unknown> | undefined;
} | null>;
resourceModel: Model;
};
} & MenuItemProps;

export function EditAnnotationDropdownMenuItem<Model extends ResourceModel>(
props: EditMenuItemProps<Model>
Expand All @@ -23,25 +24,22 @@ export function EditAnnotationDropdownMenuItem<Model extends ResourceModel>(
<Menu.Item
{...props}
className="ant-dropdown-menu-item"
onClick={() => {
onClick={(e) => {
const modalProps = {
formRef,
title: t('dovetail.edit_annotation'),
fullscreen: true,
renderContent() {
return (
<EditAnnotationForm
ref={formRef}
resourceModel={resourceModel}
/>
);
return <EditAnnotationForm ref={formRef} resourceModel={resourceModel} />;
},
};

pushModal<'EditFieldModal'>({
component: EditFieldModal,
props: modalProps,
});

props.onClick?.(e);
}}
>
<Icon src={EditPen16BlueIcon}>{t('dovetail.edit_annotation')}</Icon>
Expand Down
14 changes: 6 additions & 8 deletions packages/refine/src/components/DropdownMenuItems/EditLabelDropdownMenuItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Icon, Menu, usePushModal } from '@cloudtower/eagle';
import { EditPen16BlueIcon } from '@cloudtower/icons-react';
import { MenuItemProps } from 'antd/lib/menu/MenuItem';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { ResourceModel } from '../../models';
Expand All @@ -11,7 +12,7 @@ type EditMenuItemProps<Model extends ResourceModel> = {
submit: () => Promise<unknown> | undefined;
} | null>;
resourceModel: Model;
};
} & MenuItemProps;

export function EditLabelDropdownMenuItem<Model extends ResourceModel>(
props: EditMenuItemProps<Model>
Expand All @@ -23,25 +24,22 @@ export function EditLabelDropdownMenuItem<Model extends ResourceModel>(
<Menu.Item
{...props}
className="ant-dropdown-menu-item"
onClick={() => {
onClick={(e) => {
const modalProps = {
formRef,
title: t('dovetail.edit_label'),
fullscreen: true,
renderContent() {
return (
<EditLabelForm
ref={formRef}
resourceModel={resourceModel}
/>
);
return <EditLabelForm ref={formRef} resourceModel={resourceModel} />;
},
};

pushModal<'EditFieldModal'>({
component: EditFieldModal,
props: modalProps,
});

props.onClick?.(e);
}}
>
<Icon src={EditPen16BlueIcon}>{t('dovetail.edit_label')}</Icon>
Expand Down
18 changes: 7 additions & 11 deletions packages/refine/src/components/DropdownMenuItems/EditNodeTaintDropdownMenuItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Icon, Menu, usePushModal } from '@cloudtower/eagle';
import { EditPen16BlueIcon } from '@cloudtower/icons-react';
import { MenuItemProps } from 'antd/lib/menu/MenuItem';
import { Unstructured } from 'k8s-api-provider';
import { Node } from 'kubernetes-types/core/v1';
import React from 'react';
Expand All @@ -13,37 +14,32 @@ type EditMenuItemProps = {
submit: () => Promise<unknown> | undefined;
} | null>;
resourceModel: ResourceModel<Unstructured & Node>;
};
} & MenuItemProps;

export function EditNodeTaintDropdownMenuItem(
props: EditMenuItemProps
) {
export function EditNodeTaintDropdownMenuItem(props: EditMenuItemProps) {
const { formRef, resourceModel } = props;
const { t } = useTranslation();
const pushModal = usePushModal();
return (
<Menu.Item
{...props}
className="ant-dropdown-menu-item"
onClick={() => {
onClick={e => {
const modalProps = {
formRef,
title: t('dovetail.edit_node_taint'),
fullscreen: true,
renderContent() {
return (
<EditNodeTaintForm
ref={formRef}
nodeModel={resourceModel}
/>
);
return <EditNodeTaintForm ref={formRef} nodeModel={resourceModel} />;
},
};

pushModal<'EditFieldModal'>({
component: EditFieldModal,
props: modalProps,
});

props.onClick?.(e);
}}
>
<Icon src={EditPen16BlueIcon}>{t('dovetail.edit_node_taint')}</Icon>
Expand Down
87 changes: 53 additions & 34 deletions packages/refine/src/components/EditMetadataForm/EditNodeTaintForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ interface EditNodeTaintFormHandler {
submit: () => Promise<unknown> | undefined;
}

enum NodeTaintEffect {
export enum NodeTaintEffect {
'NoSchedule' = 'NoSchedule',
'PreferNoSchedule' = 'PreferNoSchedule',
'NoExecute' = 'NoExecute',
Expand Down Expand Up @@ -80,36 +80,6 @@ export const EditNodeTaintForm = React.forwardRef<
},
[nodeModel, mutateAsync, t]
);

const noScheduleTooltip = (
<div>
<b>NoSchedule</b>
<ul className={UlStyle}>
<li>{t('dovetail.taint_effect_NoSchedule_tooltip_1')}</li>
<li>{t('dovetail.taint_effect_NoSchedule_tooltip_2')}</li>
</ul>
</div>
);

const preferNoScheduleTooltip = (
<div>
<b>PreferNoSchedule</b>
<ul className={UlStyle}>
<li>{t('dovetail.taint_effect_PreferNoSchedule_tooltip_1')}</li>
<li>{t('dovetail.taint_effect_PreferNoSchedule_tooltip_2')}</li>
<li>{t('dovetail.taint_effect_PreferNoSchedule_tooltip_3')}</li>
</ul>
</div>
);

const noExecuteTooltip = (
<div>
<b>NoExecute</b>
<ul className={UlStyle}>
<li>{t('dovetail.taint_effect_NoExecute_tooltip_3')}</li>
</ul>
</div>
);
return (
<KeyValueTableFormForm
ref={ref}
Expand All @@ -128,7 +98,9 @@ export const EditNodeTaintForm = React.forwardRef<
value: NodeTaintEffect.NoSchedule,
children: t(`dovetail.node_taint_${NodeTaintEffect.NoSchedule}`),
suffix: (
<Tooltip title={noScheduleTooltip}>
<Tooltip
title={<TaintEffectTooltip effect={NodeTaintEffect.NoSchedule} />}
>
<Icon
src={InfoICircleFill16GrayIcon}
hoverSrc={InfoICircleFill16Gray70Icon}
Expand All @@ -142,7 +114,11 @@ export const EditNodeTaintForm = React.forwardRef<
`dovetail.node_taint_${NodeTaintEffect.PreferNoSchedule}`
),
suffix: (
<Tooltip title={preferNoScheduleTooltip}>
<Tooltip
title={
<TaintEffectTooltip effect={NodeTaintEffect.PreferNoSchedule} />
}
>
<Icon
src={InfoICircleFill16GrayIcon}
hoverSrc={InfoICircleFill16Gray70Icon}
Expand All @@ -154,7 +130,9 @@ export const EditNodeTaintForm = React.forwardRef<
value: NodeTaintEffect.NoExecute,
children: t(`dovetail.node_taint_${NodeTaintEffect.NoExecute}`),
suffix: (
<Tooltip title={noExecuteTooltip}>
<Tooltip
title={<TaintEffectTooltip effect={NodeTaintEffect.NoExecute} />}
>
<Icon
src={InfoICircleFill16GrayIcon}
hoverSrc={InfoICircleFill16Gray70Icon}
Expand All @@ -174,3 +152,44 @@ export const EditNodeTaintForm = React.forwardRef<
/>
);
});

export const TaintEffectTooltip: React.FC<{
effect: NodeTaintEffect;
}> = ({ effect }) => {
const { t } = useTranslation();

const TaintEffectTooltipTextConfig = {
[NodeTaintEffect.NoSchedule]: {
title: 'NoSchedule',
tooltips: [
t('dovetail.taint_effect_NoSchedule_tooltip_1'),
t('dovetail.taint_effect_NoSchedule_tooltip_2'),
],
},
[NodeTaintEffect.PreferNoSchedule]: {
title: 'PreferNoSchedule',
tooltips: [
t('dovetail.taint_effect_PreferNoSchedule_tooltip_1'),
t('dovetail.taint_effect_PreferNoSchedule_tooltip_2'),
t('dovetail.taint_effect_PreferNoSchedule_tooltip_3'),
],
},
[NodeTaintEffect.NoExecute]: {
title: 'NoExecute',
tooltips: [t('dovetail.taint_effect_NoExecute_tooltip_3')],
},
};

const config = TaintEffectTooltipTextConfig[effect];

return (
<div>
<b>{config.title}</b>
<ul className={UlStyle}>
{config.tooltips.map((tooltip, index) => (
<li key={index}>{tooltip}</li>
))}
</ul>
</div>
);
};
22 changes: 17 additions & 5 deletions packages/refine/src/components/NodeTaintsTable/NodeTaintsTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Tooltip } from '@cloudtower/eagle';
import { css } from '@linaria/core';
import { Taint } from 'kubernetes-types/core/v1';
import React, { useContext } from 'react';
import { useTranslation } from 'react-i18next';
Expand All @@ -8,42 +10,52 @@ import { addDefaultRenderToColumns } from 'src/hooks/useEagleTable';
import useTableData from 'src/hooks/useTableData';
import { WithId } from 'src/types';
import { addId } from '../../utils/addId';
import {
NodeTaintEffect,
TaintEffectTooltip,
} from '../EditMetadataForm/EditNodeTaintForm';

type Props = {
taints: Taint[];
};

const EffectStyle = css`
border-bottom: 1px dashed rgba(107, 128, 167, 0.6);
`;

export const NodeTaintsTable: React.FC<Props> = ({ taints = [] }) => {
const { t } = useTranslation();
const component = useContext(ComponentContext);
const Table = component.Table || InternalBaseTable;
const taintsWithId = addId(taints, 'key');

const columns = [
{
key: 'key',
display: true,
dataIndex: 'key',
title: t('dovetail.key'),
width: 120,
sortable: true,
},
{
key: 'value',
display: true,
dataIndex: 'value',
title: t('dovetail.value'),
width: 120,
sortable: true,
},
{
key: 'effect',
display: true,
dataIndex: 'effect',
title: t('dovetail.effect'),
width: 120,
sortable: true,
render: (value: string) => {
return t(`dovetail.node_taint_${value}`);
render: (value: NodeTaintEffect) => {
return (
<Tooltip title={<TaintEffectTooltip effect={value} />}>
<span className={EffectStyle}>{t(`dovetail.node_taint_${value}`)}</span>
</Tooltip>
);
},
},
];
Expand Down

0 comments on commit 4ee27d8

Please sign in to comment.