/* * Copyright OpenSearch Contributors * SPDX-License-Identifier: Apache-2.0 */ import React, { Component } from "react"; import { EuiButtonEmpty, EuiFlexGrid, EuiFlexItem, EuiFlyout, EuiFlyoutBody, EuiFlyoutFooter, EuiFlyoutHeader, EuiLink, EuiSpacer, EuiText, EuiTitle, } from "@elastic/eui"; import { SnapshotManagementService } from "../../../../services"; import { GetSnapshot } from "../../../../../server/models/interfaces"; import { CoreServicesContext } from "../../../../components/core_services"; import { getErrorMessage } from "../../../../utils/helpers"; import * as H from "history"; import { ROUTES } from "../../../../utils/constants"; import InfoModal from "../../../SnapshotPolicyDetails/components/InfoModal"; import { ModalConsumer } from "../../../../components/Modal"; interface SnapshotFlyoutProps { snapshotId: string; repository: string; snapshotManagementService: SnapshotManagementService; onCloseFlyout: () => void; history: H.History; } interface SnapshotFlyoutState { snapshot: GetSnapshot | null; } export default class SnapshotFlyout extends Component<SnapshotFlyoutProps, SnapshotFlyoutState> { static contextType = CoreServicesContext; constructor(props: SnapshotFlyoutProps) { super(props); this.state = { snapshot: null, }; } async componentDidMount() { const { snapshotId, repository } = this.props; await this.getSnapshot(snapshotId, repository); } getSnapshot = async (snapshotId: string, repository: string) => { const { snapshotManagementService } = this.props; try { const response = await snapshotManagementService.getSnapshot(snapshotId, repository); if (response.ok) { this.setState({ snapshot: response.response }); } } catch (err) { this.context.notifications.toasts.addDanger(getErrorMessage(err, "There was a problem loading the snapshot.")); } }; render() { const { onCloseFlyout, repository } = this.props; const { snapshot } = this.state; const items1 = [ { term: "Snapshot name", value: snapshot?.snapshot }, { term: "Status", value: snapshot?.state }, ]; const items2 = [ { term: "Start time", value: snapshot?.start_time }, { term: "End time", value: snapshot?.end_time }, { term: "Repository", value: repository }, { term: "Policy", value: ( <EuiLink onClick={() => this.props.history.push(`${ROUTES.SNAPSHOT_POLICY_DETAILS}?id=${snapshot?.metadata?.sm_policy}`)}> {snapshot?.metadata?.sm_policy} </EuiLink> ), }, ]; let error; if (snapshot?.failures != null) { error = ( <EuiText size="xs"> <dt>Error details</dt> <dd> <ModalConsumer> {({ onShow }) => <EuiLink onClick={() => onShow(InfoModal, { info: snapshot.failures })}>failures</EuiLink>} </ModalConsumer> </dd> </EuiText> ); } return ( <EuiFlyout ownFocus={false} onClose={onCloseFlyout} maxWidth={600} size="m" hideCloseButton> <EuiFlyoutHeader hasBorder> <EuiTitle size="m"> <h2 id="flyoutTitle">{snapshot?.snapshot}</h2> </EuiTitle> </EuiFlyoutHeader> <EuiFlyoutBody> <EuiFlexGrid columns={2}> {items1.map((item) => ( <EuiFlexItem key={`${item.term}#${item.value}`}> <EuiText size="xs"> <dt>{item.term}</dt> <dd>{item.value}</dd> </EuiText> </EuiFlexItem> ))} </EuiFlexGrid> <EuiSpacer size="m" /> {error} <EuiSpacer size="m" /> <EuiFlexGrid columns={2}> {items2.map((item) => ( <EuiFlexItem key={`${item.term}#${item.value}`}> <EuiText size="xs"> <dt>{item.term}</dt> <dd>{item.value}</dd> </EuiText> </EuiFlexItem> ))} </EuiFlexGrid> <EuiSpacer size="l" /> <EuiText size="xs"> <dt>Indices</dt> <dd>{snapshot?.indices.join(", ")}</dd> </EuiText> </EuiFlyoutBody> <EuiFlyoutFooter> <EuiButtonEmpty onClick={onCloseFlyout}>Close</EuiButtonEmpty> </EuiFlyoutFooter> </EuiFlyout> ); } }