feat: Pagination component implemented

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/CustomTableStyle.jsx

@@ -19,7 +19,7 @@ export const TableCaptionComponent = styled.div`
 
 export const TableSelectBoxWrapper = styled.span`
     button {
-        margin-left: 50%;
+        margin-left: 30%;
         min-width: 100px;
     }
 `;

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableWrapper.jsx

@@ -1,9 +1,10 @@
 import React, { useState, useContext, useEffect, useCallback, memo } from 'react';
 import ColumnLayout from '@splunk/react-ui/ColumnLayout';
-import update from 'immutability-helper';
-
 import Select from '@splunk/react-ui/Select';
+import update from 'immutability-helper';
 import PropTypes from 'prop-types';
+import Paginator from '@splunk/react-ui/Paginator';
+
 import TableFilter from './TableFilter';
 import CustomTable from './CustomTable';
 import {
@@ -18,7 +19,8 @@ function TableWrapper({ isInput, serviceName }) {
     const [loading, setLoading] = useState(true);
     const [searchText, setSearchText] = useState('');
     const [searchType, setSearchType] = useState('all');
-    const [selecetedPage, setSelectedPage] = useState('10');
+    const [pageSize, setPageSize] = useState(10);
+    const [currentPage, setCurrentPage] = useState(0);
 
     const { rowData, setRowData } = useContext(InputRowContext);
 
@@ -562,21 +564,13 @@ function TableWrapper({ isInput, serviceName }) {
      *
      * @param row {Object} row
      */
-    const changeStatus = (row) => {
+    const changeToggleStatus = (row) => {
         const updatedRowData = update(rowData, {
             [row.serviceName]: { [row.name]: { disabled: { $set: !row.disabled } } },
         });
         setRowData(updatedRowData);
     };
 
-    const handleFilterChange = (e, { value }) => {
-        setSearchText(value);
-    };
-
-    const handleChange = (e, { value }) => {
-        setSearchType(value);
-    };
-
     const getSearchTypeDropdown = () => {
         const unifiedConfigs = getUnifiedConfigs();
         const { services } = unifiedConfigs.pages.inputs;
@@ -616,8 +610,8 @@ function TableWrapper({ isInput, serviceName }) {
     };
 
     const getRowData = () => {
+        let arr = [];
         if (searchType === 'all') {
-            let arr = [];
             Object.keys(rowData).forEach((key) => {
                 let newArr = [];
                 if (searchText && searchText.length) {
@@ -627,75 +621,87 @@ function TableWrapper({ isInput, serviceName }) {
                 }
                 arr = arr.concat(newArr);
             });
-            return arr;
+        } else {
+            arr = findByMatchingValue(rowData[searchType]);
         }
-        return findByMatchingValue(rowData[searchType]);
+        return [arr.slice((currentPage * pageSize), (currentPage + 1) * pageSize), arr.length];
     };
 
-    const filteredData = !loading && getRowData();
+    if (loading) {
+        return <WaitSpinnerWrapper size="large" />
+    }
 
-    return (
-        <>
-            {loading ? (
-                <WaitSpinnerWrapper size="large" />
-            ) : (
-                <>
-                    <ColumnLayout gutter={8}>
-                        <ColumnLayout.Row
+    const [filteredData, totalElement] = getRowData();
+
+    const TableHeaderComponent = () => {
+        return (
+            <ColumnLayout gutter={8}>
+                <ColumnLayout.Row
+                    style={{
+                        borderTop: '1px solid #e1e6eb',
+                        padding: '5px 0px',
+                        marginTop: '25px',
+                    }}
+                >
+                    <ColumnLayout.Column span={4}>
+                        <TableCaptionComponent>
+                            <div>
+                                {totalElement} Input
+                                {totalElement > 1 && <span>s</span>}
+                                <TableSelectBoxWrapper>
+                                    <Select value={pageSize}
+                                        onChange={(e, { value }) => {
+                                            setCurrentPage(0);
+                                            setPageSize(value);
+                                        }}
+                                    >
+                                        <Select.Option key="10" label="10 Per Page" value={10} />
+                                        <Select.Option key="25" label="25 Per Page" value={25} />
+                                        <Select.Option key="50" label="50 Per Page" value={50} />
+                                    </Select>
+                                    <Select value={searchType} onChange={(e, { value }) => {
+                                        setCurrentPage(0);
+                                        setSearchType(value);
+                                    }}>
+                                        {getSearchTypeDropdown()}
+                                    </Select>
+                                </TableSelectBoxWrapper>
+                            </div>
+                        </TableCaptionComponent>
+                    </ColumnLayout.Column>
+                    <ColumnLayout.Column span={4}>
+                        <TableFilter handleChange={(e, { value }) => {
+                            setCurrentPage(0);
+                            setSearchText(value);
+                        }} />
+                    </ColumnLayout.Column>
+                    <ColumnLayout.Column span={4} style={{
+                        'textAlign': 'right'
+                    }}>
+                        <Paginator
+                            onChange={(e, { page }) => setCurrentPage(page - 1)}
+                            current={currentPage + 1}
+                            alwaysShowLastPageLink
+                            totalPages={Math.ceil(totalElement / pageSize)}
                             style={{
-                                borderTop: '1px solid #e1e6eb',
-                                padding: '5px 0px',
-                                marginTop: '25px',
+                                'marginRight': '30px'
                             }}
-                        >
-                            <ColumnLayout.Column span={4}>
-                                <TableCaptionComponent>
-                                    <div>
-                                        {filteredData.length} Input
-                                        {filteredData.length > 1 && <span>s</span>}
-                                        <TableSelectBoxWrapper>
-                                            <Select
-                                                value={selecetedPage}
-                                                onChange={(e, { value }) => setSelectedPage(value)}
-                                            >
-                                                <Select.Option
-                                                    key="10"
-                                                    label="10 Per Page"
-                                                    value="10"
-                                                />
-                                                <Select.Option
-                                                    key="25"
-                                                    label="25 Per Page"
-                                                    value="25"
-                                                />
-                                                <Select.Option
-                                                    key="50"
-                                                    label="50 Per Page"
-                                                    value="50"
-                                                />
-                                            </Select>
-                                            <Select value={searchType} onChange={handleChange}>
-                                                {getSearchTypeDropdown()}
-                                            </Select>
-                                        </TableSelectBoxWrapper>
-                                    </div>
-                                </TableCaptionComponent>
-                            </ColumnLayout.Column>
-                            <ColumnLayout.Column span={4}>
-                                <TableFilter handleChange={handleFilterChange} />
-                            </ColumnLayout.Column>
-                            <ColumnLayout.Column span={4} />
-                        </ColumnLayout.Row>
-                    </ColumnLayout>
+                        />
+                    </ColumnLayout.Column>
+                </ColumnLayout.Row>
+            </ColumnLayout>
+        );
+    }
 
-                    <CustomTable
-                        isInput={isInput}
-                        serviceName={serviceName}
-                        data={filteredData}
-                        handleToggleActionClick={(row) => changeStatus(row)}
-                    />
-                </>
-            )}
+    return (
+        <>
+            <TableHeaderComponent />
+            <CustomTable
+                isInput={isInput}
+                serviceName={serviceName}
+                data={filteredData}
+                handleToggleActionClick={(row) => changeToggleStatus(row)}
+            />
         </>
     );
 }

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/EntryPageStyle.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { variables, mixins } from '@splunk/themes';
+import { defaultTheme } from '@splunk/splunk-utils/themes';
 
 const StyledContainer = styled.div`
     ${mixins.reset('inline')};
@@ -15,4 +16,26 @@ const StyledGreeting = styled.div`
     font-size: ${variables.fontSizeXXLarge};
 `;
 
-export { StyledContainer, StyledGreeting };
+const defaultThemeSplunkThemeProviderMap = {
+    enterprise: {
+        family: 'enterprise',
+        colorScheme: 'light',
+        density: 'comfortable',
+    },
+    enterpriseDark: {
+        family: 'enterprise',
+        colorScheme: 'dark',
+        density: 'comfortable',
+    },
+    lite: {
+        family: 'enterprise',
+        colorScheme: 'light',
+        density: 'comfortable',
+    },
+};
+
+const ThemeProviderSettings =
+    defaultThemeSplunkThemeProviderMap[defaultTheme()] ||
+    defaultThemeSplunkThemeProviderMap.enterprise;
+
+export { StyledContainer, StyledGreeting, ThemeProviderSettings };

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPage.jsx

@@ -1,9 +1,11 @@
 import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import { _ } from '@splunk/ui-utils/i18n';
 
 import { getUnifiedConfigs } from '../../util/util';
 import { TitleComponent, SubTitleComponent } from './InputPageStyle';
 import TableWrapper from '../../components/table/TableWrapper';
+import { InputRowContextProvider } from '../../context/InputRowContext';
 
 function InputPage({ isInput, serviceName }) {
 
@@ -20,12 +22,16 @@ function InputPage({ isInput, serviceName }) {
         <>
             <TitleComponent>{title}</TitleComponent>
             <SubTitleComponent>{description}</SubTitleComponent>
-            <TableWrapper
-                isInput={isInput}
-                serviceName={serviceName}
-            />
+            <InputRowContextProvider value={null}>
+                <TableWrapper isInput={isInput} serviceName={serviceName} />
+            </InputRowContextProvider>
         </>
     );
 }
 
+InputPage.propTypes = {
+    isInput: PropTypes.bool,
+    serviceName: PropTypes.string.isRequired,
+};
+
 export default InputPage;

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx

@@ -1,66 +1,51 @@
 import React from 'react';
 import layout from '@splunk/react-page';
 import { SplunkThemeProvider } from '@splunk/themes';
-import { defaultTheme } from '@splunk/splunk-utils/themes';
 
-import { StyledContainer } from './EntryPageStyle';
+import { StyledContainer, ThemeProviderSettings } from './EntryPageStyle';
 import ConfigManager from '../util/configManager';
 import InputPage from './Input/InputPage';
 import ConfigurationPage from './Configuration/ConfigurationPage';
-import { InputRowContextProvider } from '../context/InputRowContext';
 
-const defaultThemeSplunkThemeProviderMap = {
-    enterprise: {
-        family: 'enterprise',
-        colorScheme: 'light',
-        density: 'comfortable',
-    },
-    enterpriseDark: {
-        family: 'enterprise',
-        colorScheme: 'dark',
-        density: 'comfortable',
-    },
-    lite: {
-        family: 'enterprise',
-        colorScheme: 'light',
-        density: 'comfortable',
-    },
+// Take in a component as argument WrappedComponent
+function higherOrderComponent(WrappedComponent) {
+    // And return another component
+    // eslint-disable-next-line react/prefer-stateless-function
+    class HOC extends React.Component {
+
+        render() {
+            return (
+                <SplunkThemeProvider {...ThemeProviderSettings}>
+                    <StyledContainer>
+                        <ConfigManager>
+                            {({ loading, appData }) => {
+                                return !loading && appData && <WrappedComponent {...this.props} />
+                            }}
+                        </ConfigManager>
+                    </StyledContainer>
+                </SplunkThemeProvider>
+            )
+        }
+    }
+    return HOC;
 };
 
-const themeProviderSettings =
-    defaultThemeSplunkThemeProviderMap[defaultTheme()] ||
-    defaultThemeSplunkThemeProviderMap.enterprise;
+// Create a new component
+const InputPageComponent = higherOrderComponent(InputPage);
+const ConfigurationPageComponent = higherOrderComponent(ConfigurationPage);
 
 const url = window.location.pathname;
 const urlParts = url.substring(1).split('/');
 const page = urlParts[urlParts.length - 1];
 
 if (page === 'inputs') {
     layout(
-        <InputRowContextProvider value={null}>
-            <SplunkThemeProvider {...themeProviderSettings}>
-                <StyledContainer>
-                    <ConfigManager>
-                        {({ loading, appData }) => {
-                            return !loading && appData && <InputPage isInput serviceName="" />
-                        }}
-                    </ConfigManager>
-                </StyledContainer>
-            </SplunkThemeProvider>
-        </InputRowContextProvider>,
+        <InputPageComponent isInput serviceName="" />,
         { pageTitle: 'Inputs' }
     );
 } else if (page === 'configuration') {
     layout(
-        <SplunkThemeProvider {...themeProviderSettings}>
-            <StyledContainer>
-                <ConfigManager>
-                    {({ loading, appData }) => {
-                        return !loading && appData && <ConfigurationPage />
-                    }}
-                </ConfigManager>
-            </StyledContainer>
-        </SplunkThemeProvider>,
+        <ConfigurationPageComponent />,
         { pageTitle: 'Configuration' }
     );
 }