@truedat/se 6.1.3 → 6.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/se",
-  "version": "6.1.3",
+  "version": "6.1.5",
   "description": "Truedat Web Search Engine",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "6.1.3",
+    "@truedat/test": "6.1.5",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -86,7 +86,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "6.1.3",
+    "@truedat/core": "6.1.5",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
     "react-intl": "^5.20.10",
@@ -103,5 +103,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "0f50f152b947693a64e36e6eb946fac33978ea8c"
+  "gitHead": "3cbadffa2227cac1cce3c21d8442245082324ac1"
 }

package/src/api.js

@@ -1,3 +1,3 @@
-const API_GLOBAL_SEARCH = "/api/global_search";
-
-export { API_GLOBAL_SEARCH };
+export const API_GLOBAL_SEARCH = "/api/global_search";
+export const API_ELASTIC_INDEXES = "/api/elastic_indexes";
+export const API_ELASTIC_INDEX = "/api/elastic_indexes/:index_name";

package/src/components/DeleteIndexButton.js

@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Button } from "semantic-ui-react";
+import { ConfirmModal } from "@truedat/core/components";
+import { useElasticIndexDelete } from "@truedat/se/hooks/useElasticIndexes";
+
+export default function DeleteIndexButton({ indexName }) {
+  const { formatMessage } = useIntl();
+  const { trigger: deleteIndex, isMutating: loading } =
+    useElasticIndexDelete(indexName);
+  return (
+    <ConfirmModal
+      trigger={
+        <Button
+          disabled={loading}
+          content={formatMessage({
+            id: "elastic_index.delete",
+          })}
+        />
+      }
+      header={formatMessage({
+        id: "elastic_index.delete.confirmation.header",
+      })}
+      content={formatMessage(
+        { id: "elastic_index.delete.confirmation.content" },
+        { index_name: indexName }
+      )}
+      onConfirm={deleteIndex}
+    />
+  );
+}
+DeleteIndexButton.propTypes = {
+  indexName: PropTypes.string,
+};

package/src/components/ElasticIndexes.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import {
+  Header,
+  Icon,
+  Table,
+  Segment,
+  Dimmer,
+  Loader,
+} from "semantic-ui-react";
+import { useElasticIndexes } from "../hooks/useElasticIndexes";
+import DeleteIndexButton from "./DeleteIndexButton";
+
+export default function ElasticIndexes() {
+  const { indexes, loading } = useElasticIndexes();
+
+  return (
+    <Segment>
+      <Header as="h2">
+        <Icon circular name="check" />
+        <Header.Content>
+          <FormattedMessage id="elastic_index.header" />
+          <Header.Subheader>
+            <FormattedMessage id="elastic_index.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <Dimmer.Dimmable dimmed={loading}>
+        <Dimmer active={loading} inverted>
+          <Loader />
+        </Dimmer>
+        {indexes ? (
+          <Table>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell
+                  content={<FormattedMessage id={`elastic_index.key`} />}
+                />
+                <Table.HeaderCell
+                  content={<FormattedMessage id={`elastic_index.alias`} />}
+                />
+                <Table.HeaderCell
+                  content={<FormattedMessage id={`elastic_index.size`} />}
+                />
+                <Table.HeaderCell
+                  content={<FormattedMessage id={`elastic_index.documents`} />}
+                />
+                <Table.HeaderCell
+                  content={<FormattedMessage id={`elastic_index.action`} />}
+                />
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {indexes.map(({ key, alias, size, documents }) => (
+                <Table.Row key={key}>
+                  <Table.Cell content={key} />
+                  <Table.Cell content={alias} />
+                  <Table.Cell content={size} />
+                  <Table.Cell content={documents} />
+                  <Table.Cell content={<DeleteIndexButton indexName={key} />} />
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        ) : null}
+      </Dimmer.Dimmable>
+    </Segment>
+  );
+}

package/src/components/SearchRoutes.js

@@ -5,62 +5,74 @@ import {
   SEARCH_CONCEPTS,
   SEARCH_INGESTS,
   SEARCH_RESULTS,
-  SEARCH_STRUCTURES
+  SEARCH_STRUCTURES,
+  ELASTICINDEXES,
 } from "@truedat/core/routes";
+import { Unauthorized } from "@truedat/core/components";
+import { useAuthorized } from "@truedat/core/hooks";
 import SearchLoader from "./SearchLoader";
 import SearchHome from "./SearchHome";
 import Search from "./Search";
+import ElasticIndexes from "./ElasticIndexes";
 
-export const SearchRoutes = () => (
-  <Route
-    path={SEARCH}
-    render={() => (
-      <>
-        <Route path={SEARCH} component={SearchLoader} exact />
-        <Route path={SEARCH} component={SearchHome} exact />
-        <Route
-          path={SEARCH_RESULTS}
-          exact
-          render={() => (
-            <>
-              <SearchLoader />
-              <Search />
-            </>
-          )}
-        />
-        <Route
-          path={SEARCH_CONCEPTS}
-          exact
-          render={() => (
-            <>
-              <SearchLoader />
-              <Search />
-            </>
-          )}
-        />
-        <Route
-          path={SEARCH_INGESTS}
-          exact
-          render={() => (
-            <>
-              <SearchLoader />
-              <Search />
-            </>
-          )}
-        />
-        <Route
-          path={SEARCH_STRUCTURES}
-          exact
-          render={() => (
-            <>
-              <SearchLoader />
-              <Search />
-            </>
-          )}
-        />
-      </>
-    )}
-  />
-);
+export const SearchRoutes = () => {
+  const authorized = useAuthorized();
+  return (
+    <Route
+      path={SEARCH}
+      render={() => (
+        <>
+          <Route path={SEARCH} component={SearchLoader} exact />
+          <Route path={SEARCH} component={SearchHome} exact />
+          <Route
+            path={SEARCH_RESULTS}
+            exact
+            render={() => (
+              <>
+                <SearchLoader />
+                <Search />
+              </>
+            )}
+          />
+          <Route
+            path={SEARCH_CONCEPTS}
+            exact
+            render={() => (
+              <>
+                <SearchLoader />
+                <Search />
+              </>
+            )}
+          />
+          <Route
+            path={SEARCH_INGESTS}
+            exact
+            render={() => (
+              <>
+                <SearchLoader />
+                <Search />
+              </>
+            )}
+          />
+          <Route
+            path={SEARCH_STRUCTURES}
+            exact
+            render={() => (
+              <>
+                <SearchLoader />
+                <Search />
+              </>
+            )}
+          />
+          <Route
+            path={ELASTICINDEXES}
+            exact
+            render={() => (authorized ? <ElasticIndexes /> : <Unauthorized />)}
+          />
+        </>
+      )}
+    />
+  );
+};
 
 export default SearchRoutes;

package/src/components/__tests__/DeleteIndexButton.spec.js

@@ -0,0 +1,75 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import { useElasticIndexDelete } from "@truedat/se/hooks/useElasticIndexes";
+import DeleteIndexButton from "../DeleteIndexButton";
+import en from "../../messages/en";
+
+jest.mock("@truedat/se/hooks/useElasticIndexes", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/se/hooks/useElasticIndexes"
+  );
+  const trigger = jest.fn();
+  return {
+    __esModule: true,
+    ...originalModule,
+    useElasticIndexDelete: jest.fn(() => ({
+      trigger,
+      isMutating: false,
+    })),
+  };
+});
+
+const renderOpts = {
+  messages: {
+    en: {
+      ...en,
+      "confirmation.yes": "yes",
+      "confirmation.no": "no",
+      "elastic_index.delete": "elastic_index.delete",
+      "elastic_index.delete.confirmation.header":
+        "elastic_index.delete.confirmation.header",
+      "elastic_index.delete.confirmation.content":
+        "elastic_index.delete.confirmation.content",
+    },
+  },
+};
+
+describe("<DeleteIndexButton />", () => {
+  const indexName = "test_index";
+  it("matches the last snapshot", () => {
+    const { container } = render(
+      <DeleteIndexButton indexName={indexName} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("triggers useElasticIndexDelete hook on confirm", () => {
+    const { getByRole } = render(
+      <DeleteIndexButton indexName={indexName} />,
+      renderOpts
+    );
+    userEvent.click(getByRole("button", { name: /delete/i }));
+    userEvent.click(getByRole("button", { name: "modal-affirmative-action" }));
+
+    expect(useElasticIndexDelete).toHaveBeenCalledWith(indexName);
+    const { trigger } = useElasticIndexDelete();
+
+    expect(trigger).toHaveBeenCalled();
+  });
+
+  it("do not triggers useElasticIndexDelete hook on cancel", () => {
+    jest.clearAllMocks();
+    const { getByRole } = render(
+      <DeleteIndexButton indexName={indexName} />,
+      renderOpts
+    );
+    userEvent.click(getByRole("button", { name: /delete/i }));
+    userEvent.click(getByRole("button", { name: "modal-negative-action" }));
+
+    expect(useElasticIndexDelete).toHaveBeenCalledWith(indexName);
+    const { trigger } = useElasticIndexDelete();
+    expect(trigger).toHaveBeenCalledTimes(0);
+  });
+});

package/src/components/__tests__/ElasticIndexes.spec.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ElasticIndexes from "../ElasticIndexes";
+import en from "../../messages/en";
+
+jest.mock("@truedat/se/hooks/useElasticIndexes", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/se/hooks/useElasticIndexes"
+  );
+  return {
+    __esModule: true,
+    ...originalModule,
+    useElasticIndexes: jest.fn(() => ({
+      indexes: [
+        { key: "index_1", alias: "alias_1", size: 123456, documents: 5 },
+        { key: "index_2", alias: "alias_2", size: 987654321, documents: 42 },
+      ],
+    })),
+  };
+});
+
+const renderOpts = {
+  messages: {
+    en: {
+      ...en,
+      "elastic_index.action": "elastic_index.action",
+      "elastic_index.documents": "elastic_index.documents",
+      "elastic_index.size": "elastic_index.size",
+      "elastic_index.alias": "elastic_index.alias",
+      "elastic_index.key": "elastic_index.key",
+      "elastic_index.delete": "elastic_index.delete",
+      "elastic_index.header": "elastic_index.header",
+      "elastic_index.subheader": "elastic_index.subheader",
+      "elastic_index.delete.confirmation.header":
+        "elastic_index.delete.confirmation.header",
+      "elastic_index.delete.confirmation.content":
+        "elastic_index.delete.confirmation.content",
+    },
+  },
+};
+
+describe("<ElasticIndexes />", () => {
+  it("matches the last snapshot", () => {
+    const { container } = render(<ElasticIndexes />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/__tests__/SearchRoutes.spec.js

@@ -2,6 +2,10 @@ import React from "react";
 import { shallow } from "enzyme";
 import { SearchRoutes } from "../SearchRoutes";
 
+jest.mock("@truedat/core/hooks", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
 describe("<SearchRoutes />", () => {
   it("matches the latest snapshot", () => {
     const wrapper = shallow(<SearchRoutes />);

package/src/components/__tests__/__snapshots__/DeleteIndexButton.spec.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DeleteIndexButton /> matches the last snapshot 1`] = `
+<div>
+  <button
+    class="ui button"
+  >
+    elastic_index.delete
+  </button>
+</div>
+`;

package/src/components/__tests__/__snapshots__/ElasticIndexes.spec.js.snap

@@ -0,0 +1,150 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ElasticIndexes /> matches the last snapshot 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <h2
+      class="ui header"
+    >
+      <i
+        aria-hidden="true"
+        class="check circular icon"
+      />
+      <div
+        class="content"
+      >
+        elastic_index.header
+        <div
+          class="sub header"
+        >
+          elastic_index.subheader
+        </div>
+      </div>
+    </h2>
+    <div
+      class="dimmable"
+    >
+      <div
+        class="ui inverted dimmer"
+      >
+        <div
+          class="content"
+        >
+          <div
+            class="ui loader"
+          />
+        </div>
+      </div>
+      <table
+        class="ui table"
+      >
+        <thead
+          class=""
+        >
+          <tr
+            class=""
+          >
+            <th
+              class=""
+            >
+              elastic_index.key
+            </th>
+            <th
+              class=""
+            >
+              elastic_index.alias
+            </th>
+            <th
+              class=""
+            >
+              elastic_index.size
+            </th>
+            <th
+              class=""
+            >
+              elastic_index.documents
+            </th>
+            <th
+              class=""
+            >
+              elastic_index.action
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class=""
+        >
+          <tr
+            class=""
+          >
+            <td
+              class=""
+            >
+              index_1
+            </td>
+            <td
+              class=""
+            >
+              alias_1
+            </td>
+            <td
+              class=""
+            >
+              123456
+            </td>
+            <td
+              class=""
+            >
+              5
+            </td>
+            <td
+              class=""
+            >
+              <button
+                class="ui button"
+              >
+                elastic_index.delete
+              </button>
+            </td>
+          </tr>
+          <tr
+            class=""
+          >
+            <td
+              class=""
+            >
+              index_2
+            </td>
+            <td
+              class=""
+            >
+              alias_2
+            </td>
+            <td
+              class=""
+            >
+              987654321
+            </td>
+            <td
+              class=""
+            >
+              42
+            </td>
+            <td
+              class=""
+            >
+              <button
+                class="ui button"
+              >
+                elastic_index.delete
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;

package/src/components/index.js

@@ -15,5 +15,5 @@ export {
   SearchLoader,
   SearchPagination,
   SearchResults,
-  SearchRoutes
+  SearchRoutes,
 };

package/src/hooks/__tests__/useElasticIndexes.spec.js

@@ -0,0 +1,76 @@
+import _ from "lodash/fp";
+import { compile } from "path-to-regexp";
+import useSWR from "swr";
+import useSWRMutations from "swr/mutation";
+import { renderHook } from "@testing-library/react-hooks";
+import { apiJson, apiJsonDelete, JSON_OPTS } from "@truedat/core/services/api";
+import { API_ELASTIC_INDEXES, API_ELASTIC_INDEX } from "../../api";
+import { useElasticIndexes, useElasticIndexDelete } from "../useElasticIndexes";
+
+jest.mock("swr", () => ({
+  __esModule: true,
+  ...jest.requireActual("swr"),
+  default: jest.fn(() => ({
+    data: {
+      data: {
+        data: [
+          { index_name: "index1", size: 123456 },
+          { index_name: "index2", size: 987654321 },
+        ],
+      },
+    },
+    error: null,
+    mutate: jest.fn(),
+  })),
+}));
+
+jest.mock("swr/mutation", () => ({
+  __esModule: true,
+  ...jest.requireActual("swr/mutation"),
+  default: jest.fn(),
+}));
+
+jest.mock("@truedat/core/services/api", () => ({
+  __esModule: true,
+  ...jest.requireActual("@truedat/core/services/api"),
+  apiJsonDelete: jest.fn(),
+}));
+
+describe("useElasticIndexes", () => {
+  it("useElasticIndexes calls useSWR with correct api route", () => {
+    const { result } = renderHook(() => useElasticIndexes());
+
+    expect(result.current).toMatchObject({
+      indexes: [{ index_name: "index1" }, { index_name: "index2" }],
+      error: null,
+      loading: false,
+    });
+
+    expect(useSWR).toHaveBeenCalledWith(API_ELASTIC_INDEXES, apiJson);
+  });
+  it("useElasticIndexes translates index size to megabytes", () => {
+    const { result } = renderHook(() => useElasticIndexes());
+
+    expect(result.current).toMatchObject({
+      indexes: [
+        { index_name: "index1", size: "0.12" },
+        { index_name: "index2", size: "941.90" },
+      ],
+      error: null,
+      loading: false,
+    });
+
+    expect(useSWR).toHaveBeenCalledWith(API_ELASTIC_INDEXES, apiJson);
+  });
+
+  it("useElasticIndexDelete calls useSWRMutations with correct api route", () => {
+    const index_name = "index_name_1";
+    renderHook(() => useElasticIndexDelete(index_name));
+    const [url, func] = _.last(useSWRMutations.mock.calls);
+
+    expect(url).toBe(compile(API_ELASTIC_INDEX)({ index_name }));
+    func(url);
+
+    expect(apiJsonDelete).toHaveBeenCalledWith(url, JSON_OPTS);
+  });
+});

package/src/hooks/useElasticIndexes.js

@@ -0,0 +1,37 @@
+import { compile } from "path-to-regexp";
+import useSWR, { useSWRConfig } from "swr";
+import useSWRMutations from "swr/mutation";
+import { apiJson, apiJsonDelete, JSON_OPTS } from "@truedat/core/services/api";
+import { API_ELASTIC_INDEXES, API_ELASTIC_INDEX } from "../api";
+
+const sizeInMb = (indexes) => {
+  return indexes
+    ? indexes.map((index) => ({
+        ...index,
+        size: (index.size / (1024 * 1024)).toFixed(2),
+      }))
+    : indexes;
+};
+
+export const useElasticIndexes = () => {
+  const { data, error, mutate } = useSWR(API_ELASTIC_INDEXES, apiJson);
+
+  const indexes = sizeInMb(data?.data?.data);
+
+  return { indexes, error, loading: !error && !data, mutate };
+};
+
+export const useElasticIndexDelete = (index_name) => {
+  const { mutate } = useSWRConfig();
+  const url = compile(API_ELASTIC_INDEX)({ index_name });
+
+  return useSWRMutations(
+    url,
+    (url) => {
+      apiJsonDelete(url, JSON_OPTS);
+    },
+    {
+      onSuccess: () => mutate(API_ELASTIC_INDEXES),
+    }
+  );
+};

package/src/messages/en.js

@@ -15,5 +15,5 @@ export default {
   "tabs.se.all": "All",
   "tabs.se.concepts": "Glossary",
   "tabs.se.structures": "Catalog",
-  "tabs.se.ingests": "Data Request"
+  "tabs.se.ingests": "Data Request",
 };

package/src/messages/es.js

@@ -15,5 +15,5 @@ export default {
   "tabs.se.all": "Todo",
   "tabs.se.concepts": "Glosario",
   "tabs.se.structures": "Catálogo",
-  "tabs.se.ingests": "Peticiones de datos"
+  "tabs.se.ingests": "Peticiones de datos",
 };