Display information of project on home tab

frontend/config/selection.ts

@@ -1,24 +1,35 @@
+const categoricalPalette = [
+  "#fba91e",
+  "#6ea56c",
+  "#3ac6e1",
+  "#feda2f",
+  "#f15f47",
+  "#244470",
+  "#9c80bb",
+  "#f595a6",
+];
+
 const priorities = [
-  { uid: "critical", color: "#d00002", chartColor: "#d00002" },
+  { uid: "critical", color: "#bb3e03", chartColor: "#bb3e03" },
-  { uid: "high", color: "#ee6b4e", chartColor: "#ee6b4e" },
+  { uid: "high", color: "#ca6702", chartColor: "#ca6702" },
-  { uid: "medium", color: "#fccb69", chartColor: "#fccb69" },
+  { uid: "medium", color: "#ee9b00", chartColor: "#ee9b00" },
-  { uid: "low", color: "#0b62e8", chartColor: "#0b62e8" },
+  { uid: "low", color: "#94d2bd", chartColor: "#94d2bd" },
 ];
 
 const testTypes = [
-  { uid: "other", chartColor: "#688ae8" },
+  { uid: "other", chartColor: categoricalPalette[0] },
-  { uid: "security", chartColor: "#c33d69" },
+  { uid: "security", chartColor: categoricalPalette[1] },
-  { uid: "performance", chartColor: "#2ea597" },
+  { uid: "performance", chartColor: categoricalPalette[2] },
-  { uid: "accessibility", chartColor: "#8456ce" },
+  { uid: "accessibility", chartColor: categoricalPalette[3] },
-  { uid: "functional", chartColor: "#e07941" },
+  { uid: "functional", chartColor: categoricalPalette[4] },
-  { uid: "acceptance", chartColor: "#3759ce" },
+  { uid: "acceptance", chartColor: categoricalPalette[5] },
-  { uid: "usability", chartColor: "#962249" },
+  { uid: "usability", chartColor: categoricalPalette[6] },
-  { uid: "smokeSanity", chartColor: "#096f64" },
+  { uid: "smokeSanity", chartColor: categoricalPalette[7] },
-  { uid: "compatibility", chartColor: "#6237a7" },
+  { uid: "compatibility", chartColor: categoricalPalette[0] },
-  { uid: "destructive", chartColor: "#a84401" },
+  { uid: "destructive", chartColor: categoricalPalette[1] },
-  { uid: "regression", chartColor: "#273ea5" },
+  { uid: "regression", chartColor: categoricalPalette[2] },
-  { uid: "automated", chartColor: "#780d35" },
+  { uid: "automated", chartColor: categoricalPalette[3] },
-  { uid: "manual", chartColor: "#03524a" },
+  { uid: "manual", chartColor: categoricalPalette[4] },
 ];
 
 const automationStatus = [
@@ -43,12 +54,12 @@ const testRunCaseStatus = [
   {
     uid: "untested",
     color: "primary",
-    chartColor: "#e5e7eb",
+    chartColor: "#3ac6e1",
   },
-  { uid: "passed", color: "success", chartColor: "#059669" },
+  { uid: "passed", color: "success", chartColor: "#6ea56c" },
-  { uid: "failed", color: "danger", chartColor: "#f87171" },
+  { uid: "failed", color: "danger", chartColor: "#f15f47" },
-  { uid: "retest", color: "warning", chartColor: "#fbbf24" },
+  { uid: "retest", color: "warning", chartColor: "#fba91e" },
-  { uid: "skipped", color: "primary", chartColor: "#4b5563" },
+  { uid: "skipped", color: "primary", chartColor: "#805aab" },
 ];
 
 export {

frontend/messages/en.json

@@ -37,7 +37,14 @@
     "test_cases": "Test Cases",
     "test_runs": "Test Runs",
     "progress": "Progress",
-    "test_types": "Test types",
+    "untested": "Untested",
+    "passed": "Passed",
+    "failed": "Failed",
+    "retest": "Retest",
+    "skipped": "Skipped",
+    "test_classification": "Test Classification",
+    "by_type": "By test type",
+    "by_priority": "By test priority",
     "other": "Other",
     "security": "Security",
     "performance": "Performance",
@@ -51,7 +58,6 @@
     "regression": "Regression",
     "automated": "Automated",
     "manual": "Manual",
-    "priority": "Priority",
     "critical": "Critical",
     "high": "High",
     "medium": "Medium",

frontend/messages/ja.json

@@ -37,7 +37,14 @@
     "test_cases": "テストケース",
     "test_runs": "テスト実行",
     "progress": "進捗",
-    "test_types": "テスト種別",
+    "untested": "未実行",
+    "passed": "成功",
+    "failed": "失敗",
+    "retest": "再テスト",
+    "skipped": "スキップ",
+    "test_classification": "テスト分類",
+    "by_type": "タイプ別",
+    "by_priority": "優先度別",
     "other": "その他",
     "security": "セキュリティ",
     "performance": "パフォーマンス",
@@ -51,7 +58,6 @@
     "regression": "回帰",
     "automated": "自動",
     "manual": "手動",
-    "priority": "優先度",
     "critical": "致",
     "high": "高",
     "medium": "中",

frontend/src/app/[locale]/projects/[projectId]/home/TestProgressColumnChart.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useState, useEffect } from "react";
 import dynamic from "next/dynamic";
 import { ProgressSeriesType } from "@/types/run";
+import { testRunCaseStatus } from "@/config/selection";
 const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 type Props = {
@@ -36,6 +37,9 @@ export default function TestProgressBarChart({
             legend: {
               position: "right",
             },
+            colors: testRunCaseStatus.map((itr) => {
+              return itr.chartColor;
+            }),
             xaxis: {
               type: "datetime",
               categories: progressCategories,

frontend/src/app/[locale]/projects/[projectId]/home/aggregate.ts

@@ -1,5 +1,6 @@
 import { ProjectType } from "@/types/project";
 import { testTypes, priorities, testRunCaseStatus } from "@/config/selection";
+import { HomeMessages } from "./page";
 
 // aggregate folder, case, run mum
 function aggregateBasicInfo(project: ProjectType) {
@@ -49,9 +50,9 @@ function aggregateTestPriority(project: ProjectType) {
   return result;
 }
 
-function aggregateProgress(project: ProjectType) {
+function aggregateProgress(project: ProjectType, messages: HomeMessages) {
   let series = testRunCaseStatus.map((status) => {
-    return { name: status.uid, data: [] };
+    return { name: messages[status.uid], data: [] };
   });
   let categories = [];
 

frontend/src/app/[locale]/projects/[projectId]/home/home.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useState, useEffect } from "react";
 import { Divider } from "@nextui-org/react";
-import { title } from "@/components/primitives";
+import { title, subtitle } from "@/components/primitives";
 import { Card, CardBody, Chip } from "@nextui-org/react";
 import { Folder, Clipboard, FlaskConical } from "lucide-react";
 import { CaseTypeCountType, CasePriorityCountType } from "@/types/case";
@@ -66,7 +66,6 @@ export function Home({ projectId, messages }: Props) {
       try {
         const data = await fetchProject(url);
         setProject(data);
-        console.log(data);
       } catch (error: any) {
         console.error("Error in effect:", error.message);
       }
@@ -88,7 +87,7 @@ export function Home({ projectId, messages }: Props) {
       const priorityRet = aggregateTestPriority(project);
       setPriorityCounts([...priorityRet]);
 
-      const { series, categories } = aggregateProgress(project);
+      const { series, categories } = aggregateProgress(project, messages);
       setProgressSeries([...series]);
       setProgressCategories([...categories]);
     }
@@ -123,27 +122,30 @@ export function Home({ projectId, messages }: Props) {
         </Chip>
       </div>
 
-      <Card className="mt-3 bg-neutral-100" shadow="none">
+      {project.detail && (
-        <CardBody>{project.detail}</CardBody>
+        <Card className="mt-3 bg-neutral-100" shadow="none">
-      </Card>
+          <CardBody>{project.detail}</CardBody>
+        </Card>
+      )}
 
-      <Divider className="my-6" />
+      <Divider className="my-8" />
-      <div style={{ height: "20rem" }}>
+      <h2 className={subtitle()}>{messages.progress}</h2>
-        <h3>{messages.progress}</h3>
+      <div style={{ height: "18rem" }}>
         <TestProgressBarChart
           progressSeries={progressSeries}
           progressCategories={progressCategories}
         />
       </div>
 
-      <Divider className="my-6" />
+      <Divider className="my-12" />
+      <h2 className={subtitle()}>{messages.testClassification}</h2>
       <div className="flex pb-20">
         <div style={{ width: "32rem", height: "18rem" }}>
-          <h3>{messages.testTypes}</h3>
+          <h3>{messages.byType}</h3>
           <TestTypesChart typesCounts={typesCounts} messages={messages} />
         </div>
         <div style={{ width: "30rem", height: "18rem" }}>
-          <h3>{messages.priority}</h3>
+          <h3>{messages.byPriority}</h3>
           <TestPriorityChart
             priorityCounts={priorityCounts}
             messages={messages}

frontend/src/app/[locale]/projects/[projectId]/home/page.tsx

@@ -6,6 +6,14 @@ export type HomeMessages = {
   testCases: string;
   testRuns: string;
   progress: string;
+  untested: string;
+  passed: string;
+  failed: string;
+  retest: string;
+  skipped: string;
+  testClassification: string;
+  byType: string;
+  byPriority: string;
   testTypes: string;
   other: string;
   security: string;
@@ -20,7 +28,6 @@ export type HomeMessages = {
   regression: string;
   automated: string;
   manual: string;
-  priority: string;
   critical: string;
   high: string;
   medium: string;
@@ -34,6 +41,14 @@ export default function Page({ params }: { params: { projectId: string } }) {
     testCases: t("test_cases"),
     testRuns: t("test_runs"),
     progress: t("progress"),
+    untested: t("untested"),
+    passed: t("passed"),
+    failed: t("failed"),
+    retest: t("retest"),
+    skipped: t("skipped"),
+    testClassification: t("test_classification"),
+    byType: t("by_type"),
+    byPriority: t("by_priority"),
     testTypes: t("test_types"),
     other: t("other"),
     security: t("security"),