Merge pull request #1517 from github/koesie10/variant-analysis-stats

Add variant analysis stats component

Author: koesie10

.vscode/launch.json

@@ -35,6 +35,9 @@
       "runtimeArgs": [
         "--inspect=9229"
       ],
+      "env": {
+        "LANG": "en-US"
+      },
       "args": [
         "--exit",
         "-u",
@@ -43,6 +46,8 @@
         "--diff",
         "-r",
         "ts-node/register",
+        "-r",
+        "test/mocha.setup.js",
         "test/pure-tests/**/*.ts"
       ],
       "stopOnEntry": false,

extensions/ql-vscode/package.json

@@ -1192,7 +1192,7 @@
     "watch:extension": "tsc --watch",
     "watch:webpack": "gulp watchView",
     "test": "npm-run-all -p test:*",
-    "test:unit": "mocha --exit -r ts-node/register test/pure-tests/**/*.ts",
+    "test:unit": "mocha --exit -r ts-node/register -r test/mocha.setup.js test/pure-tests/**/*.ts",
     "test:view": "jest",
     "preintegration": "rm -rf ./out/vscode-tests && gulp",
     "integration": "node ./out/vscode-tests/run-integration-tests.js no-workspace,minimal-workspace",

extensions/ql-vscode/src/pure/date.ts

@@ -0,0 +1,26 @@
+/*
+ * Contains an assortment of helper constants and functions for working with dates.
+ */
+
+const dateWithoutYearFormatter = new Intl.DateTimeFormat(undefined, {
+  month: 'short',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+});
+
+const dateFormatter = new Intl.DateTimeFormat(undefined, {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+});
+
+export function formatDate(value: Date): string {
+  if (value.getFullYear() === new Date().getFullYear()) {
+    return dateWithoutYearFormatter.format(value);
+  }
+
+  return dateFormatter.format(value);
+}

extensions/ql-vscode/src/pure/number.ts

@@ -0,0 +1,15 @@
+/*
+ * Contains an assortment of helper constants and functions for working with numbers.
+ */
+
+const numberFormatter = new Intl.NumberFormat('en-US');
+
+/**
+ * Formats a number to be human-readable with decimal places and thousands separators.
+ *
+ * @param value The number to format.
+ * @returns The formatted number. For example, "10,000", "1,000,000", or "1,000,000,000".
+ */
+export function formatDecimal(value: number): string {
+  return numberFormatter.format(value);
+}

extensions/ql-vscode/src/pure/time.ts

@@ -2,7 +2,8 @@
  * Contains an assortment of helper constants and functions for working with time, dates, and durations.
  */
 
-export const ONE_MINUTE_IN_MS = 1000 * 60;
+export const ONE_SECOND_IN_MS = 1000;
+export const ONE_MINUTE_IN_MS = ONE_SECOND_IN_MS * 60;
 export const ONE_HOUR_IN_MS = ONE_MINUTE_IN_MS * 60;
 export const TWO_HOURS_IN_MS = ONE_HOUR_IN_MS * 2;
 export const THREE_HOURS_IN_MS = ONE_HOUR_IN_MS * 3;
@@ -43,20 +44,23 @@ export function humanizeRelativeTime(relativeTimeMillis?: number) {
 
 /**
  * Converts a number of milliseconds into a human-readable string with units, indicating an amount of time.
- * Negative numbers have no meaning and are considered to be "Less than a minute".
+ * Negative numbers have no meaning and are considered to be "Less than a second".
  *
  * @param millis The number of milliseconds to convert.
- * @returns A humanized duration. For example, "2 minutes", "2 hours", "2 days", or "2 months".
+ * @returns A humanized duration. For example, "2 seconds", "2 minutes", "2 hours", "2 days", or "2 months".
  */
 export function humanizeUnit(millis?: number): string {
   // assume a blank or empty string is a zero
   // assume anything less than 0 is a zero
-  if (!millis || millis < ONE_MINUTE_IN_MS) {
-    return 'Less than a minute';
+  if (!millis || millis < ONE_SECOND_IN_MS) {
+    return 'Less than a second';
   }
   let unit: string;
   let unitDiff: number;
-  if (millis < ONE_HOUR_IN_MS) {
+  if (millis < ONE_MINUTE_IN_MS) {
+    unit = 'second';
+    unitDiff = Math.floor(millis / ONE_SECOND_IN_MS);
+  } else if (millis < ONE_HOUR_IN_MS) {
     unit = 'minute';
     unitDiff = Math.floor(millis / ONE_MINUTE_IN_MS);
   } else if (millis < ONE_DAY_IN_MS) {

extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisHeader.stories.tsx

@@ -47,6 +47,12 @@ export default {
         disable: true,
       },
     },
+    onViewLogsClick: {
+      action: 'view-logs-clicked',
+      table: {
+        disable: true,
+      }
+    },
   }
 } as ComponentMeta<typeof VariantAnalysisHeader>;
 
@@ -59,16 +65,25 @@ InProgress.args = {
   queryName: 'Query name',
   queryFileName: 'example.ql',
   variantAnalysisStatus: VariantAnalysisStatus.InProgress,
+  totalRepositoryCount: 10,
+  completedRepositoryCount: 2,
+  resultCount: 99_999,
 };
 
 export const Succeeded = Template.bind({});
 Succeeded.args = {
   ...InProgress.args,
   variantAnalysisStatus: VariantAnalysisStatus.Succeeded,
+  totalRepositoryCount: 1000,
+  completedRepositoryCount: 1000,
+  duration: 720_000,
+  completedAt: new Date(1661263446000),
 };
 
 export const Failed = Template.bind({});
 Failed.args = {
   ...InProgress.args,
   variantAnalysisStatus: VariantAnalysisStatus.Failed,
+  duration: 10_000,
+  completedAt: new Date(1661263446000),
 };

extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisStats.stories.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { VariantAnalysisContainer } from '../../view/variant-analysis/VariantAnalysisContainer';
+import { VariantAnalysisStats } from '../../view/variant-analysis/VariantAnalysisStats';
+import { VariantAnalysisStatus } from '../../remote-queries/shared/variant-analysis';
+
+export default {
+  title: 'Variant Analysis/Variant Analysis Stats',
+  component: VariantAnalysisStats,
+  decorators: [
+    (Story) => (
+      <VariantAnalysisContainer>
+        <Story />
+      </VariantAnalysisContainer>
+    )
+  ],
+  argTypes: {
+    onViewLogsClick: {
+      action: 'view-logs-clicked',
+      table: {
+        disable: true,
+      },
+    },
+  }
+} as ComponentMeta<typeof VariantAnalysisStats>;
+
+const Template: ComponentStory<typeof VariantAnalysisStats> = (args) => (
+  <VariantAnalysisStats {...args} />
+);
+
+export const Starting = Template.bind({});
+Starting.args = {
+  variantAnalysisStatus: VariantAnalysisStatus.InProgress,
+  totalRepositoryCount: 10,
+};
+
+export const Started = Template.bind({});
+Started.args = {
+  ...Starting.args,
+  resultCount: 99_999,
+  completedRepositoryCount: 2,
+};
+
+export const StartedWithWarnings = Template.bind({});
+StartedWithWarnings.args = {
+  ...Starting.args,
+  queryResult: 'warning',
+};
+
+export const Succeeded = Template.bind({});
+Succeeded.args = {
+  ...Started.args,
+  totalRepositoryCount: 1000,
+  completedRepositoryCount: 1000,
+  variantAnalysisStatus: VariantAnalysisStatus.Succeeded,
+  duration: 720_000,
+  completedAt: new Date(1661263446000),
+};
+
+export const SucceededWithWarnings = Template.bind({});
+SucceededWithWarnings.args = {
+  ...Succeeded.args,
+  totalRepositoryCount: 10,
+  completedRepositoryCount: 2,
+  queryResult: 'warning',
+};
+
+export const Failed = Template.bind({});
+Failed.args = {
+  ...Starting.args,
+  variantAnalysisStatus: VariantAnalysisStatus.Failed,
+  duration: 10_000,
+  completedAt: new Date(1661263446000),
+};
+
+export const Stopped = Template.bind({});
+Stopped.args = {
+  ...SucceededWithWarnings.args,
+  queryResult: 'stopped',
+};

extensions/ql-vscode/src/view/common/icon/Codicon.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import classNames from 'classnames';
+
+type Props = {
+  name: string;
+  label: string;
+  className?: string;
+};
+
+const CodiconIcon = styled.span`
+  vertical-align: text-bottom;
+`;
+
+export const Codicon = ({
+  name,
+  label,
+  className
+}: Props) => <CodiconIcon role="img" aria-label={label} className={classNames('codicon', `codicon-${name}`, className)} />;

extensions/ql-vscode/src/view/common/icon/ErrorIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Codicon } from './Codicon';
+
+const Icon = styled(Codicon)`
+  color: var(--vscode-problemsErrorIcon-foreground);
+`;
+
+type Props = {
+  label?: string;
+  className?: string;
+}
+
+export const ErrorIcon = ({
+  label = 'Error',
+  className,
+}: Props) => <Icon name="error" label={label} className={className} />;

extensions/ql-vscode/src/view/common/icon/SuccessIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Codicon } from './Codicon';
+
+const Icon = styled(Codicon)`
+  color: var(--vscode-testing-iconPassed);
+`;
+
+type Props = {
+  label?: string;
+  className?: string;
+}
+
+export const SuccessIcon = ({
+  label = 'Success',
+  className,
+}: Props) => <Icon name="pass" label={label} className={className} />;