feat(dashboard): change graphs from echarts to recharts

apps/console/src/app/[entity]/dashboard/activity/page.tsx

@@ -0,0 +1,21 @@
+import { Metadata } from "next";
+
+import { generateNextMetaBase } from "@instill-ai/toolkit/server";
+
+import ActivityRender from "./render";
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: "Instill Core | Activity Dashboard",
+    metadataBase: generateNextMetaBase({
+      defaultBase: "http://localhost:3000",
+    }),
+    openGraph: {
+      images: ["/instill-open-graph.png"],
+    },
+  };
+}
+
+export default function ActivityPage() {
+  return <ActivityRender />;
+}

apps/console/src/app/[entity]/dashboard/activity/render.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  AppTopbar,
+  DashboardActivityPageMainView,
+  NamespaceSwitch,
+  PageBase,
+} from "@instill-ai/toolkit";
+
+import { useAppAccessToken } from "~/lib/use-app-access-token";
+import { useAppTrackToken } from "~/lib/useAppTrackToken";
+
+export default function ActivityRender() {
+  useAppAccessToken();
+  useAppTrackToken({ enabled: true });
+
+  return (
+    <PageBase>
+      <AppTopbar namespaceSwitch={<NamespaceSwitch />} />
+      <PageBase.Container>
+        <PageBase.Content contentPadding="p-8">
+          <DashboardActivityPageMainView />
+        </PageBase.Content>
+      </PageBase.Container>
+    </PageBase>
+  );
+}

apps/console/src/app/[entity]/dashboard/cost/model/page.tsx

@@ -0,0 +1,21 @@
+import { Metadata } from "next";
+
+import { generateNextMetaBase } from "@instill-ai/toolkit/server";
+
+import CostPipelineRender from "./render";
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: "Instill Core | Pipeline Cost Dashboard",
+    metadataBase: generateNextMetaBase({
+      defaultBase: "http://localhost:3000",
+    }),
+    openGraph: {
+      images: ["/instill-open-graph.png"],
+    },
+  };
+}
+
+export default function CostPipelinePage() {
+  return <CostPipelineRender />;
+}

apps/console/src/app/[entity]/dashboard/cost/model/render.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  AppTopbar,
+  DashboardCostModelPageMainView,
+  NamespaceSwitch,
+  PageBase,
+} from "@instill-ai/toolkit";
+
+import { useAppAccessToken } from "~/lib/use-app-access-token";
+import { useAppTrackToken } from "~/lib/useAppTrackToken";
+
+export default function CostModelRender() {
+  useAppAccessToken();
+  useAppTrackToken({ enabled: true });
+
+  return (
+    <PageBase>
+      <AppTopbar namespaceSwitch={<NamespaceSwitch />} />
+      <PageBase.Container>
+        <PageBase.Content contentPadding="p-8">
+          <DashboardCostModelPageMainView />
+        </PageBase.Content>
+      </PageBase.Container>
+    </PageBase>
+  );
+}

apps/console/src/app/[entity]/dashboard/cost/page.tsx

@@ -0,0 +1,15 @@
+import { redirect } from "next/navigation";
+
+type RedirectionDashboardCostPageProps = {
+  params: { id: string; entity: string };
+};
+
+const RedirectionDashboardCostPage = ({
+  params,
+}: RedirectionDashboardCostPageProps) => {
+  const { entity } = params;
+
+  return redirect(`/${entity}/dashboard/cost/pipeline`);
+};
+
+export default RedirectionDashboardCostPage;

apps/console/src/app/[entity]/dashboard/cost/pipeline/page.tsx

@@ -0,0 +1,21 @@
+import { Metadata } from "next";
+
+import { generateNextMetaBase } from "@instill-ai/toolkit/server";
+
+import CostModelRender from "./render";
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: "Instill Core | Model Cost Dashboard",
+    metadataBase: generateNextMetaBase({
+      defaultBase: "http://localhost:3000",
+    }),
+    openGraph: {
+      images: ["/instill-open-graph.png"],
+    },
+  };
+}
+
+export default function CostModelPage() {
+  return <CostModelRender />;
+}

apps/console/src/app/[entity]/dashboard/cost/pipeline/render.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  AppTopbar,
+  DashboardCostPipelinePageMainView,
+  NamespaceSwitch,
+  PageBase,
+} from "@instill-ai/toolkit";
+
+import { useAppAccessToken } from "~/lib/use-app-access-token";
+import { useAppTrackToken } from "~/lib/useAppTrackToken";
+
+export default function CostPipelineRender() {
+  useAppAccessToken();
+  useAppTrackToken({ enabled: true });
+
+  return (
+    <PageBase>
+      <AppTopbar namespaceSwitch={<NamespaceSwitch />} />
+      <PageBase.Container>
+        <PageBase.Content contentPadding="p-8">
+          <DashboardCostPipelinePageMainView />
+        </PageBase.Content>
+      </PageBase.Container>
+    </PageBase>
+  );
+}

apps/console/src/app/[entity]/dashboard/page.tsx

@@ -1,9 +1,15 @@
 import { redirect } from "next/navigation";
 
-type Props = {
-  params: { entity: string };
+type RedirectionDashboardPageProps = {
+  params: { id: string; entity: string };
 };
 
-export default async function Page({ params }: Props) {
-  redirect(`/${params.entity}/dashboard/pipeline`);
-}
+const RedirectionDashboardPage = ({
+  params,
+}: RedirectionDashboardPageProps) => {
+  const { entity } = params;
+
+  return redirect(`/${entity}/dashboard/activity`);
+};
+
+export default RedirectionDashboardPage;

packages/sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instill-sdk",
-  "version": "0.11.0-rc.28",
+  "version": "0.11.0-rc.37",
   "description": "Instill AI's Typescript SDK",
   "repository": "https://github.com/instill-ai/typescript-sdk.git",
   "bugs": "https://github.com/instill-ai/community/issues",

packages/sdk/src/core/metric/MetricClient.ts

@@ -1,7 +1,14 @@
-import { getQueryString } from "../../helper";
+import { getInstillAdditionalHeaders, getQueryString } from "../../helper";
 import { APIResource } from "../../main/resource";
+import { PipelineRun } from "../../vdp";
 import {
   ListCreditConsumptionChartRecordResponse,
+  ListModelTriggerCountRequest,
+  ListModelTriggerCountResponse,
+  ListModelTriggerMetricRequest,
+  ListModelTriggerMetricResponse,
+  ListPipelineRunsByRequesterRequest,
+  ListPipelineRunsByRequesterResponse,
   ListPipelineTriggerComputationTimeChartsRequest,
   ListPipelineTriggerComputationTimeChartsResponse,
   ListPipelineTriggerMetricRequest,
@@ -15,20 +22,20 @@ import {
 
 export class MetricClient extends APIResource {
   async listInstillCreditConsumptionTimeChart({
-    owner,
+    namespaceId,
     start,
     stop,
     aggregationWindow,
   }: {
-    owner: string;
+    namespaceId: string;
     start?: string;
     stop?: string;
     aggregationWindow?: string;
   }) {
     try {
       const queryString = getQueryString({
         baseURL: `/metrics/credit/charts`,
-        owner,
+        namespaceId,
         start: start ?? undefined,
         stop: stop ?? undefined,
         aggregationWindow: aggregationWindow ?? undefined,
@@ -45,6 +52,129 @@ export class MetricClient extends APIResource {
     }
   }
 
+  async listModelTriggerMetric(
+    props: ListModelTriggerMetricRequest & {
+      enablePagination?: boolean;
+    },
+  ) {
+    const {
+      pageSize,
+      page,
+      filter,
+      enablePagination,
+      requesterId,
+      requesterUid,
+      start,
+    } = props;
+    const additionalHeaders = getInstillAdditionalHeaders({
+      requesterUid,
+    });
+
+    try {
+      const queryString = getQueryString({
+        baseURL: `/model-runs/query-charts`,
+        pageSize,
+        page,
+        filter,
+        requesterId,
+        start,
+      });
+
+      const response = await this._client.get<ListModelTriggerMetricResponse>(
+        queryString,
+        {
+          additionalHeaders,
+        },
+      );
+
+      if (enablePagination) {
+        return Promise.resolve(response);
+      }
+
+      return Promise.resolve(response);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  }
+
+  async listModelTriggerCount(
+    request: ListModelTriggerCountRequest,
+  ): Promise<ListModelTriggerCountResponse> {
+    const { requesterId, start, stop } = request;
+
+    if (!requesterId) {
+      return Promise.reject(new Error("requesterId is required"));
+    }
+
+    try {
+      const queryString = getQueryString({
+        baseURL: `/model-runs/count?`,
+        requesterId,
+        start: start ?? undefined,
+        stop: stop ?? undefined,
+      });
+
+      const data =
+        await this._client.get<ListModelTriggerCountResponse>(queryString);
+
+      return Promise.resolve(data);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  }
+
+  async listPipelineRunsByRequester(
+    props: ListPipelineRunsByRequesterRequest & { enablePagination: true },
+  ): Promise<ListPipelineRunsByRequesterResponse>;
+
+  async listPipelineRunsByRequester(
+    props: ListPipelineRunsByRequesterRequest & { enablePagination: false },
+  ): Promise<PipelineRun[]>;
+
+  async listPipelineRunsByRequester(
+    props: ListPipelineRunsByRequesterRequest & { enablePagination?: boolean },
+  ): Promise<ListPipelineRunsByRequesterResponse | PipelineRun[]> {
+    const {
+      pageSize,
+      page,
+      orderBy,
+      enablePagination,
+      requesterUid,
+      requesterId,
+      start,
+    } = props;
+
+    const additionalHeaders = getInstillAdditionalHeaders({
+      requesterUid,
+    });
+
+    try {
+      const queryString = getQueryString({
+        baseURL: `/dashboard/pipelines/runs`,
+        pageSize,
+        page,
+        orderBy,
+        requesterId,
+        start,
+      });
+
+      const data = await this._client.get<ListPipelineRunsByRequesterResponse>(
+        queryString,
+        {
+          additionalHeaders,
+        },
+      );
+
+      if (enablePagination) {
+        return Promise.resolve(data);
+      }
+
+      return Promise.resolve(data.pipelineRuns);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  }
+
   async listPipelineTriggers(
     props: ListPipelineTriggerRequest & {
       enablePagination: true;