new_machine_template.html.ep 11 KB
Newer Older
Fernando Verdugo's avatar
Fernando Verdugo committed
1
2
<div class="tab-pane fade show active" id="fromtemplate" role="tabpanel">
    <div class="card-body">
3
4
        <div ng-show="!images">Loading... <i class="fas fa-sync-alt fa-spin"></i></div>
        <form name="new_machineForm" role="form" method="post" action="/new_machine.html" novalidate ng-show="images">
Fernando Verdugo's avatar
Fernando Verdugo committed
5
6
            <div class="form-group row">
                <label for="backend" class="col-xl-3 col-form-label"><%=l 'Backend' %> <a
7
                  title="Choose the virtualization type of the Virtual Machine." ng-show="backends.length > 1"><i class="fa fa-info-circle"></i></a></label>
joelalju's avatar
joelalju committed
8
                <div class="col-lg-9">
9
10
                    <label for="backend" class="col-xl-3 col-form-label" ng-show="backends.length === 1">{{backends[0]}}</label>
                    <select class= "form-control" ng-show="backends.length > 1"
Fernando Verdugo's avatar
Fernando Verdugo committed
11
12
13
14
                        ng-change="loadTemplate()"
                        name="backend"
                        ng-model="backend"
                        ng-options="item for item in backends track by item "
15
16
17
18
                        required=""
                    ></select>
                </div>
            </div>
Fernando Verdugo's avatar
Fernando Verdugo committed
19

20
            <div ng-if="backend == 'KVM' || backend == 'Void'" class="form-group">
Fernando Verdugo's avatar
Fernando Verdugo committed
21
22
23
24
                <div class="from-group row">
                    <label for="id_iso" class="col-xl-3 col-form-label"><%=l 'Select Template' %> <a
                      title="Choose the OS you want to install."><i class="fa fa-info-circle"></i></a></label>
                    <div class="col-lg-9">
25
26
27
28
29
30
31
32
                        <input type="hidden" name="id_iso_id" ng-value="id_iso_id">
                        <input type="text" class="form-control" placeholder="<%=l 'Type the template name' %>"
                                   name="id_iso"
                                   ng-model="id_iso" 
                                   required=""
                                   uib-typeahead="item as item.name for item in getVisualizableObjects($viewValue, images, 'name')"
                                   typeahead-min-length="0"
                                   typeahead-on-select="onIdIsoSelected()">
Francesc Guasch's avatar
Francesc Guasch committed
33
34
                        <div class="mb-2" ng-show="id_iso.description" >
                            <small ng-bind-html="id_iso.description">{{id_iso.description}}</small>
Fernando Verdugo's avatar
Fernando Verdugo committed
35
36
37
38
39
40
41
42
                        </div>
                        <div ng-show="id_iso.name && ( !id_iso.device && id_iso.url )
                                && (iso_file == '<NONE>' || !iso_file) ">
                            <font color="#500000"><%=l 'This ISO image has not been already downloaded. This may take many minutes, even hours until the file is fetched from Internet.' %></font>
                            <a type="button" class="btn btn-warning"
                                ng-click="iso_download(id_iso.id)"
                            > <%=l "Download now" %></a>
                        </div>
43
44
                    </div>
                </div>
Fernando Verdugo's avatar
Fernando Verdugo committed
45
46
47
                <div class="from-group row" ng-show="id_iso.name">
                        <br/>
                        <label for="iso_file" class="col-xl-3 col-form-label"><%=l 'Select ISO' %> <a
48
49
50
                          title="Select the .iso file the machine will utilize when installing the OS." href="http://ravada.readthedocs.io/en/latest/docs/new_iso_image.html"><i class="fa fa-info-circle"></i></a>
                            <i class="badge badge-warning" ng-click="refresh_storage()"><i class="fa fa-sync-alt" aria-hidden="true"></i></i>
                            </label>
Fernando Verdugo's avatar
Fernando Verdugo committed
51
                        <div class="col-lg-9"  ng-init="iso_file = '<NONE>'" >
52
53
54
                            <input type="text" class="form-control" placeholder="<%=l 'Type the ISO pathname' %>"
                                   name="id_file"
                                   ng-model="id_file" 
55
                                   ng-hide="refresh_working || !isos"
56
57
                                   required=""
                                   uib-typeahead="item for item in getVisualizableObjects($viewValue, isos)"
58
                                   typeahead-min-length="0"/>
Fernando Verdugo's avatar
Fernando Verdugo committed
59
60
                        </div>
                </div>
61
62
            </div>

Fernando Verdugo's avatar
Fernando Verdugo committed
63
64
65
66
67
68
69
70
71
            <div class="form-group row">
                <label for="name" class="col-xl-3 col-form-label"><%=l 'Name' %></label>
                <div class="col-lg-9">
                    <input class="form-control" ng-model="name" type="text"
                        name="name" required=""
                        ng-pattern ="/^[a-zA-Z0-9_-]+$/"
                        ng-change="validate_new_name()"
                    >
                </div>
72
73
            </div>

Fernando Verdugo's avatar
Fernando Verdugo committed
74
75
76
77
78
79
80
81
82
            <div ng-if="backend == 'LXC'" class="from-group row">
                <label for="id_template" class="col-xl-3 col-form-label"><%=l 'Template' %></label>
                <div class="col-lg-9">
                    <select name ="id_template"
                        ng-model="id_template"
                        ng-options="item.name for item in templates_lxc track by item.id"
                        required="">
                    </select>
                </div>
83
84
            </div>

85
86
87
88
89
90
91
92
93
            <div class="form-group row" ng-show="backend == 'KVM' || backend == 'LXC'">
                    <label for="memory" class="col-xl-3 col-form-label"><%=l 'Ram: (GB)' %></label>
                    <div class="col-lg-2">
                            <input class="form-control" ng-model="ramSize" type="number" min ="0.1" name="memory">
                    </div>
            </div>

            <div class="form-group row" ng-if="backend == 'KVM' || backend =='Void'">
                <label for="disk" class="col-xl-3 col-form-label"><%=l 'System Disk: (GB)' %></label>
94
                <div class="col-lg-2">
95
96
                    <input class="form-control" ng-model="ddsize" type="number" min ="{{min_size}}" name="disk" required="">
                </div>
Fernando Verdugo's avatar
Fernando Verdugo committed
97
98
                  <div ng-show="showMinSize">
                    <font color="orange"><%=l 'The Minimum Disk Size needed for this ISO is' %> {{min_size}}GB.</font>
99
100
                </div>
            </div>
101
102
103
104
105
106
107
            <div class="form-group row" ng-if="backend == 'KVM' || backend=='Void'">
                <label for="swap" class="col-xl-3 col-form-label">
                    <span ng-model="swap.label"
                        ng-class='{"text-muted": !swap.enabled}'><%=l 'Swap' %>
                        <span ng-show="!swap.enabled">( <%=l 'disabled' %> )</span>
                    </span>
                </label>
Fernando Verdugo's avatar
Fernando Verdugo committed
108
                <div class="col-lg-2">
109
                    <input class="form-control" ng-model="swap.value" type="number" min ="0.1"name="swap"  id="swap" ng-disabled="!swap.enabled">
110
                </div>
111
112
113
114
115
116
117
118
119
120
121
                <div class="col-lg-1">
                   <a ng-show="!swap.enabled"
                      ng-click="swap.enabled=true"
                      align="right"><span class="badge badge-primary ml-2">Enable</span></a>
                  <a ng-show="swap.enabled"
                      ng-click="swap.enabled=false"
                      align="right"><span class="badge badge-primary ml-2">Disable</span></a>
               </div>
               <div>
                    <span>Content will be cleaned on restore and shutdown</span>
               </div>
122
            </div>
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
            <div class="form-group row" ng-if="backend == 'KVM' || backend=='Void'">
                <label for="swap" class="col-xl-3 col-form-label">
                    <span ng-model="data.label"
                        ng-class='{"text-muted": !data.enabled}'><%=l 'Data' %>
                        <span ng-show="!data.enabled">( <%=l 'disabled' %> )</span>
                    </span>
                </label>
                <div class="col-lg-2">
                    <input class="form-control" ng-model="data.value" type="number" min ="0.1"name="data"  id="data" ng-disabled="!data.enabled">
                </div>
                <div class="col-lg-1">
                   <a ng-show="!data.enabled"
                      ng-click="data.enabled=true"
                      align="right"><span class="badge badge-primary ml-2">Enable</span></a>
                  <a ng-show="data.enabled"
                      ng-click="data.enabled=false"
                      align="right"><span class="badge badge-primary ml-2">Disable</span></a>
               </div>
               <div>
                    <span>Content will be kept on restore</span>
               </div>
144
            </div>
Fernando Verdugo's avatar
Fernando Verdugo committed
145
146
            <div class="form-group row">
                <div ng-show="new_machineForm.$submitted || new_machineForm.name.$touched">
147
                    <div ng-show="new_machineForm.name.$error.required" class="alert alert-warning" role="alert">
Fernando Verdugo's avatar
Fernando Verdugo committed
148
149
                        <strong><%=l "Error" %></strong> <%=l 'Machine name is required.' %>
                    </div>
150
                    <div ng-show="new_machineForm.name.$error.maxlength" class="alert alert-warning" role="alert">
Fernando Verdugo's avatar
Fernando Verdugo committed
151
152
153
154
                        <strong><%=l 'Error' %></strong> <%=l "Machine name can\'t exceed 20 characters." %>
                    </div>
                </div>
                <div ng-show="new_machineForm.$submitted || new_machineForm.backend.$touched">
155
                    <div ng-show="new_machineForm.backend.$error.required" class="alert alert-warning" role="alert">
Fernando Verdugo's avatar
Fernando Verdugo committed
156
157
158
                        <strong><%=l 'Error' %></strong> <%=l 'Backend selection is required.' %>
                    </div>
                </div>
159

Fernando Verdugo's avatar
Fernando Verdugo committed
160
                <div ng-show="new_machineForm.$submitted || new_machineForm.id_iso.$touched">
161
                    <div ng-show="new_machineForm.id_iso.$error.required" class="alert alert-warning" role="alert">
Fernando Verdugo's avatar
Fernando Verdugo committed
162
163
                        <strong><%=l 'Error' %></strong> <%=l 'ISO image selection is required.' %>
                    </div>
164
165
                </div>

Fernando Verdugo's avatar
Fernando Verdugo committed
166
                <div ng-show="new_machineForm.$submitted || new_machineForm.id_template.$touched">
167
                    <div ng-show="new_machineForm.id_template.$error.required" class="alert alert-warning" role="alert">
Fernando Verdugo's avatar
Fernando Verdugo committed
168
169
170
                        <strong><%=l 'Error' %></strong> <%=l 'Template selection is required' %>
                    </div>
                </div>
171
                <div ng-show="name_duplicated" class="alert alert-warning" role="alert">
Fernando Verdugo's avatar
Fernando Verdugo committed
172
173
                        <strong><%=l 'Error' %></strong> <%=l 'A machine with that name already exists.' %>
                </div>
174
                <div ng-show="new_machineForm.name.$error.pattern" class="alert alert-warning" role="alert">
Fernando Verdugo's avatar
Fernando Verdugo committed
175
                        <strong><%=l 'Error' %></strong> <%=l 'The machine name must contain only alphabetic, numbers, undercores and dashes.' %>
176
177
                </div>
            </div>
Fernando Verdugo's avatar
Fernando Verdugo committed
178
179
180
181

            <div class="form-group row">
                <button type="reset" class="btn btn-outline-secondary mr-2" onclick = "location='/admin/machines'"><%=l 'Cancel' %></button>
                <input type="submit" class="btn btn-primary" name="submit" value="<%=l 'Create' %>"
182
                     ng-disabled="new_machineForm.$invalid || name_duplicated">
183
            </div>
Fernando Verdugo's avatar
Fernando Verdugo committed
184
185
        </form>
    </div>
186
</div>