2022-07-06 06:08:45 +00:00
< page-header title = "'Build image'" breadcrumbs = "[{label:'Images', link:'docker.images'}, 'Build image']" > < / page-header >
2018-02-28 06:19:06 +00:00
< div class = "row" >
< div class = "col-sm-12" >
< rd-widget >
< rd-widget-body >
< uib-tabset active = "state.activeTab" >
< uib-tab index = "0" >
2022-11-28 02:00:28 +00:00
< uib-tab-heading class = "vertical-center" > < pr-icon icon = "'wrench'" class = "leading-none" > < / pr-icon > Builder < / uib-tab-heading >
2018-02-28 06:19:06 +00:00
< form class = "form-horizontal" >
2022-01-17 05:53:32 +00:00
< div class = "col-sm-12 form-section-title" > Naming < / div >
2018-02-28 06:19:06 +00:00
<!-- names -->
< div class = "form-group" >
2022-01-17 05:53:32 +00:00
< span class = "col-sm-12 text-muted small" > You can specify multiple names to your image. < / span >
2018-02-28 06:19:06 +00:00
< / div >
< div class = "form-group" >
< div class = "col-sm-12" >
< label class = "control-label text-left" > Names< / label >
2022-11-28 02:00:28 +00:00
< span class = "label label-default interactive" class = "ml-2.5" ng-click = "addImageName()" > < pr-icon icon = "'plus'" mode = "'alt'" > < / pr-icon > add additional name < / span >
2018-02-28 06:19:06 +00:00
< / div >
< / div >
<!-- !names -->
< div class = "form-group" ng-if = "formValues.ImageNames.length === 0" >
< span class = "col-sm-12 text-danger small" >
2022-11-28 02:00:28 +00:00
< p class = "vertical-center" > < pr-icon icon = "'alert-triangle'" mode = "'danger'" size = "'sm'" > < / pr-icon > You must specify at least one name for the image. < / p >
2018-02-28 06:19:06 +00:00
< / span >
< / div >
<!-- name - input - list -->
< div ng-if = "formValues.ImageNames.length > 0" >
< div class = "form-group" >
< span class = "col-sm-12 text-muted small" >
2020-04-10 21:54:53 +00:00
A name must be specified in one of the following formats: < code > name:tag< / code > , < code > repository/name:tag< / code > or
< code > registryfqdn:port/repository/name:tag< / code > format. If you omit the tag the default < b > latest< / b > value is assumed.
2018-02-28 06:19:06 +00:00
< / span >
< / div >
2020-04-10 21:54:53 +00:00
< div class = "form-group" >
2018-02-28 06:19:06 +00:00
< div class = "col-sm-12" >
2022-08-01 13:51:20 +00:00
< div class = "col-sm-12 form-inline" class = "mt-2.5" >
2022-08-04 23:04:26 +00:00
< div ng-repeat = "item in formValues.ImageNames track by $index" class = "mt-1" >
2018-02-28 06:19:06 +00:00
<!-- name - input -->
< div class = "input-group col-sm-5 input-group-sm" >
< span class = "input-group-addon" > name< / span >
2022-08-04 23:04:26 +00:00
< input type = "text" class = "form-control" ng-model = "item.Name" ng-change = "checkName($index)" placeholder = "e.g. my-image:my-tag" auto-focus / >
< span class = "input-group-addon" ng-if = "!item.Valid" >
2022-11-28 02:00:28 +00:00
< pr-icon icon = "'x'" mode = "'danger'" > < / pr-icon >
2022-08-01 13:51:20 +00:00
< / span >
2022-08-04 23:04:26 +00:00
< span class = "input-group-addon" ng-if = "item.Valid" >
2022-11-28 02:00:28 +00:00
< pr-icon icon = "'check'" mode = "'success'" > < / pr-icon >
2022-08-01 13:51:20 +00:00
< / span >
2018-02-28 06:19:06 +00:00
< / div >
<!-- !name - input -->
<!-- actions -->
< div class = "input-group col-sm-2 input-group-sm" >
2022-08-04 23:04:26 +00:00
< button class = "btn btn-dangerlight btn-only-icon" type = "button" ng-click = "removeImageName($index)" >
2022-11-28 02:00:28 +00:00
< pr-icon icon = "'trash-2'" > < / pr-icon >
2018-02-28 06:19:06 +00:00
< / button >
< / div >
<!-- !actions -->
2022-08-04 23:04:26 +00:00
< div class = "small text-warning" ng-if = "!item.Valid" >
2022-11-28 02:00:28 +00:00
< pr-icon icon = "'alert-triangle'" mode = "'warning'" > < / pr-icon >
2022-08-04 23:04:26 +00:00
< span ng-if = "!item.Unique" > The image name must be unique< / span >
< span ng-if = "item.Unique"
2023-04-26 21:44:08 +00:00
>The image name must consist of between 2 and 255 lowercase alphanumeric characters, '.', '_', or '-' (e.g. 'my-name', or 'abc-123').< /span
2022-08-04 23:04:26 +00:00
>
< / div >
2018-02-28 06:19:06 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- !name - input - list -->
2022-01-17 05:53:32 +00:00
< div class = "col-sm-12 form-section-title" > Build method < / div >
2023-02-07 03:33:57 +00:00
< box-selector options = "options" slim = "true" value = "state.BuildType" on-change = "(onChangeBuildType)" > < / box-selector >
2018-02-28 06:19:06 +00:00
<!-- web - editor -->
2023-03-30 09:26:32 +00:00
<!-- TODO use web - editor - form component -->
2018-02-28 06:19:06 +00:00
< div ng-show = "state.BuildType === 'editor'" >
2022-01-17 05:53:32 +00:00
< div class = "col-sm-12 form-section-title" > Web editor < / div >
2018-02-28 06:19:06 +00:00
< div class = "form-group" >
< span class = "col-sm-12 text-muted small" >
2020-04-10 21:54:53 +00:00
You can get more information about Dockerfile format in the
< a href = "https://docs.docker.com/engine/reference/builder/" target = "_blank" > official documentation< / a > .
2018-02-28 06:19:06 +00:00
< / span >
< / div >
< div class = "form-group" >
< div class = "col-sm-12" >
< code-editor
identifier="image-build-editor"
placeholder="Define or paste the content of your Dockerfile here"
2023-05-17 02:07:21 +00:00
docker-file="true"
2020-04-10 21:54:53 +00:00
on-change="(editorUpdate)"
2018-02-28 06:19:06 +00:00
>< / code-editor >
< / div >
< / div >
2022-09-14 06:47:24 +00:00
< div class = "col-sm-12 form-section-title" > Upload < / div >
< div class = "form-group" >
< div class = "col-sm-12" >
< div class = "form-group" >
< span class = "col-sm-12 text-muted small" >
You can upload files from your local computer for referencing in your Dockerfile (using ADD filename) so they are included in your built image.
< / span >
< / div >
< button class = "btn btn-sm btn-primary" ngf-select = "selectAdditionalFiles($files)" ngf-multiple = "true" > Select files< / button >
< span ng-repeat = "item in formValues.AdditionalFiles track by $index" class = "mx-2" >
{{ item.name }}
< / span >
< / div >
< / div >
2018-02-28 06:19:06 +00:00
< / div >
<!-- !web - editor -->
<!-- upload -->
< div ng-show = "state.BuildType === 'upload'" >
2022-01-17 05:53:32 +00:00
< div class = "col-sm-12 form-section-title" > Upload < / div >
2018-02-28 06:19:06 +00:00
< div class = "form-group" >
< span class = "col-sm-12 text-muted small" >
2020-05-04 07:54:09 +00:00
You can upload a Dockerfile or a tar archive containing a Dockerfile from your computer. When using a tarball, the root folder will be used as the build
2020-04-10 21:54:53 +00:00
context.
2018-02-28 06:19:06 +00:00
< / span >
< / div >
< div class = "form-group" >
2022-08-01 13:51:20 +00:00
< div class = "col-sm-12 vertical-center" >
2018-07-26 13:09:48 +00:00
< button class = "btn btn-sm btn-primary" ngf-select ngf-min-size = "10" ng-model = "formValues.UploadFile" > Select file< / button >
2022-08-01 13:51:20 +00:00
< span class = "space-left" >
2018-02-28 06:19:06 +00:00
{{ formValues.UploadFile.name }}
2022-11-28 02:00:28 +00:00
< span ng-if = "!formValues.UploadFile" > < pr-icon icon = "'x'" mode = "'danger'" size = "'md'" > < / pr-icon > < / span >
2018-02-28 06:19:06 +00:00
< / span >
< / div >
< / div >
< div ng-if = "formValues.UploadFile.type === 'application/gzip' || formValues.UploadFile.type === 'application/x-tar'" >
< div class = "form-group" >
2022-01-17 05:53:32 +00:00
< span class = "col-sm-12 text-muted small" > Indicate the path to the Dockerfile within the tarball. < / span >
2018-02-28 06:19:06 +00:00
< / div >
< div class = "form-group" >
< label for = "image_path" class = "col-sm-2 control-label text-left" > Dockerfile path< / label >
< div class = "col-sm-10" >
2020-04-10 21:54:53 +00:00
< input type = "text" class = "form-control" ng-model = "formValues.Path" id = "image_path" placeholder = "Dockerfile" / >
2018-02-28 06:19:06 +00:00
< / div >
< / div >
< / div >
< / div >
<!-- !upload -->
<!-- url -->
< div ng-show = "state.BuildType === 'url'" >
2022-01-17 05:53:32 +00:00
< div class = "col-sm-12 form-section-title" > URL < / div >
2018-02-28 06:19:06 +00:00
< div class = "form-group" >
2022-10-05 01:20:00 +00:00
< span class = "col-sm-12 small vertical-center" >
2022-11-28 02:00:28 +00:00
< pr-icon icon = "'info'" mode = "'primary'" > < / pr-icon >
2022-10-05 01:20:00 +00:00
< span class = "text-muted"
>Specify the URL to a Dockerfile, a tarball or a public Git repository (suffixed by < b > .git< / b > ). When using a Git repository URL, build contexts can be
specified as in the < a href = "https://docs.docker.com/engine/reference/commandline/build/#git-repositories" > Docker documentation.< / a > < /span
>
2018-02-28 06:19:06 +00:00
< / span >
< / div >
< div class = "form-group" >
< label for = "image_url" class = "col-sm-2 control-label text-left" > URL< / label >
< div class = "col-sm-10" >
2022-05-15 21:35:11 +00:00
< input
type="text"
class="form-control"
ng-model="formValues.URL"
id="image_url"
placeholder="https://myhost.mydomain/myimage.tar.gz or https://github.com/myname/myrepo.git#mybranch"
/>
2018-02-28 06:19:06 +00:00
< / div >
< / div >
< div class = "form-group" >
2022-09-20 05:42:31 +00:00
< span class = "col-sm-12 text-muted small vertical-center" >
2022-11-28 02:00:28 +00:00
< pr-icon icon = "'info'" mode = "'primary'" > < / pr-icon >
2022-09-20 05:42:31 +00:00
Indicate the path to the Dockerfile within the tarball/repository (ignored when using a Dockerfile).
< / span >
2018-02-28 06:19:06 +00:00
< / div >
< div class = "form-group" >
< label for = "image_path" class = "col-sm-2 control-label text-left" > Dockerfile path< / label >
< div class = "col-sm-10" >
2020-04-10 21:54:53 +00:00
< input type = "text" class = "form-control" ng-model = "formValues.Path" id = "image_path" placeholder = "Dockerfile" / >
2018-02-28 06:19:06 +00:00
< / div >
< / div >
< / div >
<!-- !url -->
2018-07-23 09:31:21 +00:00
< div ng-if = "applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'" >
2022-01-17 05:53:32 +00:00
< div class = "col-sm-12 form-section-title" > Deployment < / div >
2018-05-06 07:15:57 +00:00
<!-- node - selection -->
2022-11-02 11:29:26 +00:00
< node-selector model = "formValues.NodeName" endpoint-id = "endpoint.Id" > < / node-selector >
2018-05-06 07:15:57 +00:00
<!-- !node - selection -->
< / div >
2018-02-28 06:19:06 +00:00
<!-- actions -->
2022-01-17 05:53:32 +00:00
< div class = "col-sm-12 form-section-title" > Actions < / div >
2018-02-28 06:19:06 +00:00
< div class = "form-group" >
< div class = "col-sm-12" >
2020-04-10 21:54:53 +00:00
< button
type="button"
class="btn btn-primary btn-sm"
2018-02-28 06:19:06 +00:00
ng-disabled="state.actionInProgress
2022-09-08 00:32:36 +00:00
|| (state.BuildType === 'editor' & & formValues.DockerFileContent === '')
2018-02-28 06:19:06 +00:00
|| (state.BuildType === 'upload' & & (!formValues.UploadFile || !formValues.Path))
|| (state.BuildType === 'url' & & (!formValues.URL || !formValues.Path))
2022-09-08 00:32:36 +00:00
|| (formValues.ImageNames.length === 0 || !validImageNames())"
2020-04-10 21:54:53 +00:00
ng-click="buildImage()"
button-spinner="state.actionInProgress"
>
2018-02-28 06:19:06 +00:00
< span ng-hide = "state.actionInProgress" > Build the image< / span >
< span ng-show = "state.actionInProgress" > Image building in progress...< / span >
< / button >
2022-08-01 13:51:20 +00:00
< span class = "text-danger" ng-if = "state.formValidationError" class = "space-left" > {{ state.formValidationError }}< / span >
2018-02-28 06:19:06 +00:00
< / div >
< / div >
<!-- !actions -->
< / form >
< / uib-tab >
< uib-tab index = "1" disable = "!buildLogs" >
2022-11-28 02:00:28 +00:00
< uib-tab-heading class = "vertical-center" > < pr-icon icon = "'file-text'" class = "leading-none" > < / pr-icon > Output < / uib-tab-heading >
2018-02-28 06:19:06 +00:00
< pre class = "log_viewer" >
< div ng-repeat = "line in buildLogs track by $index" class = "line" > < p class = "inner_line" ng-click = "active=!active" ng-class = "{'line_selected': active}" > {{ line }}< / p > < / div >
< div ng-if = "!buildLogs.length" class = "line" > < p class = "inner_line" > No build output available.< / p > < / div >
< / pre >
< / uib-tab >
< / uib-tabset >
< / rd-widget-body >
< / rd-widget >
< / div >
< / div >