setup()

in streampark-console/streampark-console-webapp/src/views/flink/app/components/CustomForm.tsx [36:114]
77 lines of code
2 McCabe index (conditional complexity)

  setup(props, { emit }) {
    const { t } = useI18n();
    const formItemContext = Form.useInjectFormItemContext();
    const triggerChange = (changedValue: Partial<CheckPointFailure>) => {
      emit('updateValue', { ...props.value, ...changedValue });
      formItemContext.onFieldChange();
    };
    const handleCpFailureRateIntervalChange = (value: any) => {
      triggerChange({ cpFailureRateInterval: value });
    };
    const handleCpMaxFailureIntervalChange = (value: any) => {
      // const newNumber = (e.target as any).value;
      triggerChange({ cpMaxFailureInterval: value });
    };
    const handleFailureActionChange = (value: any) => {
      triggerChange({ cpFailureAction: value });
    };
    return () => {
      return (
        <div>
          <Input.Group compact class="!flex">
            <InputNumber
              min={1}
              step={1}
              name="cpFailureRateInterval"
              placeholder={t('flink.app.noteInfo.checkpointFailureRateInterval')}
              allow-clear
              class="!w-260px mr-10px"
              value={props.value?.cpFailureRateInterval}
              onChange={(value: any) => handleCpFailureRateIntervalChange(value)}
            />
            <Button style="width: 70px"> {t('flink.app.noteInfo.minute')} </Button>
            <InputNumber
              style="margin-left: 1%"
              name="cpMaxFailureInterval"
              min={1}
              step={1}
              placeholder={t('flink.app.noteInfo.maxFailuresPerInterval')}
              class="!mb-0 !w-200px"
              value={props.value?.cpMaxFailureInterval}
              onChange={(value: any) => handleCpMaxFailureIntervalChange(value)}
            />

            <Button style="width: 70px"> {t('flink.app.noteInfo.count')} </Button>
            <Select
              name="cpFailureAction"
              style="margin-left: 1%"
              placeholder="trigger action"
              allow-clear
              class="!mb-0 flex-1"
              value={props.value?.cpFailureAction}
              onChange={(e: any) => handleFailureActionChange(e)}
            >
              {cpTriggerAction.map((o) => {
                return (
                  <Select.Option key={o.value}>
                    <Icon
                      icon={
                        o.value === 1 ? 'ant-design:alert-outlined' : 'ant-design:sync-outlined'
                      }
                    />
                    {o.label}
                  </Select.Option>
                );
              })}
            </Select>
          </Input.Group>
          <p class="conf-desc mt-10px">
            <span class="note-info">
              <Tag color="#2db7f5" class="tag-note">
                {t('flink.app.noteInfo.note')}
              </Tag>
              {t('flink.app.noteInfo.checkPointFailureNote')}
            </span>
          </p>
        </div>
      );
    };
  },