Feature #293

Partial refresh στο GUI

Added by Vangelis Koukis over 11 years ago. Updated over 11 years ago.

Status:Closed Start date:03/16/2011
Priority:High Due date:04/01/2011
Assignee:Dimitris Moraitis % Done:

0%

Category:Cyclades UI Spent time: -
Target version:-

Description

Όπως συζητήσαμε και στη σημερινή συνάντηση 2011/03/16:

το GUI πρέπει να κάνει μερική ανανέωση της εικόνας που παρουσιάζεται στον χρήστη.
Για το σκοπό αυτό, περιοδικά κάνει differential GET δεδομένων, με χρήση της παραμέτρου ?changes-since, όπως
προδιαγράφεται στο #291 και στο http://docs.openstack.org/openstack-compute/developer/content/ch03s08.html .

Συγκεκριμένα:
α) Την πρώτη φορά που ξυπνάει το GUI κάνει full GET
β) έπειτα, περιοδικά κάνει GET με ?changes-since.

Η υποβολή δουλειών και η λήψη ανανεώσεων (σημείο (β) παραπάνω) γίνεται ως εξής:

α) όταν μια ενέργεια επιβεβαιωθεί (βλ. #209), εμφανίζεται spinner για το συγκεκριμένο μηχάνημα για το οποίο εκκρεμεί μια δουλειά και αυτή υποβάλλεται.

Όταν του έρχονται οι αλλαγές μπαλώνει την τρέχουσα λίστα των πραγμάτων που παρουσιάζονται στο χρήστη, ως εξής:
Για κάθε μηχάνημα που είναι μέσα στο diff κάνει το εξής:
α) σβήνει το spinner που υποδηλώνει υποβολή [ίσως να μην ήταν καν αναμμένο, αν η ειδοποίηση δεν οφείλεται σε ενέργεια του χρήστη]
β) ανάβει στη θέση του εικονίδιο που φανερώνει αλλαγή κατάστασης της μηχανής (μια κίτρινη τελεία που αναβοσβήνει, για 5 δευτερόλεπτα, κάτι που θα αλλάξει αλλά πρέπει να φαίνεται)
γ) αλλάζει την κατάσταση του μηχανήματος, το μετακινεί στη σωστή του θέση, κλπ.
δ) Μετά από 5 sec σβήνει το notification ότι συνέβη κάτι στο μηχάνημα.


Related issues

related to Synnefo - Bug #209: box επιβεβαίωσης για τα actions Closed 02/04/2011 04/01/2011
related to Synnefo - Feature #213: Error Handling API (Django) - GUI Closed 02/11/2011 04/01/2011
related to Synnefo - Bug #283: Προβλήματα με partial refresh στο GUI Closed 03/12/2011
related to Synnefo - Feature #291: Υποστήριξη polling στον server με ?changes-since στο GET Closed 03/16/2011 03/25/2011
related to Synnefo - Bug #317: Πρόβλημα με XmlHttpRequest στον Opera Closed
related to Synnefo - Feature #177: Κλήση του RS API για VM management Closed 01/25/2011
blocked by Synnefo - Bug #309: Το GUI κολλάει όταν κάνει refresh Closed 03/22/2011 04/04/2011
blocked by Synnefo - Bug #321: Τα εικονίδια στο list view δεν αλλάζουν σωστά από on --> ... Closed 03/28/2011

Associated revisions

Revision 0317c509
Added by Dimitris Moraitis over 11 years ago

dont display error if XHR status equals 0 - Refs #293

Revision 0e1531b4
Added by Markos Gogoulos over 11 years ago

fix GET /servers

check if server.status is "DELETED" rather than attribute server.deleted
Refs #293

Revision d8b7ab6d
Added by Dimitris Moraitis over 11 years ago

return DELETED in _get_rsapi_state - Fixes #293

Revision 6d0a36e5
Added by Dimitris Moraitis over 11 years ago

display animation only once - Refs #293

Revision ed4781b5
Added by Dimitris Moraitis over 11 years ago

adaptive confirm box in list view - Refs #293

Revision 1d72dcdc
Added by Markos Gogoulos over 11 years ago

make smaller wave and spinner icons on gui

Refs #293

Revision e2ccad35
Added by Dimitris Moraitis over 11 years ago

fix wave in list view & minor css improvements - refs #293

History

#1 Updated by Vangelis Koukis over 11 years ago

Το GUI φαίνεται να κάνει partial refresh, αλλά υπάρχουν τα εξής προβλήματα:

Σε Opera 11.01, Windows Vista, κάνω το εξής: Πηγαίνω στην αρχική σελίδα, το αφήνω ακίνητο, κάνει 2-3 refreshes με ?changes-since= κλπ
και μετά σκάει με "Malformed request" στο GUI. Στην έξοδο του runserver δεν επιστρέφεται ΠΟΤΕ λάθος. Ακριβώς πριν βγει το "Malformed request" ο server έχει γυρίσει HTTP 304 MODIFIED.

Με tcpdump επιβεβαίωσα ότι ποτέ δεν επιστρέφεται λάθος.
O server γυρίζει συνεχώς HTTP 304 NOT MODIFIED κι ο client τα παίζει και πετάει Malformed request.

Αυτό ίσως σχετίζεται με το #213.

#2 Updated by Constantinos Venetsanopoulos over 11 years ago

Σχετικά με τα δύο διαφορετικά εικονίδια που θα εμφανίζονται:

Τα εικονίδια θα εμφανίζονται κάτω από τα μεσαία 2 μπλε τετράγωνα (από τα 4) που βρίσκονται κάτω από το status. θα έχουν width όσο έχουν και τα 2 μεσαία τετράγωνα μαζί (και αντίστοιχο height) και θα είναι στοιχισμένα στο κάτω μέρος της 4ης γραμμής πληροφοριών (δηλαδή θα τελειώνουν εκεί που τελειώνουν και οι ενδείξεις "show: disks | ... ").

Η λειτουργικότητα θα είναι όπως περιγράφεται παραπάνω.
Αρχικά για spinner ας χρησιμοποιηθεί το ήδη υπάρχον spinner.
Για το notification ότι κάτι όντως άλλαξε ας χρησιμοποιηθεί 1 επανάληψη αυτού:
http://www.amazing-animations.com/animations/wave2.gif

#3 Updated by Dimitris Moraitis over 11 years ago

  • Status changed from Assigned to Feedback

Το πρόβλημα με Opera είναι γενικότερο απ'ότι διάβασα εδώ: http://bugs.jquery.com/ticket/8177

Αντί για 304 παίρνει 0 στο XHR status. Το μόνο workaround που βρήκα είναι να μην επιστρέφει error το ui αν πάρει response code 0. Στην περίπτωση αυτή παίζει καλά το refresh σε όλους τους browsers αλλά δεν εμφανίζεται ειδοποίηση αν χαθεί η σύνδεση με το backend. Το έκανα commit έτσι για την ώρα.

Μια εναλλακτική θα ήταν να ελέγχουμε το user-agent header και αν έχουμε να κάνουμε με opera να συμπεριφέρεται το ui ανάλογα, αλλά δεν θα είναι και τόσο καθαρή λύση και καλύτερα να το αποφύγουμε αν γίνεται.

#4 Updated by Vangelis Koukis over 11 years ago

  • Due date set to 03/25/2011

#5 Updated by Dimitris Moraitis over 11 years ago

To deleted θα πρέπει να γίνει status αντί για έξτρα attribute

#6 Updated by Vangelis Koukis over 11 years ago

Σε σχέση με το 0e1531b4, ΟΚ, καλώς γυρίζει DELETED η υλοποίηση του API, αλλά το λογικό είναι αυτό να μπει μέσα στην _get_rsapi_state() του μοντέλου VirtualMachine: Αφού το μοντέλο ξέρει ότι self.deleted, δεν υπάρχει λόγος να μην γυρίζει σωστά, όπως πρέπει "DELETED" όταν κάποιος ζητάει το property rsapi_state.

#7 Updated by Vangelis Koukis over 11 years ago

  • Status changed from Feedback to Assigned

#8 Updated by Dimitris Moraitis over 11 years ago

  • Status changed from Assigned to Feedback

#9 Updated by Constantinos Venetsanopoulos over 11 years ago

  • Status changed from Feedback to Assigned

Επειδή νομίζω ότι δεν βγαίνει πολύ νόημα του τι γίνεται έτσι όπως βγαίνουν τα εικονίδια αυτή τη στιγμή, νομίζω ότι πρέπει να γίνουν τα εξής:

1. Μόλις γίνει successful submission ενός action βγαίνει το spinner και δεν σβήνει (εκτός αν γίνει refresh βέβαια).
2. Μόλις έρθει μία καινούρια κατάσταση δηλαδή μία κατάσταση που θα αλλάξει το status του machine στο UI γίνονται σειριακά τα εξής:
(α) σβήνει το spinner,
(β) αλλάζει η κατάσταση,
(γ) ανάβει στη θέση του spinner (για μία και μόνο επανάληψη) το κυματάκι

Επίσης το spinner και το κυματάκι πρέπει να γίνουν μικρότερα (περίπου στις διαστάσεις που αναφέρω παραπάνω, ίσως και λίγο μικρότερα).
Πρέπει να δούμε και κατά πόσο μπορεί το background του spinner να γίνει transparent.

#10 Updated by Dimitris Moraitis over 11 years ago

To spinner μπορεί να γίνει transparent. Το animated gif απ'όσο ξέρω δεν υπάρχει τρόπος να περιοριστεί σε μία επανάληψη. Για την ώρα σβήνει μετά από (περίπου) 5 δευτερόλεπτα.

#11 Updated by Vangelis Koukis over 11 years ago

Δεν ξέρω αν μπορεί να τεθεί, αλλά σίγουρα θα κάνει κάτι από τα παρακάτω:

α) μπορεί να τεθεί ο αριθμός των επαναλήψεων μέσα στο gif: http://s91440092.onlinehome.us/im/index5.shtml ("How to Change the Number of Repetitions of an Animated Gif with ImageMagick")
β) μπορεί να φεύγει μετά από συγκεκριμένο χρόνο [όσο διαρκεί μια επανάληψή του]. Κώδικας javascript αναλαμβάνει να το κάνει αυτό.

#12 Updated by Dimitris Moraitis over 11 years ago

Το α δουλεύει μόνο την πρώτη φορά που δείχνει ο browser την εικόνα. Δηλαδή στο δεύτερο action που θα εκτελεστεί ακόμα και αν αφορά διαφορετικό vm η εικόνα εμφανίζεται ως στατική. Το β δεν μπορεί να δουλέψει καλά επειδή στην πράξη δεν είναι σταθερός ο χρόνος επανάληψης. Εξαρτάται π.χ. από τον φόρτο του συστήματος του χρήστη.

#13 Updated by Vangelis Koukis over 11 years ago

Μπορείς να γίνεις πιο συγκεκριμένος γιατί το (α) δουλεύειμόνο την πρώτη φορά που δείχνει ο browser την εικόνα;
Μια πρώτη σκέψη, αλλά δες το:
α) όταν έρθει αλλαγή κατάστασης [όταν το μηχάνημα είναι στην απάντηση του ?changes-since κι έχει διαφορετική κατάσταση από την τρέχουσα] σβήνω το spinner και βγάζω ένα gif με μία επανάληψη από το κυματάκι.
β) η επανάληψη σταματάει, το κυματάκι εξαφανίζεται

Κάθε φορά που έρχεται αλλαγή κατάστασης, κάνω το ίδιο.

Οπότε, για να μπορέσει να κλείσει αυτό πρέπει να γίνουν τα εξής:
α) γίνε αν μπορείς πιο συγκεκριμένος για το (α)
β) επιβεβαίωσε το εξής: αν από κάποιο άλλο παράθυρο ζητήσω να σταματήσει ένα μηχάνημα, το μηχάνημα αλλάζει κατάσταση σε όλα όσα είναι ανοιχτά (σωστό refresh) και εμφανίζεται το κυματάκι σε όλα για να τραβήξει την προσοχή του χρήστη.

#14 Updated by Dimitris Moraitis over 11 years ago

Vangelis Koukis wrote:

Μπορείς να γίνεις πιο συγκεκριμένος γιατί το (α) δουλεύειμόνο την πρώτη φορά που δείχνει ο browser την εικόνα;

Δεν ξέρω γιατί. Το είχα δοκιμάσει πάντως και αυτή είναι η συμπεριφορά στον firefox. Την πρώτη φορά που εμφανίζεται η εικόνα, το animation δουλεύει και σταματάει στο τελευταίο frame. Τις επόμενες φορές που το ίδιο gif εμφανίζεται οπουδήποτε στην ίδια σελίδα, ο firefox δείχνει μόνο το τελευταίο καρέ.

Μια άλλη πιθανή λύση που θέλω να δοκιμάσω είναι να παραμείνει το looping του animated gif της εικόνας αλλά προστεθούν κενά frames διάρκειας λίγων δευτερολέπτων στο τέλος του gif, σε συνδυασμό με ένα timeout στην Javascript που θα κρύβει την εικόνα μετά από π.χ. 3 δευτερόλεπτα. Με τον τρόπο αυτό λογικά το κύμα θα εμφανίζεται μία και μόνο φορά σε όλους, εκτός και αν ο φόρτος του συστήματος του χρήστη είναι τόσο υψηλός που το animated gif καθυστερεί αρκετά δευτερόλεπτα μέχρι να ξεκινήσει, πράγμα μάλλον σπάνιο.

#15 Updated by Vangelis Koukis over 11 years ago

Dimitris Moraitis wrote:

Vangelis Koukis wrote:

Μπορείς να γίνεις πιο συγκεκριμένος γιατί το (α) δουλεύειμόνο την πρώτη φορά που δείχνει ο browser την εικόνα;

Δεν ξέρω γιατί. Το είχα δοκιμάσει πάντως και αυτή είναι η συμπεριφορά στον firefox. Την πρώτη φορά που εμφανίζεται η εικόνα, το animation δουλεύει και σταματάει στο τελευταίο frame. Τις επόμενες φορές που το ίδιο gif εμφανίζεται οπουδήποτε στην ίδια σελίδα, ο firefox δείχνει μόνο το τελευταίο καρέ.

Αυτό δεν βγάζει νόημα. Νομίζω ότι πρέπει να συνεχίσεις να το βλέπεις λίγο παραπάνω.
Αν είναι bug του Firefox, το βλέπουμε. Αν δεν είναι και προδιαγράφεται, να το ανοίξουμε.

Αλλά το πιθανότερο είναι ότι κάτι δεν κάνει καλά ο κώδικας. Στην τελική, αν η εικόνα βγει εντελώς από το DOM και ξαναμπεί, είναι δυνατόν να μην την ξαναπαίζει; επίσης, δεδομένου ότι η εφαρμογή πρέπει να τρέχει και σε Chrome, Opera, IE, τι κάνουν οι υπόλοιποι browsers με αυτό το ζήτημα;

Νομίζω πρέπει να το δεις λίγο παραπάνω.

Μια άλλη πιθανή λύση που θέλω να δοκιμάσω είναι να παραμείνει το looping του animated gif της εικόνας αλλά προστεθούν κενά frames διάρκειας λίγων δευτερολέπτων στο τέλος του gif, σε συνδυασμό με ένα timeout στην Javascript που θα κρύβει την εικόνα μετά από π.χ. 3 δευτερόλεπτα. Με τον τρόπο αυτό λογικά το κύμα θα εμφανίζεται μία και μόνο φορά σε όλους, εκτός και αν ο φόρτος του συστήματος του χρήστη είναι τόσο υψηλός που το animated gif καθυστερεί αρκετά δευτερόλεπτα μέχρι να ξεκινήσει, πράγμα μάλλον σπάνιο.

Αυτό ακούγεται υπερβολικά πολύπλοκο. Εξάλλου, το κύμα πρέπει να ξαναπαίζει όταν υπάρξει αλλαγή στην κατάσταση του μηχανήματος. Όπως προδιαγράφεται παραπάνω, η ειδοποίηση για αλλαγή [το κύμα αυτή τη στιγμή] πρέπει να σκάει μία φορά στην ακτή, κάθε φορά που υπάρχει αλλαγή: το μηχάνημα γίνεται από STARTED -> REBOOT, σκάει το κύμα. Το μηχάνημα γίνεται από REBOOT -> STARTED, ξανασκάει το κύμα. Άρα, σίγουρα πρέπει να διερευνηθεί περισσότερο το πρόβλημα που περιγράφεται στην προηγούμενη παράγραφο.

#16 Updated by Dimitris Moraitis over 11 years ago

Vangelis Koukis wrote:

Dimitris Moraitis wrote:

Vangelis Koukis wrote:

Μπορείς να γίνεις πιο συγκεκριμένος γιατί το (α) δουλεύειμόνο την πρώτη φορά που δείχνει ο browser την εικόνα;

Δεν ξέρω γιατί. Το είχα δοκιμάσει πάντως και αυτή είναι η συμπεριφορά στον firefox. Την πρώτη φορά που εμφανίζεται η εικόνα, το animation δουλεύει και σταματάει στο τελευταίο frame. Τις επόμενες φορές που το ίδιο gif εμφανίζεται οπουδήποτε στην ίδια σελίδα, ο firefox δείχνει μόνο το τελευταίο καρέ.

Αυτό δεν βγάζει νόημα.

Γιατί δεν βγάζει νόημα; Αυτό που καταλαβαίνω εγώ (χωρίς βέβαια να έχω δει τον σχετικό κώδικα) είναι ότι οι Gecko κ Webkit browsers κρατάνε μία αναφορά σε κάθε resource ανεξαρτήτως context και θυμούνται ότι η συγκεκριμένη εικόνα έχει ήδη ολοκληρώσει τη μία επανάληψη που προβλέπεται από τα metadata της ίδιας της εικόνας.

Αλλά το πιθανότερο είναι ότι κάτι δεν κάνει καλά ο κώδικας.

Ο κώδικας αλλάζει το src του img στο list view και προσθέτει-αφαιρεί το css class "wave" σε ένα div το standard view. Και στις δύο περιπτώσεις το αποτέλεσμα είναι το ίδιο για animated gif με 1 επανάληψη.

Στην τελική, αν η εικόνα βγει εντελώς από το DOM και ξαναμπεί, είναι δυνατόν να μην την ξαναπαίζει; επίσης, δεδομένου ότι η εφαρμογή πρέπει να τρέχει και σε Chrome, Opera, IE, τι κάνουν οι υπόλοιποι browsers με αυτό το ζήτημα;

Στον Opera παίζει σωστά. Chrome και Safari έχουν το ίδιο ακριβώς πρόβλημα. Explorer δεν έχω πρόχειρο αυτή τη στιγμή. Μπορώ να το κοιτάξω αλλά από τη στιγμή που δεν παίζει σε τόσο major browsers δεν νομίζω πως έχει νόημα αυτή η προσέγγιση.

Αυτό ακούγεται υπερβολικά πολύπλοκο. Εξάλλου, το κύμα πρέπει να ξαναπαίζει όταν υπάρξει αλλαγή στην κατάσταση του μηχανήματος. Όπως προδιαγράφεται παραπάνω, η ειδοποίηση για αλλαγή [το κύμα αυτή τη στιγμή] πρέπει να σκάει μία φορά στην ακτή, κάθε φορά που υπάρχει αλλαγή: το μηχάνημα γίνεται από STARTED -> REBOOT, σκάει το κύμα. Το μηχάνημα γίνεται από REBOOT -> STARTED, ξανασκάει το κύμα. Άρα, σίγουρα πρέπει να διερευνηθεί περισσότερο το πρόβλημα που περιγράφεται στην προηγούμενη παράγραφο.

Μα αυτό θα γίνεται. Όταν το animated gif έχει φτιαχτεί για απεριόριστες επαναλήψεις φαίνεται να ξεκινάει από την αρχή κάθε φορά που εμφανίζεται.

Ουσιαστικά η παραπάνω λύση είναι το β που πρότεινες σε προηγούμενο σχόλιο με την προσθήκη ενός workaround για το πρόβλημα ότι δεν μπορούμε να προβλέψουμε με ακρίβεια τον χρόνο που διαρκεί η πρώτη επανάληψη του animation, ενώ ούτε και τα timeouts της javascript έχουν εγγυημένη ακρίβεια.

#17 Updated by Vangelis Koukis over 11 years ago

Dimitris Moraitis wrote:

Αυτό ακούγεται υπερβολικά πολύπλοκο. Εξάλλου, το κύμα πρέπει να ξαναπαίζει όταν υπάρξει αλλαγή στην κατάσταση του μηχανήματος. Όπως προδιαγράφεται παραπάνω, η ειδοποίηση για αλλαγή [το κύμα αυτή τη στιγμή] πρέπει να σκάει μία φορά στην ακτή, κάθε φορά που υπάρχει αλλαγή: το μηχάνημα γίνεται από STARTED -> REBOOT, σκάει το κύμα. Το μηχάνημα γίνεται από REBOOT -> STARTED, ξανασκάει το κύμα. Άρα, σίγουρα πρέπει να διερευνηθεί περισσότερο το πρόβλημα που περιγράφεται στην προηγούμενη παράγραφο.

Μα αυτό θα γίνεται. Όταν το animated gif έχει φτιαχτεί για απεριόριστες επαναλήψεις φαίνεται να ξεκινάει από την αρχή κάθε φορά που εμφανίζεται.

Ουσιαστικά η παραπάνω λύση είναι το β που πρότεινες σε προηγούμενο σχόλιο με την προσθήκη ενός workaround για το πρόβλημα ότι δεν μπορούμε να προβλέψουμε με ακρίβεια τον χρόνο που διαρκεί η πρώτη επανάληψη του animation, ενώ ούτε και τα timeouts της javascript έχουν εγγυημένη ακρίβεια.

ΟΚ, ας μην κολλάμε σε αυτό. Έτσι κι αλλιώς το τι τελικά θα είναι notification είναι υπό συζήτηση, δεν είναι ντε και καλά σίγουρο ότι θα είναι αυτό το animated gif. Αν πιστεύεις ότι είναι ευκολότερο να το ξεκινάς και να το σταματάς ρητά με Javascript, κανένα πρόβλημα. Αυτό ίσως είναι και περισσότερο επεκτάσιμο αν για παράδειγμα η ειδοποίηση είναι μια πορτοκαλί βούλα που εμφανίζεται όταν πρέπει κι εξαφανίζεται μετά από ορισμένο αριθμό δευτερολέπτων.

Υλοποίησε ό,τι νομίζεις καλύτερο, αρκεί να παίζει αξιόπιστα.

#18 Updated by Vangelis Koukis over 11 years ago

  • Due date changed from 03/25/2011 to 04/01/2011

Αυτό πλέον δουλεύει, αλλά θέλει τις εξής αλλαγές:
α) μικραίνουν τα εικονίδια
β) πρέπει να βγαίνει το εικονίδιο του spinner και του notification στο list view [χωρίς να χαλάσει τα αναμμένα-σβηστά εικονίδια]
γ) υπάρχει ένα κουτί που λέει "Image" και πρέπει να φύγει.
δ) το notification βγαίνει κι όταν ένα μηχάνημα πάει από Started->Stopped ή το αντίστροφο.

#19 Updated by Dimitris Moraitis over 11 years ago

  • Status changed from Assigned to Feedback

έγιναν όλα

#20 Updated by Vangelis Koukis over 11 years ago

  • Status changed from Feedback to Resolved

Φαίνεται να είναι εντάξει, το κλείνουμε μετά το feedback από το demo.

#21 Updated by Vangelis Koukis over 11 years ago

  • Status changed from Resolved to Closed

Το κλείνω, ανοίγει νέο bug/feature για ο,τιδήποτε προκύψει μετά το demo.

Also available in: Atom PDF