Add Dashboard Activity card by rawagner · Pull Request #2543 · openshift/console

rawagner · 2019-08-30T11:05:13Z

the Recent section is just a basic event list.

rawagner · 2019-08-30T11:05:41Z

targeting 4.3

/hold

andybraren · 2019-08-30T15:16:19Z

Oh wow, awesome! 🎉

I'm working on some adjustments to the Recent Events area right now and will comment here when those are ready. Until then, just some minor things I notice:

Timestamps within Recent should have 24px of space to the left-hand side, aligning with the "Recent" title
We're thinking timestamps would be written like "7:59 pm" to align with the date/time formatting of the rest of the Console - would you agree?
Ongoing activities without progress bars (first screenshot) should have some space between the icon and text (4px)
Looks like some spacing is needed above the ongoing activity in the second screenshot, matching the space below

andybraren · 2019-08-30T22:31:01Z

This is still a little WIP (we're targeting to have all cards "finalized" early next week) but here's the latest thinking. Ignore the height of the card for now.

Each event now includes its resource badge when collapsed, making the card as a whole a little more useful without needing to read anything.

When expanded, the resource badge and description within the row disappear, but the timestamp (and error icon) stays. The second timestamp in the expanded area (like "a minute ago" or "Aug 30, 5:55 pm") is no longer needed. Events are typically within the last few hours anyway, and we already have a timestamp with the hour/minute.

The last example just shows the various Ongoing states, which are unchanged. I remember you pointed out that the start time won't always be available, which is fine - that line would just be removed. 🙂

rawagner · 2019-09-02T07:47:26Z

Thanks Andy!

Oh wow, awesome!

I'm working on some adjustments to the Recent Events area right now and will comment here when those are ready. Until then, just some minor things I notice:

Timestamps within Recent should have 24px of space to the left-hand side, aligning with the "Recent" title

sure, just an oversight :) fixed

We're thinking timestamps would be written like "7:59 pm" to align with the date/time formatting of the rest of the Console - would you agree?

I agree that we need to keep formatting aligned, however right now there are actually both formatting used. I see that AM/PM is used for events and 24hrs time is used in charts. So we need to unify it.

Ongoing activities without progress bars (first screenshot) should have some space between the icon and text (4px)

Agreed, but since its just a demo activity I didnt really style it :)

Looks like some spacing is needed above the ongoing activity in the second screenshot, matching the space below

the space is there, its just scrolled a bit so it looks weird

rawagner · 2019-09-02T07:48:37Z

This is still a little WIP (we're targeting to have all cards "finalized" early next week) but here's the latest thinking. Ignore the height of the card for now.

Each event now includes its resource badge when collapsed, making the card as a whole a little more useful without needing to read anything.

When expanded, the resource badge and description within the row disappear, but the timestamp (and error icon) stays. The second timestamp in the expanded area (like "a minute ago" or "Aug 30, 5:55 pm") is no longer needed. Events are typically within the last few hours anyway, and we already have a timestamp with the hour/minute.

The last example just shows the various Ongoing states, which are unchanged. I remember you pointed out that the start time won't always be available, which is fine - that line would just be removed.

PR updated to latest design

rawagner · 2019-09-02T08:36:15Z

some screenshots of updated recent events section

afreen23 · 2019-09-30T05:40:55Z

+      return a.properties.isActivity(queryResults);
+    })
+    .map(a => {
+      const queryResults = a.properties.queries.map(q => prometheusResults.getIn([q, 'data']) as PrometheusResponse);


As per the recent redux state changes, dont we need to get the loadError here as well ?
Otherwise we might need to repoll the queries for the prometheus activities.

Okay I see its implemented

vojtechszocs · 2019-10-01T12:22:38Z

Let's follow the convention used by DevTools plugin, and hopefully other packages will follow up as well:

files containing React component(s) reflect the primary component name, e.g. DefaultPage.tsx

primary React component is provided via default export

cc @christianvogt @spadgett

vojtechszocs · 2019-10-01T12:24:12Z

Nit: extra newline.

vojtechszocs · 2019-10-01T12:26:10Z

For now, I'd suggest using a single webpackChunkName value here.

vojtechszocs · 2019-10-01T12:27:45Z

For now, I'd suggest using a single webpackChunkName value in all extensions, e.g. demo.

vojtechszocs · 2019-10-01T12:30:06Z

Suggested change

export interface DashboardsOverviewActivity extends DashboardExtension {

export interface DashboardsOverviewResourceActivity extends DashboardExtension {

vojtechszocs · 2019-10-01T12:31:41Z

Suggested change

type: 'Dashboards/Overview/Prometheus/Activity';

type: 'Dashboards/Overview/Activity/Prometheus';

vojtechszocs · 2019-10-01T12:36:03Z

Suggested change

activities: {

resourceActivities: {

vojtechszocs · 2019-10-01T12:46:05Z

Suggested change

const activities = getActivities(flags);

const resourceActivities = getActivities(flags);

vojtechszocs · 2019-10-01T12:46:28Z

Suggested change

const allActivities = _.flatten(

const allResourceActivities = _.flatten(

vojtechszocs · 2019-10-01T12:51:09Z

Suggested change

const getActivities = (flags: FlagsObject) =>

const getResourceActivities = (flags: FlagsObject) =>

vojtechszocs · 2019-10-01T14:14:14Z

/lgtm

openshift-ci-robot · 2019-10-01T14:14:28Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: rawagner, vojtechszocs

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

~~frontend/OWNERS~~ [vojtechszocs]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

openshift-ci-robot added the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Aug 30, 2019

openshift-ci-robot requested review from dtaylor113 and spadgett August 30, 2019 11:05

openshift-ci-robot added size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. component/core Related to console core functionality component/sdk Related to console-plugin-sdk labels Aug 30, 2019

openshift-ci-robot added the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Aug 30, 2019

rawagner force-pushed the dashboard-activity branch from 24a87af to 1561764 Compare August 30, 2019 14:14

openshift-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Aug 30, 2019

rawagner force-pushed the dashboard-activity branch 2 times, most recently from 5b395a1 to 3fd0670 Compare August 30, 2019 14:30

rawagner force-pushed the dashboard-activity branch from 3fd0670 to 9e35310 Compare September 2, 2019 07:42

openshift-ci-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Sep 2, 2019

rawagner closed this Sep 2, 2019

rawagner reopened this Sep 2, 2019

rawagner force-pushed the dashboard-activity branch from 9e35310 to 331f708 Compare September 2, 2019 08:22

rawagner force-pushed the dashboard-activity branch 4 times, most recently from 3052285 to 868d0c5 Compare September 3, 2019 12:35

rawagner mentioned this pull request Sep 3, 2019

Cannot pass custom className to Accordion Content Body patternfly/patternfly-react#2789

Closed

rawagner force-pushed the dashboard-activity branch 3 times, most recently from 13d52de to 73cd976 Compare September 4, 2019 08:48

rawagner force-pushed the dashboard-activity branch from 67a80c0 to fefbcf9 Compare September 26, 2019 14:08

openshift-ci-robot added size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files. and removed size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. labels Sep 26, 2019

rawagner force-pushed the dashboard-activity branch from fefbcf9 to e5a739b Compare September 26, 2019 14:12

rawagner changed the base branch from master-4.3 to master September 26, 2019 14:27

openshift-ci-robot added size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. and removed size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files. labels Sep 26, 2019

rawagner force-pushed the dashboard-activity branch from e5a739b to 0bda245 Compare September 27, 2019 06:52

afreen23 reviewed Sep 30, 2019

View reviewed changes

rawagner force-pushed the dashboard-activity branch 13 times, most recently from c670756 to 38991de Compare September 30, 2019 20:12

vojtechszocs suggested changes Oct 1, 2019

View reviewed changes

Add Dashboard Activity card

d503234

rawagner force-pushed the dashboard-activity branch from 590308e to d503234 Compare October 1, 2019 14:10

openshift-ci-robot assigned vojtechszocs Oct 1, 2019

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Oct 1, 2019

openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Oct 1, 2019

	export interface DashboardsOverviewActivity extends DashboardExtension {
	export interface DashboardsOverviewResourceActivity extends DashboardExtension {

	type: 'Dashboards/Overview/Prometheus/Activity';
	type: 'Dashboards/Overview/Activity/Prometheus';

	const activities = getActivities(flags);
	const resourceActivities = getActivities(flags);

	const allActivities = _.flatten(
	const allResourceActivities = _.flatten(

	const getActivities = (flags: FlagsObject) =>
	const getResourceActivities = (flags: FlagsObject) =>

Uh oh!

Conversation

rawagner commented Aug 30, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rawagner commented Aug 30, 2019

Uh oh!

andybraren commented Aug 30, 2019

Uh oh!

andybraren commented Aug 30, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rawagner commented Sep 2, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rawagner commented Sep 2, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rawagner commented Sep 2, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

afreen23 Sep 30, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vojtechszocs commented Oct 1, 2019

Uh oh!

openshift-ci-robot commented Oct 1, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

rawagner commented Aug 30, 2019 •

edited

Loading

andybraren commented Aug 30, 2019 •

edited

Loading

rawagner commented Sep 2, 2019 •

edited

Loading

rawagner commented Sep 2, 2019 •

edited

Loading

rawagner commented Sep 2, 2019 •

edited

Loading

afreen23 Sep 30, 2019 •

edited

Loading