diff --git a/packages/toolkit/src/components/PipelineRunStateLabel.tsx b/packages/toolkit/src/components/PipelineRunStateLabel.tsx index e81bc69e15..00c2ffc0da 100644 --- a/packages/toolkit/src/components/PipelineRunStateLabel.tsx +++ b/packages/toolkit/src/components/PipelineRunStateLabel.tsx @@ -1,8 +1,8 @@ "use client"; -import { cn } from "@instill-ai/design-system"; +import type { Nullable, PipelineTriggerStatus } from "instill-sdk"; -import type { Nullable, PipelineTriggerStatus } from "../lib"; +import { cn } from "@instill-ai/design-system"; export type PipelineRunStateLabelProps = { state?: Nullable; diff --git a/packages/toolkit/src/components/cells/GeneralStateCell.tsx b/packages/toolkit/src/components/cells/GeneralStateCell.tsx index fde2934ed7..e294efe53d 100644 --- a/packages/toolkit/src/components/cells/GeneralStateCell.tsx +++ b/packages/toolkit/src/components/cells/GeneralStateCell.tsx @@ -1,13 +1,16 @@ "use client"; -import type { ModelState, PipelineReleaseState } from "instill-sdk"; +import type { + ModelState, + Nullable, + PipelineReleaseState, + PipelineTriggerStatus, +} from "instill-sdk"; import { ReactElement } from "react"; import cn from "clsx"; import { Tag } from "@instill-ai/design-system"; -import { Nullable, PipelineTriggerStatus } from "../../lib"; - export type GeneralStateCellProps = { state: ModelState | PipelineReleaseState | PipelineTriggerStatus; width: Nullable; diff --git a/packages/toolkit/src/lib/dashboard/generateChartData.ts b/packages/toolkit/src/lib/dashboard/generateChartData.ts index b0602bf049..b9d2f6b2c7 100644 --- a/packages/toolkit/src/lib/dashboard/generateChartData.ts +++ b/packages/toolkit/src/lib/dashboard/generateChartData.ts @@ -1,10 +1,11 @@ -import { PipelinesChart } from "../vdp-sdk"; +import type { PipelineTriggerChartRecord } from "instill-sdk"; + import { formatDateTime } from "./formatDateTime"; import { getDateRange } from "./getDateRange"; import { sortByDate } from "./sortByDate"; export function generateChartData( - apiResponse: PipelinesChart[], + apiResponse: PipelineTriggerChartRecord[], range: string, ): { xAxis: string[]; yAxis: number[][] } { const pipelineData = apiResponse; diff --git a/packages/toolkit/src/lib/dashboard/getPipelineTriggersSummary.ts b/packages/toolkit/src/lib/dashboard/getPipelineTriggersSummary.ts index 3c899283f4..ff88d45476 100644 --- a/packages/toolkit/src/lib/dashboard/getPipelineTriggersSummary.ts +++ b/packages/toolkit/src/lib/dashboard/getPipelineTriggersSummary.ts @@ -1,9 +1,25 @@ -import { PipelineTriggersStatusSummary, TriggeredPipeline } from "../vdp-sdk"; +import type { + PipelineTriggerStatus, + PipelineTriggerTableRecord, +} from "instill-sdk"; + import { calculatePercentageDelta } from "./calculatePercentageDelta"; +export type PipelineTriggersStatusSummaryItem = { + statusType: PipelineTriggerStatus; + amount: number; + type: "pipeline" | "model"; + delta: number; +}; + +export type PipelineTriggersStatusSummary = { + completed: PipelineTriggersStatusSummaryItem; + errored: PipelineTriggersStatusSummaryItem; +}; + export function getPipelineTriggersSummary( - pipelines: TriggeredPipeline[], - pipelinesPrevious: TriggeredPipeline[], + pipelines: PipelineTriggerTableRecord[], + pipelinesPrevious: PipelineTriggerTableRecord[], ): PipelineTriggersStatusSummary { let pipelineCompleteAmount = 0; let pipelineCompleteAmountPrevious = 0; diff --git a/packages/toolkit/src/lib/dashboard/getTriggersSummary.ts b/packages/toolkit/src/lib/dashboard/getTriggersSummary.ts index c3fa3d3641..7ca894b161 100644 --- a/packages/toolkit/src/lib/dashboard/getTriggersSummary.ts +++ b/packages/toolkit/src/lib/dashboard/getTriggersSummary.ts @@ -1,8 +1,7 @@ -import { - PipelineTriggerRecord, - PipelineTriggersStatusSummary, -} from "../vdp-sdk"; +import type { PipelineTriggerRecord } from "instill-sdk"; + import { calculatePercentageDelta } from "./calculatePercentageDelta"; +import { PipelineTriggersStatusSummary } from "./getPipelineTriggersSummary"; export function getTriggersSummary( triggers: PipelineTriggerRecord[], diff --git a/packages/toolkit/src/lib/dashboard/orderCountsByTriggerTime.ts b/packages/toolkit/src/lib/dashboard/orderCountsByTriggerTime.ts index c254513e98..869affc683 100644 --- a/packages/toolkit/src/lib/dashboard/orderCountsByTriggerTime.ts +++ b/packages/toolkit/src/lib/dashboard/orderCountsByTriggerTime.ts @@ -1,4 +1,7 @@ -import { Count } from "../vdp-sdk"; +export type Count = { + triggerTime: string | Date; + count: number; +}; export function orderCountsByTriggerTime(counts: Count[]): Count[] { const formattedCounts: Count[] = counts.map((count) => { diff --git a/packages/toolkit/src/lib/dashboard/parseTriggerStatusLabel.ts b/packages/toolkit/src/lib/dashboard/parseTriggerStatusLabel.ts index 3f61e8547e..40f21d315b 100644 --- a/packages/toolkit/src/lib/dashboard/parseTriggerStatusLabel.ts +++ b/packages/toolkit/src/lib/dashboard/parseTriggerStatusLabel.ts @@ -1,4 +1,4 @@ -import { PipelineTriggerStatus } from "../vdp-sdk"; +import type { PipelineTriggerStatus } from "instill-sdk"; export function parseTriggerStatusLabel(status: PipelineTriggerStatus) { const convertedStatus = status diff --git a/packages/toolkit/src/lib/dashboard/sortByTriggerTime.ts b/packages/toolkit/src/lib/dashboard/sortByTriggerTime.ts index 79d3c44e27..763288d3f1 100644 --- a/packages/toolkit/src/lib/dashboard/sortByTriggerTime.ts +++ b/packages/toolkit/src/lib/dashboard/sortByTriggerTime.ts @@ -1,4 +1,4 @@ -import { PipelineTriggerRecord } from "../vdp-sdk"; +import type { PipelineTriggerRecord } from "instill-sdk"; export function sortByTriggerTime( data: PipelineTriggerRecord[], diff --git a/packages/toolkit/src/lib/react-query-service/metric/useCreditConsumptionChartRecords.ts b/packages/toolkit/src/lib/react-query-service/metric/useCreditConsumptionChartRecords.ts index b261c300fc..e9b8ba8d77 100644 --- a/packages/toolkit/src/lib/react-query-service/metric/useCreditConsumptionChartRecords.ts +++ b/packages/toolkit/src/lib/react-query-service/metric/useCreditConsumptionChartRecords.ts @@ -1,6 +1,8 @@ +"use client"; + +import type { Nullable } from "instill-sdk"; import { useQuery } from "@tanstack/react-query"; -import { Nullable } from "../../type"; import { getInstillAPIClient } from "../../vdp-sdk"; export function useCreditConsumptionChartRecords({ diff --git a/packages/toolkit/src/lib/react-query-service/metric/usePipelineTriggerComputationTimeCharts.ts b/packages/toolkit/src/lib/react-query-service/metric/usePipelineTriggerComputationTimeCharts.ts index a0eee862cd..4ddeaaeb73 100644 --- a/packages/toolkit/src/lib/react-query-service/metric/usePipelineTriggerComputationTimeCharts.ts +++ b/packages/toolkit/src/lib/react-query-service/metric/usePipelineTriggerComputationTimeCharts.ts @@ -1,7 +1,9 @@ +"use client"; + +import type { Nullable } from "instill-sdk"; import { useQuery } from "@tanstack/react-query"; import { env } from "../../../server"; -import { Nullable } from "../../type"; import { getInstillAPIClient } from "../../vdp-sdk"; export function usePipelineTriggerComputationTimeCharts({ diff --git a/packages/toolkit/src/lib/react-query-service/metric/usePipelineTriggerMetric.ts b/packages/toolkit/src/lib/react-query-service/metric/usePipelineTriggerMetric.ts index 052ac15bd1..f904df0a2e 100644 --- a/packages/toolkit/src/lib/react-query-service/metric/usePipelineTriggerMetric.ts +++ b/packages/toolkit/src/lib/react-query-service/metric/usePipelineTriggerMetric.ts @@ -1,7 +1,9 @@ +"use client"; + +import type { Nullable } from "instill-sdk"; import { useQuery } from "@tanstack/react-query"; import { env } from "../../../server"; -import { Nullable } from "../../type"; import { getInstillAPIClient } from "../../vdp-sdk"; export function usePipelineTriggerMetric({ diff --git a/packages/toolkit/src/lib/react-query-service/metric/usePipelineTriggers.ts b/packages/toolkit/src/lib/react-query-service/metric/usePipelineTriggers.ts index 77d9a561fe..82ed7911c9 100644 --- a/packages/toolkit/src/lib/react-query-service/metric/usePipelineTriggers.ts +++ b/packages/toolkit/src/lib/react-query-service/metric/usePipelineTriggers.ts @@ -1,7 +1,9 @@ +"use client"; + +import type { Nullable } from "instill-sdk"; import { useQuery } from "@tanstack/react-query"; import { env } from "../../../server"; -import { Nullable } from "../../type"; import { getInstillAPIClient } from "../../vdp-sdk"; export function usePipelineTriggers({ diff --git a/packages/toolkit/src/lib/vdp-sdk/index.ts b/packages/toolkit/src/lib/vdp-sdk/index.ts index 6870b4b72f..334e8a984f 100644 --- a/packages/toolkit/src/lib/vdp-sdk/index.ts +++ b/packages/toolkit/src/lib/vdp-sdk/index.ts @@ -4,7 +4,6 @@ import { env } from "../../server"; import { Nullable } from "../type"; export * from "./helper"; -export * from "./metric"; export * from "./model"; export * from "./operation"; export * from "./organization"; diff --git a/packages/toolkit/src/lib/vdp-sdk/metric/credit/index.ts b/packages/toolkit/src/lib/vdp-sdk/metric/credit/index.ts deleted file mode 100644 index 2c1906d369..0000000000 --- a/packages/toolkit/src/lib/vdp-sdk/metric/credit/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./queries"; -export * from "./types"; diff --git a/packages/toolkit/src/lib/vdp-sdk/metric/credit/queries.ts b/packages/toolkit/src/lib/vdp-sdk/metric/credit/queries.ts deleted file mode 100644 index eb916f8f25..0000000000 --- a/packages/toolkit/src/lib/vdp-sdk/metric/credit/queries.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Nullable } from "../../../type"; -import { createInstillAxiosClient, getQueryString } from "../../helper"; -import { CreditConsumptionChartRecord } from "./types"; - -export type ListCreditConsumptionChartRecordResponse = { - creditConsumptionChartRecords: CreditConsumptionChartRecord[]; - totalAmount: number; -}; - -export async function ListCreditConsumptionChartRecord({ - owner, - start, - stop, - aggregationWindow, - accessToken, -}: { - owner: Nullable; - start: Nullable; - stop: Nullable; - aggregationWindow: Nullable; - accessToken: Nullable; -}) { - try { - const client = createInstillAxiosClient(accessToken); - - const queryString = getQueryString({ - baseURL: `/metrics/credit/charts`, - owner: owner ?? undefined, - start: start ?? undefined, - stop: stop ?? undefined, - aggregationWindow: aggregationWindow ?? undefined, - pageSize: null, - nextPageToken: null, - }); - - const { data } = - await client.get(queryString); - - return Promise.resolve(data); - } catch (error) { - return Promise.reject(error); - } -} diff --git a/packages/toolkit/src/lib/vdp-sdk/metric/credit/types.ts b/packages/toolkit/src/lib/vdp-sdk/metric/credit/types.ts deleted file mode 100644 index 589d8b90d4..0000000000 --- a/packages/toolkit/src/lib/vdp-sdk/metric/credit/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -export type CreditConsumptionChartRecord = { - creditOwner: string; - timeBuckets: string[]; - amount: number[]; -}; diff --git a/packages/toolkit/src/lib/vdp-sdk/metric/index.ts b/packages/toolkit/src/lib/vdp-sdk/metric/index.ts deleted file mode 100644 index 7fb63e9c61..0000000000 --- a/packages/toolkit/src/lib/vdp-sdk/metric/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./pipeline"; -export * from "./credit"; diff --git a/packages/toolkit/src/lib/vdp-sdk/metric/pipeline/index.ts b/packages/toolkit/src/lib/vdp-sdk/metric/pipeline/index.ts deleted file mode 100644 index 2c1906d369..0000000000 --- a/packages/toolkit/src/lib/vdp-sdk/metric/pipeline/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./queries"; -export * from "./types"; diff --git a/packages/toolkit/src/lib/vdp-sdk/metric/pipeline/queries.ts b/packages/toolkit/src/lib/vdp-sdk/metric/pipeline/queries.ts deleted file mode 100644 index 54387755d2..0000000000 --- a/packages/toolkit/src/lib/vdp-sdk/metric/pipeline/queries.ts +++ /dev/null @@ -1,142 +0,0 @@ -import { Nullable } from "../../../type"; -import { createInstillAxiosClient, getQueryString } from "../../helper"; -import { - PipelinesChart, - PipelineTriggerRecord, - TriggeredPipeline, -} from "./types"; - -export type ListPipelineTriggerRecordsResponse = { - pipelineTriggerRecords: PipelineTriggerRecord[]; - nextPageToken: string; - totalSize: number; -}; - -export type ListTriggeredPipelinesResponse = { - pipelineTriggerTableRecords: TriggeredPipeline[]; - nextPageToken: string; - totalSize: number; -}; - -export type ListPipelinesChartResponse = { - pipelineTriggerChartRecords: PipelinesChart[]; -}; - -export async function listPipelineTriggerRecordsQuery({ - pageSize, - nextPageToken, - accessToken, - filter, -}: { - pageSize: Nullable; - nextPageToken: Nullable; - accessToken: Nullable; - filter: Nullable; -}) { - try { - const client = createInstillAxiosClient(accessToken); - const triggers: PipelineTriggerRecord[] = []; - - const queryString = getQueryString({ - baseURL: `/metrics/vdp/pipeline/triggers`, - pageSize, - nextPageToken, - filter, - }); - - const { data } = - await client.get(queryString); - - triggers.push(...data.pipelineTriggerRecords); - - if (data.nextPageToken) { - triggers.push( - ...(await listPipelineTriggerRecordsQuery({ - pageSize, - accessToken, - nextPageToken: data.nextPageToken, - filter, - })), - ); - } - - return Promise.resolve(triggers); - } catch (err) { - return Promise.reject(err); - } -} - -export async function listTriggeredPipelineQuery({ - pageSize, - nextPageToken, - accessToken, - filter, -}: { - pageSize: Nullable; - nextPageToken: Nullable; - accessToken: Nullable; - filter: Nullable; -}) { - try { - const client = createInstillAxiosClient(accessToken); - const pipelines: TriggeredPipeline[] = []; - - const queryString = getQueryString({ - baseURL: `/metrics/vdp/pipeline/tables`, - pageSize, - nextPageToken, - filter, - }); - - const { data } = - await client.get(queryString); - - pipelines.push(...data.pipelineTriggerTableRecords); - - if (data.nextPageToken) { - pipelines.push( - ...(await listTriggeredPipelineQuery({ - pageSize, - accessToken, - nextPageToken: data.nextPageToken, - filter, - })), - ); - } - - return Promise.resolve(pipelines); - } catch (err) { - return Promise.reject(err); - } -} - -export async function listTriggeredPipelineChartQuery({ - pageSize, - nextPageToken, - accessToken, - filter, -}: { - pageSize: Nullable; - nextPageToken: Nullable; - accessToken: Nullable; - filter: Nullable; -}) { - try { - const client = createInstillAxiosClient(accessToken); - const pipelinesChart: PipelinesChart[] = []; - - const queryString = getQueryString({ - baseURL: `/metrics/vdp/pipeline/charts`, - pageSize, - nextPageToken, - filter, - }); - - const { data } = await client.get(queryString); - pipelinesChart.push(...data.pipelineTriggerChartRecords); - - return Promise.resolve(pipelinesChart); - } catch (err) { - return Promise.reject(err); - } -} diff --git a/packages/toolkit/src/lib/vdp-sdk/metric/pipeline/types.ts b/packages/toolkit/src/lib/vdp-sdk/metric/pipeline/types.ts deleted file mode 100644 index 6125515ab1..0000000000 --- a/packages/toolkit/src/lib/vdp-sdk/metric/pipeline/types.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { PipelineMode, PipelineReleaseState } from "instill-sdk"; - -export type PipelineTriggerCount = { - pipelineId: string; - pipelineUid: string; - pipelineCompleted: number; - pipelineErrored: number; - watchState: PipelineReleaseState; - counts: Count[]; -}; - -export type TriggeredPipeline = { - pipelineId: string; - pipelineUid: string; - triggerCountCompleted: string; - triggerCountErrored: string; - watchState?: PipelineReleaseState; -}; - -export type PipelinesChart = { - pipelineId: string; - pipelineUid: string; - triggerMode: PipelineMode; - status: PipelineTriggerStatus; - timeBuckets: string[]; - triggerCounts: number[] | string[]; - computeTimeDuration: number[] | string[]; - watchState?: PipelineReleaseState; -}; - -export type PipelineTriggerStatus = - | "STATUS_UNSPECIFIED" - | "STATUS_COMPLETED" - | "STATUS_ERRORED"; - -export type Count = { - triggerTime: string | Date; - count: number; -}; - -export type PipelineTriggerRecord = { - triggerTime: string; - pipelineTriggerId: string; - pipelineId: string; - pipelineUid: string; - pipelineMode: PipelineMode; - computeTimeDuration: number; - status: PipelineTriggerStatus; -}; - -export type PipelineTriggersStatusSummaryItem = { - statusType: PipelineTriggerStatus; - amount: number; - type: "pipeline" | "model"; - delta: number; -}; - -export type PipelineTriggersStatusSummary = { - completed: PipelineTriggersStatusSummaryItem; - errored: PipelineTriggersStatusSummaryItem; -}; diff --git a/packages/toolkit/src/view/dashboard/DashboardPipelineListPageMainView.tsx b/packages/toolkit/src/view/dashboard/DashboardPipelineListPageMainView.tsx index f1919cce38..083e324730 100644 --- a/packages/toolkit/src/view/dashboard/DashboardPipelineListPageMainView.tsx +++ b/packages/toolkit/src/view/dashboard/DashboardPipelineListPageMainView.tsx @@ -1,5 +1,9 @@ "use client"; +import type { + PipelineTriggerChartRecord, + PipelineTriggerTableRecord, +} from "instill-sdk"; import * as React from "react"; import { SelectOption } from "@instill-ai/design-system"; @@ -11,8 +15,6 @@ import { getPreviousTimeframe, getTimeInRFC3339Format, Nullable, - PipelinesChart, - TriggeredPipeline, usePipelineTriggerComputationTimeCharts, usePipelineTriggerMetric, useRouteInfo, @@ -114,7 +116,7 @@ export const DashboardPipelineListPageMainView = ( previoustriggeredPipelines.isError, ]); - const pipelinesChartList = React.useMemo(() => { + const pipelinesChartList = React.useMemo(() => { if (!pipelinesChart.isSuccess) { return []; } @@ -126,7 +128,9 @@ export const DashboardPipelineListPageMainView = ( return chartList; }, [pipelinesChart.data, pipelinesChart.isSuccess]); - const triggeredPipelineList = React.useMemo(() => { + const triggeredPipelineList = React.useMemo< + PipelineTriggerTableRecord[] + >(() => { if (!triggeredPipelines.isSuccess) { return []; } diff --git a/packages/toolkit/src/view/dashboard/DashboardPipelinesTable.tsx b/packages/toolkit/src/view/dashboard/DashboardPipelinesTable.tsx index ee45998560..aef74bf825 100644 --- a/packages/toolkit/src/view/dashboard/DashboardPipelinesTable.tsx +++ b/packages/toolkit/src/view/dashboard/DashboardPipelinesTable.tsx @@ -1,5 +1,6 @@ "use client"; +import type { PipelineTriggerTableRecord } from "instill-sdk"; import Link from "next/link"; import { useParams } from "next/navigation"; import { ColumnDef } from "@tanstack/react-table"; @@ -7,11 +8,10 @@ import { ColumnDef } from "@tanstack/react-table"; import { Button, DataTable } from "@instill-ai/design-system"; import { SortIcon, TableError } from "../../components"; -import { TriggeredPipeline } from "../../lib"; import { PipelineTablePlaceholder } from "../pipeline"; export type DashboardPipelinesTableProps = { - pipelineTriggerCounts: TriggeredPipeline[]; + pipelineTriggerCounts: PipelineTriggerTableRecord[]; isError: boolean; isLoading: boolean; }; @@ -22,7 +22,7 @@ export const DashboardPipelinesTable = ( const { entity, days } = useParams(); const { pipelineTriggerCounts, isError, isLoading } = props; - const columns: ColumnDef[] = [ + const columns: ColumnDef[] = [ { accessorKey: "pipelineId", header: () =>
Pipeline Id
, diff --git a/packages/toolkit/src/view/dashboard/PipelineTriggerCountsLineChart.tsx b/packages/toolkit/src/view/dashboard/PipelineTriggerCountsLineChart.tsx index affe1650aa..da72113bca 100644 --- a/packages/toolkit/src/view/dashboard/PipelineTriggerCountsLineChart.tsx +++ b/packages/toolkit/src/view/dashboard/PipelineTriggerCountsLineChart.tsx @@ -1,14 +1,15 @@ "use client"; -import { useEffect, useRef } from "react"; +import type { PipelineTriggerChartRecord } from "instill-sdk"; +import * as React from "react"; import * as echarts from "echarts"; import { Icons, SelectOption, Tooltip } from "@instill-ai/design-system"; -import { generateChartData, PipelinesChart } from "../../lib"; +import { generateChartData } from "../../lib"; type PipelineTriggerCountsLineChartProps = { - pipelines: PipelinesChart[]; + pipelines: PipelineTriggerChartRecord[]; isLoading: boolean; selectedTimeOption: SelectOption; }; @@ -40,7 +41,7 @@ export const PipelineTriggerCountsLineChart = ({ pipelines, selectedTimeOption, }: PipelineTriggerCountsLineChartProps) => { - const chartRef = useRef(null); + const chartRef = React.useRef(null); const { xAxis, yAxis } = generateChartData( pipelines, selectedTimeOption.value, @@ -49,7 +50,7 @@ export const PipelineTriggerCountsLineChart = ({ const xAxisData = xAxis; const seriesData = yAxis; - useEffect(() => { + React.useEffect(() => { if (chartRef.current) { // Dispose the previous chart instance echarts.dispose(chartRef.current); // eslint-disable-line diff --git a/packages/toolkit/src/view/dashboard/PipelineTriggersTable.tsx b/packages/toolkit/src/view/dashboard/PipelineTriggersTable.tsx index d7a73e425c..b1a8510626 100644 --- a/packages/toolkit/src/view/dashboard/PipelineTriggersTable.tsx +++ b/packages/toolkit/src/view/dashboard/PipelineTriggersTable.tsx @@ -1,5 +1,6 @@ "use client"; +import type { PipelineTriggerRecord } from "instill-sdk"; import { ColumnDef } from "@tanstack/react-table"; import { Button, DataTable } from "@instill-ai/design-system"; @@ -9,7 +10,6 @@ import { convertTimestampToLocal, convertToSecondsAndMilliseconds, parseTriggerStatusLabel, - PipelineTriggerRecord, } from "../../lib"; import { TriggersTablePlaceholder } from "./TriggersTablePlaceholder";