Commit c9de56fa authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Kamil Trzcinski

Add existing cluster form - FE and CSS

Add GKE, Login - HTML & CSS
Cluster details - HTML & CSS
parent 26a585c9
...@@ -48,6 +48,7 @@ export default class Clusters { ...@@ -48,6 +48,7 @@ export default class Clusters {
this.toggle = this.toggle.bind(this); this.toggle = this.toggle.bind(this);
this.installApplication = this.installApplication.bind(this); this.installApplication = this.installApplication.bind(this);
this.showToken = this.showToken.bind(this);
this.toggleButton = document.querySelector('.js-toggle-cluster'); this.toggleButton = document.querySelector('.js-toggle-cluster');
this.toggleInput = document.querySelector('.js-toggle-input'); this.toggleInput = document.querySelector('.js-toggle-input');
...@@ -56,6 +57,8 @@ export default class Clusters { ...@@ -56,6 +57,8 @@ export default class Clusters {
this.creatingContainer = document.querySelector('.js-cluster-creating'); this.creatingContainer = document.querySelector('.js-cluster-creating');
this.errorReasonContainer = this.errorContainer.querySelector('.js-error-reason'); this.errorReasonContainer = this.errorContainer.querySelector('.js-error-reason');
this.successApplicationContainer = document.querySelector('.js-cluster-application-notice'); this.successApplicationContainer = document.querySelector('.js-cluster-application-notice');
this.showTokenButton = document.querySelector('.js-show-cluster-token');
this.tokenField = document.querySelector('.js-cluster-token');
initSettingsPanels(); initSettingsPanels();
this.initApplications(); this.initApplications();
...@@ -97,11 +100,13 @@ export default class Clusters { ...@@ -97,11 +100,13 @@ export default class Clusters {
addListeners() { addListeners() {
this.toggleButton.addEventListener('click', this.toggle); this.toggleButton.addEventListener('click', this.toggle);
this.showTokenButton.addEventListener('click', this.showToken);
eventHub.$on('installApplication', this.installApplication); eventHub.$on('installApplication', this.installApplication);
} }
removeListeners() { removeListeners() {
this.toggleButton.removeEventListener('click', this.toggle); this.toggleButton.removeEventListener('click', this.toggle);
this.showTokenButton.removeEventListener('click', this.showToken);
eventHub.$off('installApplication', this.installApplication); eventHub.$off('installApplication', this.installApplication);
} }
...@@ -149,6 +154,16 @@ export default class Clusters { ...@@ -149,6 +154,16 @@ export default class Clusters {
this.toggleInput.setAttribute('value', this.toggleButton.classList.contains('checked').toString()); this.toggleInput.setAttribute('value', this.toggleButton.classList.contains('checked').toString());
} }
showToken() {
const type = this.tokenField.getAttribute('type');
if (type === 'password') {
this.tokenField.setAttribute('type', 'text');
} else {
this.tokenField.setAttribute('type', 'password');
}
}
hideAll() { hideAll() {
this.errorContainer.classList.add('hidden'); this.errorContainer.classList.add('hidden');
this.successContainer.classList.add('hidden'); this.successContainer.classList.add('hidden');
......
...@@ -8,3 +8,7 @@ ...@@ -8,3 +8,7 @@
// Wait for the Vue to kick-in and render the applications block // Wait for the Vue to kick-in and render the applications block
min-height: 302px; min-height: 302px;
} }
.clusters-dropdown-menu {
max-width: 100%;
}
\ No newline at end of file
...@@ -154,7 +154,7 @@ ...@@ -154,7 +154,7 @@
CI / CD CI / CD
%ul.sidebar-sub-level-items %ul.sidebar-sub-level-items
= nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :environments, :artifacts], html_options: { class: "fly-out-top-item" } ) do = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :environments, :artifacts, :clusters, :kubernetes, :gcp], html_options: { class: "fly-out-top-item" } ) do
= link_to project_pipelines_path(@project) do = link_to project_pipelines_path(@project) do
%strong.fly-out-top-item-name %strong.fly-out-top-item-name
#{ _('CI / CD') } #{ _('CI / CD') }
...@@ -183,18 +183,18 @@ ...@@ -183,18 +183,18 @@
%span %span
Environments Environments
- if project_nav_tab? :clusters
= nav_link(controller: [:clusters, :kubernetes, :gcp]) do
= link_to project_clusters_path(@project), title: 'Cluster', class: 'shortcuts-cluster' do
%span
Cluster
- if @project.feature_available?(:builds, current_user) && !@project.empty_repo? - if @project.feature_available?(:builds, current_user) && !@project.empty_repo?
= nav_link(path: 'pipelines#charts') do = nav_link(path: 'pipelines#charts') do
= link_to charts_project_pipelines_path(@project), title: 'Charts', class: 'shortcuts-pipelines-charts' do = link_to charts_project_pipelines_path(@project), title: 'Charts', class: 'shortcuts-pipelines-charts' do
%span %span
Charts Charts
- if project_nav_tab? :clusters
= nav_link(controller: :clusters) do
= link_to project_clusters_path(@project), title: 'Cluster', class: 'shortcuts-cluster' do
%span
Cluster
- if project_nav_tab? :wiki - if project_nav_tab? :wiki
= nav_link(controller: :wikis) do = nav_link(controller: :wikis) do
= link_to get_project_wiki_path(@project), class: 'shortcuts-wiki' do = link_to get_project_wiki_path(@project), class: 'shortcuts-wiki' do
......
%h4.prepend-top-0= s_('ClusterIntegration|Choose how to set up cluster integration') %h4.prepend-top-0= s_('ClusterIntegration|Choose how to set up cluster integration')
.dropdown .dropdown
%button.dropdown-toggle.form-control{ type: 'button', data: { toggle: 'dropdown' }, "aria-haspopup": true, "aria-expanded": false } %button.dropdown-menu-toggle.dropdown-menu-full-width{ type: 'button', data: { toggle: 'dropdown' }, "aria-haspopup": true, "aria-expanded": false }
%span.dropdown-toggle-text
= dropdown_text = dropdown_text
%span.caret = icon('chevron-down')
%ul.dropdown-menu %ul.dropdown-menu.clusters-dropdown-menu.dropdown-menu-full-width
%li %li
%a{ href: providers_gcp_new_namespace_project_clusters_path(@project.namespace, @project) } %a{ href: providers_gcp_new_namespace_project_clusters_path(@project.namespace, @project) }
= s_('ClusterIntegration| Create cluster on Google Engine') = s_('ClusterIntegration| Create cluster on Google Engine')
%li %li
%a{ href: platforms_kubernetes_new_namespace_project_clusters_path(@project.namespace, @project)} %a{ href: platforms_kubernetes_new_namespace_project_clusters_path(@project.namespace, @project) }
= s_('ClusterIntegration| Add existing cluster') = s_('ClusterIntegration| Add existing cluster')
.form_group.append-bottom-20 .form-group
%label.append-bottom-10{ for: 'cluster-name' } %label.append-bottom-10{ for: 'cluster-name' }
= s_('ClusterIntegration|Cluster name') = s_('ClusterIntegration|Cluster name')
.input-group .input-group
...@@ -11,11 +11,23 @@ ...@@ -11,11 +11,23 @@
= field.fields_for :platform_kubernetes, @cluster.platform_kubernetes do |platform_kubernetes_field| = field.fields_for :platform_kubernetes, @cluster.platform_kubernetes do |platform_kubernetes_field|
.form-group .form-group
= platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL') = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL')
= platform_kubernetes_field.text_field :api_url, class: 'form-control', disabled: @cluster.managed? = platform_kubernetes_field.text_field :api_url, class: 'form-control', placeholder: s_('ClusterIntegration|API URL'), disabled: @cluster.managed?
.form-group
= platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate')
= platform_kubernetes_field.text_area :ca_cert, class: 'form-control', placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)'), disabled: @cluster.managed?
.form-group .form-group
= platform_kubernetes_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)') = platform_kubernetes_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)')
= platform_kubernetes_field.text_field :namespace, class: 'form-control', placeholder: Clusters::Platforms::Kubernetes.namespace_for_project(@project), disabled: @cluster.managed? = platform_kubernetes_field.text_field :namespace, class: 'form-control', placeholder: s_('ClusterIntegration|Project namespace'), disabled: @cluster.managed?
.form-group
= platform_kubernetes_field.label :token, s_('ClusterIntegration|Token')
.input-group
= platform_kubernetes_field.text_field :token, class: 'form-control js-cluster-token', type: 'password', placeholder: s_('ClusterIntegration|Token'), disabled: @cluster.managed?
%span.input-group-addon.clipboard-addon
%button.js-show-cluster-token.btn-blank{ type: 'button' }
= s_('ClusterIntegration|Show')
.form-group .form-group
= field.submit s_('ClusterIntegration|Save cluster'), class: 'btn btn-save' = field.submit s_('ClusterIntegration|Save changes'), class: 'btn btn-save'
= form_for @cluster, url: providers_gcp_namespace_project_clusters_path(@project.namespace, @project), as: :cluster do |field| %p
- link_to_help_page = link_to(s_('ClusterIntegration|help page'), help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer')
= s_('ClusterIntegration|Read our %{link_to_help_page} on cluster integration.').html_safe % { link_to_help_page: link_to_help_page}
= form_for @cluster, html: { class: 'prepend-top-20' }, url: providers_gcp_namespace_project_clusters_path(@project.namespace, @project), as: :cluster do |field|
= form_errors(@cluster) = form_errors(@cluster)
.form-group .form-group
= field.label :name, s_('ClusterIntegration|Cluster name') = field.label :name, s_('ClusterIntegration|Cluster name')
= field.text_field :name, class: 'form-control' = field.text_field :name, class: 'form-control', placeholder: s_('ClusterIntegration|Cluster name')
= field.fields_for :provider_gcp, @cluster.provider_gcp do |provider_gcp_field| = field.fields_for :provider_gcp, @cluster.provider_gcp do |provider_gcp_field|
.form-group .form-group
= provider_gcp_field.label :gcp_project_id, s_('ClusterIntegration|Google Cloud Platform project ID') = provider_gcp_field.label :gcp_project_id, s_('ClusterIntegration|Google Cloud Platform project ID')
= link_to(s_('ClusterIntegration|See your projects'), 'https://console.cloud.google.com/home/dashboard', target: '_blank', rel: 'noopener noreferrer') = link_to(s_('ClusterIntegration|See your projects'), 'https://console.cloud.google.com/home/dashboard', target: '_blank', rel: 'noopener noreferrer')
= provider_gcp_field.text_field :gcp_project_id, class: 'form-control' = provider_gcp_field.text_field :gcp_project_id, class: 'form-control', placeholder: s_('ClusterIntegration|Project ID')
.form-group .form-group
= provider_gcp_field.label :zone, s_('ClusterIntegration|Zone') = provider_gcp_field.label :zone, s_('ClusterIntegration|Zone')
......
%h4 %h4.prepend-top-20
= s_('ClusterIntegration|Enter the details for your cluster') = s_('ClusterIntegration|Enter the details for your cluster')
%p %p
= s_('ClusterIntegration|Please make sure that your Google account meets the following requirements:') = s_('ClusterIntegration|Please make sure that your Google account meets the following requirements:')
......
...@@ -5,7 +5,8 @@ ...@@ -5,7 +5,8 @@
.col-sm-4 .col-sm-4
= render 'projects/clusters/sidebar' = render 'projects/clusters/sidebar'
.col-sm-8 .col-sm-8
= render 'projects/clusters/header' = render 'projects/clusters/dropdown', dropdown_text: s_('ClusterIntegration|Create cluster on Google Container Engine')
= render 'header'
.row .row
.col-sm-8.col-sm-offset-4.signin-with-google .col-sm-8.col-sm-offset-4.signin-with-google
- if @authorize_url - if @authorize_url
......
...@@ -6,5 +6,5 @@ ...@@ -6,5 +6,5 @@
= render 'projects/clusters/sidebar' = render 'projects/clusters/sidebar'
.col-sm-8 .col-sm-8
= render 'projects/clusters/dropdown', dropdown_text: s_('ClusterIntegration|Create cluster on Google Container Engine') = render 'projects/clusters/dropdown', dropdown_text: s_('ClusterIntegration|Create cluster on Google Container Engine')
= render 'projects/clusters/header' = render 'header'
= render 'form' = render 'form'
= form_for @cluster, url: platforms_kubernetes_namespace_project_clusters_path(@project.namespace, @project), as: :cluster do |field| = form_for @cluster, url: platforms_kubernetes_namespace_project_clusters_path(@project.namespace, @project), as: :cluster do |field|
= form_errors(@cluster) = form_errors(@cluster)
.form-group
= field.label :name, s_('ClusterIntegration|Cluster name')
= field.text_field :name, class: 'form-control'
= field.fields_for :platform_kubernetes, @cluster.platform_kubernetes do |platform_kubernetes_field| = field.fields_for :platform_kubernetes, @cluster.platform_kubernetes do |platform_kubernetes_field|
.form-group .form-group
= platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL') = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL')
= platform_kubernetes_field.text_field :api_url, class: 'form-control' = platform_kubernetes_field.text_field :api_url, class: 'form-control', placeholder: s_('ClusterIntegration|API URL')
.form-group .form-group
= platform_kubernetes_field.label :token, s_('ClusterIntegration|Token') = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate')
= platform_kubernetes_field.text_field :token, class: 'form-control' = platform_kubernetes_field.text_area :ca_cert, class: 'form-control', placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)')
.form-group .form-group
= platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|Token') = platform_kubernetes_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)')
= platform_kubernetes_field.text_field :ca_cert, class: 'form-control' = platform_kubernetes_field.text_field :namespace, class: 'form-control', placeholder: s_('ClusterIntegration|Project namespace')
.form-group .form-group
= platform_kubernetes_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)') = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token')
= platform_kubernetes_field.text_field :namespace, class: 'form-control', placeholder: Clusters::Platforms::Kubernetes.namespace_for_project(@project) = platform_kubernetes_field.text_field :token, class: 'form-control', placeholder: s_('ClusterIntegration|Service token')
.form-group .form-group
= field.submit s_('ClusterIntegration|Create cluster'), class: 'btn btn-save' = field.submit s_('ClusterIntegration|Add cluster'), class: 'btn btn-save'
%h4.prepend-top-20
= s_('ClusterIntegration|Enter the details for your cluster')
%p
- link_to_help_page = link_to(s_('ClusterIntegration|documentation'), help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer')
= s_('ClusterIntegration|Please enter access information for your cluster. If you need help, you can read our %{link_to_help_page} on clusters').html_safe % { link_to_help_page: link_to_help_page }
...@@ -6,5 +6,6 @@ ...@@ -6,5 +6,6 @@
= render 'projects/clusters/sidebar' = render 'projects/clusters/sidebar'
.col-sm-8 .col-sm-8
= render 'projects/clusters/dropdown', dropdown_text: s_('ClusterIntegration|Add existing cluster') = render 'projects/clusters/dropdown', dropdown_text: s_('ClusterIntegration|Add existing cluster')
= render 'projects/clusters/header' = render 'header'
.prepend-top-20
= render 'form' = render 'form'
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment