install

 // npm
 npm install @tutorbot/microservice-ui
 // yarn 
 yarn add @tutorbot/microservice-ui

usage

import React from "react";
import { PageDetailProvider } from "components/Page/PageDetail";
import MicroServiceUI from "@tutorbot/microservice-ui";


const getStats = async () => {
    // ...
    return [];
};
const republishFail = async ({topic, subscription}) => {
    // ...
};
const republishError = async ({topic, subscription}) => {
    // ...
};
const cleanAnomaly = async ({topic, subscription}) => {
    // ...
};
const populateMissing = async ({topic, subscription}) => {
    // ...
};
const calculateStats = async () => {
    // ...
};
const getError = async ({topic, subscription}) => {
    // ...
    return [];
};
const getEvent = async (eventId) => {
    // ...
    return {};
};

const googleBoard = "https://app.google.stackdriver.com/dashboards/12119346295116204083?project=valued-bastion-137423&timeDomain=1d";
const googleZone = "europe-west1";
const googleProjectId = "valued-bastion-137423";

export default () => {
    return (
        <MicroServiceUI
            onGetStats={async (...args) => {
                const { list } = await getStats(...args);
                return list;
            }}
            onRepublishFail={republishFail}
            onRepublishError={republishError}
            onCleanAnomaly={cleanAnomaly}
            onPopulateMissing={populateMissing}
            onCalculateStats={calculateStats}
            onGetError={async (...args) => {
                const { list } = await getError(...args);
                return list;
            }}
            onGetEvent={getEvent}
            options={{
                googleBoard,
                googleZone,
                googleProjectId,
            }}
            render={({ title, renderActions, renderSearch, renderLinks, renderList }) => (
                <>
                    <PageDetailProvider
                        title={title}
                        action={renderActions()}
                        content={renderSearch()}
                        extraContent={renderLinks()}
                    />
                    {renderList()}
                </>
            )}
        />
    );
};