feat: namananand/ins 1356 update metic table on pipeline page for das…

…hboard (#483)

Because

- we need new table on pipeline page for dashboard

This commit

- new table on pipeline page for dashboard

package.json

@@ -30,7 +30,7 @@
     "@code-hike/mdx": "^0.7.3",
     "@dnd-kit/core": "^6.0.8",
     "@hookform/resolvers": "^3.1.1",
-    "@instill-ai/design-system": "^0.33.2-rc.1",
+    "@instill-ai/design-system": "^0.33.2-rc.2",
     "@instill-ai/design-tokens": "^0.3.2",
     "@instill-ai/toolkit": "^0.61.4-rc.0",
     "@radix-ui/react-checkbox": "^1.0.3",

src/components/DashboardPipelinesTable.tsx

@@ -1,12 +1,6 @@
 import * as React from "react";
 import Link from "next/link";
-import {
-  Nullable,
-  PipelineTriggerCount,
-  chunk,
-  env,
-  PaginationListContainerProps,
-} from "@instill-ai/toolkit";
+import { PipelineTriggerCount, GeneralStateCell } from "@instill-ai/toolkit";
 import {
   Button,
   Checkbox,
@@ -17,15 +11,9 @@ import {
 import { ColumnDef } from "@tanstack/react-table";
 import { PipelineTablePlaceholder } from "./table/PipelineTablePlaceholder";
 import { TableError } from "./table/TableError";
+import { Sort } from "@/lib/table";
 
-export type DashboardPipelinesTableProps = {
-  pipelineTriggerCounts: PipelineTriggerCount[];
-  isError: boolean;
-  isLoading: boolean;
-} & Pick<PaginationListContainerProps, "marginBottom">;
-
-type Sort = "asc" | "desc" | false;
-const getIcon = (type: Sort) => {
+export const getIcon = (type: Sort) => {
   if (type === "asc") {
     return <Icons.ArrowDown className="h-4 w-4 stroke-semantic-fg-secondary" />;
   }
@@ -37,18 +25,16 @@ const getIcon = (type: Sort) => {
   );
 };
 
+export type DashboardPipelinesTableProps = {
+  pipelineTriggerCounts: PipelineTriggerCount[];
+  isError: boolean;
+  isLoading: boolean;
+};
+
 export const DashboardPipelinesTable = (
   props: DashboardPipelinesTableProps
 ) => {
-  const { pipelineTriggerCounts, marginBottom, isError, isLoading } = props;
-  const [currentPage, setCurrentPage] = React.useState(0);
-  const [searchTerm, setSearchTerm] = React.useState<Nullable<string>>(null);
-
-  // We will only use searched resource when user input search term
-
-  const pipelineTriggerPages = React.useMemo(() => {
-    return chunk(pipelineTriggerCounts, env("NEXT_PUBLIC_LIST_PAGE_SIZE"));
-  }, [pipelineTriggerCounts]);
+  const { pipelineTriggerCounts, isError, isLoading } = props;
 
   const columns: ColumnDef<PipelineTriggerCount>[] = [
     {
@@ -81,17 +67,11 @@ export const DashboardPipelinesTable = (
       cell: ({ row }) => {
         return (
           <div className="text-center">
-            <Tag
-              variant={
-                row.getValue("watchState") === "STATE_ACTIVE"
-                  ? "lightGreen"
-                  : "lightRed"
-              }
-              className="border-0"
-              size={"sm"}
-            >
-              Active
-            </Tag>
+            <GeneralStateCell
+              width={null}
+              state={row.getValue("watchState")}
+              padding="py-2"
+            />
           </div>
         );
       },

src/components/PipelineTriggersTable.tsx

@@ -0,0 +1,128 @@
+import { DataTable } from "@instill-ai/design-system";
+import {
+  GeneralStateCell,
+  PipelineTriggerRecord,
+  TableError,
+  convertTimestamp,
+  convertToSecondsAndMilliseconds,
+  parseTriggerStatusLabel,
+} from "@instill-ai/toolkit";
+import { ColumnDef } from "@tanstack/react-table";
+import * as React from "react";
+import { TriggersTablePlaceholder } from "./table/TriggersTablePlaceholder";
+
+export type PipelineTriggersTableProps = {
+  pipelineTriggers: PipelineTriggerRecord[];
+  isError: boolean;
+  isLoading: boolean;
+};
+
+export const PipelineTriggersTable = (props: PipelineTriggersTableProps) => {
+  const { pipelineTriggers, isError, isLoading } = props;
+
+  const columns: ColumnDef<PipelineTriggerRecord>[] = [
+    {
+      accessorKey: "trigger_time",
+      header: () => <div className="min-w-[400px] text-left">Pipeline Id</div>,
+      cell: ({ row }) => {
+        return (
+          <div className="flex flex-row gap-x-2">
+            {convertTimestamp(row.getValue("trigger_time"))}
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "status",
+      header: () => <div className="max-w-[100px] text-center">Status</div>,
+      cell: ({ row }) => {
+        return (
+          <div className="text-center">
+            <GeneralStateCell
+              width={null}
+              state={row.getValue("status")}
+              padding="py-2"
+              label={parseTriggerStatusLabel(row.getValue("status"))}
+            />
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "compute_time_duration",
+      header: () => {
+        return (
+          <div className="min-w-[150px] text-center">Trigger Duration</div>
+        );
+      },
+      cell: ({ row }) => {
+        return (
+          <div className="text-center">
+            <p className="truncate text-semantic-fg-secondary product-body-text-3-regular">
+              {convertToSecondsAndMilliseconds(
+                row.getValue("compute_time_duration")
+              )}
+            </p>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "pipeline_trigger_id",
+      header: () => <div className="min-w-[350px] text-center">Trigger ID</div>,
+      cell: ({ row }) => {
+        return (
+          <div className="text-center">
+            <p className="truncate text-semantic-fg-secondary product-body-text-3-regular">
+              {row.getValue("pipeline_trigger_id")}
+            </p>
+          </div>
+        );
+      },
+    },
+  ];
+
+  if (isError) {
+    return (
+      <DataTable
+        columns={columns}
+        data={pipelineTriggers}
+        pageSize={6}
+        searchPlaceholder={null}
+        searchKey={null}
+        isLoading={isLoading}
+        loadingRows={6}
+      >
+        <TableError />
+      </DataTable>
+    );
+  }
+
+  if (pipelineTriggers.length === 0 && !isLoading) {
+    return (
+      <DataTable
+        columns={columns}
+        data={pipelineTriggers}
+        pageSize={6}
+        searchPlaceholder={null}
+        searchKey={null}
+        isLoading={isLoading}
+        loadingRows={6}
+      >
+        <TriggersTablePlaceholder enableCreateButton={false} />
+      </DataTable>
+    );
+  }
+
+  return (
+    <DataTable
+      columns={columns}
+      data={pipelineTriggers}
+      pageSize={6}
+      searchPlaceholder={null}
+      searchKey={null}
+      isLoading={isLoading}
+      loadingRows={6}
+    />
+  );
+};