link-stack/apps/leafcutter/app/visualizations/[...visualizationID]/page.tsx

/* eslint-disable no-underscore-dangle */
import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next";
import { Client } from "@opensearch-project/opensearch";
import { VisualizationDetail } from "@/app/_components/VisualizationDetail";
import { getEmbedded } from "@/app/_lib/utils";

type VisualizationProps = {
  visualization: any;
  embedded: boolean;
};

const Visualization: NextPage<VisualizationProps> = ({
  visualization,
  embedded,
}) => <VisualizationDetail {...visualization} />;

export default Visualization;

export const getServerSideProps: GetServerSideProps = async (
  context: GetServerSidePropsContext
) => {
  const { visualizationID } = context.query;

  const node = `https://${process.env.OPENSEARCH_USERNAME}:${process.env.OPENSEARCH_PASSWORD}@${process.env.OPENSEARCH_URL}`;
  const client = new Client({
    node,
    ssl: {
      rejectUnauthorized: false,
    },
  });

  const rawResponse = await client.search({
    index: ".kibana_1",
    size: 200,
  });
  const response = rawResponse.body;

  const hits = response.hits.hits.filter(
    // @ts-expect-error
    (hit: any) => hit._id.split(":")[1] === visualizationID[0]
  );
  const hit = hits[0];
  const visualization = {
    id: hit._id.split(":")[1],
    title: hit._source.visualization.title,
    description: hit._source.visualization.description,
    url: `/app/visualize?security_tenant=global#/edit/${
      hit._id.split(":")[1]
    }?embed=true`,
  };

  return { props: { visualization, embedded: getEmbedded(context) } };
};