fix: fix various style issue

instill-ai · Nov 5, 2024 · 5aa496a · 5aa496a
1 parent b3196a0
commit 5aa496a
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 41 deletions.
diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json
@@ -13,7 +13,7 @@
   "scripts": {
     "test": "vitest --run --passWithNoTests",
     "dev": "tsup --watch",
-    "dev-ts": "tsc --watch --emitDeclaration`Only",
+    "dev-ts": "tsc --watch --emitDeclarationOnly",
     "ts-type": "tsc --emitDeclarationOnly",
     "build": "tsup && pnpm ts-type",
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx --cache",

diff --git a/packages/toolkit/src/view/dashboard/activity/DashboardActivityPageMainView.tsx b/packages/toolkit/src/view/dashboard/activity/DashboardActivityPageMainView.tsx
@@ -192,7 +192,6 @@ export const DashboardActivityPageMainView = () => {
     }));
   }, [triggeredModels.data, triggeredModels.isSuccess]);
 
-
   const triggeredPipelineList = React.useMemo<TriggeredPipeline[]>(() => {
     if (!triggeredPipelines.isSuccess) return [];
     return triggeredPipelines.data;
@@ -223,7 +222,11 @@ export const DashboardActivityPageMainView = () => {
   ]);
 
   const modelTriggersSummary = React.useMemo(() => {
-    if (!previousTriggeredModels.isSuccess || !modelsChart.isSuccess || !modelsChart.data.modelTriggerCounts) {
+    if (
+      !previousTriggeredModels.isSuccess ||
+      !modelsChart.isSuccess ||
+      !modelsChart.data.modelTriggerCounts
+    ) {
       return null;
     }
 
@@ -232,17 +235,19 @@ export const DashboardActivityPageMainView = () => {
     previousTriggeredModels.isSuccess,
     modelsChart.isSuccess,
     modelsChart.data?.modelTriggerCounts,
-    selectedTimeOption // Add this to ensure refetch on date change
+    selectedTimeOption, // Add this to ensure refetch on date change
   ]);
 
   return (
     <div className="flex flex-col">
-      <h1 className="product-headings-heading-4">Usage</h1>
-      <UsageSwitch
-        activeTab={activeTab}
-        setActiveTab={setActiveTab}
-        namespaceId={routeInfo.data.namespaceId}
-      />
+      <div className="flex flex-col gap-y-2">
+        <h1 className="product-headings-heading-4">Usage</h1>
+        <UsageSwitch
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          namespaceId={routeInfo.data.namespaceId}
+        />
+      </div>
       <ActivityTab
         pipelinesChart={pipelinesChart}
         modelsChart={modelsChart}

diff --git a/packages/toolkit/src/view/dashboard/activity/ModelsTriggerCountsLineChart.tsx b/packages/toolkit/src/view/dashboard/activity/ModelsTriggerCountsLineChart.tsx
@@ -2,8 +2,14 @@
 
 import * as React from "react";
 import * as echarts from "echarts";
-import { ModelTriggersStatusSummary, ModelTriggerTableRecord, Nullable } from "instill-sdk";
+import {
+  ModelTriggersStatusSummary,
+  ModelTriggerTableRecord,
+  Nullable,
+} from "instill-sdk";
+
 import { Icons, SelectOption, Tooltip } from "@instill-ai/design-system";
+
 import { generateModelTriggerChartRecordData } from "../../../lib";
 import { ModelTriggersSummary } from "./ModelTriggersSummary";
 
@@ -43,9 +49,9 @@ export const ModelsTriggerCountsLineChart = ({
   modelTriggersSummary,
 }: ModelsTriggerCountsLineChartProps) => {
   const chartRef = React.useRef<HTMLDivElement>(null);
-  const { xAxis, yAxis } = React.useMemo(() =>
-    generateModelTriggerChartRecordData(models, selectedTimeOption.value),
-    [models, selectedTimeOption.value]
+  const { xAxis, yAxis } = React.useMemo(
+    () => generateModelTriggerChartRecordData(models, selectedTimeOption.value),
+    [models, selectedTimeOption.value],
   );
 
   React.useEffect(() => {
@@ -117,7 +123,7 @@ export const ModelsTriggerCountsLineChart = ({
           type: "category",
           data: xAxis,
           axisLabel: {
-            fontSize: "14px",
+            fontSize: "10px",
             fontFamily: "var(--font-ibm-plex-sans)",
             fontStyle: "normal",
             fontWeight: "500",
@@ -128,7 +134,7 @@ export const ModelsTriggerCountsLineChart = ({
           type: "value",
           minInterval: 1,
           axisLabel: {
-            fontSize: "14px",
+            fontSize: "10px",
             fontFamily: "var(--font-ibm-plex-sans)",
             fontStyle: "normal",
             fontWeight: "500",
@@ -196,7 +202,8 @@ export const ModelsTriggerCountsLineChart = ({
                         </div>
                         <div className="self-stretch text-semantic-fg-secondary product-body-text-4-medium">
                           Select any pipeline from the table below to view the
-                          number of model triggers within the last {selectedTimeOption.label}
+                          number of model triggers within the last{" "}
+                          {selectedTimeOption.label}
                         </div>
                       </div>
                     </div>

diff --git a/packages/toolkit/src/view/dashboard/activity/PipelineTriggerCountsLineChart.tsx b/packages/toolkit/src/view/dashboard/activity/PipelineTriggerCountsLineChart.tsx
@@ -126,8 +126,11 @@ export const PipelineTriggerCountsLineChart = ({
         xAxis: {
           type: "category",
           data: xAxisData,
+          axisTick: {
+            length: 0,
+          },
           axisLabel: {
-            fontSize: "14px",
+            fontSize: "10px",
             fontFamily: "var(--font-ibm-plex-sans)",
             fontStyle: "normal",
             fontWeight: "500",
@@ -137,8 +140,11 @@ export const PipelineTriggerCountsLineChart = ({
         yAxis: {
           type: "value",
           minInterval: 1,
+          axisTick: {
+            length: 0,
+          },
           axisLabel: {
-            fontSize: "14px",
+            fontSize: "10px",
             fontFamily: "var(--font-ibm-plex-sans)",
             fontStyle: "normal",
             fontWeight: "500",
@@ -201,7 +207,8 @@ export const PipelineTriggerCountsLineChart = ({
                         </div>
                         <div className="self-stretch text-semantic-fg-secondary product-body-text-4-medium">
                           Select any pipeline from the table below to view the
-                          number of pipeline triggers within the last {selectedTimeOption.label}
+                          number of pipeline triggers within the last{" "}
+                          {selectedTimeOption.label}
                         </div>
                       </div>
                     </div>

diff --git a/packages/toolkit/src/view/dashboard/cost/CostTab.tsx b/packages/toolkit/src/view/dashboard/cost/CostTab.tsx
@@ -100,21 +100,19 @@ export const CostTab = ({
         <div className="flex space-x-3">
           <Popover.Root>
             <Popover.Trigger asChild>
-              <button className="flex flex-row gap-x-2 rounded border border-semantic-bg-line bg-semantic-bg-primary px-4 py-3 text-semantic-fg-primary product-button-button-1">
+              <button className="flex h-10 flex-row gap-x-2 rounded border border-semantic-bg-line bg-semantic-bg-primary px-4 py-3 text-semantic-fg-primary product-button-button-1">
                 {options.find((o) => o.value === costView)?.label}
                 <Icons.ChevronDown className="my-auto h-4 w-4 stroke-semantic-fg-primary" />
               </button>
             </Popover.Trigger>
             <Popover.Content
               align="start"
-              className="flex w-48 flex-col !px-0 py-1"
+              className="flex !w-48 flex-col !px-0 py-1"
             >
               {options.map((option) => (
                 <button
                   key={option.value}
-                  className={`flex items-center p-2 hover:bg-semantic-bg-line ${
-                    costView === option.value ? "bg-semantic-bg-line" : ""
-                  }`}
+                  className="flex flex-row items-center px-4 py-[9px] hover:bg-semantic-bg-base-bg"
                   onClick={() => {
                     router.push(
                       `/${selectedNamespace}/dashboard/cost/${option.value}`,

diff --git a/packages/toolkit/src/view/dashboard/cost/model/DashboardCostModelPageMainView.tsx b/packages/toolkit/src/view/dashboard/cost/model/DashboardCostModelPageMainView.tsx
@@ -21,12 +21,14 @@ export const DashboardCostModelPageMainView = () => {
 
   return (
     <div className="flex flex-col">
-      <h1 className="product-headings-heading-4 mb-2">Usage</h1>
-      <UsageSwitch
-        activeTab={activeTab}
-        setActiveTab={setActiveTab}
-        namespaceId={routeInfo.data.namespaceId}
-      />
+      <div className="flex flex-col gap-y-2">
+        <h1 className="product-headings-heading-4">Usage</h1>
+        <UsageSwitch
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          namespaceId={routeInfo.data.namespaceId}
+        />
+      </div>
       <CostTab
         selectedTimeOption={selectedTimeOption}
         setSelectedTimeOption={setSelectedTimeOption}

diff --git a/packages/toolkit/src/view/dashboard/cost/model/DashboardListModel.tsx b/packages/toolkit/src/view/dashboard/cost/model/DashboardListModel.tsx
@@ -87,7 +87,7 @@ export const DashboardListModel = ({ start }: DashboardListModelProps) => {
         header: () => <div className="text-left">Model ID</div>,
         cell: ({ row }) => {
           return (
-            <div className="font-normal text-semantic-bg-secondary-secondary break-all">
+            <div className="font-normal text-semantic-bg-secondary-secondary truncate">
               <Link
                 href={`/${targetNamespace?.id}/models/${row.getValue("modelId")}`}
                 className="text-semantic-accent-default hover:underline"
@@ -103,7 +103,7 @@ export const DashboardListModel = ({ start }: DashboardListModelProps) => {
         header: () => <div className="text-left">Run ID</div>,
         cell: ({ row }) => {
           return (
-            <div className="font-normal text-semantic-bg-secondary-secondary break-all">
+            <div className="font-normal text-semantic-bg-secondary-secondary truncate">
               <Link
                 href={`/${targetNamespace?.id}/models/${row.getValue("modelId")}/runs/${row.getValue("uid")}`}
                 className="text-semantic-accent-default hover:underline max-w-3"
@@ -144,7 +144,11 @@ export const DashboardListModel = ({ start }: DashboardListModelProps) => {
           const sourceValue = row.getValue("source") as string;
           return (
             <div className="font-normal text-semantic-bg-secondary-secondary break-all">
-              {sourceValue === "RUN_SOURCE_CONSOLE" ? "Web" : sourceValue === "RUN_SOURCE_API" ? "API" : sourceValue}
+              {sourceValue === "RUN_SOURCE_CONSOLE"
+                ? "Web"
+                : sourceValue === "RUN_SOURCE_API"
+                  ? "API"
+                  : sourceValue}
             </div>
           );
         },
@@ -184,9 +188,9 @@ export const DashboardListModel = ({ start }: DashboardListModelProps) => {
             <div className="font-normal text-semantic-bg-secondary-alt-primary">
               {createTime
                 ? getHumanReadableStringFromTime(
-                  createTime as string,
-                  Date.now(),
-                )
+                    createTime as string,
+                    Date.now(),
+                  )
                 : "-"}
             </div>
           );

diff --git a/packages/toolkit/src/view/dashboard/cost/pipeline/DashboardListPipeline.tsx b/packages/toolkit/src/view/dashboard/cost/pipeline/DashboardListPipeline.tsx
@@ -89,7 +89,7 @@ export const DashboardListPipeline = ({
         header: () => <div className="text-left">Pipeline ID</div>,
         cell: ({ row }) => {
           return (
-            <div className="font-normal text-semantic-bg-secondary-secondary break-all">
+            <div className="font-normal text-semantic-bg-secondary-secondary truncate">
               <Link
                 href={`/${targetNamespace?.id}/pipelines/${row.getValue("pipelineId")}`}
                 className="text-semantic-accent-default hover:underline"
@@ -105,9 +105,9 @@ export const DashboardListPipeline = ({
         header: () => <div className="text-left">Run ID</div>,
         cell: ({ row }) => {
           return (
-            <div className="font-normal text-semantic-bg-secondary-secondary break-all">
+            <div className="font-normal text-semantic-bg-secondary-secondary truncate">
               <Link
-                href={`/${targetNamespace?.id}/pipelines/${row.getValue("pipelines")}/runs/${row.getValue("pipelineRunUid")}`}
+                href={`/${targetNamespace?.id}/pipelines/${row.getValue("pipelineId")}/runs/${row.getValue("pipelineRunUid")}`}
                 className="text-semantic-accent-default hover:underline max-w-3"
               >
                 {row.getValue("pipelineRunUid")}
@@ -146,7 +146,11 @@ export const DashboardListPipeline = ({
           const sourceValue = row.getValue("source") as string;
           return (
             <div className="font-normal text-semantic-bg-secondary-secondary break-all">
-              {sourceValue === "RUN_SOURCE_CONSOLE" ? "Web" : sourceValue === "RUN_SOURCE_API" ? "API" : sourceValue}
+              {sourceValue === "RUN_SOURCE_CONSOLE"
+                ? "Web"
+                : sourceValue === "RUN_SOURCE_API"
+                  ? "API"
+                  : sourceValue}
             </div>
           );
         },