Merge pull request #25 from RahulARanger/dashboard-build

Dashboard build
RahulARanger · Nov 30, 2023 · cea3367 · cea3367
2 parents 68e87b8 + 83dc2ca
commit cea3367
Show file tree

Hide file tree

Showing 16 changed files with 167 additions and 75 deletions.
diff --git a/.github/workflows/dashboard-test.yml b/.github/workflows/dashboard-test.yml
@@ -32,7 +32,7 @@ jobs:
           run: npm install
 
         - name: Install Test Related Packages for mocha
-          working-directory: ./graspit-reporters/apps/test-mocha
+          working-directory: ./graspit-reporters/apps/test-wdio-mocha
           run: npm install
 
         - name: Install Test Related Packages for cucumber

diff --git a/graspit-reporters/apps/test-wdio-cucumber/package.json b/graspit-reporters/apps/test-wdio-cucumber/package.json
@@ -17,6 +17,6 @@
 	},
 	"dependencies": {
 		"@wdio/cli": "^8.24.4",
-		"wdio-graspit-reporter": "^3.4.3"
+		"wdio-graspit-reporter": "^3.4.4"
 	}
 }
diff --git a/graspit-reporters/apps/test-wdio-mocha/package.json b/graspit-reporters/apps/test-wdio-mocha/package.json
@@ -19,7 +19,7 @@
 		"@wdio/mocha-framework": "^8.24.5",
 		"@wdio/spec-reporter": "^8.24.2",
 		"ts-node": "^10.9.1",
-		"wdio-graspit-reporter": "3.4.3"
+		"wdio-graspit-reporter": "3.4.4"
 	},
 	"devDependencies": {
 		"cross-env": "^7.0.3"

diff --git a/graspit-reporters/packages/graspit-commons/CHANGELOG.md b/graspit-reporters/packages/graspit-commons/CHANGELOG.md
@@ -1,5 +1,12 @@
 # graspit-commons
 
+## 3.4.4
+
+### Patch Changes
+
+- Updated dependencies
+  - graspit@3.4.4
+
 ## 3.4.3
 
 ### Patch Changes

diff --git a/graspit-reporters/packages/graspit-commons/package.json b/graspit-reporters/packages/graspit-commons/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "graspit-commons",
-	"version": "3.4.3",
+	"version": "3.4.4",
 	"types": "./dist/index.d.ts",
 	"main": "./dist/index.cjs",
 	"module": "./dist/index.js",
@@ -21,7 +21,7 @@
 	"dependencies": {
 		"async-lock": "^1.4.0",
 		"cross-env": "^7.0.3",
-		"graspit": "3.4.3",
+		"graspit": "3.4.4",
 		"log4js": "^6.9.1",
 		"superagent": "^8.1.2"
 	},

diff --git a/graspit-reporters/packages/graspit-dashboard/CHANGELOG.md b/graspit-reporters/packages/graspit-dashboard/CHANGELOG.md
@@ -1,5 +1,11 @@
 # graspit
 
+## 3.4.4
+
+### Patch Changes
+
+- fixed styling issues
+
 ## 3.4.3
 
 ### Patch Changes

diff --git a/graspit-reporters/packages/graspit-dashboard/package.json b/graspit-reporters/packages/graspit-dashboard/package.json
@@ -1,6 +1,6 @@
 {
     "name": "graspit",
-    "version": "3.4.3",
+    "version": "3.4.4",
     "license": "MIT",
     "scripts": {
         "dev": "next dev",

diff --git a/graspit-reporters/packages/graspit-dashboard/src/components/charts/collection-of-runs.tsx b/graspit-reporters/packages/graspit-dashboard/src/components/charts/collection-of-runs.tsx
@@ -111,10 +111,7 @@ export default function AreaChartsForRuns(properties: {
             type: 'category',
             boundaryGap: false,
             data: properties.runs.map((run) =>
-                dayjs
-                    .utc(run.started)
-                    .utcOffset(0, true)
-                    .format(dateTimeFormatUsed),
+                dayjs(run.started).format(dateTimeFormatUsed),
             ),
         },
         yAxis: [

diff --git a/graspit-reporters/packages/graspit-dashboard/src/components/core/ListOfRuns/index.tsx b/graspit-reporters/packages/graspit-dashboard/src/components/core/ListOfRuns/index.tsx
@@ -1,6 +1,6 @@
 import type TestRunRecord from 'src/types/test-run-records';
 import React, { useState, type ReactNode } from 'react';
-import { parseDetailedTestRun } from 'src/components/parse-utils';
+import { parseDetailedTestRun, sourceUrl } from 'src/components/parse-utils';
 import RenderTimeRelativeToStart, {
     RenderDuration,
 } from 'src/components/utils/renderers';
@@ -29,6 +29,8 @@ import Text from 'antd/lib/typography/Text';
 import Link from 'antd/lib/typography/Link';
 import isBetween from 'dayjs/plugin/isBetween';
 import Button from 'antd/lib/button/button';
+import type { RangePickerProps } from 'antd/es/date-picker';
+import GithubOutlined from '@ant-design/icons/GithubOutlined';
 
 dayjs.extend(isBetween);
 
@@ -239,7 +241,10 @@ function ListOfCharts(properties: { runs: TestRunRecord[] }): ReactNode {
                 />
             }
         >
-            <AreaChartForRuns runs={properties.runs} showTest={isTest} />
+            <AreaChartForRuns
+                runs={properties.runs.toReversed()}
+                showTest={isTest}
+            />
         </Card>
     );
 
@@ -325,6 +330,17 @@ export default function GridOfRuns(properties: {
         ...new Set(properties.runs.map((run) => run.projectName)),
     ].map((projectName) => ({ label: projectName, value: projectName }));
 
+    const disabledDate: RangePickerProps['disabledDate'] = (
+        current: dayjs.Dayjs,
+    ) => {
+        return !current.isBetween(
+            dayjs(properties.runs.at(0)?.started),
+            dayjs(properties.runs.at(-1)?.started),
+            'date',
+            '[]',
+        );
+    };
+
     return (
         <Layout
             style={{
@@ -333,27 +349,45 @@ export default function GridOfRuns(properties: {
             }}
         >
             <Layout.Header className={HeaderStyles.header} spellCheck>
-                <Space align="baseline" size="large">
-                    <BreadCrumb items={crumbs(false, filteredRuns.length)} />
-                    <Divider type="vertical" />
-                    <Tooltip title="Filters are on the right">
-                        <FilterOutlined />
-                    </Tooltip>
-                    <Select
-                        options={projectNames}
-                        allowClear
-                        value={selectedProjectName}
-                        placeholder="Select Project Name"
-                        style={{ minWidth: '180px' }}
-                        onChange={(selected) => {
-                            filterProjectName(selected);
-                        }}
-                    />
-                    <DatePicker.RangePicker
-                        value={dateRange}
-                        onChange={(values) => {
-                            setDateRange(values);
-                        }}
+                <Space
+                    style={{
+                        justifyContent: 'space-between',
+                        width: '100%',
+                        marginRight: '20px',
+                        marginTop: '1px',
+                    }}
+                    align="center"
+                >
+                    <Space align="baseline" size="large">
+                        <BreadCrumb
+                            items={crumbs(false, filteredRuns.length)}
+                        />
+                        <Divider type="vertical" />
+                        <Tooltip title="Filters are on the right">
+                            <FilterOutlined />
+                        </Tooltip>
+                        <Select
+                            options={projectNames}
+                            allowClear
+                            value={selectedProjectName}
+                            placeholder="Select Project Name"
+                            style={{ minWidth: '180px' }}
+                            onChange={(selected) => {
+                                filterProjectName(selected);
+                            }}
+                        />
+                        <DatePicker.RangePicker
+                            value={dateRange}
+                            onChange={(values) => {
+                                setDateRange(values);
+                            }}
+                            disabledDate={disabledDate}
+                        />
+                    </Space>
+                    <Button
+                        icon={<GithubOutlined style={{ fontSize: 20 }} />}
+                        href={sourceUrl}
+                        target="_blank"
                     />
                 </Space>
             </Layout.Header>

diff --git a/graspit-reporters/packages/graspit-dashboard/src/components/core/TestEntity/entity-item.tsx b/graspit-reporters/packages/graspit-dashboard/src/components/core/TestEntity/entity-item.tsx
@@ -3,9 +3,7 @@ import type {
     SuiteRecordDetails,
 } from 'src/types/test-entity-related';
 import { timelineColor } from 'src/components/parse-utils';
-import RenderTimeRelativeToStart, {
-    RenderDuration,
-} from 'src/components/utils/renderers';
+import { RenderDuration } from 'src/components/utils/renderers';
 import type { PreviewForTests } from 'src/types/parsed-records';
 
 import React, { type ReactNode } from 'react';
@@ -22,6 +20,7 @@ import Text from 'antd/lib/typography/Text';
 import { dateTimeFormatUsed } from 'src/components/utils/Datetime/format';
 import { Tag } from 'antd/lib';
 import Avatar from 'antd/lib/avatar/avatar';
+import RelativeTo from 'src/components/utils/Datetime/relative-time';
 
 export function EntityCollapsibleItem(properties: {
     item: PreviewForTests;
@@ -31,16 +30,15 @@ export function EntityCollapsibleItem(properties: {
     const aboutSuite: DescriptionsProps['items'] = [
         {
             key: 'started',
-            label: 'Started',
+            label: 'Range',
             children: (
-                <RenderTimeRelativeToStart value={properties.item.Started} />
-            ),
-        },
-        {
-            key: 'ended',
-            label: 'Ended',
-            children: (
-                <RenderTimeRelativeToStart value={properties.item.Ended} />
+                <RelativeTo
+                    dateTime={properties.item.Started[0]}
+                    secondDateTime={properties.item.Ended[0]}
+                    style={{
+                        maxWidth: '180px',
+                    }}
+                />
             ),
         },
         {

diff --git a/graspit-reporters/packages/graspit-dashboard/src/components/core/TestEntity/index.tsx b/graspit-reporters/packages/graspit-dashboard/src/components/core/TestEntity/index.tsx
@@ -19,7 +19,7 @@ import {
     getWrittenAttachments,
 } from 'src/components/scripts/helper';
 import BadgeForSuiteType from 'src/components/utils/test-status-dot';
-import RenderTimeRelativeToStart, {
+import {
     RenderEntityType,
     RenderStatus,
     RenderDuration,
@@ -60,6 +60,7 @@ import Badge from 'antd/lib/badge/index';
 import Meta from 'antd/lib/card/Meta';
 import TreeSelectionOfSuites, { NavigationButtons } from './header';
 import { EntityCollapsibleItem, EntityTimeline } from './entity-item';
+import RelativeTo from 'src/components/utils/Datetime/relative-time';
 
 export default function TestEntityDrawer(properties: {
     open: boolean;
@@ -224,33 +225,57 @@ export default function TestEntityDrawer(properties: {
         );
     });
 
+    const testAttachments = Object.values(attachments)
+        .flat()
+        .filter(
+            (attached) =>
+                tests[attached.entity_id]?.parent ===
+                selectedSuiteDetails.suiteID,
+        );
+
+    const savedAttachments = Object.values(writtenAttachments)
+        .flat()
+        .filter(
+            (attached) =>
+                tests[attached.entity_id]?.parent ===
+                selectedSuiteDetails.suiteID,
+        );
     const aboutSuite: DescriptionsProps['items'] = [
         {
-            key: 'started',
-            label: 'Started',
+            key: 'range',
+            label: 'Range',
             children: (
-                <RenderTimeRelativeToStart
-                    value={[dayjs(selectedSuiteDetails.started), started]}
-                    style={{ minWidth: '120px' }}
+                <RelativeTo
+                    dateTime={dayjs(selectedSuiteDetails.started)}
+                    secondDateTime={dayjs(selectedSuiteDetails.ended)}
+                    style={{
+                        maxWidth: '180px',
+                    }}
                 />
             ),
+            span: 1.5,
         },
         {
-            key: 'ended',
-            label: 'Ended',
+            key: 'duration',
+            label: 'Duration',
             children: (
-                <RenderTimeRelativeToStart
-                    value={[dayjs(selectedSuiteDetails.ended), started]}
-                    style={{ minWidth: '120px' }}
+                <RenderDuration
+                    value={dayjs.duration(selectedSuiteDetails.duration)}
+                    style={{ maxWidth: '80px' }}
                 />
             ),
         },
         {
-            key: 'duration',
-            label: 'Duration',
+            key: 'tests',
+            label: 'Contribution',
             children: (
-                <RenderDuration
-                    value={dayjs.duration(selectedSuiteDetails.duration)}
+                <StaticPercent
+                    percent={
+                        ((selectedSuiteDetails.rollup_tests ??
+                            selectedSuiteDetails.tests) /
+                            Object.keys(tests).length) *
+                        100
+                    }
                 />
             ),
         },
@@ -266,15 +291,27 @@ export default function TestEntityDrawer(properties: {
             ),
         },
         {
-            key: 'tests',
-            label: 'Contribution',
+            key: 'assertions',
+            label: 'Assertions',
             children: (
-                <StaticPercent
-                    percent={
-                        ((selectedSuiteDetails.rollup_tests ??
-                            selectedSuiteDetails.tests) /
-                            Object.keys(tests).length) *
-                        100
+                <Counter
+                    end={
+                        testAttachments.filter(
+                            (attach) => attach.type === 'ASSERT',
+                        ).length
+                    }
+                />
+            ),
+        },
+        {
+            key: 'images',
+            label: 'Images',
+            children: (
+                <Counter
+                    end={
+                        savedAttachments.filter(
+                            (attach) => attach.type === 'PNG',
+                        ).length
                     }
                 />
             ),
@@ -285,6 +322,7 @@ export default function TestEntityDrawer(properties: {
         'Passed',
         'Failed',
         'Skipped',
+        'Retried',
     ].map((status) => ({
         label: (
             <Space>
@@ -381,6 +419,7 @@ export default function TestEntityDrawer(properties: {
                                 onChange={(value) => {
                                     setFilterStatus(value);
                                 }}
+                                popupMatchSelectWidth={120}
                             />
                             <Button
                                 key="attachments"