Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added download, edit and retry buttons to upload modal #557

Merged
merged 4 commits into from May 28, 2019

Conversation

@gitolicious
Copy link
Contributor

gitolicious commented May 25, 2019

Description:

After a failed upload, the following options are usually taken:

  • Download the bin file and upload it manually (OTA not possible, network issues, ...)
  • Edit the config yaml
  • Retry upload
    I added buttons for these options to the upload modal. On thing to note is that, when checking if the upload succeeded, only compilation is taken into consideration at the moment, not the actual upload. I think this could be improved, then also button display can be finetuned to the error that actually occurred.

Related issue (if applicable): n/a

Pull request in esphome-docs with documentation (if applicable): n/a

Checklist:

  • The code change is tested and works locally.
  • [n/a] Tests have been added to verify that the new code works (under tests/ folder).

If user exposed functionality or configuration variables are added/changed:

esphome/dashboard/static/esphome.js Outdated Show resolved Hide resolved
modalElem.querySelector(".stop-logs").innerHTML = "Stop";
},
onProcessExit: (modalElem, code) => {
if (code === 0) {
M.toast({html: "Program exited successfully."});
downloadAfterUploadButton.classList.remove('disabled');

This comment has been minimized.

Copy link
@OttoWinter

OttoWinter May 26, 2019

Member

Why have a download button if OTA worked successfully? I mean the use-case here would be if OTA fails? I'm not so sure about this button either. Having 4 buttons at the bottom is a bit too much.

This comment has been minimized.

Copy link
@gitolicious

gitolicious May 26, 2019

Author Contributor

Check my description. "when checking if the upload succeeded, only compilation is taken into consideration at the moment, not the actual upload"
If you can help me fix this, the button should only be shown when OTA failed.

Background: Compilation succeeds, but OTA fails (I have this frequently for various reasons: DNS issues, device renaming, ...) you will need to close the upload window, find the entry in the dashboard list, click on the menu button, click on compile, wait for it to finish which is recompiling the exact same thing as you had before, then download.

I would also be ok if there was any other option to download the latest compiled bin easily.

About the button number: If you think it's too much, we could put some of them in an expandable menu at the bottom right of the compilation modal?

This comment has been minimized.

Copy link
@OttoWinter

OttoWinter May 27, 2019

Member

Ah ok missed that.

Yeah that's not going to be possible to check easily - the process is spawned and all communication happens via stdout. One possibility would of course be to check for some text in stdout, but I don't think that would be worth the added complexity.

Also from another point I think it makes sense to hold it in COMPILE: All guides reference COMPILE, changing it would only confuse users. Plus from a quick check of this PR in my local environment 4 buttons are definitely too much.

@gitolicious

This comment has been minimized.

Copy link
Contributor Author

gitolicious commented May 27, 2019

I created a menu in the upload modal and put the buttons there. What do you think?
image

image

@OttoWinter

This comment has been minimized.

Copy link
Member

OttoWinter commented May 28, 2019

I'm not so sure about the placement of the overflow button - if i remember the material design guide correctly the CLOSE/END button should always be in the bottom right. But... we're not following md spec that closely anyway. If we find a better place for it, we can still move it.

For the buttons in there: I think the "edit" button is useful enough that it can be displayed next to "CLOSE" (so in the main bar). At least in the last few days I've really learned to love that EDIT button (thanks btw for that!).

While we're at it: One thing we could also do is change the SAVE&VALIDATE button in the editor to a SAVE&UPLOAD button. Reason is: the editor now performs validation on-the-fly, if you look at the left gutter you should see live validation. If you want, you can put it in this PR, though I don't want to force you to more work :)

moved edit button from menu in upload modal
swapped validation button for upload in edit modal
@gitolicious

This comment has been minimized.

Copy link
Contributor Author

gitolicious commented May 28, 2019

Feel free to reposition the menu if you find a better place. For now I can't think of one...

Edit button has been moved back from menu to the main buttons.

About validation: I just saw the new live validation feature yesterday - it's awesome! Does it need to be called SAVE & UPLOAD or would UPLOAD be sufficient? What do you think about my idea of disabling it when live validation is failing?

And don't worry - that was an easy fix I was know my way around that part of the code now.

@OttoWinter

This comment has been minimized.

Copy link
Member

OttoWinter commented May 28, 2019

Does it need to be called SAVE & UPLOAD or would UPLOAD be sufficient?

Upload is also good, yeah.

What do you think about my idea of disabling it when live validation is failing?

Hmm yeah that could be possible. There's one thing I would be a bit worried about though: What does it look like while typing? If the button constantly flashes disabled/enabled while typing that could be bad. But I also haven't tried so it might be ok.

I think I'll merge this PR as-is now because it looks like a neat feature and would fit well in the next beta - if you want to change other things feel free to open a new PR.

@OttoWinter OttoWinter added this to the 1.13.0 milestone May 28, 2019
@OttoWinter OttoWinter merged commit 928df2d into esphome:dev May 28, 2019
1 check passed
1 check passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@gitolicious

This comment has been minimized.

Copy link
Contributor Author

gitolicious commented May 28, 2019

Ok, thx for merging. I love that I can use the new features in my Hass.io ESPHome dev add-ons only minutes later!

@gitolicious gitolicious deleted the gitolicious:download-after-upload branch May 28, 2019
OttoWinter added a commit that referenced this pull request May 28, 2019
* added download, edit and retry buttons to upload modal

* changed hide for disabled, resorted buttons

* moved upload action buttons to menu

* button changes

moved edit button from menu in upload modal
swapped validation button for upload in edit modal
@gitolicious gitolicious mentioned this pull request May 28, 2019
1 of 1 task complete
@esphome esphome locked and limited conversation to collaborators Jun 24, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
2 participants
You can’t perform that action at this time.