Container detail page #304

ZitaNemeckova · 2021-02-16T13:35:49Z

https://issues.redhat.com/browse/AAH-250

TODO:

EMPTY STATES:

sbuenafe-rh · 2021-03-01T15:38:15Z

@ZitaNemeckova on the header there should be an Edit button (to edit the repo). The description should be place in a tooltip (black bkg).

I'll look into the ReadMe empty state message and button placement. But for the time being, I don't believe you need the "Please add README" text above the Save & Cancel action buttons.

ZitaNemeckova · 2021-03-02T09:59:24Z

@sbuenafe-rh Thanks for review :) I want to add Edit button with a modal form in followup PR to make it easier to review codewise.

Fixed:

sbuenafe-rh · 2021-03-02T14:43:16Z

@ZitaNemeckova tooltip looks good! thanks for the note on the other Edit button with modal. I'll try to draft up an empty state message for the readme.

…ling foix

himdel · 2021-03-23T19:54:27Z

src/components/markdown-editor/markdown-editor.scss

+  }
+
+  .editor {
+    // I don't know why, but just setting width causes this element to get


would flex-shrink: 0 help? Sounds like this is caused by flexbox treating width as the optimum, not a constraint.

(that said, this is just moving code from elsewhere so maybe that's not quite related to this PR)

himdel · 2021-03-23T22:27:26Z

src/components/namespace-form/resources-form.tsx

    );
  }

  private updateResources(data) {
+    console.log('Data: ' + data);


console log (and the comment on line 73?)

himdel · 2021-03-23T22:28:23Z

src/components/markdown-editor/markdown-editror.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';


editror -> editor (in the filename)

himdel · 2021-03-23T22:28:40Z

src/components/index.ts

@@ -53,3 +53,4 @@ export { EmptyStateFilter } from './empty-state/empty-state-filter';
 export { EmptyStateUnauthorized } from './empty-state/empty-state-unauthorized';
 export { EmptyStateNoData } from './empty-state/empty-state-no-data';
 export { EmptyStateCustom } from './empty-state/empty-state-custom';
+export { MarkdownEditor } from './markdown-editor/markdown-editror';


editror -> editor

himdel · 2021-03-24T00:25:53Z

src/containers/execution-environment-detail/execution_environment_detail.tsx

+    this.queryImages(this.state.container.name);
+    this.queryActivities(this.state.container.name);
+    this.queryReadme(this.state.container.name);
+    this.setState({ loading: false });


unlikely to be true at this point?

and you seem to have an ordering problem here.. even without this line, the first query* request to complete will reset loading to false, not the last one ... may need 3 separate loading vars, or one method that deals with all the requests and sets state accordingly

(or should only one method be called, depending on the tab?)

Nice :) except now the query* calls from buttons won't unset loading..

newswangerd · 2021-03-24T18:26:45Z

src/containers/execution-environment-detail/execution_environment_detail.tsx

+          <td>{moment(image.pulp_created).fromNow()}</td>
+        </Tooltip>
+        <td>{image.layers}</td>
+        <td>{image.size}</td>


The size returned by the api is in bytes. The value displayed by the UI should be converted to megabytes, rounded to the highest decimal.

Ex:
1,560,000 bytes should display as 1.6 MB
1000 bytes should display as >1 Mb

This still needs to be fixed

src/containers/execution-environment-detail/execution_environment_detail.tsx

newswangerd · 2021-03-24T18:36:06Z

src/containers/execution-environment-detail/execution_environment_detail.tsx

+      activities: [],
+      container: { name: this.props.match.params['container'] },
+      readme: '',
+      params: {


params for the search filters, sort and pagination aren't being loaded into the UI when the page loads.

localhost:8002/ui/containers/postgres?id=postgres&tag=latest should populate the filter with the latest tag.

This still isn't working. The parameters are in the URL, but they don't get added to the filter when you load the page.

src/containers/execution-environment-detail/execution_environment_detail.tsx

newswangerd · 2021-03-24T19:35:35Z

src/containers/execution-environment-detail/execution_environment_detail.tsx

+  loading: boolean;
+  container: { name: string };
+  readme: string;
+  images: any[];


Don't use any. Need to add types for the api responses for images, container, and activities.

This still needs to be fixed.

src/containers/execution-environment-detail/execution_environment_detail.tsx

src/paths.ts

newswangerd · 2021-03-29T14:54:10Z

src/containers/execution-environment-detail/execution_environment_detail.tsx

+  loading: boolean;
+  container: { name: string };
+  readme: string;
+  images: any[];


This still needs to be fixed.

src/api/activities.ts

src/containers/execution-environment-detail/execution_environment_detail.tsx

src/containers/execution-environment-detail/execution_environment_detail_activities.tsx

…tainer not found

newswangerd

There are still a few things here that violate best practices, which will make updating and debugging this page later more challenging. However, in the interest of finishing this feature, I'm going to mark this approved and take it on as technical debt for later.

newswangerd · 2021-04-07T15:40:45Z

src/containers/execution-environment-detail/execution_environment_detail.tsx

+  }
+
+  render() {
+    if (this.state.redirect === 'activity') {


This should be moved into the header.

newswangerd · 2021-04-07T15:46:11Z

src/components/execution-environment-header/execution-environment-header.tsx

+  IState
+> {
+  componentDidMount() {
+    ExecutionEnvironmentAPI.get(this.props.id)


Components should never make API calls unless it's absolutely necessary to do so.

newswangerd · 2021-04-07T15:51:51Z

src/containers/execution-environment-detail/execution_environment_detail.tsx

+
+interface IState {
+  loading: boolean;
+  container: { name: string };


This should use a container type that gets imported from api/response-types, especially since this type is used on all the container detail views as well as the container list view.

ZitaNemeckova force-pushed the container_detail_page branch from dba4378 to 6943509 Compare February 22, 2021 12:42

ZitaNemeckova force-pushed the container_detail_page branch from 6943509 to 62924f5 Compare March 1, 2021 13:52

ZitaNemeckova force-pushed the container_detail_page branch from 83ad142 to b925cf3 Compare March 12, 2021 13:52

ZitaNemeckova changed the title ~~[WIP] Container detail page~~ Container detail page Mar 17, 2021

ZitaNemeckova added 16 commits March 17, 2021 14:54

Add detail page

bf84a7e

Add Images tab

2658ae6

Add Activity tab

e41da69

Remove heatmap placeholder for now

9e89a82

Make markdown editor component

ed2b969

Add API for images

cc049e3

Add truncation of description

3ee8958

Use Tooltip instead of Popover. Remove helperText

64d2675

Add activities via API

e7c083c

Make activity lines look better

f25447d

Add empty states

400f04d

Image digest is in a blue Label

c72e4d1

Fix instructions

5bf9271

Fix image instruction

34dc35a

Use Readme API

ffc235b

Remove kebab until functionality is implemented

934952b

ZitaNemeckova force-pushed the container_detail_page branch from 551061c to 934952b Compare March 17, 2021 13:56

Add missing ActiveUserAPI that was removed in rebase and one lost sty…

fb2c8ff

…ling foix

himdel reviewed Mar 23, 2021

View reviewed changes

himdel reviewed Mar 24, 2021

View reviewed changes

ZitaNemeckova added 3 commits March 24, 2021 11:24

Fix missing image pagination functionality

ebfbe8b

Wait on all Promises to finish before setting loading to false

b533f28

Add Empty state when there's no data for selected tag

ed6d8a3

newswangerd requested changes Mar 24, 2021

View reviewed changes

ZitaNemeckova added 4 commits March 26, 2021 10:51

Fix ClipboardCopy

351db8d

Fix Markdown editor styling

ce78e2b

Add filter by digest

a4d1f71

Add correct truncation

e866cb4

ZitaNemeckova force-pushed the container_detail_page branch from a8e00f7 to e866cb4 Compare March 26, 2021 11:45

ZitaNemeckova added 2 commits March 29, 2021 13:17

Split Container detail page into three components

d56000b

Fix container urls

6c52298

ZitaNemeckova requested a review from newswangerd March 29, 2021 11:27

newswangerd reviewed Mar 29, 2021

View reviewed changes

newswangerd requested changes Mar 29, 2021

View reviewed changes

src/api/activities.ts Outdated Show resolved Hide resolved

src/containers/execution-environment-detail/execution_environment_detail.tsx Show resolved Hide resolved

src/containers/execution-environment-detail/execution_environment_detail_activities.tsx Outdated Show resolved Hide resolved

ZitaNemeckova added 2 commits March 30, 2021 11:56

Fix image size to be human readable

9441b6d

Fix loading of params

436d3e8

himdel mentioned this pull request Mar 31, 2021

Container Registry Manifest #336

Merged

ZitaNemeckova added 3 commits March 31, 2021 12:02

Make sha into a component to unify them and fix Instructions title

39e48d2

Add missing types

346a202

Get Url from browser

0bdc151

ZitaNemeckova force-pushed the container_detail_page branch from 6e836e4 to 0bdc151 Compare March 31, 2021 10:16

ZitaNemeckova added 3 commits March 31, 2021 12:22

Call super list

cec9cb7

Do not change port in url for pull image

30fe5f4

Move EE pages headers to component

af1a739

ZitaNemeckova force-pushed the container_detail_page branch from a785163 to af1a739 Compare March 31, 2021 15:50

Change routes to be able to take base_path with slash. Add 404 if con…

77d6fc9

…tainer not found

ZitaNemeckova requested a review from newswangerd April 1, 2021 11:16

newswangerd approved these changes Apr 7, 2021

View reviewed changes

ZitaNemeckova merged commit 5e49653 into ansible:master Apr 8, 2021

ZitaNemeckova deleted the container_detail_page branch April 8, 2021 10:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Container detail page #304

Container detail page #304

ZitaNemeckova commented Feb 16, 2021 •

edited

Loading

sbuenafe-rh commented Mar 1, 2021

ZitaNemeckova commented Mar 2, 2021 •

edited

Loading

sbuenafe-rh commented Mar 2, 2021

himdel Mar 23, 2021 •

edited

Loading

himdel Mar 23, 2021

himdel Mar 23, 2021

himdel Mar 23, 2021 •

edited

Loading

himdel Mar 24, 2021

himdel Mar 24, 2021 •

edited

Loading

ZitaNemeckova Mar 24, 2021

himdel Mar 24, 2021

newswangerd Mar 24, 2021

newswangerd Mar 29, 2021

newswangerd Mar 24, 2021

newswangerd Mar 29, 2021

newswangerd Mar 24, 2021

newswangerd Mar 29, 2021

newswangerd Mar 29, 2021

newswangerd left a comment

newswangerd Apr 7, 2021

newswangerd Apr 7, 2021

newswangerd Apr 7, 2021

Container detail page #304

Container detail page #304

Conversation

ZitaNemeckova commented Feb 16, 2021 • edited Loading

sbuenafe-rh commented Mar 1, 2021

ZitaNemeckova commented Mar 2, 2021 • edited Loading

sbuenafe-rh commented Mar 2, 2021

himdel Mar 23, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

himdel Mar 23, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

himdel Mar 24, 2021 • 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

newswangerd left a 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

ZitaNemeckova commented Feb 16, 2021 •

edited

Loading

ZitaNemeckova commented Mar 2, 2021 •

edited

Loading

himdel Mar 23, 2021 •

edited

Loading

himdel Mar 23, 2021 •

edited

Loading

himdel Mar 24, 2021 •

edited

Loading