Expose DataSource List and Details Page #681

glekner · 2022-06-28T13:43:53Z

init
add init actions
add init details page
add list page

📝 Description

Expose DataSource List and Details Page

🎥 Demo

metalice · 2022-07-04T13:07:30Z

src/utils/components/ConditionsTable/ConditionsTable.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { K8sResourceCondition } from 'src/views/clusteroverview/overview/components/details-card/utils/types';


please fix import

metalice · 2022-07-04T13:07:50Z

src/utils/components/ConditionsTable/components/ConditionsTableRow.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { K8sResourceCondition } from 'src/views/clusteroverview/overview/components/details-card/utils/types';


please fix import

metalice · 2022-07-04T13:08:11Z

src/utils/components/ConditionsTable/components/useConditionsTableColumns.ts

@@ -0,0 +1,44 @@
+import { K8sResourceCondition } from 'src/views/clusteroverview/overview/components/details-card/utils/types';


those auto imports... :)

metalice · 2022-07-04T13:10:50Z

src/utils/components/DescriptionItem/DescriptionItem.tsx

+  'data-test-id': testId,
+}) => {
+  const { t } = useKubevirtTranslation();
+  const NotAvailable = <MutedTextSpan text={t('Not available')} />;


i think we already have this kind of generic component... please check. @avivtur

i copied @avivtur 's component and made it generic. we should use this one instead of his

metalice · 2022-07-04T13:12:07Z

src/utils/components/DescriptionItem/DescriptionItem.tsx

+  const getItemHeader = () => {
+    if (isPopover && bodyContent) {
+      return (
+        <Popover
+          headerContent={descriptionHeader}
+          bodyContent={
+            <>
+              {bodyContent}
+              {moreInfoURL && (
+                <>
+                  {t('More info: ')}
+                  <Link to={moreInfoURL}>{moreInfoURL}</Link>
+                </>
+              )}
+              {breadcrumb && (
+                <Breadcrumb>
+                  {breadcrumb.split('.').map((item) => (
+                    <BreadcrumbItem key={item}>{item}</BreadcrumbItem>
+                  ))}
+                </Breadcrumb>
+              )}
+            </>
+          }
+        >
+          <DescriptionListTermHelpTextButton>
+            {' '}
+            {descriptionHeader}{' '}
+          </DescriptionListTermHelpTextButton>
+        </Popover>
+      );
+    }
+
+    return <DescriptionListTerm>{descriptionHeader}</DescriptionListTerm>;
+  };
+
+  const description = (
+    <Button
+      type="button"
+      isInline
+      isDisabled={isDisabled}
+      onClick={onEditClick}
+      variant="link"
+      data-test-id={testId}
+    >
+      <Flex spaceItems={{ default: 'spaceItemsNone' }}>
+        <FlexItem>{descriptionData ?? NotAvailable}</FlexItem>
+        <FlexItem>
+          <PencilAltIcon className="co-icon-space-l pf-c-button-icon--plain" />
+        </FlexItem>
+      </Flex>
+    </Button>
+  );


consider exporting to new components, in same folder or nested folder as Title..

metalice · 2022-07-04T13:13:54Z

src/views/datasources/details/DataSourcePageTitle.tsx

+      <div className="pf-c-page__main-breadcrumb">
+        <Breadcrumb className="pf-c-breadcrumb co-breadcrumb">
+          <BreadcrumbItem>
+            <Button


maybe we can just use Link here?

metalice · 2022-07-04T13:15:12Z

src/views/datasources/details/DataSourceYamlPage.tsx

+  const loading = (
+    <Bullseye>
+      <Loading />
+    </Bullseye>
+  );
+  return !dataSource ? (
+    loading
+  ) : (


maybe const loading is redundent? simply put content ?

we should avoid popcorn loading, which is the current behavior in the vm details page, where data pops up everywhere in random timing.

Wont we get the same? with or without const? i don't see a logic difference..

oops i thought u were talking about another file :)

I think we had some crashes so this fixed it, right @avivtur ?

its was about React.suspense , not related to const loading :)

metalice · 2022-07-04T13:16:40Z

...sources/details/components/DataSourceManagedByDescription/DataSourceManagedByDescription.tsx

+    <DescriptionItem
+      descriptionHeader={t('Managed by')}
+      descriptionData={
+        dataImportCron && (


what happen if no dataImportCron? we show empty?

yes Not available

metalice

awesome work! left some minor comments

glekner · 2022-07-04T13:27:34Z

@metalice

changed to Link
Fixed K8sResourceCondition import

metalice · 2022-07-04T13:48:05Z

/lgtm

openshift-ci · 2022-07-04T13:48:13Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: glekner, metalice

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

The pull request process is described here

Needs approval from an approver in each of these files:

~~OWNERS~~ [glekner,metalice]

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

openshift-ci bot added the do-not-merge/work-in-progress label Jun 28, 2022

openshift-ci bot requested review from pcbailey and tnisan June 28, 2022 13:44

openshift-ci bot added the approved This issue is something we want to fix label Jun 28, 2022

glekner added 3 commits July 4, 2022 09:54

init

3c003bd

add init actions

013829c

add init details page

1b4f434

glekner force-pushed the datasource-feature branch from 778a2ec to 3fa6de7 Compare July 4, 2022 07:22

glekner changed the title ~~WIP: datasource feature~~ Expose DataSource List and Details Page Jul 4, 2022

openshift-ci bot removed the do-not-merge/work-in-progress label Jul 4, 2022

glekner force-pushed the datasource-feature branch 3 times, most recently from 992c717 to 9e7e43f Compare July 4, 2022 09:14

metalice reviewed Jul 4, 2022

View reviewed changes

glekner force-pushed the datasource-feature branch from 9e7e43f to 23556ab Compare July 4, 2022 13:27

add list page

22d86c7

glekner force-pushed the datasource-feature branch from 23556ab to 22d86c7 Compare July 4, 2022 13:47

openshift-ci bot assigned metalice Jul 4, 2022

openshift-ci bot added the lgtm Passed code review, ready for merge label Jul 4, 2022

openshift-ci bot merged commit a57518e into kubevirt-ui:main Jul 4, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Expose DataSource List and Details Page #681

Expose DataSource List and Details Page #681

glekner commented Jun 28, 2022 •

edited

Loading

metalice Jul 4, 2022

metalice Jul 4, 2022

metalice Jul 4, 2022

metalice Jul 4, 2022

glekner Jul 4, 2022

metalice Jul 4, 2022

metalice Jul 4, 2022 •

edited

Loading

metalice Jul 4, 2022

glekner Jul 4, 2022

metalice Jul 4, 2022

glekner Jul 4, 2022

glekner Jul 4, 2022

metalice Jul 4, 2022

metalice Jul 4, 2022

glekner Jul 4, 2022

metalice left a comment

glekner commented Jul 4, 2022

metalice commented Jul 4, 2022

openshift-ci bot commented Jul 4, 2022

		@@ -0,0 +1,34 @@
		import * as React from 'react';
		import { K8sResourceCondition } from 'src/views/clusteroverview/overview/components/details-card/utils/types';

		@@ -0,0 +1,30 @@
		import * as React from 'react';
		import { K8sResourceCondition } from 'src/views/clusteroverview/overview/components/details-card/utils/types';

		@@ -0,0 +1,44 @@
		import { K8sResourceCondition } from 'src/views/clusteroverview/overview/components/details-card/utils/types';

Expose DataSource List and Details Page #681

Expose DataSource List and Details Page #681

Conversation

glekner commented Jun 28, 2022 • edited Loading

📝 Description

🎥 Demo

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

metalice Jul 4, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

metalice left a comment

Choose a reason for hiding this comment

glekner commented Jul 4, 2022

metalice commented Jul 4, 2022

openshift-ci bot commented Jul 4, 2022

glekner commented Jun 28, 2022 •

edited

Loading

metalice Jul 4, 2022 •

edited

Loading