antd#PageHeader JavaScript Examples

AcyPageHeader = ({ onBack, className: styledClassName, ...props }) => {
    return (
        <PageHeader
            {...props}
            className={className(styledClassName)}
            onBack={() => { onBack ? onBack() : null }}
        />
    )
}

// displays a page header

export default function Header() {
  return (
    <a href="https://github.com/leeduckgo/bewater-nft-wallet" target="_blank" rel="noopener noreferrer">
      <PageHeader
        title="BeWater"
        subTitle="? NFT Wallet0x01"
        style={{ cursor: "pointer" }}
      />
    </a>
  );
}

// displays a page header

export default function Header() {
  return (
    <a href="/">
      <PageHeader
        title={
          <div>
            <img src="./rocket_2.svg" style={{ maxWidth: 48, marginRight: 8 }} />
            MoonshotCollective.space
            <span style={{ marginLeft: 16, fontSize: 14 }}>
              <a href="https://gov.gitcoin.co/t/workstream-suggestion-public-goods-prototyping/130" target="_blank">
                Announcement
              </a>
            </span>
            <span style={{ marginLeft: 16, fontSize: 14 }}>
              <a href="https://gitcoin.co/grants/3004/moonshot-collective" target="_blank">
                Gitcoin Grant
              </a>
            </span>
            <span style={{ marginLeft: 16, fontSize: 14 }}>Trello (coming soon)</span>
          </div>
        }
        subTitle=""
        style={{ cursor: "pointer" }}
      />
    </a>
  );
}

// displays a page header

export default function Header() {
  return (
    <a href="https://github.com/carletex/quadratic-diplomacy" target="_blank" rel="noopener noreferrer">
      <PageHeader title="Quadratic diplomacy" style={{ cursor: "pointer" }} />
    </a>
  );
}

PageTitle = props => {
	return (
		<PageHeader
			style={{
				padding: "8px 16px",
				background: props.bgColor,
				color: "#fff!important",
				marginBottom: 16,
				borderRadius: 4,
				borderBottom: "1px solid rgb(235, 237, 240)",
				textTransform: "capitalize"
			}}
			title={props.title}
		/>
	);
}

Header = (props) => {
  const {
    experimentId, experimentData, title, extra,
  } = props;
  const experiment = useSelector((state) => state?.experiments[experimentId]);
  const experimentName = experimentData?.experimentName || experiment?.name;

  const truncateText = (text) => (
    (text && text.length > 28) ? `${text.substr(0, 27)}…` : text
  );

  return (
    <>
      <NextSeo
        title={experimentData ? `${title} · ${truncateText(experimentName)}` : title}
      />

      <PageHeader
        className={integrationTestConstants.classes.PAGE_HEADER}
        title={title}
        style={{ width: '100%', paddingTop: '10px', paddingBottom: '10px' }}
        extra={(
          <Space size='large'>
            <Space>
              <HelpButton />
              <FeedbackButton />
              <ReferralButton />
              {extra}
            </Space>
            <UserButton />
          </Space>
        )}
      />
    </>
  );
}

render() {
		return (
			<>
				<PageHeader
					title="About"
				/>
				<Content style={{ padding: '16px 24px' }}>
					<Typography>
							<Paragraph>
									hashcat.launcher is a cross-platform app that run and control hashcat
							</Paragraph>
							<Paragraph>
									it is designed to make it easier to use hashcat offering a friendly graphical user interface
							</Paragraph>
							<Title level={5}>Contribute</Title>
									<Link target="_blank" href="https://github.com/s77rt/hashcat.launcher/issues/new/">Report a bug / Request a feature</Link>
							<Title level={5}>License</Title>
							<Paragraph>
									hashcat.launcher is licensed under the MIT License
							</Paragraph>
							<Paragraph>
									Copyright &copy; 2021 Abdelhafidh Belalia (s77rt)
							</Paragraph>
					</Typography>
				</Content>
			</>
		)
	}

storiesOf('antd/page-header', module).add('basic', () => 
  <PageHeader
    className="site-page-header"
    onBack={() => null}
    title="Title"
    subTitle="This is a subtitle"
  />,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Standard header, suitable for use in scenarios that require a brief description.</p></>) } });

storiesOf('antd/page-header', module).add('breadcrumb', () => 
  <PageHeader
    className="site-page-header"
    title="Title"
    breadcrumb={{ routes }}
    subTitle="This is a subtitle"
  />,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>With breadcrumbs, it is suitable for deeper pages, allowing users to navigate quickly.</p></>) } });

storiesOf('antd/page-header', module).add('content', () => 
  <PageHeader
    title="Title"
    className="site-page-header"
    subTitle="This is a subtitle"
    tags={<Tag color="blue">Running</Tag>}
    extra={[
      <Button key="3">Operation</Button>,
      <Button key="2">Operation</Button>,
      <Button key="1" type="primary">
        Primary
      </Button>,
      <DropdownMenu key="more" />,
    ]}
    avatar={{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }}
    breadcrumb={{ routes }}
  >
    <Content
      extraContent={
        <img
          src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg"
          alt="content"
          width="100%"
        />
      }
    >
      {content}
    </Content>
  </PageHeader>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Show all props provided by PageHeader.</p></>) } });

storiesOf('antd/page-header', module).add('ghost', () => 
  <div className="site-page-header-ghost-wrapper">
    <PageHeader
      ghost={false}
      onBack={() => window.history.back()}
      title="Title"
      subTitle="This is a subtitle"
      extra={[
        <Button key="3">Operation</Button>,
        <Button key="2">Operation</Button>,
        <Button key="1" type="primary">
          Primary
        </Button>,
      ]}
    >
      <Descriptions size="small" column={3}>
        <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
        <Descriptions.Item label="Association">
          <a>421421</a>
        </Descriptions.Item>
        <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
        <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
        <Descriptions.Item label="Remarks">
          Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
        </Descriptions.Item>
      </Descriptions>
    </PageHeader>
  </div>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>The default PageHeader is a transparent background. In some cases, PageHeader needs its own background color.</p></>) } });

storiesOf('antd/page-header', module).add('responsive', () => 
  <>
    <PageHeader
      className="site-page-header-responsive"
      onBack={() => window.history.back()}
      title="Title"
      subTitle="This is a subtitle"
      extra={[
        <Button key="3">Operation</Button>,
        <Button key="2">Operation</Button>,
        <Button key="1" type="primary">
          Primary
        </Button>,
      ]}
      footer={
        <Tabs defaultActiveKey="1">
          <TabPane tab="Details" key="1" />
          <TabPane tab="Rule" key="2" />
        </Tabs>
      }
    >
      <Content extra={extraContent}>{renderContent()}</Content>
    </PageHeader>
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Under different screen sizes, there should be different performance</p></>) } });

// displays a page header

export default function Header() {
  return (
    <a href="https://nftschool.dev" target="_blank" rel="noopener noreferrer">
      <PageHeader
        title="? NFT School e2e example"
        subTitle="join us at nftschool.dev"
        style={{ cursor: "pointer" }}
      />
    </a>
  );
}

PageHeaderWrapper = ({
  children,
  contentWidth,
  fluid,
  wrapperClassName,
  home,
  top,
  title,
  content,
  logo,
  extraContent,
  hiddenBreadcrumb,
  ...restProps
}) => {
  return (
    <div style={{ margin: '-24px -24px 0' }} className={classNames(wrapperClassName, styles.main)}>
      {top}
      <MenuContext.Consumer>
        {value => {
          return (
            <div className={styles.wrapper}>
              <div
                className={classNames({
                  [styles.wide]: !fluid && contentWidth === 'Fixed',
                })}
              >
                <PageHeader
                  title={
                    <>
                      {logo && <span className={styles.logo}>{logo}</span>}
                      <Title
                        level={4}
                        style={{
                          marginBottom: 0,
                          display: 'inline-block',
                        }}
                      >
                        {title}
                      </Title>
                    </>
                  }
                  key="pageheader"
                  {...restProps}
                  breadcrumb={
                    !hiddenBreadcrumb &&
                    conversionBreadcrumbList({
                      ...value,
                      ...restProps,
                      ...(home !== null && {
                        home: <FormattedMessage id="menu.home" defaultMessage="Home" />,
                      }),
                    })
                  }
                  className={styles.pageHeader}
                  linkElement={Link}
                  footer={renderFooter(restProps)}
                >
                  <div className={styles.detail}>
                    <div className={styles.main}>
                      <div className={styles.row}>
                        {content && <div className={styles.content}>{content}</div>}
                        {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
                      </div>
                    </div>
                  </div>
                </PageHeader>
              </div>
            </div>
          );
        }}
      </MenuContext.Consumer>
      {children ? (
        <div className={styles['children-content']}>
          <GridContent>{children}</GridContent>
        </div>
      ) : null}
    </div>
  );
}

render() {

        const columns = [{
            title: 'ID',
            dataIndex: 'id',
            key: 'id'
        }, {
            title: 'Host',
            dataIndex: 'host',
            key: 'host',
            defaultSortOrder: 'ascend',
        }, {
            title: 'Port',
            dataIndex: 'port',
            key: 'port',
        }, {
            title: 'Partitions as Leader',
            dataIndex: 'leaderPartitions',
            key: 'leaderPartitions',
            render: (leaderPartitions, record, index) => {
                return <Tooltip title={leaderPartitions.join('、')}>
                    <Button type="link" size='small'>{leaderPartitions.length}</Button>
                </Tooltip>;
            }
        }, {
            title: 'Partitions as Follower',
            dataIndex: 'followerPartitions',
            key: 'followerPartitions',
            render: (followerPartitions, record, index) => {
                return <Tooltip title={followerPartitions.join('、')}>
                    <Button type="link" size='small'>{followerPartitions.length}</Button>
                </Tooltip>;
            }
        }];

        return (
            <div>
                <div className='kd-page-header'>
                    <PageHeader
                        className="site-page-header"
                        onBack={() => {
                            this.props.history.goBack();
                        }}
                        title={this.state.clusterName}
                        subTitle={<FormattedMessage id="broker-management" />}
                    />
                </div>

                <div className='kd-content'>
                    <div style={{marginBottom: 20}}>
                        <Row justify="space-around" align="middle" gutter={24}>
                            <Col span={8} key={1}>
                                <Title level={3}>Broker</Title>
                            </Col>
                            <Col span={16} key={2} style={{textAlign: 'right'}}>

                            </Col>
                        </Row>
                    </div>
                    <Table
                        rowKey='id'
                        dataSource={this.state.items}
                        columns={columns}
                        position={'both'}
                        size={'small'}
                        loading={this.state.loading}
                        pagination={{
                            showSizeChanger: true,
                            total: this.state.items.length,
                            showTotal: total => <FormattedMessage id="total-items" values={{total}}/>
                        }}
                    />
                </div>

            </div>
        );
    }

Header = () => {
  return (
    <div className='site-page-header'>
      <PageHeader ghost={false} title='react-perspective-cropper'>
        <Descriptions size='small' column={2}>
          <Descriptions.Item label='Package'>
            <a href='https://www.npmjs.com/package/react-perspective-cropper'>
              <img
                alt='npm'
                src='https://img.shields.io/npm/v/react-perspective-cropper.svg'
              />
            </a>
            <a href='https://standardjs.com'>
              <img
                alt='standardjs'
                src='https://img.shields.io/badge/code_style-standard-brightgreen.svg'
              />
            </a>
          </Descriptions.Item>
          <Descriptions.Item label='Description'>
            <Paragraph>
              React component performing border detection, perspective
              correction and simple image filters over a provided image ? ?
            </Paragraph>
          </Descriptions.Item>
          <Descriptions.Item label='Created by'>
            Giacomo Cerquone from
            <span
              aria-label='italy flag'
              role='img'
              style={{ margin: '0 10px' }}
            >
              ??
            </span>
            with{' '}
            <span aria-label='heart' role='img' style={{ margin: '0 10px' }}>
              ❤️
            </span>
          </Descriptions.Item>
          <Descriptions.Item label='Info'>
            <Paragraph>
              Make sure to only use HiRes images!
              <br />
              <b>
                <a
                  rel='noreferrer'
                  target='_blank'
                  href='https://github.com/giacomocerquone/react-perspective-cropper/blob/master/gifs/example-img.jpg?raw=true'
                >
                  You could use this image for example.
                </a>
              </b>
            </Paragraph>
          </Descriptions.Item>
        </Descriptions>
      </PageHeader>
    </div>
  )
}

export default function DataTable({ config, DropDownRowMenu, AddNewItem }) {
  let { entity, dataTableColumns, dataTableTitle } = config;

  dataTableColumns = [
    ...dataTableColumns,
    {
      title: '',
      render: (row) => (
        <Dropdown overlay={DropDownRowMenu({ row })} trigger={['click']}>
          <EllipsisOutlined style={{ cursor: 'pointer', fontSize: '24px' }} />
        </Dropdown>
      ),
    },
  ];

  const { result: listResult, isLoading: listIsLoading } = useSelector(selectListItems);

  const { pagination, items } = listResult;

  const dispatch = useDispatch();

  const handelDataTableLoad = useCallback((pagination) => {
    const options = { page: pagination.current || 1 };
    dispatch(crud.list({ entity, options }));
  }, []);

  useEffect(() => {
    dispatch(crud.list({ entity }));
  }, []);

  return (
    <>
      <PageHeader
        onBack={() => window.history.back()}
        title={dataTableTitle}
        ghost={false}
        extra={[
          <Button onClick={handelDataTableLoad} key={`${uniqueId()}`}>
            Refresh
          </Button>,
          <AddNewItem key={`${uniqueId()}`} config={config} />,
        ]}
        style={{
          padding: '20px 0px',
        }}
      ></PageHeader>
      <Table
        columns={dataTableColumns}
        rowKey={(item) => item._id}
        dataSource={items}
        pagination={pagination}
        loading={listIsLoading}
        onChange={handelDataTableLoad}
      />
    </>
  );
}

export default function DataTable({ config, DataTableDropMenu }) {
  let { entity, dataTableColumns } = config;
  const { DATATABLE_TITLE } = config;
  dataTableColumns = [
    ...dataTableColumns,
    {
      title: '',
      render: (row) => (
        <Dropdown overlay={DataTableDropMenu({ row, entity })} trigger={['click']}>
          <EllipsisOutlined style={{ cursor: 'pointer', fontSize: '24px' }} />
        </Dropdown>
      ),
    },
  ];

  const { result: listResult, isLoading: listIsLoading } = useSelector(selectListItems);

  const { pagination, items } = listResult;

  const dispatch = useDispatch();

  const handelDataTableLoad = useCallback((pagination) => {
    const options = { page: pagination.current || 1 };
    dispatch(erp.list({ entity, options }));
  }, []);

  // const handelCurrency = () => {
  //   dispatch(settings.currency({ value: '€' }));
  //   dispatch(settings.currencyPosition({ position: 'before' }));
  // };
  useEffect(() => {
    dispatch(erp.list({ entity }));
  }, []);

  return (
    <>
      <PageHeader
        title={DATATABLE_TITLE}
        ghost={true}
        extra={[
          <Button onClick={handelDataTableLoad} key={`${uniqueId()}`} icon={<RedoOutlined />}>
            Refresh
          </Button>,
          // <Button onClick={handelCurrency} key={`${uniqueId()}`} icon={<RedoOutlined />}>
          //   Change Currency
          // </Button>,
          <AddNewItem config={config} key={`${uniqueId()}`} />,
        ]}
        style={{
          padding: '20px 0px',
        }}
      ></PageHeader>
      <Table
        columns={dataTableColumns}
        rowKey={(item) => item._id}
        dataSource={items}
        pagination={pagination}
        loading={listIsLoading}
        onChange={handelDataTableLoad}
      />
    </>
  );
}

export default function DataTable({ config, DropDownRowMenu, AddNewItem }) {
  let { entity, dataTableColumns, dataTableTitle } = config;
  dataTableColumns = [
    ...dataTableColumns,
    {
      title: "",
      render: (row) => (
        <Dropdown overlay={DropDownRowMenu({ row })} trigger={["click"]}>
          <EllipsisOutlined style={{ cursor: "pointer", fontSize: "24px" }} />
        </Dropdown>
      ),
    },
  ];

  const { result: listResult, isLoading: listIsLoading } = useSelector(
    selectListItems
  );

  const { pagination, items } = listResult;

  const dispatch = useDispatch();

  const handelDataTableLoad = useCallback((pagination) => {
    dispatch(crud.list(entity, pagination.current));
  }, []);

  useEffect(() => {
    dispatch(crud.list(entity));
  }, []);

  return (
    <>
      <PageHeader
        onBack={() => window.history.back()}
        title={dataTableTitle}
        ghost={false}
        extra={[
          <Button onClick={handelDataTableLoad} key={`${uniqueId()}`}>
            Refresh
          </Button>,
          <AddNewItem key={`${uniqueId()}`} config={config} />,
        ]}
        style={{
          padding: "20px 0px",
        }}
      ></PageHeader>
      <Table
        columns={dataTableColumns}
        rowKey={(item) => item._id}
        dataSource={items}
        pagination={pagination}
        loading={listIsLoading}
        onChange={handelDataTableLoad}
      />
    </>
  );
}

StyledPageHeader = styled(PageHeader)`
  padding-left: 0;
`

render() {
		return (
			<>
				<PageHeader
					title="Help"
				/>
				<Content style={{ padding: '16px 24px' }}>
					<Typography>
						<Title level={5}>Frequently Asked Questions</Title>
						<Collapse bordered={false}>
							<Panel header="What hashcat versions are supported" key="1">
								hashcat.launcher supports hashcat v6.2.1 and higher.
							</Panel>
							<Panel header="How to add hashes, dictionaries, etc..." key="2">
								Files are expected to be in the following folders:
								<ul>
									<li>Hashes: <Text code>/hashcat/hashes</Text></li>
									<li>Dictionaries: <Text code>/hashcat/dictionaries</Text></li>
									<li>Rules: <Text code>/hashcat/rules</Text></li>
									<li>Masks: <Text code>/hashcat/masks</Text></li>
								</ul>
							</Panel>
							<Panel header="Algorithms list is empty" key="3">
								Algorithms get loaded automatically and depends on hashcat.
								Make sure hashcat exists then go to Settings and click on Rescan.
								<br />
								hashcat is expected to be in the same directory as hashcat.launcher
								inside a subfolder <Text code>/hashcat</Text>.
							</Panel>
							<Panel header="I added a file but it's not in the list" key="4">
								Try perform a manual scan.
								Go to Settings then click on Rescan.
							</Panel>
							<Panel header="What is the difference between an idle task and a queued task" key="5">
								An idle task have a priority that is less than zero
								<br />
								while, a queued task have a priority that is equal or greater than zero.
								<br />
								<br />
								An idle task can only be started manually
								<br />
								while, a queued task can be started manually or automatically.
							</Panel>
						</Collapse>
					</Typography>
				</Content>
			</>
		)
	}

render() {
		return (
			<>
				<PageHeader
					title="Settings"
				/>
				<Content style={{ padding: '16px 24px' }}>
					<Row gutter={[16, 14]}>
						<Col span={12}>
							<Statistic title="Hashes" value={this.state._hashes.length} />
						</Col>
						<Col span={12}>
							<Statistic title="Algorithms" value={Object.keys(this.state._algorithms).length} />
						</Col>
						<Col span={12}>
							<Statistic title="Dictionaries" value={this.state._dictionaries.length} />
						</Col>
						<Col span={12}>
							<Statistic title="Rules" value={this.state._rules.length} />
						</Col>
						<Col span={12}>
							<Statistic title="Masks" value={this.state._masks.length} />
						</Col>
						<Col span={24}>
							<Button
								icon={<SyncOutlined />}
								type="primary"
								onClick={this.onClickRescan}
								loading={this.state.isLoadingRescan}
							>
								Rescan
							</Button>
						</Col>
					</Row>
					<Row style={{ marginTop: "2rem" }} gutter={[16, 14]}>
						<Col span={24}>
							<Statistic
								title="Task counter"
								value={this.state.taskCounter}
							/>
							<Space>
							<Button
								style={{ marginTop: 16 }}
								type="default"
								onClick={this.onClickRefreshTaskCounter}
								loading={this.state.isLoadingRefreshTaskCounter}
							>
								Refresh
							</Button>
							<Popconfirm
								placement="topRight"
								title="Are you sure you want to reset the task counter?"
								onConfirm={this.onClickResetTaskCounter}
								okText="Yes"
								cancelText="No"
							>
								<Button
									style={{ marginTop: 16 }}
									type="danger"
									loading={this.state.isLoadingResetTaskCounter}
								>
									Reset counter
								</Button>
							</Popconfirm>
							</Space>
						</Col>
					</Row>
				</Content>
			</>
		)
	}

storiesOf('antd/page-header', module).add('actions', () => 
  <>
    <PageHeader
      className="site-page-header"
      onBack={() => window.history.back()}
      title="Title"
      subTitle="This is a subtitle"
      extra={[
        <Button key="3">Operation</Button>,
        <Button key="2">Operation</Button>,
        <Button key="1" type="primary">
          Primary
        </Button>,
      ]}
    >
      <Descriptions size="small" column={3}>
        <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
        <Descriptions.Item label="Association">
          <a>421421</a>
        </Descriptions.Item>
        <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
        <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
        <Descriptions.Item label="Remarks">
          Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
        </Descriptions.Item>
      </Descriptions>
    </PageHeader>
    <br />
    <PageHeader
      onBack={() => window.history.back()}
      title="Title"
      tags={<Tag color="blue">Running</Tag>}
      subTitle="This is a subtitle"
      extra={[
        <Button key="3">Operation</Button>,
        <Button key="2">Operation</Button>,
        <Button key="1" type="primary">
          Primary
        </Button>,
      ]}
    >
      <Row>
        <Statistic title="Status" value="Pending" />
        <Statistic
          title="Price"
          prefix="$"
          value={568.08}
          style={{
            margin: '0 32px',
          }}
        />
        <Statistic title="Balance" prefix="$" value={3345.08} />
      </Row>
    </PageHeader>
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Use the operating area and customize the sub-nodes, suitable for use in the need to display some complex information to help users quickly understand the information and operations of this page.</p></>) } });

Preview = ({ history }) => {

  const canvasRegister = () => {
    // activity
    registerNode(
      'activityFinal',
      activityFinal,
      null,
      activityFinalIconRect,
      activityFinalTextRect
    )
  };

  useEffect(() => {
    canvas = new Topology('topology-canvas-preview', canvasOptions);
    history.location.state.data.locked = 1;
    canvas.open(history.location.state.data);
    canvasRegister();
  }, [history.location.state.data]);
  

  useEffect(() => {
    let node = canvas.data.pens.find((item) => item.data && item.data.car === 1);
    let line = canvas.data.pens.find((item) => item.type === 1);
    const timer = setInterval(() => {
      
      if(distance < 360) {
        distance += 0.5;
      }

      if(distance > 180) {
        line.strokeStyle = 'red';
        line.lineWidth = 2;
      } else {
        line.strokeStyle = 'green';
        line.lineWidth = 1;
      }

      if(distance > 350) {
        node.rotate = 180;
        clearInterval(timer);
      }

      node.rect.x = 625 + x;
      node.rect.y = 541 - distance +y;
      canvas.updateProps(true, [node]);
      canvas.render();
    }, 30);

    return () => clearInterval(timer);
  }, [history]);

  /**
   * 自动适应窗口大小
   */

  const onHandleFit = () => {
    const rect = canvas.getRect();
    rect.calcCenter();
    x = document.body.clientWidth / 2 - rect.center.x;
    y = (document.body.clientHeight - 66) / 2 - rect.center.y;
    canvas.translate(x, y);
  };

  /**
   * 实际大小
   */

  const onHandlePre = () => {
    canvas.translate(-x, -y);
    x = 0;
    y = 0;
  };

  return (
    <>
      <PageHeader
        style={{
          border: '1px solid rgb(235, 237, 240)'
        }}
        extra={[
          <Button type="primary" key="2" onClick={() => onHandleFit()}>
            自动适应窗口大小
          </Button>,
          <Button key="1" onClick={() => onHandlePre()}>
            实际大小
          </Button>
        ]}
        onBack={() =>
          history.push({
            pathname: '/',
            state: { data: history.location.state.data, from: '/preview' }
          })
        }
        title="返回画板"
        subTitle="预览"
      />
      <div id="topology-canvas-preview" style={{ height: 'calc(100vh - 66px)', width: '100vw' }} />
    </>
  );
}

render() {

        const columns = [{
                title: <FormattedMessage id="index"/>,
                dataIndex: 'id',
                key: 'id',
                render: (id, record, index) => {
                    return index + 1;
                }
            }, {
                title: <FormattedMessage id="name"/>,
                dataIndex: 'groupId',
                key: 'groupId',
                defaultSortOrder: 'ascend',
                sorter: (a, b) => a.groupId.localeCompare(b.groupId),
                width: window.innerWidth * 0.3,
                render: (groupId, record, index) => {
                    return <Link to={`/consumer-group-info?clusterId=${this.state.clusterId}&groupId=${groupId}`}>
                        {groupId}
                    </Link>
                }
            }, {
                title: <FormattedMessage id="topic-count"/>,
                dataIndex: 'topicCount',
                key: 'topicCount',
                sorter: (a, b) => a['topics'].length - b['topics'].length,
                render: (topicCount, record, index) => {
                    const content = <List
                        size="small"
                        dataSource={record['topics']}
                        renderItem={item => <List.Item><Link
                            to={`/topic-info?clusterId=${this.state.clusterId}&topic=${item}`}>{item}</Link></List.Item>}
                    />

                    return <Popover content={content} title={<FormattedMessage id="topic-list"/>}>
                        <Button type="link" size='small'>{record['topics'].length}</Button>
                    </Popover>
                }

            },
                {
                    title: <FormattedMessage id="operate"/>,
                    key: 'action',
                    render: (text, record, index) => {
                        return (
                            <div>
                                <Popconfirm
                                    title={<FormattedMessage id="delete-confirm"/>}
                                    onConfirm={() => this.delete(record['groupId'], index)}
                                >
                                    <Button type="text" size='small' danger
                                            loading={this.state.items[index]['deleting']}><FormattedMessage
                                        id="delete"/></Button>
                                </Popconfirm>


                            </div>
                        )
                    },
                }
            ]
        ;

        return (
            <div>
                <div className='kd-page-header'>
                    <PageHeader
                        className="site-page-header"
                        onBack={() => {
                            this.props.history.goBack();
                        }}
                        subTitle={<FormattedMessage id="consumer-group-management"/>}
                        title={this.state.clusterName}
                    />
                </div>

                <div className='kd-content'>
                    <div style={{marginBottom: 20}}>
                        <Row justify="space-around" align="middle" gutter={24}>
                            <Col span={8} key={1}>
                                <Title level={3}>Consumer Group</Title>
                            </Col>
                            <Col span={16} key={2} style={{textAlign: 'right'}}>
                                <Space>
                                    <Search
                                        ref={this.inputRefOfName}
                                        placeholder="Group ID"
                                        allowClear
                                        onSearch={this.handleSearchByName}
                                    />
                                    <Tooltip title={<FormattedMessage id="reset"/>}>

                                        <Button icon={<UndoOutlined/>} onClick={() => {
                                            this.inputRefOfName.current.setValue('');
                                            this.loadTableData({
                                                pageIndex: 1,
                                                pageSize: 10,
                                                clusterId: this.state.clusterId,
                                                name: ''
                                            })
                                        }}>

                                        </Button>
                                    </Tooltip>

                                    <Divider type="vertical"/>

                                    <Tooltip title={<FormattedMessage id="refresh"/>}>
                                        <Button icon={<SyncOutlined/>} onClick={() => {
                                            this.loadTableData(this.state.queryParams)
                                        }}>

                                        </Button>
                                    </Tooltip>
                                </Space>
                            </Col>
                        </Row>
                    </div>

                    <Table
                        rowKey='groupId'
                        dataSource={this.state.items}
                        columns={columns}
                        position={'both'}
                        size={'middle'}
                        loading={this.state.loading}
                        pagination={{
                            showSizeChanger: true,
                            total: this.state.items.length,
                            showTotal: total => <FormattedMessage id="total-items" values={{total}}/>
                        }}
                    />

                </div>
            </div>

        );
    }

render() {

        const columns = [{
                title: 'TOPIC',
                dataIndex: 'topic',
                key: 'topic',
                defaultSortOrder: 'ascend',
                sorter: (a, b) => a.groupId.localeCompare(b.groupId),
                render: (topic, record, index) => {
                    return <Link to={`/topic-info?clusterId=${this.state.clusterId}&topic=${topic}`}>
                        {topic}
                    </Link>
                }
            }, {
                title: 'PARTITION',
                dataIndex: 'partition',
                key: 'partition',
                sorter: (a, b) => a['partition'] - b['partition'],
            }, {
                title: 'END-OFFSET',
                dataIndex: 'logEndOffset',
                key: 'logEndOffset',
                sorter: (a, b) => a['logEndOffset'] - b['logEndOffset'],
            }, {
                title: 'CURRENT-OFFSET',
                dataIndex: 'currentOffset',
                key: 'currentOffset',
                sorter: (a, b) => a['currentOffset'] - b['currentOffset'],
            }, {
                title: 'Lag',
                dataIndex: 'lag',
                key: 'lag',
                sorter: (a, b) => a['lag'] - b['lag'],
            }, {
                title: 'CONSUMER-ID',
                dataIndex: 'consumerId',
                key: 'consumerId',
                render: (consumerId) => {
                    let short = consumerId;
                    if (short && short.length > 10) {
                        short = short.substring(0, 10) + " ...";
                    }
                    return (
                        <Tooltip placement="topLeft" title={consumerId}>
                            {short}
                        </Tooltip>
                    );
                }
            }, {
                title: 'HOST',
                dataIndex: 'host',
                key: 'host',
            }, {
                title: 'CLIENT-ID',
                dataIndex: 'clientId',
                key: 'clientId',
            }
            ]
        ;

        return (
            <div>
                <div className='kd-page-header'>
                    <PageHeader
                        className="site-page-header"
                        onBack={() => {
                            this.props.history.goBack();
                        }}
                        title={this.state.groupId}
                        subTitle={<FormattedMessage id="consumer-group-detail" />}
                    >
                        <Row>
                            <Space size='large'>

                            </Space>
                        </Row>
                    </PageHeader>
                </div>

                <div className='kd-content'>
                    <div style={{marginBottom: 20}}>
                        <Row justify="space-around" align="middle" gutter={24}>
                            <Col span={8} key={1}>
                                <Title level={3}><FormattedMessage id="subscribed-topic" /></Title>
                            </Col>
                            <Col span={16} key={2} style={{textAlign: 'right'}}>
                                <Space>

                                </Space>
                            </Col>
                        </Row>
                    </div>

                    <Table
                        rowKey='id'
                        dataSource={this.state.items}
                        columns={columns}
                        position={'both'}
                        size={'middle'}
                        loading={this.state.loading}
                        pagination={{
                            showSizeChanger: true,
                            total: this.state.items.length,
                            showTotal: total => <FormattedMessage id="total-items" values={{total}}/>
                        }}
                    />
                </div>
            </div>
        );
    }

render() {

        const columns = [{
                title: <FormattedMessage id="index" />,
                dataIndex: 'index',
                key: 'index',
                render: (id, record, index) => {
                    return index + 1;
                }
            }, {
                title: <FormattedMessage id="name" />,
                dataIndex: 'name',
                key: 'name',
                defaultSortOrder: 'ascend',
                sorter: (a, b) => a.name.localeCompare(b.name),
                width: window.innerWidth * 0.3,
                render: (name, record, index) => {
                    return <Link to={`/topic-info?clusterId=${record['clusterId']}&topic=${name}`}>
                        {name}
                    </Link>
                }
            }, {
                title: <FormattedMessage id="partitions" />,
                dataIndex: 'partitionsCount',
                key: 'partitionsCount',
                sorter: (a, b) => a['partitionsCount'] - b['partitionsCount'],
            }, {
                title: <FormattedMessage id="replicas" />,
                dataIndex: 'replicaCount',
                key: 'replicaCount',
                sorter: (a, b) => a['replicaCount'] - b['replicaCount'],
            }, {
                title: <FormattedMessage id="average-log-size" />,
                dataIndex: 'x',
                key: 'x',
                sorter: (a, b) => a['totalLogSize'] / a['replicaCount'] - b['totalLogSize'] / b['replicaCount'],
                render: (x, record) => {
                    if (record['totalLogSize'] < 0) {
                        return '不支持';
                    }
                    return renderSize(record['totalLogSize'] / record['replicaCount'])
                }
            }, {
                title: <FormattedMessage id="log-size" />,
                dataIndex: 'totalLogSize',
                key: 'totalLogSize',
                sorter: (a, b) => a['totalLogSize'] - b['totalLogSize'],
                render: (totalLogSize) => {
                    if (totalLogSize < 0) {
                        return '不支持';
                    } else {
                        return renderSize(totalLogSize);
                    }
                }
            },
                {
                    title: <FormattedMessage id="operate" />,
                    key: 'action',
                    render: (text, record, index) => {
                        return (
                            <div>

                                <Link to={`/topic-data?clusterId=${this.state.clusterId}&topic=${record['name']}`}>
                                    <Button key="1" type="link" size='small'>
                                        <FormattedMessage id="consume-message" />
                                    </Button>
                                </Link>

                                <Button type="link" size='small' onClick={() => {
                                    this.setState({
                                        createPartitionVisible: true,
                                        selectedRow: record
                                    })
                                }}><FormattedMessage id="topic-alter" /></Button>

                                <Popconfirm
                                    title={<FormattedMessage id="delete-confirm" />}
                                    onConfirm={() => this.delete(record['name'], index)}
                                >
                                    <Button type="text" size='small' danger
                                            loading={this.state.items[index]['deleting']}><FormattedMessage id="delete" /></Button>
                                </Popconfirm>

                            </div>
                        )
                    },
                }
            ]
        ;

        return (
            <div>
                <div className='kd-page-header'>
                    <PageHeader
                        className="site-page-header"
                        onBack={() => {
                            this.props.history.goBack();
                        }}
                        subTitle={<FormattedMessage id="topic-management" />}
                        title={this.state.clusterName}
                    />
                </div>

                <div className='kd-content'>
                    <div style={{marginBottom: 20}}>
                        <Row justify="space-around" align="middle" gutter={24}>
                            <Col span={4} key={1}>
                                <Title level={3}>Topic</Title>
                            </Col>
                            <Col span={20} key={2} style={{textAlign: 'right'}}>
                                <Space>
                                    <Search
                                        ref={this.inputRefOfName}
                                        placeholder="topic"
                                        allowClear
                                        onSearch={this.handleSearchByName}
                                    />
                                    <Tooltip title={<FormattedMessage id="reset" />}>

                                        <Button icon={<UndoOutlined/>} onClick={() => {
                                            this.inputRefOfName.current.setValue('');
                                            this.loadTableData({
                                                pageIndex: 1,
                                                pageSize: 10,
                                                clusterId: this.state.clusterId,
                                                name: ''
                                            })
                                        }}>

                                        </Button>
                                    </Tooltip>

                                    <Divider type="vertical"/>

                                    <Tooltip title={<FormattedMessage id="create-topic" />}>
                                        <Button type="dashed" icon={<PlusOutlined/>}
                                                onClick={() => this.showModal(<FormattedMessage id="create-topic" />)}>

                                        </Button>
                                    </Tooltip>

                                    <Tooltip title={<FormattedMessage id="refresh" />}>
                                        <Button icon={<SyncOutlined/>} onClick={() => {
                                            this.loadTableData(this.state.queryParams)
                                        }}>

                                        </Button>
                                    </Tooltip>

                                </Space>
                            </Col>
                        </Row>
                    </div>

                    <Table
                        rowKey='name'
                        dataSource={this.state.items}
                        columns={columns}
                        position={'both'}
                        size={'middle'}
                        loading={this.state.loading}
                        pagination={{
                            showSizeChanger: true,
                            total: this.state.items.length,
                            showTotal: total => <FormattedMessage id="total-items" values={{total}}/>
                        }}
                    />

                    {
                        this.state.modalVisible ?
                            <TopicModal
                                title={this.state.modalTitle}
                                handleOk={this.handleOk}
                                handleCancel={this.handleCancelModal}
                                confirmLoading={this.state.modalConfirmLoading}
                                model={null}
                                brokerCount={this.state.brokerCount}
                            /> : undefined
                    }

                    <Modal title={<FormattedMessage id="topic-alter" />}
                           visible={this.state.createPartitionVisible}
                           confirmLoading={this.state.createPartitionConfirmLoading}
                           onOk={() => {
                               this.form.current
                                   .validateFields()
                                   .then(async values => {
                                       this.setState({
                                           createPartitionConfirmLoading: true
                                       })
                                       let topic = this.state.selectedRow['name'];
                                       let clusterId = this.state.clusterId;

                                       await request.post(`/topics/${topic}/partitions?clusterId=${clusterId}&totalCount=${values['totalCount']}`);
                                       this.form.current.resetFields();
                                       this.setState({
                                           createPartitionVisible: false
                                       })
                                       this.loadTableData();
                                   })
                                   .catch(info => {

                                   }).finally(() => this.setState({createPartitionConfirmLoading: false}));
                           }}
                           onCancel={() => {
                               this.setState({
                                   createPartitionVisible: false
                               })
                           }}>
                        <Form ref={this.form} {...formItemLayout}>
                            <Form.Item label={<FormattedMessage id="numPartitions" />} name='totalCount' rules={[{required: true}]}>
                                <InputNumber min={this.state.selectedRow['partitionsCount']}
                                             placeholder={"Can't be less than the current: " + this.state.selectedRow["partitionsCount"]}
                                             style={{width: '100%'}}/>
                            </Form.Item>
                        </Form>
                    </Modal>

                </div>
            </div>

        );
    }

render() {

        return (
            <div>
                <div className='kd-page-header'>
                    <PageHeader
                        className="site-page-header"
                        onBack={() => {
                            this.props.history.goBack();
                        }}
                        subTitle={<FormattedMessage id="consume-message"/>}
                        title={this.state.topic}
                    >
                        <Row>
                            <Space size='large'>
                                {
                                    this.state.topicInfo ?
                                        <>
                                            <Statistic title="Beginning Offset"
                                                       value={this.state.topicInfo['partitions'][this.state.partition]['beginningOffset']}/>
                                            <Statistic title="End Offset"
                                                       value={this.state.topicInfo['partitions'][this.state.partition]['endOffset']}/>
                                            <Statistic title="Size"
                                                       value={this.state.topicInfo['partitions'][this.state.partition]['endOffset'] - this.state.topicInfo['partitions'][this.state.partition]['beginningOffset']}/>
                                        </>
                                        : undefined
                                }

                            </Space>
                        </Row>
                    </PageHeader>
                </div>

                <div className='kd-page-header' style={{padding: 20}}>
                    <Form ref={this.form} onFinish={this.pullMessage}
                          initialValues={{
                              count: this.state.count,
                              partition: this.state.partition,
                              autoOffsetReset: this.state.autoOffsetReset,
                          }}>
                        <Row gutter={24}>
                            <Col span={6}>
                                <Form.Item
                                    name={'partition'}
                                    label={'Partition'}
                                >
                                    <Select onChange={(value) => {
                                        this.setState({
                                            partition: value
                                        }, this.handlePartitionChange);
                                    }}>
                                        {
                                            this.state.topicInfo ?
                                                this.state.topicInfo['partitions'].map(item => {
                                                    return <Select.Option key={'p' + item['partition']}
                                                                          value={item['partition']}>{item['partition']}</Select.Option>
                                                }) : undefined
                                        }
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={6}>
                                <Form.Item
                                    name={'autoOffsetReset'}
                                    label={'Auto Offset Reset'}
                                >
                                    <Select onChange={(value) => {
                                        this.setState({
                                            autoOffsetReset: value
                                        }, this.handlePartitionChange);
                                    }}>
                                        <Select.Option value="earliest">
                                            <FormattedMessage id="earliest"/>
                                        </Select.Option>
                                        <Select.Option value="newest">
                                            <FormattedMessage id="newest"/>
                                        </Select.Option>
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={6}>
                                <Form.Item
                                    name={'offset'}
                                    label={'Offset'}
                                >
                                    {
                                        this.state.topicInfo ?
                                            <InputNumber
                                                min={this.state.topicInfo['partitions'][this.state.partition]['beginningOffset']}
                                                max={this.state.topicInfo['partitions'][this.state.partition]['endOffset']}
                                                // defaultValue={this.state.topicInfo['partitions'][this.state.partition]['endOffset'] - this.state.count}
                                                value={this.state.offset}
                                                style={{width: '100%'}}
                                                onChange={(value) => {
                                                    this.setState({
                                                        offset: value
                                                    })
                                                }}
                                            />
                                            : undefined
                                    }

                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item
                                    name={'count'}
                                    label={'Count'}
                                >
                                    <InputNumber min={1} style={{width: '100%'}}/>
                                </Form.Item>
                            </Col>

                            <Col span={6} key='keyFilter'>
                                <Form.Item
                                    name={'keyFilter'}
                                    label={'key'}
                                >
                                    <Input allowClear placeholder="filter key"/>
                                </Form.Item>

                            </Col>

                            <Col span={6} key='valueFilter'>
                                <Form.Item
                                    name={'valueFilter'}
                                    label={'value'}
                                >
                                    <Input allowClear placeholder="filter value"/>
                                </Form.Item>
                            </Col>
                            <Col span={12} style={{textAlign: 'right'}}>
                                <Space>
                                    <Button type="primary" htmlType="submit" loading={this.state.loading}>
                                        <FormattedMessage id="pull"/>
                                    </Button>

                                    <Button type="default" danger onClick={this.handleReset}>
                                        <FormattedMessage id="reset"/>
                                    </Button>
                                </Space>
                            </Col>
                        </Row>

                    </Form>
                </div>

                <div className='kd-content'>
                    <List
                        itemLayout="horizontal"
                        dataSource={this.state.items}
                        loading={this.state.loading}
                        pagination={{
                            showSizeChanger: true,
                            total: this.state.items.length,
                            showTotal: total => <FormattedMessage id="total-items" values={{total}}/>
                        }}
                        renderItem={(item, index) => {
                            const title = <>
                                <Space>
                                    <Text code>partition:</Text>
                                    <Text>{item['partition']}</Text>
                                    <Text code>key:</Text>
                                    <Text>{item['key']}</Text>
                                    <Text code>offset:</Text>
                                    <Text>{item['offset']}</Text>
                                    <Text code>timestamp:</Text>:
                                    <Tooltip
                                        title={dayjs(item['timestamp']).format("YYYY-MM-DD HH:mm:ss")}>
                                        <Text>{dayjs(item['timestamp']).fromNow()}</Text>
                                    </Tooltip>
                                </Space>
                            </>;

                            const description = <Row wrap={false}>
                                <Col flex="none">
                                    <div style={{padding: '0 5px'}}>
                                        {
                                            item['format'] ?
                                                <DownCircleTwoTone onClick={() => {
                                                    let items = this.state.items;
                                                    items[index]['format'] = undefined;
                                                    this.setState({
                                                        items: items
                                                    })
                                                }}/> :
                                                <RightCircleTwoTone onClick={() => {
                                                    let items = this.state.items;
                                                    try {
                                                        let obj = JSON.parse(items[index]['value']);
                                                        items[index]['format'] = JSON.stringify(obj, null, 4);
                                                        this.setState({
                                                            items: items
                                                        })
                                                    } catch (e) {

                                                    }
                                                }}/>
                                        }
                                    </div>
                                </Col>
                                <Col flex="auto">
                                    <pre>{item['format'] ? item['format'] : item['value']}</pre>
                                </Col>
                            </Row>;

                            return <List.Item>
                                <List.Item.Meta
                                    title={title}
                                    description={description}
                                />
                            </List.Item>;
                        }}
                    />
                </div>
            </div>
        );
    }

render() {

        return (
            <div>
                <div className='kd-page-header'>
                    <PageHeader
                        className="site-page-header"
                        onBack={() => {
                            this.props.history.goBack();
                        }}
                        subTitle={<FormattedMessage id="topic-detail"/>}
                        title={this.state.topic}
                        extra={[
                            <Button key="btn-1" onClick={() => {
                                this.setState({
                                    modalVisible: true
                                })
                            }}><FormattedMessage id="produce-message"/></Button>,
                            <Link key={'link-2'}
                                  to={`/topic-data?clusterId=${this.state.clusterId}&topic=${this.state.topic}`}>
                                <Button key="btn-consume-message" type="primary">
                                    <FormattedMessage id="consume-message"/>
                                </Button>
                            </Link>,
                        ]}
                    >
                        <Row>
                            <Space size='large'>
                                <Statistic title={<FormattedMessage id="numPartitions"/>}
                                           value={this.state.topicInfo['partitions'].length}/>
                                <Statistic title={<FormattedMessage id="replicationFactor"/>}
                                           value={this.state.topicInfo['replicaCount']}/>
                                <Statistic title={<FormattedMessage id="log-size"/>}
                                           value={renderSize(this.state.topicInfo['totalLogSize'])}/>
                            </Space>
                        </Row>
                    </PageHeader>
                </div>

                <div className='kd-content'>
                    <Tabs defaultActiveKey='0' onChange={this.handleTabChange}>
                        <TabPane tab={<FormattedMessage id="partitions"/>} key="partition">
                            <TopicPartition
                                clusterId={this.state.clusterId}
                                topic={this.state.topic}
                                onRef={this.onTopicPartitionRef}
                            >

                            </TopicPartition>
                        </TabPane>
                        <TabPane tab={<FormattedMessage id="brokers"/>} key="broker">
                            <TopicBroker
                                clusterId={this.state.clusterId}
                                topic={this.state.topic}
                                onRef={this.onTopicBrokerRef}
                            >
                            </TopicBroker>
                        </TabPane>
                        <TabPane tab={<FormattedMessage id="consumer-groups"/>} key="consumer-group">
                            <TopicConsumerGroup
                                clusterId={this.state.clusterId}
                                topic={this.state.topic}
                                onRef={this.onTopicConsumerGroupRef}
                            >

                            </TopicConsumerGroup>
                        </TabPane>
                        <TabPane tab={<FormattedMessage id="topic-config"/>} key="topic-config">
                            <TopicConfig
                                clusterId={this.state.clusterId}
                                topic={this.state.topic}>

                            </TopicConfig>
                        </TabPane>
                    </Tabs>
                </div>

                {
                    this.state.modalVisible ?
                        <SendMessageModal
                            partitions={this.state.topicInfo.partitions}
                            handleOk={this.handleSendMessage}
                            handleCancel={() => {
                                this.setState({
                                    modalVisible: false
                                })
                            }}
                            confirmLoading={this.state.modalConfirmLoading}
                        /> : undefined
                }
            </div>
        );
    }