forked from openshift/origin-web-console
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdeploy-image.html
208 lines (202 loc) · 10 KB
/
deploy-image.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<div class="deploy-image">
<select-project ng-if="!project" selected-project="input.selectedProject" name-taken="projectNameTaken"></select-project>
<span ng-show="!noProjectsCantCreate">
<p>
Deploy an existing image from an image stream tag or docker pull spec.
</p>
<ng-form name="forms.imageSelection">
<fieldset ng-disabled="loading">
<div class="radio">
<label>
<input type="radio" ng-model="mode" value="istag">
Image Stream Tag
</label>
</div>
<fieldset>
<istag-select model="istag" select-required="mode === 'istag'" select-disabled="mode !== 'istag'" include-shared-namespace="true"></istag-select>
<div ng-if="mode == 'istag' && istag.namespace && istag.namespace !== 'openshift' && istag.namespace !== input.selectedProject.metadata.name" class="alert alert-warning">
<span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
Service account <strong>default</strong> will need image pull authority to deploy images
from <strong>{{istag.namespace}}</strong>. You can grant authority with the command:
<p>
<code>oc policy add-role-to-user system:image-puller system:serviceaccount:{{input.selectedProject.metadata.name}}:default -n {{istag.namespace}}</code>
</p>
</div>
</fieldset>
<!-- disable this radio option when creating a project as image search requires a namespace -->
<div class="radio" ng-class="{disabled : !input.selectedProject.metadata.uid}">
<label>
<input type="radio" ng-model="mode" value="dockerImage" ng-disabled="!input.selectedProject.metadata.uid">
Image Name
</label>
</div>
<fieldset ng-disabled="!input.selectedProject.metadata.uid">
<div class="form-group">
<label for="imageName" class="sr-only">Image name or pull spec</label>
<div class="input-group">
<input type="search"
id="imageName"
name="imageName"
ng-model="imageName"
ng-required="mode === 'dockerImage'"
select-on-focus
ng-disabled="mode !== 'dockerImage'"
placeholder="Image name or pull spec"
class="form-control"
autocorrect="off"
autocapitalize="none"
spellcheck="false">
<span class="input-group-btn">
<button class="btn btn-default"
type="submit"
ng-disabled="!imageName"
ng-click="findImage()">
<i class="fa fa-search" aria-hidden="true"></i>
<span class="sr-only">Find</span>
</button>
</span>
</div>
<div ng-if="!input.selectedProject.metadata.uid" class="help-block">
Image search is only available for existing projects.
</div>
</div>
</fieldset>
</fieldset>
</ng-form>
<div class="mar-top-lg mar-bottom-lg">
<div class="separator"></div>
</div>
<div ng-if="loading || !import" class="empty-state-message text-center">
<h2 ng-if="!loading" class="h2">Select an image stream tag or enter an image name.</h2>
<h2 ng-if="loading" class="h2">Loading image metadata for <span class="word-break">{{imageName | stripSHA}}</span>...</h2>
</div>
<div class="row mar-bottom-md" ng-if-start="!loading && import.image">
<div class="col-sm-2 hidden-xs text-right h2">
<span class="fa fa-cube text-muted" style="font-size: 100px;" aria-hidden="true"></span>
</div>
<div class="col-sm-10">
<div ng-if="runsAsRoot" class="alert alert-warning">
<span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
Image <strong>{{import.name}}</strong> runs as the
<strong>root</strong> user which might not be permitted by your cluster
administrator.
</div>
<h2>
<span ng-if="mode === 'dockerImage'">{{import.name}}</span>
<span ng-if="mode === 'istag'">{{istag.imageStream}}<span ng-if="import.tag">:{{import.tag}}</span></span>
<small>
<span ng-if="import.result.ref.registry">from {{import.result.ref.registry}},</span>
<span am-time-ago="import.image.dockerImageMetadata.Created"></span>,
<span ng-if="import.image.dockerImageMetadata.Size">{{import.image.dockerImageMetadata.Size | humanizeSize}},</span>
{{import.image.dockerImageLayers.length}} layers
</small>
</h2>
<ul>
<li ng-if="!import.namespace">Image Stream <strong>{{app.name || "<name>"}}:{{import.tag || 'latest'}}</strong> will track this image.</li>
<li>This image will be deployed in Deployment Config <strong>{{app.name || "<name>"}}</strong>.</li>
<li ng-if="ports.length">
<span ng-if="ports.length === 1">Port</span>
<span ng-if="ports.length > 1">Ports</span>
<span ng-repeat="port in ports">
<span ng-if="!$first && $last">and</span>
{{port.containerPort}}/{{port.protocol}}<span ng-if="!$last && ports.length > 2">,</span>
</span>
will be load balanced by Service <strong>{{app.name || "<name>"}}</strong>.
<div>Other containers can access this service through the hostname <strong>{{app.name || "<name>"}}</strong>.</div>
</li>
</ul>
<div ng-if="(volumes | hashSize) > 0" class="help-block">
This image declares volumes and will default to use non-persistent, host-local storage.
You can add persistent storage later to the deployment config.
</div>
</div>
</div>
<div ng-if-end>
<ng-form name="forms.deployImage" class="osc-form">
<div class="form-group">
<label for="name" class="required">Name</label>
<div ng-class="{'has-error': (forms.deployImage.name.$invalid && forms.deployImage.name.$touched) || nameTaken}">
<input type="text"
required
select-on-focus
minlength="2"
maxlength="24"
pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
ng-model="app.name"
id="name"
name="name"
class="form-control"
autocorrect="off"
autocapitalize="none"
spellcheck="false">
</div>
<div class="help-block">Identifies the resources created for this image.</div>
<div class="has-error" ng-show="forms.deployImage.name.$invalid && forms.deployImage.name.$touched">
<div class="help-block" ng-show="forms.deployImage.name.$error.required">
A name is required.
</div>
<div class="help-block" ng-show="forms.deployImage.name.$error.pattern">
Name must be an alphanumeric (a-z, 0-9) string with a maximum length
of 24 characters where the first character is a letter (a-z). The '-'
character is allowed anywhere except the first or last character.
</div>
<div class="help-block" ng-show="forms.deployImage.name.$error.minlength">
Name must have at least 2 characters.
</div>
<div class="help-block" ng-show="forms.deployImage.name.$error.maxlength">
Name can't have more than 24 characters.
</div>
</div>
<div class="has-error" ng-show="nameTaken">
<span class="help-block">This name is already in use within the project. Please choose a different name.</span>
</div>
</div>
<osc-form-section
header="Environment Variables"
about-title="Environment Variables"
about="Environment variables are used to configure and pass information to running containers."
expand="true"
can-toggle="false"
class="first-section">
<key-value-editor
entries="env"
key-placeholder="Name"
key-validator="[A-Za-z_][A-Za-z0-9_]*"
key-validator-error="A valid environment variable name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."
value-placeholder="Value"
value-from-selector-options="input.selectedProject.metadata.uid && valueFromNamespace[input.selectedProject.metadata.name]"
add-row-link="Add Value"
add-row-with-selectors-link="Add Value from Config Map or Secret"></key-value-editor>
</osc-form-section>
<label-editor
labels="labels"
expand="true"
can-toggle="false"
help-text="Each label is applied to each created resource.">
</label-editor>
<alerts alerts="alerts"></alerts>
<div ng-if="!isDialog" class="button-group gutter-bottom" ng-class="{'gutter-top': !alerts.length}">
<button type="submit"
class="btn btn-primary btn-lg"
ng-click="create()"
value=""
ng-disabled="forms.deployImage.$invalid || nameTaken || disableInputs">Create</button>
<a class="btn btn-default btn-lg" href="#" back>Cancel</a>
</div>
</ng-form>
</div>
<div ng-if="!loading && import.error" class="empty-state-message text-center">
<h2>
<i class="pficon pficon-error-circle-o" aria-hidden="true"></i>
Could not load image metadata.
</h2>
<p>{{import.error | upperFirst}}</p>
</div>
<div ng-if="!loading && import && !import.error && !import.image" class="empty-state-message text-center">
<h2>
No image metadata found.
</h2>
<p>Could not find any images for {{import.name | stripTag}}:{{import.tag}}.</p>
</div>
</span>
</div>