Skip to content

Commit

Permalink
feat: finish the index configuration component (#372)
Browse files Browse the repository at this point in the history 
Signed-off-by: suzhou <[email protected]>

Signed-off-by: suzhou <[email protected]>
  • Loading branch information
@SuZhou-Joe
SuZhou-Joe authored Nov 10, 2022
1 parent 9474258 commit 7e717cf
Show file tree
Hide file tree
Showing 3 changed files with 319 additions and 0 deletions.
95 changes: 95 additions & 0 deletions public/containers/IndexDetail/IndexDetail.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from "react";
import { render, waitFor } from "@testing-library/react";
import IndexDetail, { IIndexDetailProps } from "./index";
import { browserServicesMock, coreServicesMock } from "../../../test/mocks";
import { ServicesContext } from "../../services";
import { CoreServicesContext } from "../../components/core_services";
import { CatIndex } from "../../../server/models/interfaces";

browserServicesMock.commonService.apiCaller = jest.fn(
async (payload): Promise<any> => {
if (payload.data?.index?.includes("error_index")) {
return {
ok: false,
error: "error index",
};
}

return {
ok: true,
response: (payload.data.index || []).map(
(index: string): CatIndex => {
return {
index,
"docs.count": "0",
"docs.deleted": "1",
"pri.store.size": "1",
data_stream: "no",
"store.size": "1mb",
rep: "2",
uuid: "1",
health: "green",
pri: "4",
status: "open",
};
}
),
};
}
);

function renderWithServiceAndCore(props: IIndexDetailProps) {
return {
...render(
<CoreServicesContext.Provider value={coreServicesMock}>
<ServicesContext.Provider value={browserServicesMock}>
<IndexDetail {...props} />
</ServicesContext.Provider>
</CoreServicesContext.Provider>
),
};
}

describe("<IndexDetail /> spec", () => {
it("render the component", async () => {
const { container, queryByText } = renderWithServiceAndCore({
indices: ["test"],
children: <>content underneath the table</>,
});

expect(queryByText("children content here")).toBeNull();
await waitFor(() => {
expect(container).toMatchSnapshot();
expect(browserServicesMock.commonService.apiCaller).toBeCalledTimes(1);
expect(browserServicesMock.commonService.apiCaller).toBeCalledWith({
endpoint: "cat.indices",
data: {
index: ["test"],
format: "json",
},
});
});
expect(queryByText("content underneath the table")).not.toBeNull();
});

it("render with error", async () => {
const onGetIndicesDetailMock = jest.fn();
renderWithServiceAndCore({
indices: ["error_index"],
children: <>content underneath the table</>,
onGetIndicesDetail: onGetIndicesDetailMock,
});

await waitFor(() => {
expect(coreServicesMock.notifications.toasts.addDanger).toBeCalledTimes(1);
expect(coreServicesMock.notifications.toasts.addDanger).toBeCalledWith("error index");
expect(onGetIndicesDetailMock).toBeCalledTimes(1);
expect(onGetIndicesDetailMock).toBeCalledWith([]);
});
});
});
156 changes: 156 additions & 0 deletions public/containers/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<IndexDetail /> spec render the component 1`] = `
<div>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
style="padding-left: 0px; padding-right: 0px;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
style="padding: 0px 10px;"
>
<div
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--small"
>
Source index details
</h3>
</div>
</div>
<hr
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
/>
<div
style="padding: 0px 10px;"
>
<div
class="euiBasicTable euiBasicTable-loading"
>
<div>
<div
class="euiTableHeaderMobile"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
/>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
/>
</div>
</div>
<table
class="euiTable euiTable--responsive"
id="some_html_id"
tabindex="-1"
>
<caption
class="euiScreenReaderOnly euiTableCaption"
/>
<thead>
<tr>
<th
class="euiTableHeaderCell"
data-test-subj="tableHeaderCell_index_0"
role="columnheader"
scope="col"
>
<span
class="euiTableCellContent"
>
<span
class="euiTableCellContent__text"
title="Index name"
>
Index name
</span>
</span>
</th>
<th
class="euiTableHeaderCell"
data-test-subj="tableHeaderCell_pri_1"
role="columnheader"
scope="col"
>
<span
class="euiTableCellContent"
>
<span
class="euiTableCellContent__text"
title="Primary shards"
>
Primary shards
</span>
</span>
</th>
<th
class="euiTableHeaderCell"
data-test-subj="tableHeaderCell_rep_2"
role="columnheader"
scope="col"
>
<span
class="euiTableCellContent"
>
<span
class="euiTableCellContent__text"
title="Replica shards"
>
Replica shards
</span>
</span>
</th>
<th
class="euiTableHeaderCell"
data-test-subj="tableHeaderCell_store.size_3"
role="columnheader"
scope="col"
>
<span
class="euiTableCellContent"
>
<span
class="euiTableCellContent__text"
title="Total index size"
>
Total index size
</span>
</span>
</th>
</tr>
</thead>
<tbody>
<tr
class="euiTableRow"
>
<td
class="euiTableRowCell euiTableRowCell--isMobileFullWidth"
colspan="4"
>
<div
class="euiTableCellContent euiTableCellContent--alignCenter"
>
<span
class="euiTableCellContent__text"
>
No items found
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
/>
</div>
</div>
</div>
`;
68 changes: 68 additions & 0 deletions public/containers/IndexDetail/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { EuiBasicTable, EuiSpacer } from "@elastic/eui";
import React, { useContext, useEffect, useState } from "react";
import { CatIndex } from "../../../server/models/interfaces";
import { ContentPanel } from "../../components/ContentPanel";
import { CoreServicesContext } from "../../components/core_services";
import { ServicesContext } from "../../services";

export interface IIndexDetailProps {
indices: string[];
onGetIndicesDetail?: (args: CatIndex[]) => void;
children?: React.ReactChild;
}

export default function IndexDetail(props: IIndexDetailProps) {
const [loading, setLoading] = useState(false);
const [items, setItems] = useState([] as CatIndex[]);
const services = useContext(ServicesContext);
const coreServices = useContext(CoreServicesContext);
useEffect(() => {
(async () => {
setLoading(true);
const result = await services?.commonService.apiCaller<CatIndex[]>({
endpoint: "cat.indices",
data: {
index: props.indices,
format: "json",
},
});
let finalResponse: CatIndex[] = [];
if (result?.ok) {
finalResponse = result.response;
} else {
coreServices?.notifications.toasts.addDanger(result?.error || "");
}
setItems(finalResponse);
props.onGetIndicesDetail && props.onGetIndicesDetail(finalResponse);
setLoading(false);
})();
}, [props.indices, setLoading, setItems, coreServices]);
return (
<ContentPanel title="Source index details" titleSize="s">
<EuiBasicTable
loading={loading}
columns={[
{
name: "Index name",
field: "index",
},
{
name: "Primary shards",
field: "pri",
},
{
name: "Replica shards",
field: "rep",
},
{
name: "Total index size",
field: "store.size",
},
]}
items={items}
/>
<EuiSpacer />
{loading ? null : props.children}
</ContentPanel>
);
}

0 comments on commit 7e717cf

Please sign in to comment.