Implement Import/export button on frontend #81

196Ikuchil · 2022-01-16T06:36:29Z

What type of PR is this?

/kind feature

What this PR does / why we need it:

Implement import/export button on web.
follow import/export API that implemented on PR Implement import/export API #64

Which issue(s) this PR fixes:

Fixes #28

Special notes for your reviewer:

This PR is related to PR Implement import/export API #64 and is including that commit.
Currently, the basic import/export function be working.

/label tide/merge-method-squash
/hold

k8s-ci-robot · 2022-01-16T06:36:37Z

Hi @196Ikuchil. Thanks for your PR.

I'm waiting for a kubernetes-sigs member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

sanposhiho · 2022-01-16T08:14:07Z

/assign

web/components/ImportButton.vue

196Ikuchil · 2022-02-03T12:05:14Z

Since #64 had merged, I have been rebased this branch.
I'm still working on it.
(this error also still exists)
#81 (comment)

196Ikuchil · 2022-02-06T08:23:25Z

I fixed the above errors.

web/components/ImportButton.vue

sanposhiho · 2022-02-13T05:52:01Z

web/components/SchedulerConfigurationButtons.vue

@@ -0,0 +1,42 @@
+<template>


Let's rename this component because Export/Import features are not related to scheduler config.

I didn't find a good name of it.
So, I renamed it to TopBar.
I think this component will have more components in the future. e.g.) ResetButton etc..

sanposhiho · 2022-02-13T09:12:52Z

/ok-to-test

196Ikuchil · 2022-02-14T11:35:43Z

@sanposhiho
I've reorganized the directory, so please re-review.

196Ikuchil · 2022-02-14T11:36:35Z

/unhold

sanposhiho · 2022-02-14T12:25:57Z

/retitle Implement Import/export button on frontend

sanposhiho

Thanks. Left some comments.

web/components/TopBar/ImportButton.vue

web/components/TopBar/ExportButton.vue

web/components/TopBar/ImportButton.vue

web/components/TopBar/ExportButton.vue

sanposhiho · 2022-02-19T08:43:58Z

web/components/TopBar/ImportButton.vue

+
+export default defineComponent({
+  setup() {
+    const data = reactive({


Add watch func and reset SelectedItem is data.dialog is changed.

You can see how to use watch func in ResourceBar component
https://github.com/kubernetes-sigs/kube-scheduler-simulator/blob/master/web/components/ResourceBar/ResourceBar.vue#L210

I fixed that problem.
But this was caused by that file data being left in the input tag of the HTML.
So, I initialize and solve it by used to v-if when the dialog is closed.

f80e7f2#diff-55b111ca13380e4133d565d2e89a7e59ba9dba0361de293248d0d05192a8236fR16

196Ikuchil · 2022-02-20T05:17:22Z

@sanposhiho
Fixed it.

Btw, the button will remain pressed after the dialog is closed.
(No effect on operation.)

↓

196Ikuchil · 2022-02-20T07:51:17Z

Btw, the button will remain pressed after the dialog is closed.

This is intended as it is how it works in MD2 spec which is the basis of vuetify 2.0
vuetifyjs/vuetify#8436

It has already been added as a prop called retain-focus-on-click to resolve it.
But it doesn't work.
vuetifyjs/vuetify#9972

There is another method to resolve. But I think I'll keep it the current way if it is the basic.

sanposhiho · 2022-02-26T12:30:02Z

/retest

sanposhiho · 2022-02-26T12:36:06Z

@196Ikuchil
Thanks for investigating this. Understood. This is not a critical issue, so I think we can ignore it here as you said.

Could you add retain-focus-on-click even if it currently has no effect so that it can be solved in the future when Vuetify fixes this problem?

196Ikuchil · 2022-02-26T15:19:28Z

@sanposhiho
ok! I have added the retain-focus-on-click attribute to the v-btn of Export/Import.

web/components/TopBar/ImportButton.vue

sanposhiho · 2022-02-26T16:41:00Z

web/components/TopBar/TopBar.vue

+    const buttonName = ["SchedulerConfiguration"];
+    const onClick = (bn: string) => {
+      switch (bn) {
+        case "SchedulerConfiguration":
+          schedulerconfigurationstore.fetchSelected();
+          break;
+      }
+    };


I don't think this kinda abstraction is needed.
Let's make it simpler like before:

const onClick = () => { schedulerconfigurationstore.fetchSelected(); };

Co-authored-by: Kensei Nakada <handbomusic@gmail.com>

196Ikuchil · 2022-02-26T17:06:04Z

@sanposhiho

I don't think this kinda abstraction is needed.
Let's make it simpler like before:

Thanks, I forgot to fix it. (At the beginning of this work, I had an another design of that.)

In addition, I refactored to split the button to another component.

sanposhiho

Nice work!
/lgtm
/approve

k8s-ci-robot · 2022-02-26T17:58:58Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: 196Ikuchil, sanposhiho

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~~ [sanposhiho]

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

k8s-ci-robot added the needs-ok-to-test Indicates a PR that requires an org member to verify it is safe to test. label Jan 16, 2022

k8s-ci-robot requested review from alculquicondor and Huang-Wei January 16, 2022 06:36

k8s-ci-robot added sig/scheduling Categorizes an issue or PR as relevant to SIG Scheduling. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files. labels Jan 16, 2022

k8s-ci-robot assigned sanposhiho Jan 16, 2022

196Ikuchil force-pushed the import_export_web branch from d4e5e2e to 81b5dd7 Compare January 16, 2022 15:44

196Ikuchil commented Jan 16, 2022

View reviewed changes

web/components/ImportButton.vue Outdated Show resolved Hide resolved

196Ikuchil commented Jan 16, 2022

View reviewed changes

web/components/ImportButton.vue Outdated Show resolved Hide resolved

k8s-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Feb 2, 2022

196Ikuchil added 2 commits February 3, 2022 20:36

yarn:add file-saver

1d4a5d9

add: export api

70c8001

196Ikuchil force-pushed the import_export_web branch from 965f8ad to b26afec Compare February 3, 2022 11:56

k8s-ci-robot added size/L Denotes a PR that changes 100-499 lines, ignoring generated files. and removed needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files. labels Feb 3, 2022

196Ikuchil added 2 commits February 6, 2022 17:14

add: export/import button components

2d171ae

add:SchedulerConfigurationEditButton.vue

d8b3358

196Ikuchil force-pushed the import_export_web branch from b26afec to d8b3358 Compare February 6, 2022 08:17

sanposhiho reviewed Feb 13, 2022

View reviewed changes

196Ikuchil added 2 commits February 14, 2022 19:56

fix:dialog message

aab5939

fix:rename SchedulerConfigurationButtons to TopBar & Organize folders

bd5fae2

k8s-ci-robot removed the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Feb 14, 2022

k8s-ci-robot changed the title ~~[WIP]Implement Import/export button on frontend~~ Implement Import/export button on frontend Feb 14, 2022

k8s-ci-robot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Feb 14, 2022

sanposhiho reviewed Feb 19, 2022

View reviewed changes

sanposhiho mentioned this pull request Feb 19, 2022

support reset feature on web ui #114

Merged

196Ikuchil added 3 commits February 19, 2022 23:56

UI:change some dialog messages

3799e82

UI:change the buttons color

c15cbc1

fix:remove file data from html input tag if dialog is closed

f80e7f2

fix:add retain-focus-on-click

10e6dd1

196Ikuchil force-pushed the import_export_web branch from e2ce56b to 10e6dd1 Compare February 26, 2022 15:26

sanposhiho reviewed Feb 26, 2022

View reviewed changes

196Ikuchil and others added 2 commits February 27, 2022 01:51

Update web/components/TopBar/ImportButton.vue

987ea7c

Co-authored-by: Kensei Nakada <handbomusic@gmail.com>

refactor:split file of schedulerconfiguration edit button

e379f73

sanposhiho approved these changes Feb 26, 2022

View reviewed changes

k8s-ci-robot added the lgtm "Looks good to me", indicates that a PR is ready to be merged. label Feb 26, 2022

k8s-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Feb 26, 2022

k8s-ci-robot merged commit ca3dc0d into kubernetes-sigs:master Feb 26, 2022

196Ikuchil mentioned this pull request Mar 31, 2022

REQUEST: New membership for 196Ikuchil kubernetes/org#3346

Closed

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement Import/export button on frontend #81

Implement Import/export button on frontend #81

196Ikuchil commented Jan 16, 2022

k8s-ci-robot commented Jan 16, 2022

sanposhiho commented Jan 16, 2022

196Ikuchil commented Feb 3, 2022

196Ikuchil commented Feb 6, 2022

sanposhiho Feb 13, 2022

196Ikuchil Feb 14, 2022

sanposhiho commented Feb 13, 2022

196Ikuchil commented Feb 14, 2022 •

edited

Loading

196Ikuchil commented Feb 14, 2022

sanposhiho commented Feb 14, 2022

sanposhiho left a comment

sanposhiho Feb 19, 2022

196Ikuchil Feb 20, 2022

196Ikuchil commented Feb 20, 2022 •

edited

Loading

196Ikuchil commented Feb 20, 2022

sanposhiho commented Feb 26, 2022

sanposhiho commented Feb 26, 2022

196Ikuchil commented Feb 26, 2022

sanposhiho Feb 26, 2022

196Ikuchil commented Feb 26, 2022

sanposhiho left a comment

k8s-ci-robot commented Feb 26, 2022

Implement Import/export button on frontend #81

Implement Import/export button on frontend #81

Conversation

196Ikuchil commented Jan 16, 2022

What type of PR is this?

What this PR does / why we need it:

Which issue(s) this PR fixes:

Special notes for your reviewer:

k8s-ci-robot commented Jan 16, 2022

sanposhiho commented Jan 16, 2022

196Ikuchil commented Feb 3, 2022

196Ikuchil commented Feb 6, 2022

sanposhiho Feb 13, 2022

Choose a reason for hiding this comment

196Ikuchil Feb 14, 2022

Choose a reason for hiding this comment

sanposhiho commented Feb 13, 2022

196Ikuchil commented Feb 14, 2022 • edited Loading

196Ikuchil commented Feb 14, 2022

sanposhiho commented Feb 14, 2022

sanposhiho left a comment

Choose a reason for hiding this comment

sanposhiho Feb 19, 2022

Choose a reason for hiding this comment

196Ikuchil Feb 20, 2022

Choose a reason for hiding this comment

196Ikuchil commented Feb 20, 2022 • edited Loading

196Ikuchil commented Feb 20, 2022

sanposhiho commented Feb 26, 2022

sanposhiho commented Feb 26, 2022

196Ikuchil commented Feb 26, 2022

sanposhiho Feb 26, 2022

Choose a reason for hiding this comment

196Ikuchil commented Feb 26, 2022

sanposhiho left a comment

Choose a reason for hiding this comment

k8s-ci-robot commented Feb 26, 2022

196Ikuchil commented Feb 14, 2022 •

edited

Loading

196Ikuchil commented Feb 20, 2022 •

edited

Loading