feat: click on the cluster name to view the cluster details (#525)
* feat: click on the cluster name to view the cluster details Signed-off-by: zhaoxinxin <1186037180@qq.com> * feat: click on the cluster name to view the cluster details Signed-off-by: zhaoxinxin <1186037180@qq.com> * feat: click on the cluster name to view the cluster details Signed-off-by: zhaoxinxin <1186037180@qq.com> --------- Signed-off-by: zhaoxinxin <1186037180@qq.com>
This commit is contained in:
Zhaoxinxin
GitHub
parent
1c704b8b98
commit
d49f8ad080
|
|
@ -413,7 +413,7 @@ describe('Cluster', () => {
|
|||
// Choose a cluster without scheduler and seed peer.
|
||||
cy.get('#cluster-name-10').should('be.visible').and('contain', 'cluster-10');
|
||||
|
||||
cy.get('#show-cluster-10').click();
|
||||
cy.get('#cluster-name-10').click();
|
||||
|
||||
cy.get('#name').scrollIntoView();
|
||||
|
||||
|
|
@ -466,7 +466,7 @@ describe('Cluster', () => {
|
|||
it('cluster cannot be deleted if scheduler and seed nodes exist in the cluster', () => {
|
||||
cy.get('#cluster-id-1').should('be.visible').and('contain', '1');
|
||||
|
||||
cy.get('#show-cluster-1').click();
|
||||
cy.get('#cluster-name-1').click();
|
||||
|
||||
cy.get('#name').scrollIntoView().should('be.visible').and('contain', 'cluster-1');
|
||||
|
||||
|
|
@ -532,7 +532,7 @@ describe('Cluster', () => {
|
|||
// Choose a cluster without scheduler and seed peer.
|
||||
cy.get('#cluster-name-10').should('be.visible').and('contain', 'cluster-10');
|
||||
|
||||
cy.get('#show-cluster-10').click();
|
||||
cy.get('#cluster-name-10').click();
|
||||
|
||||
cy.get('#name').scrollIntoView().should('be.visible').and('contain', 'cluster-10');
|
||||
|
||||
|
|
@ -575,7 +575,7 @@ describe('Cluster', () => {
|
|||
// The cluster name should be cluster-10.
|
||||
cy.get('#cluster-name-10').should('be.visible').and('contain', 'cluster-10');
|
||||
|
||||
cy.get('#show-cluster-10').click();
|
||||
cy.get('#cluster-name-10').click();
|
||||
|
||||
cy.get('#name').scrollIntoView().should('be.visible').and('contain', 'cluster-10');
|
||||
|
||||
|
|
|
|||
|
|
@ -276,7 +276,7 @@ describe('Clusters', () => {
|
|||
cy.get('#cluster-name-8').should('be.visible').and('contain', 'cluster-8');
|
||||
|
||||
// Go to show cluster page.
|
||||
cy.get('#show-cluster-8').click();
|
||||
cy.get('#cluster-name-8').click();
|
||||
|
||||
// Then I see that the current page is the show cluster.
|
||||
cy.url().should('include', '/clusters/8');
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<svg t="1732761620376" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="30696" width="200" height="200">
|
||||
<path
|
||||
d="M848.3 198.7c32.1 0 57.8 8.2 77 24.5 19.2 16.3 28.8 41.1 28.8 74.2v438.2c0 14.2-2.6 27.6-7.9 40.3-5.3 12.6-12.5 23.7-21.7 33.2-9.2 9.5-20 17-32.4 22.5-12.4 5.5-25.4 8.3-39.1 8.3H164.5c-13.7 0-26.6-2.6-38.7-7.9-12.1-5.3-22.6-12.2-31.6-20.9-8.9-8.7-16.1-18.8-21.3-30.4-5.2-11.7-7.9-24.1-7.9-37.2V295.8c0-28.4 8.7-51.7 26.1-69.9 17.4-18.2 41.8-27.2 73.4-27.2h683.8z m-561.4 146c-10 0-19.5 1.8-28.4 5.5-8.9 3.7-16.8 8.8-23.7 15.4-6.8 6.6-12.2 14.5-16.2 23.7s-5.9 19.1-5.9 29.6 2 20.3 5.9 29.2c3.9 8.9 9.3 16.8 16.2 23.7 6.8 6.8 14.7 12.2 23.7 16.2 8.9 3.9 18.4 5.9 28.4 5.9 11.1 0 21.2-2 30.4-5.9 9.2-4 17.1-9.3 23.7-16.2 6.6-6.8 11.8-14.7 15.8-23.7 3.9-8.9 5.9-18.7 5.9-29.2 0-21.6-7.1-39.3-21.3-53.3-14.2-13.9-32.4-20.9-54.5-20.9z m124 273.2c0-10-2-19.6-5.9-28.8-3.9-9.2-9.2-17.1-15.8-23.7-6.6-6.6-14.5-11.8-23.7-15.8-9.2-3.9-18.8-5.9-28.8-5.9H238c-20.5 0-37.9 7.2-52.1 21.7-14.2 14.5-21.3 32-21.3 52.5v74.3h246.3v-74.3z m366.3 78.2c10.5 0 18.3-2.6 23.3-7.9 5-5.3 7.5-11.6 7.5-18.9 0-7.4-2.9-13.8-8.7-19.3-5.8-5.5-13.9-8.3-24.5-8.3H539.5c-10.5 0-18.4 2.8-23.7 8.3-5.3 5.5-7.9 12-7.9 19.3 0 7.4 2.6 13.7 7.9 18.9 5.3 5.3 12.9 7.9 22.9 7.9h238.5z m0.8-101.9c10.5 0 18.2-2.6 22.9-7.9 4.7-5.3 7.1-11.6 7.1-18.9 0-7.9-2.2-14.5-6.7-19.7-4.5-5.3-12-7.9-22.5-7.9H537.2c-10.5 0-18.2 2.6-22.9 7.9-4.7 5.3-7.1 11.8-7.1 19.7 0 7.4 2.2 13.7 6.7 18.9 4.5 5.3 12 7.9 22.5 7.9H778z m0.8-100.2c7.9 0 14.7-2.6 20.5-7.9 5.8-5.3 8.7-11.6 8.7-18.9 0-7.4-2.9-13.3-8.7-17.8-5.8-4.5-12.6-6.7-20.5-6.7H618.5c-7.9 0-14.6 2.2-20.1 6.7-5.5 4.5-8.3 10.4-8.3 17.8s2.8 13.7 8.3 18.9c5.5 5.3 12.2 7.9 20.1 7.9h160.3z"
|
||||
fill="#919EAB" p-id="30697"></path>
|
||||
<svg width="173.652344px" height="125.234375px" viewBox="0 0 173.652344 125.234375" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="页面-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="编组" fill="#919EAB" fill-rule="nonzero">
|
||||
<path
|
||||
d="M152.988281,0 C159.257812,0 164.277344,1.6015625 168.027344,4.78515625 C171.777344,7.96875 173.652344,12.8125 173.652344,19.2773438 L173.652344,104.863281 C173.652344,107.636719 173.144531,110.253906 172.109375,112.734375 C171.074219,115.195312 169.667969,117.363281 167.871094,119.21875 C166.074219,121.074219 163.964844,122.539062 161.542969,123.613281 C159.121094,124.6875 156.582031,125.234375 153.90625,125.234375 L19.4335937,125.234375 C16.7578125,125.234375 14.2382812,124.726562 11.875,123.691406 C9.51171875,122.65625 7.4609375,121.308594 5.703125,119.609375 C3.96484375,117.910156 2.55859375,115.9375 1.54296875,113.671875 C0.52734375,111.386719 -3.55271368e-15,108.964844 -3.55271368e-15,106.40625 L-3.55271368e-15,18.9648438 C-3.55271368e-15,13.4179688 1.69921875,8.8671875 5.09765625,5.3125 C8.49609375,1.7578125 13.2617187,0 19.4335937,0 L152.988281,0 L152.988281,0 Z M43.3398438,28.515625 C41.3867188,28.515625 39.53125,28.8671875 37.7929688,29.5898438 C36.0546875,30.3125 34.5117188,31.3085938 33.1640625,32.5976562 C31.8359375,33.8867188 30.78125,35.4296875 30,37.2265625 C29.21875,39.0234375 28.8476563,40.9570312 28.8476563,43.0078125 C28.8476563,45.0585938 29.2382813,46.9726562 30,48.7109375 C30.7617188,50.4492187 31.8164063,51.9921875 33.1640625,53.3398437 C34.4921875,54.6679687 36.0351562,55.7226562 37.7929688,56.5039062 C39.53125,57.265625 41.3867188,57.65625 43.3398438,57.65625 C45.5078125,57.65625 47.4804687,57.265625 49.2773437,56.5039062 C51.0742187,55.7226562 52.6171875,54.6875 53.90625,53.3398437 C55.1953125,52.0117187 56.2109375,50.46875 56.9921875,48.7109375 C57.7539062,46.9726562 58.1445312,45.0585938 58.1445312,43.0078125 C58.1445312,38.7890625 56.7578125,35.3320312 53.984375,32.5976562 C51.2109375,29.8828125 47.65625,28.515625 43.3398437,28.515625 L43.3398438,28.515625 Z M67.5585938,81.875 C67.5585938,79.921875 67.1679688,78.046875 66.40625,76.25 C65.6445312,74.453125 64.609375,72.9101562 63.3203125,71.6210938 C62.03125,70.3320312 60.4882812,69.3164063 58.6914062,68.5351563 C56.8945312,67.7734375 55.0195312,67.3828125 53.0664062,67.3828125 L33.7890625,67.3828125 C29.7851562,67.3828125 26.3867188,68.7890625 23.6132813,71.6210938 C20.8398438,74.453125 19.453125,77.8710938 19.453125,81.875 L19.453125,96.3867188 L67.5585938,96.3867188 L67.5585938,81.875 L67.5585938,81.875 Z M139.101562,97.1484375 C141.152344,97.1484375 142.675781,96.640625 143.652344,95.6054688 C144.628906,94.5703125 145.117188,93.3398438 145.117188,91.9140625 C145.117188,90.46875 144.550781,89.21875 143.417969,88.1445313 C142.285156,87.0703125 140.703125,86.5234375 138.632812,86.5234375 L92.6757812,86.5234375 C90.625,86.5234375 89.0820313,87.0703125 88.046875,88.1445313 C87.0117188,89.21875 86.5039062,90.4882813 86.5039062,91.9140625 C86.5039062,93.359375 87.0117188,94.5898438 88.046875,95.6054688 C89.0820312,96.640625 90.5664062,97.1484375 92.5195312,97.1484375 L139.101562,97.1484375 L139.101562,97.1484375 Z M139.257812,77.2460938 C141.308594,77.2460938 142.8125,76.7382812 143.730469,75.703125 C144.648438,74.6679688 145.117188,73.4375 145.117188,72.0117188 C145.117188,70.46875 144.6875,69.1796875 143.808594,68.1640625 C142.929688,67.1289063 141.464844,66.6210938 139.414062,66.6210938 L92.2265625,66.6210938 C90.1757813,66.6210938 88.671875,67.1289063 87.7539063,68.1640625 C86.8359375,69.1992188 86.3671875,70.46875 86.3671875,72.0117188 C86.3671875,73.4570313 86.796875,74.6875 87.6757813,75.703125 C88.5546875,76.7382812 90.0195313,77.2460938 92.0703125,77.2460938 L139.257812,77.2460938 Z M139.414062,57.6757813 C140.957031,57.6757813 142.285156,57.1679688 143.417969,56.1328125 C144.550781,55.0976563 145.117188,53.8671875 145.117188,52.4414063 C145.117188,50.9960938 144.550781,49.84375 143.417969,48.9648438 C142.285156,48.0859375 140.957031,47.65625 139.414062,47.65625 L108.105469,47.65625 C106.5625,47.65625 105.253906,48.0859375 104.179687,48.9648438 C103.105469,49.84375 102.558594,50.9960938 102.558594,52.4414063 C102.558594,53.8867188 103.105469,55.1171875 104.179687,56.1328125 C105.253906,57.1679688 106.5625,57.6757813 108.105469,57.6757813 L139.414062,57.6757813 Z"
|
||||
id="形状"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 4.4 KiB |
|
|
@ -121,7 +121,7 @@
|
|||
|
||||
.idText {
|
||||
color: var(--palette-table-title-text-color);
|
||||
padding-left: 0.4rem;
|
||||
padding-left: 0.6rem;
|
||||
}
|
||||
|
||||
.idIcon {
|
||||
|
|
@ -138,7 +138,6 @@
|
|||
.creatTimeContainer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,17 +4,16 @@ import {
|
|||
Button,
|
||||
Chip,
|
||||
Grid,
|
||||
IconButton,
|
||||
Pagination,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Snackbar,
|
||||
Tooltip,
|
||||
Typography,
|
||||
Stack,
|
||||
Autocomplete,
|
||||
TextField,
|
||||
Divider,
|
||||
Link as RouterLink,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
getSchedulers,
|
||||
|
|
@ -30,7 +29,7 @@ import styles from './index.module.css';
|
|||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { fuzzySearch, getDatetime, getPaginatedList, useQuery } from '../../lib/utils';
|
||||
import MoreTimeIcon from '@mui/icons-material/MoreTime';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { MAX_PAGE_SIZE } from '../../lib/constants';
|
||||
import Card from '../card';
|
||||
import debounce from 'lodash/debounce';
|
||||
|
|
@ -42,7 +41,6 @@ import { ReactComponent as Active } from '../../assets/images/cluster/active.svg
|
|||
import { ReactComponent as ClusterID } from '../../assets/images/cluster/id.svg';
|
||||
import { ReactComponent as IcContent } from '../../assets/images/cluster/scheduler/ic-content.svg';
|
||||
import { ReactComponent as NoCluster } from '../../assets/images/cluster/no-cluster.svg';
|
||||
import { ReactComponent as ArrowCircleRightIcon } from '../../assets/images/cluster/arrow-circle-right.svg';
|
||||
import { ReactComponent as Cluster } from '../../assets/images/cluster/cluster.svg';
|
||||
import { ReactComponent as Scheduler } from '../../assets/images/cluster/scheduler.svg';
|
||||
import { ReactComponent as SeedPeer } from '../../assets/images/cluster/seed-peer.svg';
|
||||
|
|
@ -375,7 +373,7 @@ export default function Clusters() {
|
|||
<Box id="clustersCard" className={styles.loadingCard}>
|
||||
<Card>
|
||||
<Box className={styles.clusterNameWrapper}>
|
||||
<Box display="flex" mb="0.5rem" alignItems="center">
|
||||
<Box display="flex" mb="0.5rem" alignItems="flex-start">
|
||||
<ClusterID className={styles.idIcon} />
|
||||
<Skeleton data-testid="isloading" sx={{ width: '1rem', ml: '0.4rem' }} />
|
||||
</Box>
|
||||
|
|
@ -419,20 +417,28 @@ export default function Clusters() {
|
|||
allClusters.map((item) => (
|
||||
<Card key={item.id} id="clusters" className={styles.card}>
|
||||
<Box className={styles.clusterNameWrapper}>
|
||||
<Box display="flex" mb="0.5rem" alignItems="center">
|
||||
<Box display="flex" mb="0.5rem" alignItems="flex-start">
|
||||
<ClusterID className={styles.idIcon} />
|
||||
<Typography id={`cluster-id-${item.id}`} variant="subtitle1" className={styles.idText}>
|
||||
<Typography
|
||||
component="div"
|
||||
id={`cluster-id-${item.id}`}
|
||||
variant="body1"
|
||||
className={styles.idText}
|
||||
>
|
||||
{item.id}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography id={`cluster-name-${item.id || 0}`} variant="h6" className={styles.nameText}>
|
||||
{item.name}
|
||||
</Typography>
|
||||
<RouterLink component={Link} to={`/clusters/${item.id}`} underline="hover">
|
||||
<Typography id={`cluster-name-${item.id || 0}`} variant="h6" className={styles.nameText}>
|
||||
{item.name}
|
||||
</Typography>
|
||||
</RouterLink>
|
||||
<Tooltip title={item.bio || '-'} placement="top">
|
||||
<Typography
|
||||
id={`cluster-description-${item.id || 0}`}
|
||||
variant="caption"
|
||||
className={styles.descriptionText}
|
||||
component="div"
|
||||
>
|
||||
{item.bio || '-'}
|
||||
</Typography>
|
||||
|
|
@ -464,15 +470,6 @@ export default function Clusters() {
|
|||
variant="outlined"
|
||||
size="small"
|
||||
/>
|
||||
<IconButton
|
||||
id={`show-cluster-${item.id}`}
|
||||
className={styles.buttonContent}
|
||||
onClick={() => {
|
||||
navigate(`/clusters/${item.id}`);
|
||||
}}
|
||||
>
|
||||
<ArrowCircleRightIcon className={styles.arrowCircleRightIcon} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -331,7 +331,6 @@ export default function PersistentCacheTask() {
|
|||
}`}</Typography>
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
<RouterLink
|
||||
component={Link}
|
||||
to={`/resource/persistent-cache-task/clusters/${item?.id}`}
|
||||
|
|
|
|||
Loading…
Reference in New Issue