@ant-design/icons#CheckCircleOutlined JavaScript Examples

UserVideosCard = (props) => {
	const data = props.data;
	return (
		<Link to={`/videos/${data.id}`}>
			<Card
				className="video-card"
				cover={<VideoPlayer videoUrl={`${process.env.REACT_APP_S3_STORAGE_PATH}${data.video_url}`} snapshotAt={2} />}>
				<Meta
					style={{ textAlign: "left" }}
					title={data.title}
					description={
						data.description && (
							<>
								<p style={{ textAlign: "left", color: "green" }}>
									{data.feedback !== "undefined" && data.feedback.length > 0 ? <CheckCircleOutlined /> : null}
								</p>
								<p className="tiny">{humanDate(data.created_at)}</p>
								<p className="small">{data.description}</p>
							</>
						)
					}
				/>
			</Card>
		</Link>
	);
}

Unsubscribe = () =>  {
  const dispatch = useDispatch()
  const search = useLocation().search
  useEffect(() => {
    const email = new URLSearchParams(search).get('email');
    const token = new URLSearchParams(search).get('token');
    dispatch(unsubscribeEmail(email,token))
  },[search, dispatch]);
  const unsubscribe = useSelector((state) => state.base.unsubscribe);
  const {
      isDone,
      success,
      email,
  } = unsubscribe;
  return (
    <Row className={'padding--sides width-100 height-100'}>
      <Card className='border-round padding--sides padding--ends margin--ends background-grey center' style={{width: '100%'}}>
        {
          isDone ?
          success ?
          <>
            <CheckCircleOutlined className='f72 text-green' />
            <div className='text-black center margin--top f18'>
              You have successfully unsubscribed! Your email {email} will no longer receive notifications. Redirecting to homepage...
            </div>
          </> :
          <>
            <CloseCircleOutlined className='f72 text-red' />
            <div className='text-black center margin--top f18'>
              Something went wrong and we could not process your request. Please Try again.
            </div>
          </> :
          <Loader />
        }		
      </Card>
    </Row>
  )
}

VerifyEmail = () =>  {
  const dispatch = useDispatch()
  const search = useLocation().search
  useEffect(() => {
    const email = new URLSearchParams(search).get('email');
    const token = new URLSearchParams(search).get('token');
    dispatch(onEmailVerify(email, token))
  }, [search, dispatch]);
  const verifyEmail = useSelector((state) => state.base.verifyEmail);
  const {
      isDone,
      success,
      email,
  } = verifyEmail;
  return (
    <Row className={'padding--sides width-100 height-100'}>
      <Card className='border-round padding--sides padding--ends margin--ends background-grey center' style={{width: '100%'}}>
        {
          isDone ?
          success ?
          <>
            <CheckCircleOutlined className='f72 text-green' />
            <div className='text-black center margin--top f18'>
              You have successfully subscribed! Your email-{email} will now receive notifications about slot preferences as they become available. 
            </div>
          </> :
          <>
            <CloseCircleOutlined className='f72 text-red' />
            <div className='text-black center margin--top f18'>
              Something went wrong and we could not process your request. Please Try again.
            </div>
          </> :
          <Loader />
        }		
      </Card>
    </Row>
  )
}

SuccessfulRegistration = (props) => {
  return (
	<div className='center'>
		<CheckCircleOutlined className='f72 text-green' />
		<div className='para-style center margin--top '>
			You have successfully registered!<br/>If this is your first subscription, you will receive a verification email.<br/>Once verified, you will receive information about any new slots that open up according to the preferences you had set.
		</div>
		<Button block='true' className='submit-button margin--ends text-white' onClick={() => props.resetRegisterForm()}> Subscribe Again</Button>
	</div>
  )
}

storiesOf('antd/tag', module).add('status', () => 
  <>
    <Divider orientation="left">Without icon</Divider>
    <div>
      <Tag color="success">success</Tag>
      <Tag color="processing">processing</Tag>
      <Tag color="error">error</Tag>
      <Tag color="warning">warning</Tag>
      <Tag color="default">default</Tag>
    </div>
    <Divider orientation="left">With icon</Divider>
    <div>
      <Tag icon={<CheckCircleOutlined />} color="success">
        success
      </Tag>
      <Tag icon={<SyncOutlined spin />} color="processing">
        processing
      </Tag>
      <Tag icon={<CloseCircleOutlined />} color="error">
        error
      </Tag>
      <Tag icon={<ExclamationCircleOutlined />} color="warning">
        warning
      </Tag>
      <Tag icon={<ClockCircleOutlined />} color="default">
        waiting
      </Tag>
      <Tag icon={<MinusCircleOutlined />} color="default">
        stop
      </Tag>
    </div>
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>We preset five different colors, you can set color property such as <code>success</code>,<code>processing</code>,<code>error</code>,<code>default</code> and <code>warning</code> to indicate specific status.</p></>) } });

function History(props) {
  const { current, activeId, onChange, selectedService } = props;
  const [pagination, setPagination] = useState({
    current: 0,
    pageSize: 8,
    total: 0,
  });
  const [historyList, setHistoryList] = useState([]);
  const [loading, setLoading] = useState(false);

  const loadHistory = (page) => {
    setLoading(true);
    loadHistoryList({
      page: page,
      page_size: 8,
      service_id: selectedService[1],
    }).then((r) => {
      setLoading(false);

      if (r.code === 14000) {
        return;
      }
      if (r.code !== 0) {
        message.error(r.msg);
        return;
      }

      setHistoryList(r.data.list);
      setPagination(r.data.pagination);
    });
  };

  useEffect(() => {
    if (selectedService && selectedService[1]) {
      // load history
      loadHistory(current);
    }
  }, [selectedService]);

  if (!historyList) return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;

  return (
    <Spin spinning={loading}>
      <ul className={styles.list}>
        {historyList.map((item, idx) => {
          return (
            <li
              onClick={() => {
                onChange(item.id);
              }}
              className={styles.listItem + (activeId === item.id ? ' ' + styles.activeItem : '')}
              key={idx}
            >
              <div className={styles.listItemBox}>
                <div className={styles.statusIcon}>
                  {item.test_passed ? (
                    <CheckCircleOutlined style={{ color: 'green' }} />
                  ) : (
                    <CloseCircleOutlined style={{ color: 'red' }} />
                  )}
                </div>
                <div className={styles.info}>
                  <div className={styles.methodName}>{item.method_name}</div>
                  <div>Time: {item.time_cost} ms</div>
                  <div>{item.created_at}</div>
                </div>
              </div>
            </li>
          );
        })}
      </ul>

      <Pagination
        simple
        onChange={(page, pageSize) => {
          loadHistory(page - 1);
        }}
        current={pagination.current + 1}
        pageSize={pagination.pageSize}
        total={pagination.total}
      />
    </Spin>
  );
}

ExchangeView = ({ current }) => {
  const dispatch = useDispatch();
  const [status, setStatus] = useState(undefined);
  const { t } = useTranslation();
  const {
    address,
    address_from,
    amount_token,
    symbol,
    asset,
    amount_currency,
    currency_from,
    provider,
  } = current;
  const statusPageUrl = provider === "oswapcc" ? "https://www.oswap.cc/#/contact" : "https://simpleswap.io/exchange?id=" + current.id;
  const updateFn = async (id) => {
    axios
      .get(
        provider === "oswapcc"
          ? `${config.oswapccRoot}/get_status/${id}`
          : `https://api.simpleswap.io/v1/get_exchange?api_key=${config.SIMPLESWAP_API_KEY}&id=${id}`
      )
      .then((obj) => {
        const { data } = obj;
        setStatus(provider === "oswapcc" ? data.data.status : data.status);
      });
  };
  useEffect(() => {
    updateFn(current.id);
    const update = setInterval(() => updateFn(current.id), 1000 * 60 * 5);
    return () => clearInterval(update);
  }, [current]);

  const isFinished = () => {
    if (provider === 'simpleswap' || !provider)
      return (status === 'finished' || status === 'sending');
    if (provider === 'oswapcc')
      return (status === 'sent');
    throw Error(`unknown provider ` + provider);
  };

  return (
    <div className={styles.view}>
      <Row justify="center">
        {isFinished() ? (
          <CheckCircleOutlined />
        ) : (
          <LoadingOutlined className={styles.icon} />
        )}
      </Row>
      <Row justify="center" className={styles.auto}>
        <Text>{t("buy.updated", "This page will be updated automatically")}</Text>
      </Row>
      <Row justify="center">
        <div>
          <b>{t("buy.status", "Status")}:</b>{" "}
          {status ? (
            <span>{status}</span>
          ) : (
            <Text type="secondary">{t("buy.status_loading", "loading status...")}</Text>
          )}
        </div>
      </Row>
      <Row justify="center">
        <Col xs={{ span: 24 }} md={{ span: 12 }}>
          <div className={styles.currency}>
          <Trans i18nKey="buy.you_send">You <b>send</b></Trans>{": "}
            <span style={{ textTransform: "uppercase" }}>
              {amount_currency}{" "}
              <span style={{ textTransform: "uppercase" }}>
                {currency_from}
              </span>
            </span>
          </div>
        </Col>
        <Col xs={{ span: 24 }} md={{ span: 12 }}>
          <div className={styles.currency}>
            <Trans i18nKey="buy.you_get">You <b>get</b></Trans>{": "}
            <span>
              {amount_token} {symbol || asset.slice(0, 4) + "..."}
            </span>
          </div>
        </Col>
      </Row>
      <Row justify="center">
        <div className={styles.addressWrap}>
          <b>
            <Trans i18nKey="buy.send_to_address" currency_from={currency_from}>
              Send <span style={{ textTransform: "uppercase" }}>{{currency_from}}</span> to address: 
            </Trans>
          </b>
          <span>
            <Paragraph copyable className={styles.address}>
              {address_from}
            </Paragraph>
          </span>
        </div>
      </Row>
      <Row justify="center">
        <div className={styles.addressWrap}>
          <b>{t("buy.recipient_address", "Recipient address")}: </b>
          <span>
            <Paragraph copyable className={styles.address}>
              {address}
            </Paragraph>
          </span>
        </div>
      </Row>
      {!isFinished() && (<Row justify="center">
        <div className={styles.providerStatus}>
          <Text type="secondary">
            <Trans i18nKey="buy.currently_converting" currency_from={currency_from}>
              Currently converting <span style={{ textTransform: "uppercase" }}>
                {{currency_from}}
              </span> to GBYTE, this step is performed by {{providerName: provider === "oswapcc" ? "oswap.cc" : "simpleswap.io"}}. For support issues, please contact them on their <a href={statusPageUrl} target="_blank" rel="noopener">support page</a>.
            </Trans>
          </Text>
        </div>
      </Row>)}
      <Row justify="center" style={{ padding: 10 }}>
        <Button onClick={() => dispatch(removeExchangePending())}>
          {t("buy.go_back", "Go back to the form")}
        </Button>
      </Row>
    </div>
  );
}

IndexView = props => {
  const { dispatch, componentView, form, match } = props;
  const { params } = match;
  const { getFieldDecorator } = form;

  const [comListHidden, setComListHidden] = useState(false);

  /**
   * @description 左边切换的事件，是否显示componentList
   */
  const toggleComponentList = () => {
    setComListHidden(!comListHidden);
  };

  const cls = classNames(styles.ComponentList, {
    [styles.hidden]: comListHidden === true,
  });

  /**
   * @description 生成预览代码
   */
  const CodePreview = () => {
    console.log('com', componentView);
    dispatch(routerRedux.push('/codePreview'));
  };

  useEffect(() => {
    // 首次执行
    console.log('mount----');
    // 发送setcurrentview
    dispatch({
      type: 'drag/getComponentCode',
      payload: {
        id: params.id,
      },
    });
  }, []);

  /**
   * @description 发送到服务器
   */
  const postToServer = () => {
    if (componentValidator(componentView)) {
      dispatch({
        type: 'drag/putComponentCode',
        payload: {
          id: params.id,
          code: componentView,
        },
      });
    }
  };

  const basicObj = {
    type: 'div',
    nested: true,
    props: {
      style: {
        height: '',
        width: '',
        marginTop: '',
      },
    },
    needDiv: false,
    children: [],
  };
  // 组件不能为空
  const componentValidator = componentView => {
    if (componentView.length === 0) {
      // 提示不能为空
      message.error('组件不能为空');
      return false;
    } else if (componentView.length === 1) {
      return true;
    } else {
      confirm({
        title: '组件必须在被包裹在一个根组件下,是否自动生成外层根组件包裹?',
        content: '当你点击ok，自动生成包裹根组件',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          return new Promise((resolve, reject) => {
            // dispatch
            const basic = basicObj;
            basic.children = componentView;
            dispatch({
              type: 'drag/setCurrentView',
              payload: [basic],
              isPage: false,
            });
            setTimeout(resolve, 1000);
          }).catch(() => console.log('Oops errors!'));
        },
        onCancel() {},
      });
      return false;
    }
  };

  /**
   * @description 跳转代码广场
   */
  const comSquare = () => {
    dispatch(routerRedux.push('/comsquare'));
  };

  return (
    <div className={styles.container}>
      <div className={styles.LeftContainer}>
        <div className={styles.header}>
          <div className={styles.btnList}>
            <div className={styles.logo}>React-Drag</div>
            <div className={styles.operation}>
              <div className={styles.btn} style={{ color: '#1890FF' }}>
                <HighlightOutlined style={{ fontSize: '22px' }} />
                组件编辑
              </div>
              <div className={styles.btn} onClick={comSquare}>
                <AppstoreOutlined style={{ fontSize: '22px' }} />
                组件广场
              </div>
              <div className={styles.btn} onClick={postToServer}>
                <CheckCircleOutlined style={{ fontSize: '22px' }} />
                保存到服务器
              </div>
            </div>
            <div className={styles.userCenter}>
              <div className={styles.btn} onClick={CodePreview}>
                <UserOutlined style={{ fontSize: '22px' }} />
                用户中心
              </div>
            </div>
          </div>
        </div>
        <div className={styles.content}>
          <div className={styles.settings}>
            <span onClick={toggleComponentList}>
              <SmileTwoTone style={{ fontSize: '24px' }} />
            </span>
          </div>
          <div className={styles.editRegion}>
            <div className={cls}>
              <Tabs>
                <TabPane tab="公共组件" key="1">
                  <ComponentList />
                </TabPane>
              </Tabs>
            </div>
            <div className={styles.dragRegion}>
              <DragCanvas isPage={false} />
            </div>
          </div>
          <div className={styles.RightContainer}>
            <div className={styles.title}>属性编辑区</div>
            <ComponentConfig isPage={false} />
          </div>
        </div>
        <div className={styles.footer}>
          {' '}
          MIT Licensed | Copyright © 2019.12.31-present Daisy
        </div>
      </div>
    </div>
  );
}

render() {
    const iframeHeight = 750;
    const that = this;
    let {
      appIdcList = [],
      pprofList = [],
      appNodeList = [],
      defalutZone,
      appEnvZone,
      onChangeZone,
      pprofModelRunning,
    } = this.props;
    // const { aid, env, appNodeList, appEnvZone, onChangeZone, defalutZone} = props;
    const { pprofActiveBtn, zoneCode, appName, env } = this.state;
    const { loading, depRes, pprofModalVisible } = this.state;
    const { golang, flameGraph, graphviz } = depRes;
    console.log('env,zoneCode ', env, zoneCode);
    if (!env || !zoneCode) {
      return (
        <div style={{ marginTop: 10 }}>
          <Alert message="Warning" description="请选择环境和可用区." type="warning" showIcon />
        </div>
      );
    }
    let changeZone = (e) => {
      onChangeZone(e.target.value);
    };
    return (
      <div style={{ marginLeft: 10, marginTop: 10, marginRight: 10, marginBottom: 10 }}>
        <Row>
          <Col span={8}>
            <Select
              dropdownMatchSelectWidth
              showSearch
              allowClear={true}
              style={{ width: 500 }}
              placeholder="选择实例"
              onChange={this.changeNode}
            >
              {appNodeList != undefined &&
                appNodeList.length > 0 &&
                appNodeList.map((v, i) => {
                  return (
                    <Select.Option key={i} value={v.host_name}>
                      {v.host_name + ' (' + v.ip + ')'}
                    </Select.Option>
                  );
                })}
            </Select>
          </Col>
          <Col span={4}>
            <Button
              type="primary"
              onClick={() => {
                this.setState({ pprofModalVisible: true });
              }}
              className={'pprof-btn'}
              loading={pprofModelRunning}
            >
              更新分析图表
            </Button>
            <Modal
              title={'CPU分析，确认操作？'}
              visible={pprofModalVisible}
              onOk={() => {
                this.pprofFormRef.current
                  ?.validateFields()
                  .then((fieldsValue) => {
                    this.runPprof(fieldsValue);
                    this.setState({ pprofModalVisible: false });
                  })
                  .catch((errorInfo) => {
                    console.log('===pprofFormRef', errorInfo);
                  });
              }}
              onCancel={() => {
                this.setState({ pprofModalVisible: false });
              }}
            >
              <Form ref={this.pprofFormRef} preserve={false}>
                <FormItem
                  labelCol={{ span: 5 }}
                  wrapperCol={{ span: 15 }}
                  label="请选择采样时间"
                  name="duration_second"
                  initialValue={30}
                >
                  <Select>
                    <Option key={'30'} value={30}>
                      30秒
                    </Option>
                    <Option key={'120'} value={120}>
                      2分钟
                    </Option>
                    <Option key={'300'} value={300}>
                      5分钟
                    </Option>
                  </Select>
                </FormItem>
              </Form>
            </Modal>
          </Col>
          <Col span={8}>
            {golang === 1 && (
              <Tag color="green" key={1}>
                Golang <CheckCircleOutlined />
              </Tag>
            )}
            {golang === 0 && (
              <Tag color="geekblue" key={2}>
                Golang <CloseCircleOutlined />
              </Tag>
            )}

            {flameGraph === 1 && (
              <Tag color="green" key={3}>
                FlameGraph <CheckCircleOutlined />
              </Tag>
            )}
            {flameGraph === 0 && (
              <Tag color="geekblue" key={4}>
                FlameGraph <CloseCircleOutlined />
              </Tag>
            )}

            {graphviz === 1 && (
              <Tag color="green" key={5}>
                Graphviz <CheckCircleOutlined />
              </Tag>
            )}
            {graphviz === 0 && (
              <Tag color="geekblue" key={6}>
                Graphviz <CloseCircleOutlined />
              </Tag>
            )}
          </Col>
        </Row>

        <Row style={{ marginTop: '10px', marginLeft: '10px' }}>
          <Table
            columns={this.columns}
            dataSource={pprofList}
            pagination={{ pageSize: 9999, hideOnSinglePage: true }}
          />
        </Row>

        <Modal
          title={pprofActiveBtn}
          width="88%"
          visible={this.state.visible}
          onCancel={this.onCancel}
          maskClosable={true}
          footer={null}
        >
          <div>
            <PprofIframe iframepage={this.state.iframepage} />
          </div>
        </Modal>
        {/* <Card bordered={false} style={{ marginBottom: '20px', height: { iframeHeight } + 'px' }}/>
        </Card> */}
      </div>
    );
  }

render() {
        return (
            <div style={{marginTop: 20}}>
                <Content style={{background: 'white', padding: 24}}>
                    <div>
                        <Row justify="space-around" align="middle" gutter={24}>
                            <Col span={4} key={1}>
                                <Title level={3}>我的资产</Title>
                            </Col>
                            <Col span={20} key={2} style={{textAlign: 'right'}}>
                                <Space>
                                    <Search
                                        ref={this.inputRefOfName}
                                        placeholder="资产名称"
                                        allowClear
                                        onSearch={this.handleSearchByName}
                                        style={{width: 200}}
                                    />

                                    <Select mode="multiple"
                                            allowClear
                                            value={this.state.selectedTags}
                                            placeholder="资产标签" onChange={this.handleTagsChange}
                                            style={{minWidth: 150}}>
                                        {this.state.tags.map(tag => {
                                            if (tag === '-') {
                                                return undefined;
                                            }
                                            return (<Select.Option key={tag}>{tag}</Select.Option>)
                                        })}
                                    </Select>

                                    <Select onChange={this.handleSearchByProtocol}
                                            value={this.state.queryParams.protocol ? this.state.queryParams.protocol : ''}
                                            style={{width: 100}}>
                                        <Select.Option value="">全部协议</Select.Option>
                                        <Select.Option value="rdp">rdp</Select.Option>
                                        <Select.Option value="ssh">ssh</Select.Option>
                                        <Select.Option value="vnc">vnc</Select.Option>
                                        <Select.Option value="telnet">telnet</Select.Option>
                                        <Select.Option value="kubernetes">kubernetes</Select.Option>
                                    </Select>

                                    <Tooltip title='重置查询'>

                                        <Button icon={<UndoOutlined/>} onClick={() => {
                                            this.inputRefOfName.current.setValue('');
                                            this.inputRefOfIp.current.setValue('');
                                            this.setState({
                                                selectedTags: []
                                            })
                                            this.loadTableData({pageIndex: 1, pageSize: 10, protocol: '', tags: ''})
                                        }}>

                                        </Button>
                                    </Tooltip>

                                    <Divider type="vertical"/>

                                    <Tooltip title="刷新列表">
                                        <Button icon={<SyncOutlined/>} onClick={() => {
                                            this.loadTableData(this.state.queryParams)
                                        }}>

                                        </Button>
                                    </Tooltip>

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

                </Content>

                <div style={{marginTop: 20}}>
                    <List
                        loading={this.state.loading}
                        grid={{gutter: 16, column: 4}}
                        dataSource={this.state.items}
                        pagination={{
                            showSizeChanger: true,
                            current: this.state.queryParams.pageIndex,
                            pageSize: this.state.queryParams.pageSize,
                            onChange: this.handleChangPage,
                            onShowSizeChange: this.handleChangPage,
                            total: this.state.total,
                            showTotal: total => `总计 ${total} 条`,
                            pageSizeOptions: [8, 16, 32, 64, 128]
                        }}
                        renderItem={item => {

                            const id = item['id'];
                            const protocol = item['protocol'];
                            const name = item['name'];
                            const sshMode = item['sshMode'];
                            let url = '';
                            if (protocol === 'ssh' && sshMode === 'native') {
                                url = `#/term?assetId=${id}&assetName=${name}`;
                            } else {
                                url = `#/access?assetId=${id}&assetName=${name}&protocol=${protocol}`;
                            }

                            return (
                                <List.Item>
                                    <a target='_blank' href={url} rel='noreferrer noopener'>
                                        <Card title={item['name']}
                                              hoverable
                                              extra={item['active'] ?
                                                  <Tag icon={<CheckCircleOutlined/>} color="success">
                                                      运行中
                                                  </Tag> : <Tag icon={<ExclamationCircleOutlined/>} color="error">
                                                      不可用
                                                  </Tag>}
                                              actions={[]}>
                                            <Descriptions title="" column={1}>
                                                <Descriptions.Item label={<div><CodeOutlined/> 资产协议</div>}>
                                                    <strong>{item['protocol']}</strong>
                                                </Descriptions.Item>
                                                <Descriptions.Item label={<div><TagsOutlined/> 标签</div>}>
                                                    <strong>{this.renderTags(item['tags'])}</strong>
                                                </Descriptions.Item>
                                            </Descriptions>
                                        </Card>
                                    </a>
                                </List.Item>
                            )
                        }}
                    />
                </div>
            </div>
        );
    }

SelectionActions = (props) => {
  const {
    experimentId, onListSelected, extraOptions,
  } = props;
  const dispatch = useDispatch();

  const selectedGenes = useSelector((state) => state.genes.selected);
  const [copied, setCopied] = useState(false);
  const [listed, setListed] = useState(false);
  const [expressionCellSetModalVisible, setExpressionCellSetModalVisible] = useState(false);

  const clearAll = () => {
    dispatch(changeGeneSelection(experimentId, selectedGenes, GeneSelectionStatus.deselect));
  };

  useEffect(() => {
    setCopied(false);
  }, [selectedGenes]);

  useEffect(() => {
    if (!copied) return;

    const resetCopyButton = setInterval(() => {
      setCopied(false);
    }, 5000);

    return () => {
      clearInterval(resetCopyButton);
    };
  }, [copied]);

  const renderCopyClipboard = () => {
    if (copied) {
      return (
        <Button type='link' size='small' disabled>
          <span>
            <CheckCircleOutlined />
            &nbsp;
            Copied
          </span>
        </Button>
      );
    }

    return (
      <CopyToClipboard
        options={{ format: 'text/plain' }}
        text={selectedGenes.join('\n')}
        onCopy={
          () => {
            setCopied(true);
          }
        }
      >
        <Button type='link' size='small'>Copy</Button>
      </CopyToClipboard>
    );
  };
  return (
    <Row style={{ float: 'left', paddingRight: '50px' }}>
      {extraOptions ?? <></>}

      {extraOptions && selectedGenes.length > 0 && (
        <Divider style={{ height: '1px', marginTop: '5px', marginBottom: '5px' }} />
      )}

      {selectedGenes.length > 0 ? (
        <>
          <Text type='secondary'>
            {`${selectedGenes.length} gene${selectedGenes.length === 1 ? '' : 's'} selected`}
          </Text>
          <Button type='link' size='small' onClick={clearAll}>Clear</Button>
          {renderCopyClipboard()}
          <Button
            type='link'
            size='small'
            onClick={() => { setListed(!listed); onListSelected(!listed); }}
          >
            {listed ? 'Hide' : 'List'}
          </Button>
          <ComponentActions name='Heatmap' experimentId={experimentId} componentType={COMPONENT_TYPE} />
          <Button
            type='link'
            size='small'
            onClick={() => setExpressionCellSetModalVisible(!expressionCellSetModalVisible)}
          >
            Cellset
          </Button>
          {
            expressionCellSetModalVisible && (
              <ExpresssionCellSetModal
                onCancel={() => setExpressionCellSetModalVisible(false)}
              />
            )
          }
        </>
      ) : <></>}
    </Row>
  );
}

StatusIndicator = (props) => {
  const {
    experimentId, allSteps, currentStep, completedSteps,
  } = props;

  const {
    status: backendStatus,
    loading: loadingBackendStatus,
    error: errorLoadingBackendStatus,
  } = useSelector(getBackendStatus(experimentId));

  const {
    startDate, stopDate, status, error,
  } = backendStatus?.pipeline || {};

  const statusIndicators = {
    [pipelineStatus.NOT_CREATED]: {
      icon: <Text strong type='secondary' data-test-id={integrationTestConstants.ids.QC_STATUS_TEXT}>to be started</Text>,
      title: 'to be started',
      description: (
        <Text>You have never submitted your analysis to data processing.</Text>
      ),
    },
    [pipelineStatus.RUNNING]: {
      icon: <Text strong type='warning' data-test-id={integrationTestConstants.ids.QC_STATUS_TEXT}>running</Text>,
      title: <Text strong type='warning'>running</Text>,
      description: (
        <Text>
          The analysis launched
          {' '}
          <PrettyTime isoTime={startDate} />
          {' '}
          and is now in progress. This will take a few minutes.
        </Text>
      ),
    },
    [pipelineStatus.FAILED]: {
      icon: <Text strong type='danger' data-test-id={integrationTestConstants.ids.QC_STATUS_TEXT}>failed</Text>,
      title: <Text strong type='danger'>failing</Text>,
      description: (
        <Text>
          <b>Reason: </b>
          {' '}
          {error?.error}
          <br />
          The analysis launched
          {' '}
          <PrettyTime isoTime={startDate} />
          {' '}
          and failed
          {' '}
          <PrettyTime isoTime={stopDate} />
          .
        </Text>
      ),
    },
    [pipelineStatus.ABORTED]: {
      icon: <Text strong type='secondary' data-test-id={integrationTestConstants.ids.QC_STATUS_TEXT}>stopped</Text>,
      title: <Text strong type='secondary'>stopped</Text>,
      description: (
        <Text>
          The analysis launched
          {' '}
          <PrettyTime isoTime={startDate} />
          {' '}
          and was stopped
          {' '}
          <PrettyTime isoTime={stopDate} />
          .
        </Text>
      ),
    },
    [pipelineStatus.SUCCEEDED]: {
      icon: <Text strong type='success' style={{ fontSize: '1.2rem' }} data-test-id={integrationTestConstants.ids.QC_STATUS_TEXT}><CheckCircleOutlined /></Text>,
      title: <Text strong type='success'>finished</Text>,
      description: (
        <Text>
          The analysis launched
          {' '}
          <PrettyTime isoTime={startDate} />
          {' '}
          and finished
          {' '}
          <PrettyTime isoTime={stopDate} />
          .
        </Text>
      ),
    },
  };

  const renderOverlay = () => {
    const renderOverlayContent = () => {
      if (loadingBackendStatus) { return (<Text>Loading run status...</Text>); }
      if (errorLoadingBackendStatus) {
        return (<Text>Failed loading run status. Please refresh the page.</Text>);
      }

      return (
        <>
          <Paragraph>
            <Text strong>
              Your data processing is
              {' '}
              {statusIndicators[status].title}
              .
            </Text>
          </Paragraph>
          <Paragraph>
            <Text>{`${completedSteps.length} of ${allSteps.length} steps complete`}</Text>
          </Paragraph>
          <Paragraph>
            {statusIndicators[status]?.description}
          </Paragraph>
        </>
      );
    };

    return (
      <Card style={{ width: 300, padding: 16 }}>
        {renderOverlayContent()}
      </Card>
    );
  };

  const renderIndicator = () => {
    if (loadingBackendStatus) { return (<Text>loading</Text>); }
    if (errorLoadingBackendStatus) { return (<Text>error</Text>); }

    return (
      <>
        <StepsIndicator
          allSteps={allSteps}
          currentStep={currentStep}
          completedSteps={completedSteps.length}
        />
        <div style={{ display: 'inline-block' }}>
          {statusIndicators[status]?.icon}
        </div>
      </>
    );
  };

  return (
    <Dropdown overlay={renderOverlay}>
      <Button
        type='text'
        style={{ paddingTop: '1px' }}
      >
        <Space size='small'>
          <Text strong style={{ fontSize: '0.9rem' }}>
            Status:
          </Text>
          {renderIndicator()}
        </Space>
      </Button>
    </Dropdown>
  );
}

reBuildData() {
		var data = [
			{
				key: "Idle",
				title: "Idle",
				selectable: false,
				icon: <LineOutlined />,
				children: []
			},
			{
				key: "Queued",
				title: "Queued",
				selectable: false,
				icon: <ClockCircleOutlined />,
				children: []
			},
			{
				key: "In Progress",
				title: "In Progress",
				selectable: false,
				icon: <FireOutlined />,
				children: []
			},
			{
				key: "Finished",
				title: "Finished",
				selectable: false,
				icon: <CheckCircleOutlined />,
				children: []
			}
		];

		Object.values(TasksStats.tasks).forEach(task => {
			var category;
			switch (task.process.status) {
				case PROCESS_STATUS_NOTSTARTED:
					if (task.priority >= 0)
						category = data[1];
					else
						category = data[0];
					break;
				case PROCESS_STATUS_RUNNING:
					category = data[2];
					break;
				case PROCESS_STATUS_FINISHED:
					category = data[3];
					break;
				default:
					category = data[0];
					message.warning("unrecognized process status");
			}
			category.children.push({
				key: task.id,
				title: (
					task.stats.hasOwnProperty("progress") ? (
						task.id + " (" + Math.trunc((task.stats["progress"][0] / task.stats["progress"][1])*100) + "%)"
					) : (
						task.id
					)
				),
				icon: (
					task.stats.hasOwnProperty("status") ? (
						HASHCAT_STATUS_BADGE_WARNING.indexOf(task.stats["status"]) > -1 ? (
							<Badge status="warning" />
						) : HASHCAT_STATUS_BADGE_PROCESSING.indexOf(task.stats["status"]) > -1 ? (
							<Badge status="processing" />
						) : HASHCAT_STATUS_BADGE_ERROR.indexOf(task.stats["status"]) > -1 ? (
							<Badge status="error" />
						) : HASHCAT_STATUS_BADGE_SUCCESS.indexOf(task.stats["status"]) > -1 ? (
							<Badge status="success" />
						) : HASHCAT_STATUS_BADGE_PINK.indexOf(task.stats["status"]) > -1 ? (
							<Badge color="pink" />
						) : HASHCAT_STATUS_BADGE_YELLOW.indexOf(task.stats["status"]) > -1 ? (
							<Badge color="yellow" />
						) : (
							<Badge status="default" />
						)
					) : (
						<Badge color="#b7b7b7" />
					)
				),
			});
		});

		for (let i = 0; i < data.length; i++) {
			data[i].title = data[i].title + " (" + data[i].children.length + ")";
		}

		this.setState({
			data: data
		});
	}