export default function Diagnosis()

in webui/src/pages/diagnosis/index.tsx [44:122]
74 lines of code
3 McCabe index (conditional complexity)

export default function Diagnosis() {
  const [data, setData] = useState<DiagnosisResult[]>([]);;
  const [message, setMessage] = useState('');
  const [dialogVisible, setDialogVisible] = useState(false);
  const [refreshCount, setRefreshCount] = useState(0);

  const refreshDiagnosisList = () => {
    diagnosisService.listDiagnosis()
      .then(res => {
        res = res || []
        setData(res)
      })
      .catch(err => {
        Message.error(`Error fetching diagnosis results: ${getErrorMessage(err)}`)
      }).finally(() => {
        setRefreshCount(refreshCount + 1)
      })
  };

  const submitDiagnosis = (props) => {
    const task: DiagnosisTask = {
      source: props.src,
      destination: {
        address: props.dst,
        port: props.port
      },
      protocol: props.protocol
    };
    diagnosisService.createDiagnosis(task)
      .then(res => {
        Message.success('Diagnosis task submitted')
        refreshDiagnosisList()
      })
      .catch(err => {
        Message.error(`Error when submitting diagnosis task：${getErrorMessage(err)}`)
      })
  };

  const showMessageDialog = (message) => {
    setMessage(message)
    setDialogVisible(true)
  }

  useEffect(refreshDiagnosisList, [])
  useEffect(() => {
    if (data.find(i => i.status == 'running')) {
      const id = setTimeout(refreshDiagnosisList, 3000);
      return () => clearTimeout(id);
    }
    return () => {}
  }, [refreshCount]);

  return (
    <div>
      <PageHeader
        title='Connectivity Diagnosis'
        breadcrumbs={[{ name: 'Console' }, { name: 'Diagnosis' }, { name: 'Connectivity Diagnosis' }]}
      />
      <Card id="card-diagnosis" title="Diagnose" contentHeight="auto">
        <Card.Content>
          <DiagnosisForm onSubmit={submitDiagnosis} />
        </Card.Content>
      </Card>
      <Card id="card-history" title="History" contentHeight="auto">
        <Card.Content>
          <DiagnosisHistory data={toTableData(data, showMessageDialog)} />
        </Card.Content>
      </Card>
      <Dialog
        v2
        visible={dialogVisible}
        footerActions={['ok']}
        onOk={() => setDialogVisible(false)}
        onClose={() => setDialogVisible(false)}>
          {message}
      </Dialog>
    </div>
  );
}