ui: Fixes: #2831 rendering of scheduled snapshots widget (#2836)

In the UI, when Setting up a recurring snapshot for a volume and clicking 'Add', the newly added scheduled snapshot entry is not displayed in the 'Scheduled Snapshots' table. Also, the 'Keep' input field does not limit the length of a number that can be added. This causes the API not return an error that the value is invalid.

After adding a recurring snapshot, it must display in the 'Scheduled Snapshots' table. The 'Keep' input field must restrain a user from entering too large of a number.

Author: ernjvr

ui/index.html

@@ -1583,7 +1583,7 @@ <h3><translate key="label.set.up.zone.type"/></h3>
                                 <div class="field maxsnaps">
                                     <div class="name"><translate key="label.keep" /></div>
                                     <div class="value">
-                                        <input type="text" name="maxsnaps" class="required" />
+                                        <input type="text" name="maxsnaps" class="required" maxlength="9"/>
                                         <label for="maxsnaps"><translate key="label.snapshots" /></label>
                                     </div>
                                 </div>
@@ -1686,34 +1686,34 @@ <h3><translate key="label.set.up.zone.type"/></h3>
                         <tbody>
                             <!-- Hourly -->
                             <tr class="hourly">
-                                <td class="time"><translate key="label.time.colon" /> <span></span> <translate key="label.min.past.the.hr" /></td>
+                                <td class="time"><translate key="label.time.colon"></translate> <span></span> <translate key="label.min.past.the.hr"></translate></td>
                                 <td class="day-of-week"><span></span></td>
-                                <td class="timezone"><translate key="label.timezone.colon" /><br/><span></span></td>
-                                <td class="keep"><translate key="label.keep.colon" /> <span></span></td>
+                                <td class="timezone"><translate key="label.timezone.colon"></translate><br/><span></span></td>
+                                <td class="keep"><translate key="label.keep.colon"></translate> <span></span></td>
                                 <td class="actions"><div class="action destroy"><span class="icon">&nbsp;</span></div></td>
                             </tr>
                             <!-- Daily -->
                             <tr class="daily">
-                                <td class="time"><translate key="label.time.colon" /> <span></span></td>
+                                <td class="time"><translate key="label.time.colon"></translate> <span></span></td>
                                 <td class="day-of-week"><span></span></td>
-                                <td class="timezone"><translate key="label.timezone.colon" /><br/><span></span></td>
-                                <td class="keep"><translate key="label.keep.colon" /> <span></span></td>
+                                <td class="timezone"><translate key="label.timezone.colon"></translate><br/><span></span></td>
+                                <td class="keep"><translate key="label.keep.colon"></translate> <span></span></td>
                                 <td class="actions"><div class="action destroy"><span class="icon">&nbsp;</span></div></td>
                             </tr>
                             <!-- Weekly -->
                             <tr class="weekly">
-                                <td class="time"><translate key="label.time.colon" /> <span></span></td>
-                                <td class="day-of-week"><translate key="label.every" /> <span></span></td>
-                                <td class="timezone"><translate key="label.timezone.colon" /><br/><span></span></td>
-                                <td class="keep"><translate key="label.keep.colon" /> <span></span></td>
+                                <td class="time"><translate key="label.time.colon"></translate> <span></span></td>
+                                <td class="day-of-week"><translate key="label.every"></translate> <span></span></td>
+                                <td class="timezone"><translate key="label.timezone.colon"></translate><br/><span></span></td>
+                                <td class="keep"><translate key="label.keep.colon"></translate> <span></span></td>
                                 <td class="actions"><div class="action destroy"><span class="icon">&nbsp;</span></div></td>
                             </tr>
                             <!-- Monthly -->
                             <tr class="monthly">
-                                <td class="time"><translate key="label.time.colon" /> <span></span></td>
-                                <td class="day-of-week"><translate key="label.day" /> <span></span> <translate key="label.of.month" /></td>
-                                <td class="timezone"><translate key="label.timezone.colon" /><br/><span></span></td>
-                                <td class="keep"><translate key="label.keep.colon" /> <span></span></td>
+                                <td class="time"><translate key="label.time.colon"></translate> <span></span></td>
+                                <td class="day-of-week"><translate key="label.day"></translate> <span></span> <translate key="label.of.month"></translate></td>
+                                <td class="timezone"><translate key="label.timezone.colon"></translate><br/><span></span></td>
+                                <td class="keep"><translate key="label.keep.colon"></translate> <span></span></td>
                                 <td class="actions"><div class="action destroy"><span class="icon">&nbsp;</span></div></td>
                             </tr>
                         </tbody>