[dashboard] usage view allows for flexible time range #14515

svenefftinge · 2022-11-08T12:54:10Z

Description

This change allows to set custom date ranges on the usage view.

Related Issue(s)

How to test

create some usage
go to https://se-usage-view.preview.gitpod-dev.com/usage
Also try https://se-usage-view.preview.gitpod-dev.com/usage#2022-01-08:2022-01-12

Release Notes

Usage view allows for arbitrary date ranges

Documentation

Werft options:

/werft with-local-preview
If enabled this will build install/preview
/werft with-preview
/werft with-large-vm
/werft with-integration-tests=all
Valid options are all, workspace, webapp, ide

werft-gitpod-dev-com · 2022-11-08T12:54:30Z

started the job as gitpod-build-se-usage-view.42 because the annotations in the pull request description changed
(with .werft/ from main)

werft-gitpod-dev-com · 2022-11-08T12:54:31Z

started the job as gitpod-build-se-usage-view.43 because the annotations in the pull request description changed
(with .werft/ from main)

svenefftinge · 2022-11-08T13:05:25Z

/werft run with-clean-slate-deployment

👍 started the job as gitpod-build-se-usage-view.44
(with .werft/ from main)

components/dashboard/src/components/UsageView.tsx

easyCZ · 2022-11-08T19:55:49Z

Nice improvement!

geropl

Tested and works nicely. 💖

/hold in case you want to handle this here, now.

gtsiolis · 2022-11-09T17:00:25Z

Looking at this now! 👀

gtsiolis

Thanks @svenefftinge for adding this and hanging here while I was collecting some all around thoughts around the hot 🔥 topic of a date picker component.

Left some first-round comments below to keep the conversations going.

components/dashboard/src/components/UsageView.tsx

gtsiolis · 2022-11-09T17:41:06Z

components/dashboard/src/components/UsageView.tsx

+                }
+                subtitle={
+                    <h2 className="tracking-wide flex mt-3">
+                        <h2 className="mr-2">Period: </h2>


issue: The main issue with adding the range picker here is that this introduces another point for selecting a period, see 🅰️ and 🅱️ in the screenshot below.

Entry points for selecting a period

gtsiolis · 2022-11-09T19:16:21Z

components/dashboard/src/components/UsageView.tsx

+                }
+                subtitle={
+                    <h2 className="tracking-wide flex mt-3">
+                        <h2 className="mr-2">Period: </h2>


thought: The idea of having the period selection on the top of the left sidebar is to update all usage entries on the main content as well as all aggregated data on the left sidebar based on the period selection. We could use the heading subtitle for hijacking this action and filtering in a similar way also other views like workpaces per team, etc.

Idea of the top-left control for period selection

gtsiolis · 2022-11-09T19:30:34Z

components/dashboard/src/components/UsageView.tsx

+                }
+                subtitle={
+                    <h2 className="tracking-wide flex mt-3">
+                        <h2 className="mr-2">Period: </h2>


question: While the goal long term is to replace the primitive navigation between months with more flexible options (Last 7 days, 30 days, etc) with a flexible dropdown (see #11685 (comment)) and possibly move the tabs below the header (#10976), to keep the scope small here, what do you think of moving the period elements below inside the left sidebar? Alternatively, we could keep the custom filtering on the heading subtitle, which feels nice.

Early design for period selection Selection on the sidebar Selection on the heading

If you let me pick, I'd go with the "Selection on the heading" version. Looks slickest to me.
Would be great if you could take a general look at how we want to do the range selection out of the scope of this PR.

The selection on the heading looks slick indeed, and I've been wanting to make this heading component more useful so that form follows function (internal), see #10138 and #6764. Let's try that regardless of any updates that will take place in the left sidebar. 🤝

gtsiolis · 2022-11-09T19:31:56Z

components/dashboard/src/components/UsageView.tsx

+                            onChange={(date) => date && setEndDate(date.getTime())}
+                            selectsEnd
+                            startDate={new Date(startDate)}
+                            endDate={new Date(endDate)}


suggestion: Could we show the last day of a month for each month selection? Currently, for example, when selecting October 2022, the range changes to 01/10/2022 - 01/11/2022, and would be more accurate if this would change to 01/10/2022 - 31/10/2022.

gtsiolis · 2022-11-09T19:41:33Z

components/dashboard/src/components/UsageView.tsx

+                subtitle={
+                    <h2 className="tracking-wide flex mt-3">
+                        <h2 className="mr-2">Period: </h2>
+                        {startDateError}


issue: Probably not the same error as in the screenshot, and maybe out of the scope of the changes, but we should probably impose a limit on the the max date range gap like 180 days or something, right? A good MVC could be to surface a danger alert with the error message instead of breaking the page.

components/dashboard/package.json

components/dashboard/src/components/react-datepicker.css

gtsiolis · 2022-11-09T19:50:16Z

components/dashboard/src/components/UsageView.tsx

+                }
+                subtitle={
+                    <h2 className="tracking-wide flex mt-3">
+                        <h2 className="mr-2">Period: </h2>


thought: Ideally, the custom period selection should be as close as possible with the fixed period selections.

gtsiolis

Alright, almost there! Thanks for addressing all design-related feedback, @svenefftinge!

Left one more round of comments.

Other than that, looks great! Leave anything that looks insignificant to block from merging for a follow up PR. I can make most of the style changes in a separate PR. 🏀

gtsiolis · 2022-11-10T17:54:52Z

components/dashboard/src/components/UsageView.tsx

+                }
+                subtitle={
+                    <h2 className="tracking-wide flex mt-3">
+                        <h2 className="mr-2">Period: </h2>


The selection on the heading looks slick indeed, and I've been wanting to make this heading component more useful so that form follows function (internal), see #10138 and #6764. Let's try that regardless of any updates that will take place in the left sidebar. 🤝

gtsiolis · 2022-11-10T17:58:08Z

components/dashboard/src/components/UsageView.tsx

+                            onChange={(date) => date && setEndDate(date.getTime())}
+                            selectsEnd
+                            startDate={new Date(startDate)}
+                            endDate={new Date(endDate)}


gtsiolis · 2022-11-10T17:58:38Z

components/dashboard/src/components/UsageView.tsx

+                            selected={new Date(endDate)}
+                            onChange={(date) => date && setEndDate(date.getTime())}
+                            selectsEnd
+                            startDate={new Date(startDate)}


This looks one hundred times better. 💯

gtsiolis · 2022-11-10T18:16:28Z

components/dashboard/src/components/UsageView.tsx

+                title={
+                    <div className="flex items-baseline">
+                        <h1 className="tracking-wide">{headerTitle}</h1>
+                        <h2 className="ml-3">(updated every 15 minutes).</h2>


question: We dropped this information, but I can open a follow up PR to add this back. Would you say it's not as useful to include in the page? If you think it's ok to include, here's the SVG. Using one gray color could suffice for the first iteration on light and dark theme.

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <path fill="#0F172A" d="M12.75 6c0-.41421-.3358-.75-.75-.75s-.75.33579-.75.75h1.5ZM12 12h-.75c0 .4142.3358.75.75.75V12Zm4.5.75c.4142 0 .75-.3358.75-.75s-.3358-.75-.75-.75v1.5Zm3.75-.75c0 4.5563-3.6937 8.25-8.25 8.25v1.5c5.3848 0 9.75-4.3652 9.75-9.75h-1.5ZM12 20.25c-4.55635 0-8.25-3.6937-8.25-8.25h-1.5c0 5.3848 4.36522 9.75 9.75 9.75v-1.5ZM3.75 12c0-4.55635 3.69365-8.25 8.25-8.25v-1.5c-5.38478 0-9.75 4.36522-9.75 9.75h1.5ZM12 3.75c4.5563 0 8.25 3.69365 8.25 8.25h1.5c0-5.38478-4.3652-9.75-9.75-9.75v1.5ZM11.25 6v6h1.5V6h-1.5Zm5.25 5.25H12v1.5h4.5v-1.5Z"/> </svg>

gtsiolis · 2022-11-10T18:20:28Z

components/dashboard/src/components/UsageView.tsx

@@ -160,13 +175,67 @@ function UsageView({ attributionId }: UsageViewProps) {

    const headerTitle = attributionId.kind === "team" ? "Team Usage" : "Personal Usage";

+    const DateDisplay = forwardRef((arg: any, ref: any) => (
+        <div
+            className="px-2 p-1 text-gray-500 bg-gray-100 dark:text-gray-400 dark:bg-gray-800 rounded-md cursor-pointer flex items-center"


nitpick: Minor hover state fix.

Suggested change

className="px-2 p-1 text-gray-500 bg-gray-100 dark:text-gray-400 dark:bg-gray-800 rounded-md cursor-pointer flex items-center"

className="px-2 p-1 text-gray-500 bg-gray-50 dark:text-gray-400 dark:bg-gray-800 rounded-md cursor-pointer flex items-center hover:bg-gray-100 dark:hover:bg-gray-700"

gtsiolis · 2022-11-10T18:22:08Z

components/dashboard/src/components/UsageView.tsx

+                            customInput={<DateDisplay />}
+                            dateFormat={"MMM d, yyyy"}
+                        />
+                        <h2 className="mx-2">to</h2>


nitpick: Minor spacing fix.

Suggested change

<h2 className="mx-2">to</h2>

<h2 className="mx-1">to</h2>

gtsiolis · 2022-11-10T18:23:36Z

components/dashboard/src/components/UsageView.tsx

@@ -160,13 +175,67 @@ function UsageView({ attributionId }: UsageViewProps) {

    const headerTitle = attributionId.kind === "team" ? "Team Usage" : "Personal Usage";

+    const DateDisplay = forwardRef((arg: any, ref: any) => (
+        <div
+            className="px-2 p-1 text-gray-500 bg-gray-100 dark:text-gray-400 dark:bg-gray-800 rounded-md cursor-pointer flex items-center"


nitpick: Minor line height fix.

Suggested change

className="px-2 p-1 text-gray-500 bg-gray-100 dark:text-gray-400 dark:bg-gray-800 rounded-md cursor-pointer flex items-center"

className="px-2 py-0.5 text-gray-500 bg-gray-100 dark:text-gray-400 dark:bg-gray-800 rounded-md cursor-pointer flex items-center"

gtsiolis · 2022-11-10T18:26:15Z

components/dashboard/src/components/UsageView.tsx

+                    </div>
+                }
+                subtitle={
+                    <div className="tracking-wide flex mt-3 items-center">


nitpick: Minor spacing issue, breaking line height.

Suggested change

<div className="tracking-wide flex mt-3 items-center">

<div className="tracking-wide flex items-center">

Removing this looks bad. Are you sure? If so please fix in a follow up.

gtsiolis · 2022-11-10T18:32:34Z

components/dashboard/src/components/UsageView.tsx

+                    </div>
+                }
+                subtitle={
+                    <div className="tracking-wide flex mt-3 items-center">


issue(non-blocking): This structure breaks slightly the heigh of the header but let's fix this in #6764 unless you'd like to move this element in the div above, see subtitle and bottom border.

components/dashboard/src/components/UsageView.tsx

components/dashboard/src/components/react-datepicker.css

svenefftinge · 2022-11-10T19:39:39Z

/unhold

roboquat added do-not-merge/work-in-progress do-not-merge/release-note-label-needed size/XS labels Nov 8, 2022

svenefftinge changed the title ~~tbd~~ [dashboard] usage view allows for flexible time range Nov 8, 2022

svenefftinge force-pushed the se/usage-view branch from b5fcdf4 to e0a7822 Compare November 8, 2022 14:57

roboquat added size/L and removed size/XS labels Nov 8, 2022

svenefftinge force-pushed the se/usage-view branch from e0a7822 to 7969cbd Compare November 8, 2022 17:02

svenefftinge marked this pull request as ready for review November 8, 2022 19:46

svenefftinge requested a review from a team November 8, 2022 19:46

roboquat removed the do-not-merge/work-in-progress label Nov 8, 2022

github-actions bot added the team: webapp Issue belongs to the WebApp team label Nov 8, 2022

svenefftinge added the needs visual design label Nov 8, 2022

roboquat added release-note and removed do-not-merge/release-note-label-needed labels Nov 8, 2022

easyCZ reviewed Nov 8, 2022

View reviewed changes

components/dashboard/src/components/UsageView.tsx Show resolved Hide resolved

components/dashboard/src/components/UsageView.tsx Outdated Show resolved Hide resolved

components/dashboard/src/components/UsageView.tsx Outdated Show resolved Hide resolved

geropl approved these changes Nov 9, 2022

View reviewed changes

roboquat added the do-not-merge/hold label Nov 9, 2022

svenefftinge force-pushed the se/usage-view branch from 7969cbd to da8c9ee Compare November 9, 2022 16:59

gtsiolis reviewed Nov 9, 2022

View reviewed changes

svenefftinge force-pushed the se/usage-view branch 2 times, most recently from b1f7e52 to 959e374 Compare November 10, 2022 16:44

gtsiolis approved these changes Nov 10, 2022

View reviewed changes

gtsiolis reviewed Nov 10, 2022

View reviewed changes

components/dashboard/src/components/react-datepicker.css Show resolved Hide resolved

svenefftinge force-pushed the se/usage-view branch from 959e374 to f7ef9a8 Compare November 10, 2022 19:04

[dashboard] flexible usage range

7f075ea

svenefftinge force-pushed the se/usage-view branch from f7ef9a8 to 7f075ea Compare November 10, 2022 19:22

roboquat removed the do-not-merge/hold label Nov 10, 2022

roboquat merged commit f4eb948 into main Nov 10, 2022

roboquat deleted the se/usage-view branch November 10, 2022 19:40

roboquat added deployed: webapp Meta team change is running in production deployed Change is completely running in production labels Nov 11, 2022

This was referenced Jan 2, 2023

Use the actual current period when visiting the usage page #15544

Closed

[usage] Allow more flexible time ranges #13288

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[dashboard] usage view allows for flexible time range #14515

[dashboard] usage view allows for flexible time range #14515

svenefftinge commented Nov 8, 2022 •

edited

Loading

werft-gitpod-dev-com bot commented Nov 8, 2022

werft-gitpod-dev-com bot commented Nov 8, 2022

svenefftinge commented Nov 8, 2022 •

edited by werft-gitpod-dev-com bot

Loading

easyCZ commented Nov 8, 2022

geropl left a comment

gtsiolis commented Nov 9, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment

gtsiolis Nov 9, 2022

gtsiolis Nov 9, 2022 •

edited

Loading

gtsiolis Nov 9, 2022 •

edited

Loading

svenefftinge Nov 10, 2022

gtsiolis Nov 10, 2022

gtsiolis Nov 9, 2022

gtsiolis Nov 10, 2022

gtsiolis Nov 9, 2022

gtsiolis Nov 9, 2022

gtsiolis left a comment •

edited

Loading

gtsiolis Nov 10, 2022

gtsiolis Nov 10, 2022

gtsiolis Nov 10, 2022

gtsiolis Nov 10, 2022

gtsiolis Nov 10, 2022

gtsiolis Nov 10, 2022

gtsiolis Nov 10, 2022

gtsiolis Nov 10, 2022

svenefftinge Nov 10, 2022

gtsiolis Nov 10, 2022

svenefftinge commented Nov 10, 2022

	className="px-2 p-1 text-gray-500 bg-gray-100 dark:text-gray-400 dark:bg-gray-800 rounded-md cursor-pointer flex items-center"
	className="px-2 p-1 text-gray-500 bg-gray-50 dark:text-gray-400 dark:bg-gray-800 rounded-md cursor-pointer flex items-center hover:bg-gray-100 dark:hover:bg-gray-700"

	className="px-2 p-1 text-gray-500 bg-gray-100 dark:text-gray-400 dark:bg-gray-800 rounded-md cursor-pointer flex items-center"
	className="px-2 py-0.5 text-gray-500 bg-gray-100 dark:text-gray-400 dark:bg-gray-800 rounded-md cursor-pointer flex items-center"

	<div className="tracking-wide flex mt-3 items-center">
	<div className="tracking-wide flex items-center">

[dashboard] usage view allows for flexible time range #14515

[dashboard] usage view allows for flexible time range #14515

Conversation

svenefftinge commented Nov 8, 2022 • edited Loading

Description

Related Issue(s)

How to test

Release Notes

Documentation

Werft options:

werft-gitpod-dev-com bot commented Nov 8, 2022

werft-gitpod-dev-com bot commented Nov 8, 2022

svenefftinge commented Nov 8, 2022 • edited by werft-gitpod-dev-com bot Loading

easyCZ commented Nov 8, 2022

geropl left a comment

Choose a reason for hiding this comment

gtsiolis commented Nov 9, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gtsiolis Nov 9, 2022 • edited Loading

Choose a reason for hiding this comment

gtsiolis Nov 9, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gtsiolis left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

svenefftinge commented Nov 10, 2022

svenefftinge commented Nov 8, 2022 •

edited

Loading

svenefftinge commented Nov 8, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Nov 9, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis Nov 9, 2022 •

edited

Loading

gtsiolis Nov 9, 2022 •

edited

Loading

gtsiolis left a comment •

edited

Loading