Skip to content

Commit

Permalink
Table page add time
Browse files Browse the repository at this point in the history 
Signed-off-by: Ajay Gupta <ajyg@amazon.com>
  • Loading branch information
Ajay Gupta committed May 24, 2023
1 parent cf178d9 commit dddc16b
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 24 deletions.
46 changes: 26 additions & 20 deletions src/plugins/point_in_time_management/public/components/pit_table/empty_state/empty_state.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,33 @@
import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
import { FormattedMessage } from '@osd/i18n/react';
import React from 'react';
import { History } from 'history';
import { CreateButton } from '../../create_button';

export const EmptyState = () => (
<EuiEmptyPrompt
body={
<p>
<FormattedMessage
id="pointInTimeManagement.pointInTimeDescription"
defaultMessage="No PIT objects have been created."
/>
</p>
}
actions={
<EuiButton iconType="plusInCircle" data-test-subj="createPITBtnInHeader">
<FormattedMessage
id="pointInTimeManagement.header.createPointInTimeButton"
defaultMessage="Create PIT"
/>
</EuiButton>
}
/>
);
interface Props {
history: History;
}

export const EmptyState = ({ history }: Props) => {
console.log('history in empty state', history);
const createButton = (
<CreateButton history={history} isEmptyState={true} dataTestSubj="createPitButton" />
);

return (
<EuiEmptyPrompt
body={
<p>
<FormattedMessage
id="pointInTimeManagement.pointInTimeDescription"
defaultMessage="No PIT objects have been created."
/>
</p>
}
actions={createButton}
/>
);
};

export const NoDataSourceState = () => (
<EuiEmptyPrompt
Expand Down
128 changes: 124 additions & 4 deletions src/plugins/point_in_time_management/public/components/pit_table/pit_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

import React, { useEffect, useState } from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import { History } from 'history';
import { useEffectOnce, useMount } from 'react-use';
import {
EuiButton,
Expand All @@ -25,6 +26,12 @@ import {
EuiConfirmModal,
EuiFormRow,
EuiFieldText,
EuiFieldNumber,
EuiModal,
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiModalBody,
} from '@elastic/eui';
import { i18n } from '@osd/i18n';
import { FormattedMessage } from '@osd/i18n/react';
Expand All @@ -45,7 +52,6 @@ import {
import { EmptyState, NoDataSourceState } from './empty_state';
// import { PageHeader } from './page_header';
import { getServices, Services } from '../../services';
import { PointInTimeCreateForm } from '../create_pit';
import { CreateButton } from '../create_button';
// import { dataSource } from 'src/plugins/data_source/server/saved_objects';

Expand Down Expand Up @@ -81,7 +87,7 @@ const PITTable = (props: RouteComponentProps) => {
http,
} = useOpenSearchDashboards<PointInTimeManagementContext>().services;

const history = props.history;
const history: History = props.history;
const dataSourceProp = props.location && props.location.state;

useMount(() => {
Expand All @@ -99,13 +105,15 @@ const PITTable = (props: RouteComponentProps) => {
const [loading, setLoading] = useState(false);
const [pits, setPits] = useState<PitItem[]>([]);
const [pitsToDelete, setPitsToDelete] = useState<PitItem[]>([]);
const [pitToAddTime, setPitToAddTime] = useState<PitItem[]>([]);
const [selectedPits, setSelectedPits] = useState<PitItem[]>([]);
// const [dashboardPits, setDashboardPits] = useState<DashboardPitItem[]>([]);
const [message, setMessage] = useState(<EmptyState />);
const [message, setMessage] = useState(<EmptyState history={history} />);

const [dataSources, setDataSources] = useState<DataSourceItem[]>([defaultDataSource]);
const [dataSource, setDataSource] = useState('');
const [isModalVisible, setIsModalVisible] = useState(false);
const [isAddTimeModalVisible, setIsAddTimeModalVisible] = useState(false);

useEffectOnce(() => {
fetchDataSources();
Expand Down Expand Up @@ -421,18 +429,129 @@ const PITTable = (props: RouteComponentProps) => {
return <div>{modal}</div>;
};

const AddTimeModal = ({}) => {
const closeModal = () => {
setIsAddTimeModalVisible(false);
};

const [addTimeHr, setAddTimeHr] = useState(0);
const [addTimeMin, setAddTimeMin] = useState(0);
const [addTime, setAddTime] = useState(0);

const onChangeTimeHr = (e) => {
setAddTimeHr(parseInt(e.target.value));
setAddTime(60 * parseInt(e.target.value) + addTimeMin);
};

const onChangeTimeMin = (e) => {
setAddTimeMin(parseInt(e.target.value));
setAddTime(60 * addTimeHr + parseInt(e.target.value));
};

const addTimeToPit = (pit) => {
console.log(addTime);
console.log('add time pit', pit);
const new_keep_alive_proposal = addTime.toString() + 'm';
const ds =
pit.dataSource == ''
? undefined
: dataSources.filter((x) => x.title === pit.dataSource)[0].id;
services
.addPitTime(pit.pit_id, new_keep_alive_proposal, ds)
.then(() => getPits(pit.dataSource))
.catch(() => {
toasts.addDanger(
i18n.translate('pitManagement.pitTable.addTimeError', {
defaultMessage: 'Error while updating PIT object.',
})
);
});
};

let modal;

if (isAddTimeModalVisible) {
const maxTime = moment(pitToAddTime[0].expiry).diff(
moment(pitToAddTime[0].creation_time),
'hours'
);
console.log('maxTime', maxTime);
const maxTimeExceeded = maxTime >= 24;
if (maxTimeExceeded) {
modal = (
<EuiModal title="Maximum time reached" onClose={closeModal}>
<EuiModalHeader>
<EuiModalHeaderTitle>Maximum time reached</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiText>
A PIT can be kept for a maximum of 24 hours. You cannot add more time to this PIT.
To extend the time, configure point_in_time.max_keep_alive or contact your
administrator.
</EuiText>
<EuiSpacer />
</EuiModalBody>
<EuiModalFooter>
<EuiButton onClick={closeModal} fill>
Cancel
</EuiButton>
</EuiModalFooter>
</EuiModal>
);
} else {
modal = (
<EuiConfirmModal
title="Add Time"
onCancel={closeModal}
onConfirm={() => {
closeModal();
addTimeToPit(pitToAddTime[0]);
setPitToAddTime([]);
}}
confirmButtonText="Add time to PIT"
cancelButtonText="Cancel"
>
<EuiText>
Add an amount of time to a PIT. This amount must be greater than the keep_alive time
(x) and cannot exceed the max_keep_alive time (y). You can configure keep_alive on the
PIT object details page.
</EuiText>
<EuiSpacer />
<EuiFormRow>
<EuiFlexGroup>
<EuiFlexItem>
<EuiFieldNumber placeholder="Hour(s)" onChange={onChangeTimeHr} />
</EuiFlexItem>
<EuiFlexItem>
<EuiFieldNumber placeholder="Min(s)" onChange={onChangeTimeMin} />
</EuiFlexItem>
</EuiFlexGroup>
</EuiFormRow>
</EuiConfirmModal>
);
}
}

return <div>{modal}</div>;
};

const displayDelete = (pit) => {
setPitsToDelete([pit]);
setIsModalVisible(true);
};

const displayAddTime = (pit) => {
setPitToAddTime([pit]);
setIsAddTimeModalVisible(true);
};

const actions = [
{
name: 'Add Time',
description: 'Add Time',
icon: 'clock',
type: 'icon',
onClick: fetchDataSources,
onClick: displayAddTime,
},
{
name: 'Configure PIT',
Expand Down Expand Up @@ -733,6 +852,7 @@ const PITTable = (props: RouteComponentProps) => {
selection={selection}
/>
<DeleteModal />
<AddTimeModal />
</EuiPageContentBody>
</EuiPageContent>
{/* <EuiButton onClick={createPointInTime}>Create PIT</EuiButton>
Expand Down

0 comments on commit dddc16b

Please sign in to comment.