diff --git a/client/directives/components/mirrorDockerfile/addDockerfileView.jade b/client/directives/components/mirrorDockerfile/addDockerfileView.jade index 980a92e73..652411de5 100644 --- a/client/directives/components/mirrorDockerfile/addDockerfileView.jade +++ b/client/directives/components/mirrorDockerfile/addDockerfileView.jade @@ -15,7 +15,7 @@ form( dockerfile-exists-validator = "{{fileType}}" full-repo = "fullRepo" id = "add-dockerfile-input" - ng-disabled = "state.dockerFileAdded" + ng-disabled = "state.dockerFileAdded || $root.featureFlags.composeEditing" ng-model = "newDockerfile" ng-model-options = "{ debounce: { 'default': 100, 'blur': 0 } }" placeholder = "{{ fileName }}" diff --git a/client/directives/components/newContainer/forms/compose/composeFilePathView.jade b/client/directives/components/newContainer/forms/compose/composeFilePathView.jade index f0bdadaf5..cd217c42a 100644 --- a/client/directives/components/newContainer/forms/compose/composeFilePathView.jade +++ b/client/directives/components/newContainer/forms/compose/composeFilePathView.jade @@ -3,6 +3,7 @@ .padding-left-xxs.small.label-sm {{type === 'stage' ? 'Compose for Staging' : 'Compose for Testing'}} .toggle-wrapper input.toggle-input( + ng-disabled = "$root.featureFlags.composeEditing" ng-model = "pathEnabled" type = "checkbox" ) diff --git a/client/directives/components/newContainer/forms/configureNewServiceView.jade b/client/directives/components/newContainer/forms/configureNewServiceView.jade index 33d76790b..08c45c7e9 100644 --- a/client/directives/components/newContainer/forms/configureNewServiceView.jade +++ b/client/directives/components/newContainer/forms/configureNewServiceView.jade @@ -1,5 +1,10 @@ -section.grid-block.vertical.modal-body - +header.grid-block.vertical.align-center.modal-header( + ng-if = "$root.featureFlags.composeEditing" + ng-init = "state.selectedTab = 'compose'" +) + .container-title-wrapper + .server-status-card-pop-over.no-touching + .container-title {{NCC.state.instanceName}} svg.iconnables.icons-close( ng-click = "NCC.close()" ) @@ -7,50 +12,43 @@ section.grid-block.vertical.modal-body xlink:href = "#icons-close" ) - .grid-block.vertical.modal-form.no-border - .label-tabs.grid-block - label.grid-block.align-center.btn.btn-radio( - ng-class = "{'active': NCC.state.dockerFileTab === 'kubernetes'}" - ng-click = "\ - NCC.state.dockerFileTab = 'kubernetes';\ - NCC.state.configurationMethod = 'dockerComposeFile'\ - " - ng-if = "$root.featureFlags.kubernetes" - ) - svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check - use( - xlink:href = "#icons-check" - ) - .grid-block.vertical.text-left - p.p.weight-strong Use Kubernetes - small.small Set up from Kubernetes files in your repo. + .row.modal-tabs.tabs-all.grid-block.clearfix( + ng-init = "tabs = [\ + {name: 'compose', iconName: 'icons-compose', label: 'Compose Files'},\ + {name: 'env', iconName: 'icons-environment-variable', label: 'Environment Variables'}\ + ];" + ) + button.btn.btn-radio.grid-block.vertical( + ng-class = "{'active': state.selectedTab === '{{tab.name}}'}" + ng-click = "state.selectedTab = tab.name" + ng-repeat = "tab in tabs" + ) + svg.iconnables.grid-content + use( + ng-attr-xlink:href = "{{'#' + $sce.trustAs($sce.HTML, tab.iconName)}}" + xlink:href = "" + ) + .btn-text.grid-content {{tab.label}} + +section.grid-block.vertical.modal-body( + ng-init = "state.selectedTab = 'compose'" +) - label.grid-block.align-center.btn.btn-radio( - data-event-name = "Selected Compose Setup" - ng-class = "{'active': NCC.state.dockerFileTab === 'compose'}" - ng-click = "NCC.state.dockerFileTab = 'compose'; NCC.state.configurationMethod = 'dockerComposeFile'" - ) - svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check - use( - xlink:href = "#icons-check" - ) - .grid-block.vertical.text-left - p.p.weight-strong Use a Compose File - small.small Set up from a Compose file in your repo. + svg.iconnables.icons-close( + ng-click = "NCC.close()" + ng-if = "!$root.featureFlags.composeEditing" + ) + use( + xlink:href = "#icons-close" + ) - label.grid-block.align-center.btn.btn-radio( - data-event-name = "Selected Dockerfile Setup" - ng-class = "{'active': NCC.state.dockerFileTab === 'dockerfile'}" - ng-click = "NCC.state.dockerFileTab = 'dockerfile'; NCC.state.configurationMethod = 'dockerfile'" - ng-if = "!$root.featureFlags.kubernetes" - ) - svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check - use( - xlink:href = "#icons-check" - ) - .grid-block.vertical.text-left - p.p.weight-strong No Compose File - small.small Set up from scratch or from a Dockerfile. + .grid-block.vertical.modal-form.no-border( + ng-if = "state.selectedTab === 'compose'" + ) + .label-tabs.grid-block( + ng-if = "!$root.featureFlags.composeEditing" + ng-include = "'setupMethodView'" + ) //- form for naming the environment form.grid-block.vertical.label( @@ -82,6 +80,12 @@ section.grid-block.vertical.modal-body state = "NCC.state" ) + .modal-form( + ng-form = "envVarForm" + ng-include = "'viewFormEnvironmentVariables'" + ng-if = "state.selectedTab === 'env'" + ) + footer.modal-footer.clearfix button.btn.btn-md.gray.btn-cancel.float-left( ng-click = "NCC.close()" @@ -97,7 +101,7 @@ footer.modal-footer.clearfix ) span( ng-if = "$root.featureFlags.composeNewService && NCC.state.repo" - ) {{ NCC.getNextStepText() }} + ) {{$root.featureFlags.composeEditing ? 'Save Changes' : 'NCC.getNextStepText()'}} span( ng-if = "NCC.state.templateSource" ) Add Service diff --git a/client/directives/components/newContainer/forms/nameNewServiceView.jade b/client/directives/components/newContainer/forms/nameNewServiceView.jade index d4d05e629..a79a99bb4 100644 --- a/client/directives/components/newContainer/forms/nameNewServiceView.jade +++ b/client/directives/components/newContainer/forms/nameNewServiceView.jade @@ -6,6 +6,7 @@ label maxlength = "19" name = "instanceName" no-double-dash-validator + ng-disabled = "$root.featureFlags.composeEditing" ng-model = "NCC.state.instanceName" ng-pattern = "/^[a-zA-Z0-9-]*$/" ng-placeholder = "{{NCC.state.instanceName}}" diff --git a/client/directives/components/newContainer/forms/setupMethodView.jade b/client/directives/components/newContainer/forms/setupMethodView.jade new file mode 100644 index 000000000..f4c69c261 --- /dev/null +++ b/client/directives/components/newContainer/forms/setupMethodView.jade @@ -0,0 +1,42 @@ +label.grid-block.align-center.btn.btn-radio( + ng-class = "{'active': NCC.state.dockerFileTab === 'kubernetes'}" + ng-click = "\ + NCC.state.dockerFileTab = 'kubernetes';\ + NCC.state.configurationMethod = 'dockerComposeFile'\ + " + ng-if = "$root.featureFlags.kubernetes" +) + svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check + use( + xlink:href = "#icons-check" + ) + .grid-block.vertical.text-left + p.p.weight-strong Use Kubernetes + small.small Set up from Kubernetes files in your repo. + +label.grid-block.align-center.btn.btn-radio( + data-event-name = "Selected Compose Setup" + ng-class = "{'active': NCC.state.dockerFileTab === 'compose'}" + ng-click = "NCC.state.dockerFileTab = 'compose'; NCC.state.configurationMethod = 'dockerComposeFile'" +) + svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check + use( + xlink:href = "#icons-check" + ) + .grid-block.vertical.text-left + p.p.weight-strong Use a Compose File + small.small Set up from a Compose file in your repo. + +label.grid-block.align-center.btn.btn-radio( + data-event-name = "Selected Dockerfile Setup" + ng-class = "{'active': NCC.state.dockerFileTab === 'dockerfile'}" + ng-click = "NCC.state.dockerFileTab = 'dockerfile'; NCC.state.configurationMethod = 'dockerfile'" + ng-if = "!$root.featureFlags.kubernetes" +) + svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check + use( + xlink:href = "#icons-check" + ) + .grid-block.vertical.text-left + p.p.weight-strong No Compose File + small.small Set up from scratch or from a Dockerfile. diff --git a/client/directives/components/newContainer/newContainerController.js b/client/directives/components/newContainer/newContainerController.js index 8c4184b98..09c01b12e 100644 --- a/client/directives/components/newContainer/newContainerController.js +++ b/client/directives/components/newContainer/newContainerController.js @@ -6,6 +6,7 @@ require('app') function NewContainerController( $q, $rootScope, + $sce, $scope, $state, $timeout, @@ -27,6 +28,7 @@ function NewContainerController( loading, ModalService ) { + $scope.$sce = $sce; var NCC = this; var defaultState = this.state || {}; var defaultTab = 'dockerfile'; diff --git a/client/templates/svg/svgDefs.jade b/client/templates/svg/svgDefs.jade index e4ca46ade..25415d1d9 100755 --- a/client/templates/svg/svgDefs.jade +++ b/client/templates/svg/svgDefs.jade @@ -87,6 +87,10 @@ svg(xmlns='http://www.w3.org/2000/svg') path(fill='#555555', d='M15,8.1v1.7h-2.7c-0.2,0.8-0.6,1.4-1.2,1.8c-0.6,0.5-1.3,0.7-2.1,0.7c-0.8,0-1.5-0.3-2.1-0.7c-0.6-0.5-1-1.1-1.2-1.8H3V8.1h2.7c0.2-0.7,0.6-1.4,1.2-1.8C7.5,5.8,8.2,5.6,9,5.6c0.8,0,1.5,0.3,2.1,0.7c0.6,0.5,1,1.1,1.2,1.8H15z M10.2,10.2c0.3-0.3,0.5-0.7,0.5-1.2c0-0.5-0.2-0.9-0.5-1.2S9.5,7.3,9,7.3c-0.5,0-0.9,0.2-1.2,0.5S7.3,8.5,7.3,9c0,0.5,0.2,0.9,0.5,1.2c0.3,0.3,0.7,0.5,1.2,0.5C9.5,10.7,9.9,10.5,10.2,10.2z') symbol#icons-commit-alt(viewBox='0 0 14 8') path(d='M14,3v2h-3.141c-0.239,0.875-0.706,1.588-1.398,2.14C8.768,7.694,7.948,7.98,7,8C6.052,7.98,5.232,7.694,4.539,7.14\C3.846,6.588,3.38,5.876,3.141,5H0V3h3.141c0.24-0.875,0.705-1.588,1.399-2.141C5.232,0.307,6.052,0.021,7,0\c0.948,0.021,1.768,0.307,2.461,0.859C10.153,1.412,10.62,2.125,10.859,3H14z M8.414,5.414C8.794,5.034,8.99,4.562,9,4\C8.99,3.437,8.794,2.966,8.414,2.586C8.034,2.206,7.562,2.011,7,2c-0.562,0.01-1.034,0.206-1.414,0.586\C5.206,2.966,5.01,3.437,5,4c0.01,0.562,0.206,1.034,0.586,1.414C5.966,5.794,6.438,5.99,7,6.001\C7.562,5.99,8.034,5.794,8.414,5.414z') + symbol#icons-compose(viewBox='0 0 18 18') + rect(x='0.5', y='0.5', width='17', height='17', rx='2.5', ry='2.5', fill='#0ca6f2') + path(d='M15,1a2,2,0,0,1,2,2V15a2,2,0,0,1-2,2H3a2,2,0,0,1-2-2V3A2,2,0,0,1,3,1H15m0-1H3A3,3,0,0,0,0,3V15a3,3,0,0,0,3,3H15a3,3,0,0,0,3-3V3a3,3,0,0,0-3-3Z', fill='#0b83b2') + path(d='M15.385,11.015a.55.55,0,0,0-.55-.55,2.194,2.194,0,0,1-2.3-1.632c0-.688-.031-1.312-.031-2.107a3.5,3.5,0,1,0-7,0c0,.8.031,1.461.031,2.107a2.272,2.272,0,0,1-2.367,1.632.547.547,0,0,0-.235,1.042v0l.011,0A.542.542,0,0,0,3,11.531a5.474,5.474,0,0,0,3.976-.314A7.35,7.35,0,0,1,5.3,13.788a.535.535,0,0,0-.1.1l-.034.034,0,.013a.534.534,0,0,0-.091.285.54.54,0,0,0,.208.421l0,.012a.585.585,0,0,0,.071.038.524.524,0,0,0,.079.041c.932.361,2.925-1.4,3.491-2.647.022-.01.042-.024.064-.035.022.011.041.025.064.035.566,1.252,2.559,3.008,3.491,2.647a.524.524,0,0,0,.079-.042.59.59,0,0,0,.071-.037l0-.012a.54.54,0,0,0,.208-.421.534.534,0,0,0-.091-.285l0-.013-.034-.034a.534.534,0,0,0-.1-.1,7.35,7.35,0,0,1-1.668-2.572,5.476,5.476,0,0,0,3.961.319.545.545,0,0,0,.075-.022l.007,0v0a.546.546,0,0,0,.314-.492h0Z', fill='#fff', opacity='0.75') symbol#icons-gear(viewBox='0 0 18 18') path(d='M9,17.5a0.84789,0.84789,0,0,1-.81494-0.60254l-0.17334-.56641a2.4242,2.4242,0,0,0-1.40332-1.5332,2.47365,2.47365,0,0,0-.95605-0.19434,2.42226,2.42226,0,0,0-1.14209.28711L4.083,15.12012a0.85716,0.85716,0,0,1-1.00977-.14844A0.8771,0.8771,0,0,1,2.88037,13.917l0.229-.42578a2.42642,2.42642,0,0,0,.09912-2.084,2.42671,2.42671,0,0,0-1.54-1.41846L1.10254,9.81494a0.85238,0.85238,0,0,1,0-1.62988l0.56592-.17334A2.47013,2.47013,0,0,0,3.10938,4.50879l-0.229-.42627a0.85322,0.85322,0,0,1,.14795-1.00928A0.90065,0.90065,0,0,1,3.6792,2.77832a0.8533,0.8533,0,0,1,.40283.10156L4.51025,3.10938A2.42852,2.42852,0,0,0,5.65332,3.396,2.48127,2.48127,0,0,0,8.01123,1.66943l0.17383-.56689a0.85238,0.85238,0,0,1,1.62988,0L9.98877,1.66943a2.421,2.421,0,0,0,1.40186,1.53271,2.47238,2.47238,0,0,0,.958.19434,2.416,2.416,0,0,0,1.14063-.28662l0.42773-.23a0.85928,0.85928,0,0,1,1.00977.14844A0.87737,0.87737,0,0,1,15.12012,4.083l-0.22949.42529a2.46989,2.46989,0,0,0,1.44043,3.50342l0.56641,0.17334a0.85238,0.85238,0,0,1,0,1.62988l-0.56738.17383a2.46894,2.46894,0,0,0-1.44043,3.49951L15.12012,13.917a0.85479,0.85479,0,0,1-.14844,1.00977,0.89677,0.89677,0,0,1-.65039.29395h0a0.85905,0.85905,0,0,1-.4043-0.10156l-0.4248-.22754a2.42135,2.42135,0,0,0-1.14453-.28809A2.48378,2.48378,0,0,0,9.98877,16.332l-0.17383.56543A0.84745,0.84745,0,0,1,9,17.5Zm0-11A2.5,2.5,0,1,0,11.5,9,2.50294,2.50294,0,0,0,9,6.5Z', style='fill:#fff') path(d='M9,1a0.35042,0.35042,0,0,1,.33681.24908L9.51034,1.81542a2.98447,2.98447,0,0,0,2.83734,2.081,2.92366,2.92366,0,0,0,1.378-.346l0.42811-.22974a0.3492,0.3492,0,0,1,.16688-0.042,0.35945,0.35945,0,0,1,.25437.10477l0.0414,0.0414a0.35652,0.35652,0,0,1,.06283.42131l-0.2289.4265a2.96895,2.96895,0,0,0,1.7342,4.21692l0.56636,0.17354a0.35226,0.35226,0,0,1,0,.67362l-0.56649.17358A2.96848,2.96848,0,0,0,14.44935,13.725l0.23,0.42863a0.35643,0.35643,0,0,1-.0628.42121l-0.04137.04136a0.35943,0.35943,0,0,1-.25429.10473,0.34935,0.34935,0,0,1-.16706-0.04208l-0.42479-.2282a2.9284,2.9284,0,0,0-1.38142-.347,2.96332,2.96332,0,0,0-1.14591.23161,2.91981,2.91981,0,0,0-1.69129,1.84928l-0.17357.56646a0.35227,0.35227,0,0,1-.67363,0L8.48967,16.1846a2.96017,2.96017,0,0,0-4.21538-1.73507l-0.428.22972a0.3493,0.3493,0,0,1-.16691.042,0.35929,0.35929,0,0,1-.25418-0.10457l-0.04145-.04145A0.35645,0.35645,0,0,1,3.321,14.15385l0.22845-.4254a2.9695,2.9695,0,0,0-1.734-4.21809L1.24907,9.33681a0.35226,0.35226,0,0,1,0-.67362l0.56619-.17348A2.92849,2.92849,0,0,0,3.67063,6.78359a2.92225,2.92225,0,0,0-.12052-2.51124L3.32108,3.846a0.35644,0.35644,0,0,1,.0627-0.42141L3.425,3.38337a0.35956,0.35956,0,0,1,.25446-0.10484,0.34931,0.34931,0,0,1,.16679.04193L4.27426,3.55a2.92835,2.92835,0,0,0,1.37954.346,2.9615,2.9615,0,0,0,1.14548-.23142A2.92023,2.92023,0,0,0,8.48955,1.81576l0.17364-.56669A0.35042,0.35042,0,0,1,9,1M9,12A3,3,0,1,0,6,9a3.00341,3.00341,0,0,0,3,3M9,0A1.35226,1.35226,0,0,0,7.70706.95613l-0.17363.56666a1.9285,1.9285,0,0,1-1.11452,1.217l-0.01633.00675a1.95625,1.95625,0,0,1-.74878.1495,1.91654,1.91654,0,0,1-.90691-0.2273L4.31894,2.43922a1.358,1.358,0,0,0-1.59746.2335L2.67317,2.721a1.3586,1.3586,0,0,0-.233,1.59826l0.229,0.42631A1.92982,1.92982,0,0,1,2.7468,6.40078l-0.00748.01814a1.92809,1.92809,0,0,1-1.217,1.11467l-0.56617.17347a1.35226,1.35226,0,0,0,0,2.58588l0.56635,0.17354a1.92815,1.92815,0,0,1,1.217,1.11464l0.00729,0.01767a1.93345,1.93345,0,0,1-.07833,1.65653L2.44,13.68073a1.35861,1.35861,0,0,0,.23312,1.5981l0.04825,0.04825a1.358,1.358,0,0,0,1.59777.2333l0.42805-.22973a1.91155,1.91155,0,0,1,.90512-0.22709,1.95708,1.95708,0,0,1,.749.14969l0.01724,0.00711a1.92844,1.92844,0,0,1,1.115,1.21719l0.17352,0.56632a1.35226,1.35226,0,0,0,2.58588,0l0.17356-.56644a1.92825,1.92825,0,0,1,1.1151-1.21722l0.01782-.00735a1.95553,1.95553,0,0,1,.74816-0.14928,1.91681,1.91681,0,0,1,.90817.228l0.42477,0.22819a1.35789,1.35789,0,0,0,1.59807-.23283l0.04831-.04829a1.35862,1.35862,0,0,0,.23359-1.5978l-0.22995-.42861a1.93,1.93,0,0,1-.07711-1.65434l0.00693-.01679a1.92844,1.92844,0,0,1,1.217-1.11457l0.56649-.17357a1.35226,1.35226,0,0,0,0-2.58588l-0.56633-.17353a1.92841,1.92841,0,0,1-1.21718-1.115l-0.00711-.01723a1.9334,1.9334,0,0,1,.07825-1.65572l0.22888-.42648a1.35865,1.35865,0,0,0-.2333-1.59777l-0.04844-.04844a1.35793,1.35793,0,0,0-1.59777-.23329l-0.42805.22971a1.91163,1.91163,0,0,1-.90514.2271,1.957,1.957,0,0,1-.749-0.14969l-0.01722-.00711a1.92845,1.92845,0,0,1-1.115-1.21719l-0.17352-.56632A1.35226,1.35226,0,0,0,9,0H9ZM9,11a2,2,0,1,1,2-2,2.00022,2.00022,0,0,1-2,2H9Z')