Sharable Kedro-Viz UI for AWS, GCP and Azure #1718

jitu5 · 2024-01-25T15:25:05Z

Description

Resolves #1674 & #1675

Sharable URL modal UI updated with below changes

Development notes

shareable-url-modal component updated as per new design
shareable-url-modal e2e cypress test updated
In metadata.js and settings-modal.js version info and experiment tracking link now conditionally hidden
<Input> component updated to accommodate input and textarea type
<Dropdown> component updated to accommodate “placehoder” text
<Modal> component updated to make title conditional

QA notes

Note: This will be merged into the branch feature/shareableviz-extended-support.
Deploying to AWS, GCP and Azure will only works from UI after 1708 & 1711 get merged into the branch feature/shareableviz-extended-support

Checklist

Read the contributing guidelines
Opened this PR as a 'Draft Pull Request' if it is work-in-progress
Updated the documentation to reflect the code changes
Added new entries to the RELEASE.md file
Added tests to cover my changes

src/components/experiment-tracking/run-details-modal/run-details-modal.js

Signed-off-by: <>

src/components/shareable-url-modal/shareable-url-modal.js

ravi-kumar-pilla · 2024-02-20T20:33:44Z

src/components/shareable-url-modal/shareable-url-modal.js

+  };
+
+  const handleResponseUrl = () => {
+    // If the URL does not start with http:// or https://, append http:// to avoid relative path issue


appending http will not work for Azure. By default AzureBlobStorage serves content on https
Secure transfer required is enabled by default

ravi-kumar-pilla · 2024-02-20T20:38:16Z

src/components/shareable-url-modal/shareable-url-modal.js

+      return url;
+    }
+    return responseUrl;
+  };


I am not sure how to handle this if the user enters a wrong endpoint url . There can be many cases of url not entered properly. We should document this in our docs and avoid handling all cases. I think you did this to handle gcp load balancer usecase @jitu5 ?

In the case of GCP with a load balancer, the endpoint will most likely be an IP address, such as 32.206.61.13:80. If a user pastes this IP address into the endpoint input field, the clickable link on the success page becomes relative to the current address, like https://example.com/32.206.61.13:80. To address this, I have appended 'http://' to the link.

Should this handling be specific to GCP @ravi-kumar-pilla ?

src/components/shareable-url-modal/shareable-url-modal.js

…b.com/kedro-org/kedro-viz into feature/share_viz_ui Signed-off-by: ravi-kumar-pilla <[email protected]>

src/components/shareable-url-modal/shareable-url-modal.js

src/components/ui/input/index.js

ravi-kumar-pilla · 2024-02-20T21:47:59Z

Hi Team,

We also need to handle the case where the credentials are configured correctly but the bucket_name is incorrect. Below is the output and error type as of now -

AWS
BE Error - FileNotFoundError: The specified bucket does not exist

FE -

Azure
BE Error - ServiceRequestError: Cannot connect to host somek.blob.core.windows.net:443 ssl:default [nodename nor servname provided, or not known]

FE -

GCP
BE Error - FileNotFoundError: https://storage.googleapis.com/upload/storage/v1/b/somek/o

FE -

Should we create a separate ticket and handle these scenarios by passing a common error message like - The specified bucket does not exist when the BE error is either FileNotFoundError or ServiceRequestError ? @rashidakanchwala

Thank you

rashidakanchwala · 2024-02-21T08:56:00Z

Hi Ravi, I also agree the above errors are quite vague. As a short term solution -- let's have a common - 'The specified bucket does not exist' for FileNotFound or ServiceRequestError.

But let's also create a seperate ticket to handle error mesages as we will have to think through this a bit more. Once Steph is back, we can map out different success/failure journeys.

Signed-off-by: <>

…re_viz_ui Signed-off-by: <>

src/components/shareable-url-modal/shareable-url-modal.js

ravi-kumar-pilla · 2024-02-21T14:45:26Z

Hi Ravi, I also agree the above errors are quite vague. As a short term solution -- let's have a common - 'The specified bucket does not exist' for FileNotFound or ServiceRequestError.

Sure will add it in the current branch.

But let's also create a seperate ticket to handle error mesages as we will have to think through this a bit more. Once Steph is back, we can map out different success/failure journeys.

Sure, will do that

Signed-off-by: <>

…edro-viz into feature/share_viz_ui Signed-off-by: ravi-kumar-pilla <[email protected]>

Signed-off-by: <>

Signed-off-by: ravi-kumar-pilla <[email protected]>

…edro-viz into feature/share_viz_ui Signed-off-by: ravi-kumar-pilla <[email protected]>

… moving major jsx to other file Signed-off-by: <>

ravi-kumar-pilla · 2024-02-21T21:11:42Z

Hi Team,

This might be a design question -> when we publish successfully and click on link settings -> The publish button text displays as Republish. This is great but if we change the hosting platform or change the bucket_name, will the new publishing be a re-publish or just publish ?

I feel we should stick to the text as Publish in both the cases. Thank you

ravi-kumar-pilla

Awesome work ! Looks good to me. I have left a design comment which is not a blocker. Thank you @jitu5 for the PR

Signed-off-by: <>

…edro-viz into feature/share_viz_ui Signed-off-by: <>

Signed-off-by: <>

rashidakanchwala · 2024-02-22T12:08:24Z

Hi Team,

This might be a design question -> when we publish successfully and click on link settings -> The publish button text displays as Republish. This is great but if we change the hosting platform or change the bucket_name, will the new publishing be a re-publish or just publish ?
I feel we should stick to the text as **Publish** in both the cases. Thank you

You're correct. I also found 'Republish' a bit confusing. @stephkaiser's original design involved guiding users through multiple selections. Initially, you choose the 'cloud provider,' then click 'Next' to proceed to the form where you enter details. However, upon returning to 'Link Settings,' it directs you straight to the form page without an option to switch 'Cloud Provider.' We diverged from Steph's original design because it assumed each Cloud Provider would have different input fields. However, since they're now the same, the two-step process feels unnecessarily lengthy.

When Steph returns, perhaps we can refine this journey. In the meantime, I propose that when the user clicks 'Link Settings', the dropdown for selecting the cloud provider should be disabled. This adjustment would make 'Republish' more intuitive. Otherwise, we should revert to using 'Publish.'

Signed-off-by: <>

jitu5 · 2024-02-22T14:16:10Z

@rashidakanchwala @ravi-kumar-pilla For simplification I am keeping the text as Publish in both the cases.

Signed-off-by: <>

rashidakanchwala · 2024-02-22T14:59:53Z

Amazing, LGTM. thanks Jitendra!! <3

* refactor router to accept new deployer inputs (#1739) Signed-off-by: ravi-kumar-pilla <[email protected]> * Refactor Shareableviz CLI (#1740) * refactor router to accept new deployer inputs Signed-off-by: ravi-kumar-pilla <[email protected]> * refactor cli for shareableviz deploy Signed-off-by: ravi-kumar-pilla <[email protected]> * merge router change Signed-off-by: ravi-kumar-pilla <[email protected]> * PR comments fix Signed-off-by: ravi-kumar-pilla <[email protected]> --------- Signed-off-by: ravi-kumar-pilla <[email protected]> * Kedro Viz Static Website hosting on Azure (#1708) * CLI command kedro viz build added * Lint fix * lint fix * Lint fix * add mypy ignore * Missing build file added * Lint error fix * BaseDeployer class added * Unused code removed * Fix lint issue * azure deploy initial draft Signed-off-by: ravi-kumar-pilla <[email protected]> * added base_deployer * add deployer factory * partial working draft Signed-off-by: ravi-kumar-pilla <[email protected]> * Test and comments of deployers updated * test draft Signed-off-by: ravi-kumar-pilla <[email protected]> * fix lint Signed-off-by: ravi-kumar-pilla <[email protected]> * remove circular dependency Signed-off-by: ravi-kumar-pilla <[email protected]> * fix lint Signed-off-by: ravi-kumar-pilla <[email protected]> * revert back consent Signed-off-by: ravi-kumar-pilla <[email protected]> * minor updates Signed-off-by: ravi-kumar-pilla <[email protected]> * update pytests Signed-off-by: ravi-kumar-pilla <[email protected]> * add pytest for azure shareableviz Signed-off-by: ravi-kumar-pilla <[email protected]> * refactor and add timeout Signed-off-by: ravi-kumar-pilla <[email protected]> * refactor cli Signed-off-by: ravi-kumar-pilla <[email protected]> * update pytest Signed-off-by: ravi-kumar-pilla <[email protected]> * add release note Signed-off-by: ravi-kumar-pilla <[email protected]> * fix flaky test Signed-off-by: ravi-kumar-pilla <[email protected]> * fix PR comments and flaky test Signed-off-by: ravi-kumar-pilla <[email protected]> * testing flaky c y test Signed-off-by: ravi-kumar-pilla <[email protected]> * remove flaky test Signed-off-by: ravi-kumar-pilla <[email protected]> * resolve conflicts Signed-off-by: ravi-kumar-pilla <[email protected]> * fix PR comments Signed-off-by: ravi-kumar-pilla <[email protected]> * add back cypress flaky test Signed-off-by: ravi-kumar-pilla <[email protected]> * remove cypress flaky test Signed-off-by: ravi-kumar-pilla <[email protected]> * remove duplicate pytest parameter Signed-off-by: ravi-kumar-pilla <[email protected]> * remove fsspec upper bound Signed-off-by: ravi-kumar-pilla <[email protected]> --------- Signed-off-by: ravi-kumar-pilla <[email protected]> Co-authored-by: Jitendra Gundaniya <[email protected]> Co-authored-by: rashidakanchwala <[email protected]> * Kedro Viz Static Website Hosting on GCP (#1711) * CLI command kedro viz build added * Lint fix * lint fix * Lint fix * add mypy ignore * Missing build file added * Lint error fix * BaseDeployer class added * Unused code removed * Fix lint issue * azure deploy initial draft Signed-off-by: ravi-kumar-pilla <[email protected]> * added base_deployer * add deployer factory * partial working draft Signed-off-by: ravi-kumar-pilla <[email protected]> * Test and comments of deployers updated * test draft Signed-off-by: ravi-kumar-pilla <[email protected]> * fix lint Signed-off-by: ravi-kumar-pilla <[email protected]> * remove circular dependency Signed-off-by: ravi-kumar-pilla <[email protected]> * fix lint Signed-off-by: ravi-kumar-pilla <[email protected]> * revert back consent Signed-off-by: ravi-kumar-pilla <[email protected]> * initial draft Signed-off-by: ravi-kumar-pilla <[email protected]> * minor updates Signed-off-by: ravi-kumar-pilla <[email protected]> * update pytests Signed-off-by: ravi-kumar-pilla <[email protected]> * add pytest for azure shareableviz Signed-off-by: ravi-kumar-pilla <[email protected]> * refactor and add timeout Signed-off-by: ravi-kumar-pilla <[email protected]> * refactor cli Signed-off-by: ravi-kumar-pilla <[email protected]> * update pytest Signed-off-by: ravi-kumar-pilla <[email protected]> * add release note Signed-off-by: ravi-kumar-pilla <[email protected]> * fix flaky test Signed-off-by: ravi-kumar-pilla <[email protected]> * fix PR comments and flaky test Signed-off-by: ravi-kumar-pilla <[email protected]> * testing flaky c y test Signed-off-by: ravi-kumar-pilla <[email protected]> * remove flaky test Signed-off-by: ravi-kumar-pilla <[email protected]> * add pytest for gcp Signed-off-by: ravi-kumar-pilla <[email protected]> * fix gcp pytest coverage Signed-off-by: ravi-kumar-pilla <[email protected]> * fix lint Signed-off-by: ravi-kumar-pilla <[email protected]> * update pytest Signed-off-by: ravi-kumar-pilla <[email protected]> * revert file permission change --------- Signed-off-by: ravi-kumar-pilla <[email protected]> Co-authored-by: Jitendra Gundaniya <[email protected]> Co-authored-by: rashidakanchwala <[email protected]> * Sharable Kedro-Viz UI for AWS, GCP and Azure (#1718) * shareable viz with multiple platform UI * test fix * Relative path fix for user entered url * Test updated * Test updated * UI alignment and endpoint help text added. Signed-off-by: <> * Add Kedro-Viz documentation URLs and update modal content Signed-off-by: <> * Code review suggestions added Signed-off-by: <> * Refactor form field names in ShareableUrlModal component Signed-off-by: <> * Add cursor style to input field in shareable-url-modal.js Signed-off-by: <> * Add cursor style to input field in shareable-url-modal.js Signed-off-by: <> * Variable names updated. Signed-off-by: <> * add exception handlers Signed-off-by: ravi-kumar-pilla <[email protected]> * Disclaimer note added and shareable-url-modal component refactored by moving major jsx to other file Signed-off-by: <> * Wrapped the prop methods with useCallback Signed-off-by: <> * info text updated. Signed-off-by: <> * Test fixed Signed-off-by: <> * test fix and rearranging jsx Signed-off-by: <> * Cypress test fix Signed-off-by: <> * button text updated Signed-off-by: <> * Keeping button text as Publish for a link seetings Signed-off-by: <> --------- Signed-off-by: <> Signed-off-by: ravi-kumar-pilla <[email protected]> Co-authored-by: ravi-kumar-pilla <[email protected]> * Kedro-viz doc link added in disclaimer note. Signed-off-by: <> --------- Signed-off-by: ravi-kumar-pilla <[email protected]> Signed-off-by: <> Co-authored-by: Jitendra Gundaniya <[email protected]> Co-authored-by: rashidakanchwala <[email protected]> Co-authored-by: Jitendra Gundaniya <[email protected]>

jitu5 added 2 commits January 25, 2024 14:52

shareable viz with multiple platform UI

1bdd7ae

test fix

bfb8a66

jitu5 self-assigned this Jan 25, 2024

jitu5 added 3 commits January 25, 2024 18:09

Relative path fix for user entered url

ecbcdbb

Test updated

8b49f52

Test updated

11768e5

jitu5 requested review from rashidakanchwala and ravi-kumar-pilla January 26, 2024 21:02

jitu5 marked this pull request as ready for review January 30, 2024 10:17

jitu5 requested a review from tynandebold as a code owner January 30, 2024 10:17

jitu5 requested review from tynandebold and removed request for tynandebold January 30, 2024 10:17

jitu5 added the Javascript Pull requests that update Javascript code label Jan 30, 2024

rashidakanchwala reviewed Feb 5, 2024

View reviewed changes

src/components/experiment-tracking/run-details-modal/run-details-modal.js Show resolved Hide resolved

jitu5 added 2 commits February 20, 2024 14:26

UI alignment and endpoint help text added.

1b0c5d3

Signed-off-by: <>

Add Kedro-Viz documentation URLs and update modal content

5f349ad

Signed-off-by: <>

ravi-kumar-pilla reviewed Feb 20, 2024

View reviewed changes

src/components/shareable-url-modal/shareable-url-modal.js Outdated Show resolved Hide resolved

ravi-kumar-pilla reviewed Feb 20, 2024

View reviewed changes

src/components/shareable-url-modal/shareable-url-modal.js Outdated Show resolved Hide resolved

ravi-kumar-pilla reviewed Feb 20, 2024

View reviewed changes

src/components/shareable-url-modal/shareable-url-modal.js Outdated Show resolved Hide resolved

ravi-kumar-pilla reviewed Feb 20, 2024

View reviewed changes

src/components/shareable-url-modal/shareable-url-modal.js Outdated Show resolved Hide resolved

Merge branch 'feature/shareableviz-extended-support' of https://githu…

dd4deba

…b.com/kedro-org/kedro-viz into feature/share_viz_ui Signed-off-by: ravi-kumar-pilla <[email protected]>

ravi-kumar-pilla reviewed Feb 20, 2024

View reviewed changes

src/components/shareable-url-modal/shareable-url-modal.js Outdated Show resolved Hide resolved

ravi-kumar-pilla reviewed Feb 20, 2024

View reviewed changes

src/components/shareable-url-modal/shareable-url-modal.js Outdated Show resolved Hide resolved

ravi-kumar-pilla reviewed Feb 20, 2024

View reviewed changes

src/components/ui/input/index.js Show resolved Hide resolved

jitu5 added 2 commits February 21, 2024 11:22

Code review suggestions added

102165a

Signed-off-by: <>

Merge branch 'feature/shareableviz-extended-support' into feature/sha…

7c9ced9

…re_viz_ui Signed-off-by: <>

ravi-kumar-pilla reviewed Feb 21, 2024

View reviewed changes

src/components/shareable-url-modal/shareable-url-modal.js Outdated Show resolved Hide resolved

jitu5 and others added 8 commits February 21, 2024 15:53

Refactor form field names in ShareableUrlModal component

9505a3f

Signed-off-by: <>

Add cursor style to input field in shareable-url-modal.js

67d43f9

Signed-off-by: <>

Add cursor style to input field in shareable-url-modal.js

4ac0c05

Signed-off-by: <>

Merge branch 'feature/share_viz_ui' of https://github.com/kedro-org/k…

0173d6a

…edro-viz into feature/share_viz_ui Signed-off-by: ravi-kumar-pilla <[email protected]>

Variable names updated.

0039a15

Signed-off-by: <>

add exception handlers

ccfa453

Signed-off-by: ravi-kumar-pilla <[email protected]>

Merge branch 'feature/share_viz_ui' of https://github.com/kedro-org/k…

9ea4b83

…edro-viz into feature/share_viz_ui Signed-off-by: ravi-kumar-pilla <[email protected]>

Disclaimer note added and shareable-url-modal component refactored by…

3debad8

… moving major jsx to other file Signed-off-by: <>

ravi-kumar-pilla approved these changes Feb 21, 2024

View reviewed changes

ravi-kumar-pilla mentioned this pull request Feb 21, 2024

Design for shareableviz error paths #1759

Open

1 task

jitu5 added 6 commits February 22, 2024 09:35

Wrapped the prop methods with useCallback

b5d3674

Signed-off-by: <>

info text updated.

7924277

Signed-off-by: <>

Merge branch 'feature/share_viz_ui' of https://github.com/kedro-org/k…

3f3e877

…edro-viz into feature/share_viz_ui Signed-off-by: <>

Test fixed

6402fd2

Signed-off-by: <>

test fix and rearranging jsx

1522589

Signed-off-by: <>

Cypress test fix

cf471ab

Signed-off-by: <>

button text updated

8a43e5b

Signed-off-by: <>

Keeping button text as Publish for a link seetings

bcece9d

Signed-off-by: <>

rashidakanchwala self-requested a review February 22, 2024 15:00

rashidakanchwala approved these changes Feb 22, 2024

View reviewed changes

jitu5 merged commit db885b4 into feature/shareableviz-extended-support Feb 22, 2024
17 checks passed

jitu5 deleted the feature/share_viz_ui branch February 22, 2024 15:41

ravi-kumar-pilla mentioned this pull request Feb 22, 2024

Shareableviz extended support #1749

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sharable Kedro-Viz UI for AWS, GCP and Azure #1718

Sharable Kedro-Viz UI for AWS, GCP and Azure #1718

jitu5 commented Jan 25, 2024 •

edited

Loading

ravi-kumar-pilla Feb 20, 2024

ravi-kumar-pilla Feb 20, 2024

jitu5 Feb 21, 2024 •

edited

Loading

ravi-kumar-pilla commented Feb 20, 2024

rashidakanchwala commented Feb 21, 2024 •

edited

Loading

ravi-kumar-pilla commented Feb 21, 2024

ravi-kumar-pilla commented Feb 21, 2024

ravi-kumar-pilla left a comment

rashidakanchwala commented Feb 22, 2024

jitu5 commented Feb 22, 2024

rashidakanchwala commented Feb 22, 2024

Sharable Kedro-Viz UI for AWS, GCP and Azure #1718

Sharable Kedro-Viz UI for AWS, GCP and Azure #1718

Conversation

jitu5 commented Jan 25, 2024 • edited Loading

Description

Development notes

QA notes

Checklist

ravi-kumar-pilla Feb 20, 2024

Choose a reason for hiding this comment

ravi-kumar-pilla Feb 20, 2024

Choose a reason for hiding this comment

jitu5 Feb 21, 2024 • edited Loading

Choose a reason for hiding this comment

ravi-kumar-pilla commented Feb 20, 2024

rashidakanchwala commented Feb 21, 2024 • edited Loading

ravi-kumar-pilla commented Feb 21, 2024

ravi-kumar-pilla commented Feb 21, 2024

ravi-kumar-pilla left a comment

Choose a reason for hiding this comment

rashidakanchwala commented Feb 22, 2024

jitu5 commented Feb 22, 2024

rashidakanchwala commented Feb 22, 2024

jitu5 commented Jan 25, 2024 •

edited

Loading

jitu5 Feb 21, 2024 •

edited

Loading

rashidakanchwala commented Feb 21, 2024 •

edited

Loading