mobx#runInAction JavaScript Examples

fetchEntries({ offset }) {
    const livePictures = realtimeDB.ref('live_feed').orderByChild('createdAt').limitToLast(10);

    livePictures.once('value', (dataSnapshot) => {
      runInAction(() => {
        this.entries = Object.values(dataSnapshot.val()).reverse();
      });
    });
  }

async pod_request(interval, step, cluster, namespace, pod, metric, kind) {

    const res = await this.clusterApi.pod_api(interval, step, cluster, namespace, pod, metric, kind);

    runInAction(() => {

      this.cluster_res = res
      this.pod_cpu = this.cluster_res.items.pod_cpu
      this.pod_memory = this.cluster_res.items.pod_memory
      this.pod_net_bytes_transmitted = this.cluster_res.items.pod_net_bytes_transmitted
      this.pod_net_bytes_received = this.cluster_res.items.pod_net_bytes_received
      this.container_cpu = this.cluster_res.items.container_cpu
      this.container_memory = this.cluster_res.items.container_memory

      // this.container_net_bytes_received = this.cluster_res.items.container_net_bytes_received
      // this.container_net_bytes_transmitted = this.cluster_res.items.container_net_bytes_transmitted

    });
  }

async fetchProtests({ onlyMarkers, position }) {
    this.state = 'pending';

    try {
      const coordinates = position || this.rootStore.userCoordinates;
      if (coordinates?.length === 2) {
        const protests = await fetchNearbyProtests(coordinates);
        if (!onlyMarkers) {
          runInAction(() => {
            this.nearbyProtests = protests;
          });
        }

        this.rootStore.mapStore.updateMarkers(protests);
      }

      runInAction(() => {
        this.state = 'done';
      });
    } catch (e) {
      console.error(e);
      this.state = 'error';
    }
  }

/**
     * Prepare and set TxContext for supported intents.
     * @param {Transaction} transaction
     * @param {Account} account
     * @return {Promise<TxContext>}
     */
    async setTxContext(transaction, account) {
        //set tx context, retrieve network params from intent params
        const txContext = new TxContext(transaction, this.intentParams)
        //discover available signers using current account
        const availableSigners = !account ? [] : [account.publicKey]
        txContext.setAvailableSigners(availableSigners)
        try {
            await txContext.updateSignatureSchema()
        } catch (e) {
            console.error(e)
        }

        runInAction(() => {
            this.txContext = txContext
        })
        return txContext
    }

@action
  async fetchData() {
    this.status = ASYNC_STATES.STARTED;
    fetch(hostname + '/init')
      .then((res) => {
        if (!res.ok) {
          throw res;
        }
        return res.json();
      })
      .then((data) => {
        runInAction(() => {
          this.data = data;
          this.status = ASYNC_STATES.SUCCEEDED;
        });
      })
      .catch((err) => {
        runInAction(() => {
          this.status = ASYNC_STATES.FAILED;
        });
        let prefix = 'Error getting initial data';
        if (!(typeof err.text === 'function')) {
          console.error(prefix, err);
        } else {
          err.text().then((errMsg) => {
            console.error(prefix, errMsg);
          });
        }
      });
  }

async getClusterDetail(param, clusterName) {

        let params = ""
        params = param + "/" + clusterName
        // console.log(params)
        const apiList = await this.CallApi.callAPI(params);

        // console.log(apiList)

        runInAction(() => {
            this.clusterDetailMaster = apiList
            this.clusterDetailMaster = apiList.master
            this.clusterDetailWorker = apiList.worker
        });
    }

initCounters() {
        return Promise.all(['cb', 'op'].map(type => {
            const from = getLastCheckedLedger(this.address, this.network, type)
            return resolveCounterLoader(type)(this.network, this.address, from)
                .then(cnt => runInAction(() => this.counters[type] = cnt))
        }))
    }

async resource_request(interval, step, cluster, metric, kind) {

    const res = await this.clusterApi.cluster_api(interval, step, cluster, metric, kind);

    runInAction(() => {
      if (cluster === "all") {
        this.cluster_res = res
        this.pod_count = this.cluster_res.items.pod_count
        this.service_count = this.cluster_res.items.service_count
        this.deployment_count = this.cluster_res.items.deployment_count
        this.cronjob_count = this.cluster_res.items.cronjob_count
        this.job_count = this.cluster_res.items.job_count
        this.pv_count = this.cluster_res.items.pv_count
        this.pvc_count = this.cluster_res.items.pvc_count
        this.namespace_count = this.cluster_res.items.namespace_count
      }
      else {
        this.cluster_res = res
        if (this.pod_count.filter(item => item.metric.cluster === cluster).length > 0) {
          this.pod_count.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.pod_count[0].values
        }
        if (this.service_count.filter(item => item.metric.cluster === cluster).length > 0) {
          this.service_count.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.service_count[0].values
        }
        if (this.deployment_count.filter(item => item.metric.cluster === cluster).length > 0) {
          this.deployment_count.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.deployment_count[0].values
        }
        if (this.cronjob_count.filter(item => item.metric.cluster === cluster).length > 0) {
          this.cronjob_count.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.cronjob_count[0].values
        }
        if (this.job_count.filter(item => item.metric.cluster === cluster).length > 0) {
          this.job_count.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.job_count[0].values
        }
        if (this.pv_count.filter(item => item.metric.cluster === cluster).length > 0) {
          this.pv_count.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.pv_count[0].values
        }
        if (this.pvc_count.filter(item => item.metric.cluster === cluster).length > 0) {
          this.pvc_count.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.pvc_count[0].values
        }
        if (this.namespace_count.filter(item => item.metric.cluster === cluster).length > 0) {
          this.namespace_count.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.namespace_count[0].values
        }
      }
    });
  }

function TransferView() {
    const network = useStellarNetwork(),
        [valid, setValid] = useState(true),
        [transfer] = useDependantState(() => new TransferSettings(network), [network]),
        destinationAccountLedgerData = useDestinationAccountLedgerData(transfer.destination),
        destinationDirectoryInfo = useDirectory(transfer.destination),
        disabled = !destinationAccountLedgerData || !valid || parseFloat(transfer.sourceAmount) <= 0,
        balances = accountLedgerData.balancesWithPriority
    useEffect(() => {
        if (transfer.mode === 'convert') {
            transfer.startLedgerStreaming()
        }
        return transfer.stopLedgerStreaming
    }, [network, accountLedgerData.address, transfer.mode])

    return <WalletOperationsWrapperView title={<TransferTitleView transfer={transfer}/>} action="Transfer"
                                        disabled={disabled} prepareTransaction={() => transfer.prepareTransaction()}
                                        onFinalize={() => transfer.resetOperationAmount()}>
        <div className="transfer space">
            <div className="params">
                <TransferDestinationView address={transfer.destination}
                                         onChange={transfer.setDestination.bind(transfer)}
                                         federationAddress={transfer.destinationFederationAddress}/>
                <div className="space"/>
                <TransferAmountView settings={transfer} index={0} balances={balances} restricted
                                    placeholder="Amount to send"/>
                {transfer.mode !== 'convert' ?
                    <AvailableAmountLink settings={transfer} index={0}/> :
                    <>
                        <SwapBandView settings={transfer}/>
                        <TransferAmountView settings={transfer} index={1} balances={balances}
                                            placeholder="Amount received"/>
                    </>}
            </div>
            {transfer.mode === 'convert' &&
            <SwapSlippageView title="Slippage tolerance" defaultValue={0.5} onChange={v => transfer.setSlippage(v)}/>}
            <TransferMemoView transfer={transfer}/>
            {transfer.createDestination && <p className="success text-small micro-space">
                <i className="icon-info"/> The recipient account will be created automatically.{' '}
                <a href="#" onClick={() => runInAction(() => transfer.createDestination = false)}>Cancel</a>{' '}
                account auto-creation?
            </p>}
            {transfer.mode === 'claimable' && <p className="dimmed text-small micro-space">
                Please note: the recipient will have to create a trustline and explicitly claim your payment.
                Creating a claimable balance will temporary lock 0.5 XLM on your account, but you will be able to
                reclaim all transferred tokens and the reserved amount in case if the recipient won't claim the
                transfer.
            </p>}
        </div>
        <TransferValidationView transfer={transfer} destination={destinationAccountLedgerData}
                                directoryInfo={destinationDirectoryInfo} onValidate={setValid}/>
    </WalletOperationsWrapperView>
}

async real_resource_request(interval, step, cluster, metric, kind) {
    const res5s = await this.clusterApi.cluster_api(interval, step, cluster, metric, kind);

    let pod_count = res5s.items.pod_count
    let service_count = res5s.items.service_count
    let deployment_count = res5s.items.deployment_count
    let cronjob_count = res5s.items.cronjob_count
    let job_count = res5s.items.job_count
    let pv_count = res5s.items.pv_count
    let pvc_count = res5s.items.pvc_count
    let namespace_count = res5s.items.namespace_count

    runInAction(() => {

      if (pod_count.length > 0 && this.pod_count.length > 0) {
        this.pod_count.filter(item => item.metric.cluster === cluster)[0].values.push(pod_count[0].values[0])
      }
      if (service_count.length > 0 && this.service_count.length > 0) {
        this.service_count.filter(item => item.metric.cluster === cluster)[0].values.push(service_count[0].values[0])
      }
      if (deployment_count.length > 0 && this.deployment_count.length > 0) {
        this.deployment_count.filter(item => item.metric.cluster === cluster)[0].values.push(deployment_count[0].values[0])
      }
      if (cronjob_count.length > 0 && this.cronjob_count.length > 0) {
        this.cronjob_count.filter(item => item.metric.cluster === cluster)[0].values.push(cronjob_count[0].values[0])
      }
      if (job_count.length > 0 && this.job_count.length > 0) {
        this.job_count.filter(item => item.metric.cluster === cluster)[0].values.push(job_count[0].values[0])
      }
      if (pv_count.length > 0 && this.pv_count.length > 0) {
        this.pv_count.filter(item => item.metric.cluster === cluster)[0].values.push(pv_count[0].values[0])
      }
      if (pvc_count.length > 0 && this.pvc_count.length > 0) {
        this.pvc_count.filter(item => item.metric.cluster === cluster)[0].values.push(pvc_count[0].values[0])
      }
      if (namespace_count.length > 0 && this.namespace_count.length > 0) {
        this.namespace_count.filter(item => item.metric.cluster === cluster)[0].values.push(namespace_count[0].values[0])
      }
    });
  }

function TransferMemoView({transfer}) {
    const [value, setValue] = useState(''),
        [type, setType] = useState(!transfer.memo ? 'none' : transfer.memo.type)

    useEffect(() => {
        let value = transfer?.memo?.value || ''
        if (value instanceof Buffer) {
            value = value.toString('hex')
        }
        setValue(value)
        setType(transfer?.memo?.type || 'none')
    }, [transfer?.memo])

    function setMemoType(type) {
        setType(type)
        setMemo(type, value)
    }

    function setMemoValue(e) {
        const {value} = e.target
        setValue(value)
        setMemo(type, value)
    }

    function setMemo(type, value) {
        runInAction(() => {
            if (!value || type === 'none') {
                transfer.memo = null
                transfer.invalidMemo = false
            } else {
                try {
                    transfer.memo = new Memo(type, value.trim())
                    transfer.invalidMemo = false
                } catch (e) {
                    transfer.invalidMemo = true
                }
            }
        })
    }

    return <div>
        Transaction memo: <Dropdown options={memoTypes} value={type} onChange={setMemoType}/>
        <span className="dimmed"> (optional)</span>
        {type !== 'none' && <div>
            <input type="text" value={value} onChange={setMemoValue} placeholder={getPlaceholder(type)}/>
        </div>}
    </div>
}

async real_physical_request(interval, step, cluster, metric, kind) {
    const res5s = await this.clusterApi.cluster_api(interval, step, cluster, metric, kind);

    let cpu_util = res5s.items.cpu_util
    let cpu_usage = res5s.items.cpu_usage
    let cpu_total = res5s.items.cpu_total
    let memory_util = res5s.items.memory_util
    let memory_usage = res5s.items.memory_usage
    let memory_total = res5s.items.memory_total
    let disk_util = res5s.items.disk_util
    let disk_usage = res5s.items.disk_usage
    let disk_total = res5s.items.disk_total

    runInAction(() => {
      if (this.cpu_util !== undefined && cpu_util.length > 0 && this.cpu_util.length > 0) {
        this.cpu_util.filter(item => item.metric.cluster === cluster)[0].values.push(cpu_util[0].values[0])
      }
      if (this.cpu_usage !== undefined && cpu_usage.length > 0 && this.cpu_usage.length > 0) {
        this.cpu_usage.filter(item => item.metric.cluster === cluster)[0].values.push(cpu_usage[0].values[0])
      }
      if (this.cpu_total !== undefined && cpu_total.length > 0 && this.cpu_total.length > 0) {
        this.cpu_total.filter(item => item.metric.cluster === cluster)[0].values.push(cpu_total[0].values[0])
      }
      if (this.memory_util !== undefined && memory_util.length > 0 && this.memory_util.length > 0) {
        this.memory_util.filter(item => item.metric.cluster === cluster)[0].values.push(memory_util[0].values[0])
      }
      if (this.memory_usage !== undefined && memory_usage.length > 0 && this.memory_usage.length > 0) {
        this.memory_usage.filter(item => item.metric.cluster === cluster)[0].values.push(memory_usage[0].values[0])
      }
      if (this.memory_total !== undefined && memory_total.length > 0 && this.memory_total.length > 0) {
        this.memory_total.filter(item => item.metric.cluster === cluster)[0].values.push(memory_total[0].values[0])
      }
      if (this.disk_util !== undefined && disk_util.length > 0 && this.disk_util.length > 0) {
        this.disk_util.filter(item => item.metric.cluster === cluster)[0].values.push(disk_util[0].values[0])
      }
      if (this.disk_usage !== undefined && disk_usage.length > 0 && this.disk_usage.length > 0) {
        this.disk_usage.filter(item => item.metric.cluster === cluster)[0].values.push(disk_usage[0].values[0])
      }
      if (this.disk_total !== undefined && disk_total.length > 0 && this.disk_total.length > 0) {
        this.disk_total.filter(item => item.metric.cluster === cluster)[0].values.push(disk_total[0].values[0])
      }
    });
  }

/**
     * Request action authorization from the user.
     * @param {Account} account - Current account to obtain credentials
     * @param {Boolean} [forceCredentialsRequest] - Ensures password prompt in security-critical cases
     * @return {Promise<Credentials>}
     */
    requestAuthorization(account, forceCredentialsRequest = false) {
        const session = this.sessions[account.id]
        if (session) return Promise.resolve(session.credentials)

        return getCredentialsFromExtensionStorage(account.id)
            .catch(e => {
                e && console.error(e)
            })
            .then(encryptionKey => {
                if (encryptionKey) return Credentials.create({account, encryptionKey})
                //no corresponding key found in extension storage - show interactive user request prompt
                return new Promise((resolve, reject) => {
                    this.credentialsRequestCallback = {resolve, reject}
                    this.account = account
                    runInAction(() => {
                        this.dialogOpen = true
                    })
                })
                    .then(credentials => {
                        try {
                            credentials.account.requestAccountSecret(credentials)
                            saveCredentialsInExtensionStorage(credentials)
                            //temporary store session locally
                            if (account.sessionTimeout !== 0) {
                                this.sessions[account.id] = {
                                    credentials,
                                    expires: new Date().getTime() + (account.sessionTimeout || defaultSessionTimeout) * 1000
                                }
                            }
                        } catch (e) {
                            return Promise.reject(standardErrors.invalidPassword)
                        }
                        this.reset()
                        return credentials
                    })
                    .catch(e => {
                        console.error(e)
                        this.reset()
                        return Promise.reject(e)
                    })
            })
    }

export default function (type, projectId, versionOptionDataSet) {
  const setSelectedVersion = (JSONData) => {
    if (type === 'exist') {
      return JSON.parse(JSONData).map((item) => ({
        ...item,
        allAppServiceVersions: item.appServiceVersions instanceof Array ? item.appServiceVersions : [],
      }));
    }
    return JSON.parse(JSONData).list.map((item) => ({
      ...item,
      allAppServiceVersions: item.allAppServiceVersions instanceof Array ? item.allAppServiceVersions.map(v => ({ ...v, id: v.id.toString() })) : [],
    }));
  };

  const toggleVersionObjRequired = ({ record }) => ({
    required: type === 'exist',
  });

  return {
    dataKey: null,
    autoQuery: false,
    // autoCreate: true,
    paging: false,
    selection: type === 'new' ? 'multiple' : false,
    transport: {
      read: ({ data: { applicationId, versionId } }) => ({
        url: type === 'exist' ? `iam/choerodon/v1/projects/${projectId}/applications/${applicationId}/versions/${versionId}/svc_versions` : `iam/choerodon/v1/projects/${projectId}/applications/${applicationId}/services`,
        method: 'get',
        data: {},
        transformResponse: (data) => setSelectedVersion(data),
      }),
    },
    queryFields: [
      { name: 'versionObj', type: 'object', label: '应用版本', textField: 'version', valueField: 'id', options: versionOptionDataSet, dynamicProps: toggleVersionObjRequired },
      { name: 'applicationId', type: 'string', bind: 'versionObj.applicationId' },
      { name: 'versionId', type: 'string', bind: 'versionObj.id' },
      { name: 'versionName', type: 'string', bind: 'versionObj.version' },
    ],
    fields: [
      { name: 'name', type: 'string', label: '应用服务' },
      {
        name: 'appServiceVersions',
        type: 'object',
        label: '应用服务版本',
        dynamicProps: ({ record }) => ({
          options: new DataSet({
            paging: false,
            data: record.get('allAppServiceVersions'),
            selection: 'single',
          }),
        }),
        textField: 'version',
        valueField: 'id',
      },
    ],
    events: {
      load: ({ dataSet }) => {
        runInAction(() => {
          dataSet.forEach((item) => {
            item.set('appServiceVersions', item.get('allAppServiceVersions')[0]);
            if (type === 'new') {
              if (!item.get('allAppServiceVersions') || !item.get('allAppServiceVersions').length) {
                item.selectable = false;
              } else {
                dataSet.select(item);
              }
            }
          });
        });
      },
    },
  };
}

checkCache() {
    const userProtest = getLocalStorage('1km_current_protest');
    if (userProtest) {
      runInAction(() => {
        this.userCurrentProtest = userProtest;
      });
    }
  }

//예외처리 전부 필요. 각 메트릭 요청을 보냈지만 메트릭이 안오는 경우도 발생할 수 있음.

  async physical_request(interval, step, cluster, metric, kind) {
    const res = await this.clusterApi.cluster_api(interval, step, cluster, metric, kind);
    runInAction(() => {
      if (cluster === "all") {
        this.cluster_res = res
        this.cpu_util = this.cluster_res.items.cpu_util
        this.cpu_usage = this.cluster_res.items.cpu_usage
        this.cpu_total = this.cluster_res.items.cpu_total
        this.memory_util = this.cluster_res.items.memory_util
        this.memory_usage = this.cluster_res.items.memory_usage
        this.memory_total = this.cluster_res.items.memory_total
        this.disk_util = this.cluster_res.items.disk_util
        this.disk_usage = this.cluster_res.items.disk_usage
        this.disk_total = this.cluster_res.items.disk_total
      }
      else {
        this.cluster_res = res
        console.log(this.cpu_util)
        if (this.cpu_util !== undefined && this.cpu_util.filter(item => item.metric.cluster === cluster).length > 0) {
          this.cpu_util.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.cpu_util[0].values
        }
        if (this.cpu_usage !== undefined && this.cpu_usage.filter(item => item.metric.cluster === cluster).length > 0) {
          this.cpu_usage.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.cpu_usage[0].values
        }
        if (this.cpu_total !== undefined && this.cpu_total.filter(item => item.metric.cluster === cluster).length > 0) {
          this.cpu_total.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.cpu_total[0].values
        }
        if (this.memory_util !== undefined && this.memory_util.filter(item => item.metric.cluster === cluster).length > 0) {
          this.memory_util.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.memory_util[0].values
        }
        if (this.memory_usage !== undefined && this.memory_usage.filter(item => item.metric.cluster === cluster).length > 0) {
          this.memory_usage.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.memory_usage[0].values
        }
        if (this.memory_total !== undefined && this.memory_total.filter(item => item.metric.cluster === cluster).length > 0) {
          this.memory_total.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.memory_total[0].values
        }
        if (this.disk_util !== undefined && this.disk_util.filter(item => item.metric.cluster === cluster).length > 0) {
          this.disk_util.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.disk_util[0].values
        }
        if (this.disk_usage !== undefined && this.disk_usage.filter(item => item.metric.cluster === cluster).length > 0) {
          this.disk_usage.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.disk_usage[0].values
        }
        if (this.disk_total !== undefined && this.disk_total.filter(item => item.metric.cluster === cluster).length > 0) {
          this.disk_total.filter(item => item.metric.cluster === cluster)[0].values = this.cluster_res.items.disk_total[0].values
        }
      }
    });
  }

Instance = () => {
  const dataSet = React.useMemo(() => new DataSet(treeDS), []);

  const [code, setCode] = useState(null);

  const [inputValue, setInputValue] = useState('');

  const [isTree, setIsTree] = useState(true);

  const [isRefresh, setIsRefresh] = useState(false);

  // useEffect(() => {
  //   dataSet.addEventListener('load', selectFirst);
  //   return () => {
  //     dataSet.removeEventListener('load', selectFirst);
  //   };
  // });

  const showDetail = (record) => {
    if (record.get('service')) {
      setCode(record.get('instanceId'));
      setIsRefresh(false);
    }
  };

  // const selectFirst = () => {
  //   showDetail(dataSet.data[0]);
  // };

  const getTitle = (record) => {
    const name = record.get('instanceId').toLowerCase();
    const searchValue = inputValue.toLowerCase();
    const index = name.indexOf(searchValue);
    const beforeStr = name.substr(0, index).toLowerCase();
    const afterStr = name.substr(index + searchValue.length).toLowerCase();
    const title =
      index > -1 ? (
        <span className="tree-title" onClick={() => showDetail(record)}>
          {!record.get('service') && (
            <Icon type={record.get('expand') ? 'folder_open2' : 'folder_open'} />
          )}
          {record.get('service') && <Icon type="instance_outline" />}

          {beforeStr}
          <span style={{ color: '#f50' }}>{inputValue.toLowerCase()}</span>
          {afterStr}
        </span>
      ) : (
        <span className="tree-title" onClick={() => showDetail(record)}>
          {!record.get('service') && (
            <Icon type={record.get('expand') ? 'folder_open2' : 'folder_open'} />
          )}
          {record.get('service') && <Icon type="instance_outline" />}
          {name}
        </span>
      );
    return title;
  };

  const nodeRenderer = ({ record }) => {
    return getTitle(record);
  };

  const handleSearch = (e) => {
    setInputValue(e.target.value);
  };

  const handleExpand = () => {
    runInAction(() => {
      dataSet.forEach((record) => {
        if (!record.get('service')) {
          if (record.get('instanceId').toLowerCase().includes(inputValue.toLowerCase())) {
            record.set('expand', true);
          } else {
            record.set('expand', false);
          }
        }
      });
    });
  };

  const getExpand = () => {
    return (
      <div className="c7n-instance-tree">
        <div style={{ display: 'flex' }}>
          <Input
            className="c7n-instance-search"
            style={{ marginBottom: '.1rem', width: '1.9rem', justifyContent: 'flex-start' }}
            prefix={<Icon type="search" style={{ color: 'black' }} />}
            placeholder={intl.get('hadm.instance.view.message.title.input').d('请输入查询条件')}
            onChange={handleSearch}
            value={inputValue}
            onPressEnter={handleExpand}
          />
          <div
            role="none"
            className="hidden-button"
            onClick={() => setIsTree(false)}
            style={{ justifyContent: 'flex-end', marginTop: 5 }}
          >
            <Icon type="navigate_before" />
          </div>
        </div>
        <Tree renderer={nodeRenderer} dataSet={dataSet} defaultExpandParent />
      </div>
    );
  };

  const getUnExpand = () => {
    return (
      <div className="c7n-iam-apitest-bar">
        <div role="none" className="c7n-iam-apitest-bar-button" onClick={() => setIsTree(true)}>
          <Icon type="navigate_next" />
        </div>
        <p role="none" onClick={() => setIsTree(true)}>
          {intl.get('hadm.instance.view.message.title.side').d('实例')}
        </p>
      </div>
    );
  };

  const handleRefresh = async () => {
    await dataSet.query();
    setIsRefresh(true);
  };

  return (
    <>
      <Header title={intl.get('hadm.instance.view.message.title.instance').d('微服务实例')}>
        <Button icon="refresh" onClick={handleRefresh}>
          {intl.get('hzero.common.button.refresh').d('刷新')}
        </Button>
      </Header>
      <Content className="c7n-instance">
        {isTree ? getExpand() : getUnExpand()}
        <div className="c7n-instance-content">
          <Detail id={code} isRefresh={isRefresh} />
        </div>
      </Content>
    </>
  );
}

/**
 * @param {String} network
 * @param {String} destination
 * @param {TransferSettings} transfer
 * @param {Object} [directoryInfo]
 * @return {JSX.Element|boolean|null}
 */
function validate(network, destination, transfer, directoryInfo) {
    if (transfer.destinationFederationAddress && !transfer.destination) return <>
        Failed to resolve recipient public key from the federation address "{transfer.destinationFederationAddress}".
        Please check whether you copied it correctly.
    </>

    if (transfer.invalidMemo) return <>
        Invalid memo format. Please check the value.
    </>

    if (!destination || !transfer.asset[1] || !parseFloat(transfer.amount[0]) || !parseFloat(transfer.amount[1])) return false

    const assetCode = transfer.asset[1].split('-')[0]

    function setCreateDestination() {
        runInAction(() => transfer.createDestination = true)
    }

    function switchToClaimableBalance() {
        transfer.setMode('claimable')
    }

    if (directoryInfo?.tags?.includes('malicious')) return <>
        The payment is blocked because the recipient account has been reported for malicious activity.
    </>

    if (accountLedgerData.nonExisting) return <>
        The account does not exist on the ledger.
        <br/>
        {network === 'testnet' &&
            <a href="#" onClick={createTestnetAccount}>Create a <b>testnet</b> account automatically?</a>}
    </>

    if (!transfer.hasSufficientBalance) return <>
        Insufficient balance on your account. Please adjust the amount of tokens to send.
    </>

    if (transfer.mode === 'claimable') return null

    if (transfer.source !== transfer.destination) { //external payment
        if (transfer.asset[1] !== 'XLM') {
            if (!canReceive(destination, transfer.asset[1])) return <>
                The recipient account does not have a trustline to {assetCode} and cannot
                receive the payment. Yet you still can send tokens using a{' '}
                <a href="#" onClick={switchToClaimableBalance}>claimable balance</a>.
            </>
        } else if (destination.nonExisting && !transfer.createDestination)
            return <>
                The recipient account does not exist on the ledger.
                Would you like to <a href="#" onClick={setCreateDestination}>create it</a> before transferring funds?
            </>

        if ((destination.data || {}) ['config.memo_required'] || directoryInfo?.tags?.includes('memo-required'))
            if (!transfer.memo)
                return <>The recipient account requires a valid transaction memo for incoming payments. Please check
                    deposit
                    instructions and provide a memo, otherwise the payment may be lost.</>
        if (transfer.createDestination && parseInt(transfer.amount[1]) < 1) return <>
            In order to create the recipient account on the ledger, you need to send at least 1 XLM (preferably 2-5 XLM
            to cover future trustlines reserves and transaction fee expenses for the destination account).
        </>
    } else { //self payment
        function setCreateTrustline() {
            runInAction(() => transfer.createTrustline = true)
        }

        if (transfer.asset[0] === transfer.asset[1]) return false

        if (!accountLedgerData.balances[transfer.asset[1]] && !transfer.createTrustline) return <>
            You need to establish a trustline to {assetCode} before trading it.
            Would you like to <a href="#" onClick={setCreateTrustline}>create the trustline</a>?
            This action will temporarily lock 0.5 XLM on your account balance.
        </>
    }

    return null
}