render()

in public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx [335:440]
96 lines of code
10 McCabe index (conditional complexity)

  render() {
    const {
      totalManagedIndices,
      from,
      size,
      search,
      sortField,
      sortDirection,
      selectedItems,
      managedIndices,
      loadingManagedIndices,
      showDataStreams,
      isDataStreamColumnVisible,
    } = this.state;

    const filterIsApplied = !!search;
    const page = Math.floor(from / size);

    const pagination: Pagination = {
      pageIndex: page,
      pageSize: size,
      pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS,
      totalItemCount: totalManagedIndices,
    };

    const sorting: EuiTableSortingType<ManagedIndexItem> = {
      sort: {
        direction: sortDirection,
        field: sortField,
      },
    };

    const selection: EuiTableSelectionType<ManagedIndexItem> = {
      onSelectionChange: this.onSelectionChange,
    };

    const isRetryDisabled =
      !selectedItems.length ||
      selectedItems.some((item): boolean => {
        if (!item.managedIndexMetaData) return true;
        const { retryInfo, action } = item.managedIndexMetaData;
        return !(retryInfo && retryInfo.failed) && !(action && action.failed);
      });

    // Editing the rollover alias for a data stream shouldn't be allowed.
    const isDataStreamIndexSelected = selectedItems.some((item) => item.dataStream !== null);

    const actions = [
      {
        text: "Edit rollover alias",
        buttonProps: { disabled: selectedItems.length !== 1 || isDataStreamIndexSelected },
        modal: {
          onClickModal: (onShow: (component: any, props: object) => void) => () =>
            onShow(RolloverAliasModal, {
              index: selectedItems[0].index,
              core: this.context,
            }),
        },
      },
      {
        text: "Remove policy",
        buttonProps: { disabled: !selectedItems.length },
        modal: {
          onClickModal: (onShow: (component: any, props: object) => void) => () =>
            onShow(ConfirmationModal, {
              title: `Remove ${
                selectedItems.length === 1 ? `policy from ${selectedItems[0].index}` : `policies from ${selectedItems.length} indices`
              }`,
              bodyMessage: `Remove ${
                selectedItems.length === 1 ? `policy from ${selectedItems[0].index}` : `policies from ${selectedItems.length} indices`
              } permanently? This action cannot be undone.`,
              actionMessage: "Remove",
              onAction: () => this.onClickRemovePolicy(selectedItems.map((item) => item.index)),
            }),
        },
      },
      {
        text: "Retry policy",
        buttonProps: { disabled: isRetryDisabled },
        modal: {
          onClickModal: (onShow: (component: any, props: object) => void) => () =>
            onShow(RetryModal, {
              retryItems: _.cloneDeep(selectedItems),
            }),
        },
      },
    ];

    return (
      <div style={{ padding: "0px 25px" }}>
        <EuiFlexGroup alignItems="center">
          <EuiFlexItem>
            <EuiTitle size="l">
              <h1>Managed Indices</h1>
            </EuiTitle>
          </EuiFlexItem>
          <EuiFlexItem grow={false}>
            <EuiButton href={`${PLUGIN_NAME}#/change-policy`} data-test-subj="changePolicyButton">
              Change policy
            </EuiButton>
          </EuiFlexItem>
        </EuiFlexGroup>

        <EuiSpacer />

        <ContentPanel actions={<ContentPanelActions actions={actions} />} bodyStyles={{ padding: "initial" }} title="Indices">