Commit f1dbfc6e authored by Emily Ring's avatar Emily Ring Committed by Michael Kozono

Added provider icon to vue cluster list

Pass Img tags through rails and add icon to javascripts/clusters_list
Updated serializers to include provider type
Update associated tests
parent e4414cca
......@@ -28,7 +28,7 @@ export default {
tooltip,
},
computed: {
...mapState(['clusters', 'clustersPerPage', 'loading', 'page', 'totalCulsters']),
...mapState(['clusters', 'clustersPerPage', 'loading', 'page', 'providers', 'totalCulsters']),
currentPage: {
get() {
return this.page;
......@@ -102,6 +102,9 @@ export default {
// Sentry will notify us if we are missing types.
throw new Error(`UnknownK8sCpuQuantity:${quantity}`);
},
selectedProvider(provider) {
return this.providers[provider] || this.providers.default;
},
statusTitle(status) {
const iconTitle = STATUSES[status] || STATUSES.default;
return sprintf(__('Status: %{title}'), { title: iconTitle.title }, false);
......@@ -182,8 +185,21 @@ export default {
<section v-else>
<gl-table :items="clusters" :fields="fields" stacked="md" class="qa-clusters-table">
<template #cell(name)="{ item }">
<div class="d-flex flex-row-reverse flex-md-row js-status">
<gl-link data-qa-selector="cluster" :data-qa-cluster-name="item.name" :href="item.path">
<div
class="gl-display-flex gl-align-items-center gl-justify-content-end gl-justify-content-md-start js-status"
>
<img
:src="selectedProvider(item.provider_type).path"
:alt="selectedProvider(item.provider_type).text"
class="gl-w-6 gl-h-6 gl-display-flex gl-align-items-center"
/>
<gl-link
data-qa-selector="cluster"
:data-qa-cluster-name="item.name"
:href="item.path"
class="gl-px-3"
>
{{ item.name }}
</gl-link>
......@@ -192,7 +208,6 @@ export default {
v-tooltip
:title="statusTitle(item.status)"
size="sm"
class="mr-2 ml-md-2"
/>
</div>
</template>
......
......@@ -9,12 +9,10 @@ export default () => {
return;
}
const { endpoint } = entryPoint.dataset;
// eslint-disable-next-line no-new
new Vue({
el: '#js-clusters-list-app',
store: createStore({ endpoint }),
store: createStore(entryPoint.dataset),
render(createElement) {
return createElement(Clusters);
},
......
......@@ -5,5 +5,10 @@ export default (initialState = {}) => ({
clusters: [],
clustersPerPage: 0,
page: 1,
providers: {
aws: { path: initialState.imgTagsAwsPath, text: initialState.imgTagsAwsText },
default: { path: initialState.imgTagsDefaultPath, text: initialState.imgTagsDefaultText },
gcp: { path: initialState.imgTagsGcpPath, text: initialState.imgTagsGcpText },
},
totalCulsters: 0,
});
......@@ -17,15 +17,23 @@ module ClustersHelper
end
end
def js_clusters_list_data(path = nil)
{
endpoint: path,
img_tags: {
aws: { path: image_path('illustrations/logos/amazon_eks.svg'), text: s_('ClusterIntegration|Amazon EKS') },
default: { path: image_path('illustrations/logos/kubernetes.svg'), text: _('Kubernetes Cluster') },
gcp: { path: image_path('illustrations/logos/google_gke.svg'), text: s_('ClusterIntegration|Google GKE') }
}
}
end
# This method is depreciated and will be removed when associated HAML files are moved to JavaScript
def provider_icon(provider = nil)
case provider
when 'aws'
image_tag 'illustrations/logos/amazon_eks.svg', alt: s_('ClusterIntegration|Amazon EKS'), class: 'gl-h-full'
when 'gcp'
image_tag 'illustrations/logos/google_gke.svg', alt: s_('ClusterIntegration|Google GKE'), class: 'gl-h-full'
else
image_tag 'illustrations/logos/kubernetes.svg', alt: _('Kubernetes Cluster'), class: 'gl-h-full'
end
img_data = js_clusters_list_data.dig(:img_tags, provider&.to_sym) ||
js_clusters_list_data.dig(:img_tags, :default)
image_tag img_data[:path], alt: img_data[:text], class: 'gl-h-full'
end
def render_gcp_signup_offer
......
......@@ -8,6 +8,7 @@ class ClusterEntity < Grape::Entity
expose :environment_scope
expose :name
expose :nodes
expose :provider_type
expose :status_name, as: :status
expose :status_reason
expose :applications, using: ClusterApplicationEntity
......
......@@ -13,6 +13,7 @@ class ClusterSerializer < BaseSerializer
:name,
:nodes,
:path,
:provider_type,
:status
]
})
......
......@@ -19,7 +19,7 @@
= link_to _('More information'), help_page_path('user/group/clusters/index', anchor: 'cluster-precedence')
- if Feature.enabled?(:clusters_list_redesign)
#js-clusters-list-app{ data: { endpoint: clusterable.index_path(format: :json) } }
#js-clusters-list-app{ data: js_clusters_list_data(clusterable.index_path(format: :json)) }
- else
.clusters-table.js-clusters-list
.gl-responsive-table-row.table-row-header{ role: "row" }
......
---
title: Added provider type icon to cluster list
merge_request: 33196
author:
type: changed
......@@ -14,6 +14,13 @@ describe('Clusters', () => {
const endpoint = 'some/endpoint';
const entryData = {
endpoint,
imgTagsAwsText: 'AWS Icon',
imgTagsDefaultText: 'Default Icon',
imgTagsGcpText: 'GCP Icon',
};
const findLoader = () => wrapper.find(GlLoadingIcon);
const findPaginatedButtons = () => wrapper.find(GlPagination);
const findTable = () => wrapper.find(GlTable);
......@@ -24,7 +31,7 @@ describe('Clusters', () => {
};
const mountWrapper = () => {
store = ClusterStore({ endpoint });
store = ClusterStore(entryData);
wrapper = mount(Clusters, { store });
return axios.waitForAll();
};
......@@ -87,6 +94,23 @@ describe('Clusters', () => {
});
});
describe('cluster icon', () => {
it.each`
providerText | lineNumber
${'GCP Icon'} | ${0}
${'AWS Icon'} | ${1}
${'Default Icon'} | ${2}
${'Default Icon'} | ${3}
${'Default Icon'} | ${4}
${'Default Icon'} | ${5}
`('renders provider image and alt text for each cluster', ({ providerText, lineNumber }) => {
const images = findTable().findAll('.js-status img');
const image = images.at(lineNumber);
expect(image.attributes('alt')).toBe(providerText);
});
});
describe('cluster status', () => {
it.each`
statusName | lineNumber | result
......
......@@ -3,6 +3,7 @@ export const clusterList = [
name: 'My Cluster 1',
environment_scope: '*',
cluster_type: 'group_type',
provider_type: 'gcp',
status: 'creating',
nodes: null,
},
......@@ -10,6 +11,7 @@ export const clusterList = [
name: 'My Cluster 2',
environment_scope: 'development',
cluster_type: 'project_type',
provider_type: 'aws',
status: 'unreachable',
nodes: [
{
......@@ -22,6 +24,7 @@ export const clusterList = [
name: 'My Cluster 3',
environment_scope: 'development',
cluster_type: 'project_type',
provider_type: 'none',
status: 'authentication_failure',
nodes: [
{
......
......@@ -59,6 +59,22 @@ describe ClustersHelper do
end
end
describe '#js_clusters_list_data' do
it 'displays endpoint path and images' do
js_data = helper.js_clusters_list_data('/path')
expect(js_data[:endpoint]).to eq('/path')
expect(js_data.dig(:img_tags, :aws, :path)).to match(%r(/illustrations/logos/amazon_eks|svg))
expect(js_data.dig(:img_tags, :default, :path)).to match(%r(/illustrations/logos/kubernetes|svg))
expect(js_data.dig(:img_tags, :gcp, :path)).to match(%r(/illustrations/logos/google_gke|svg))
expect(js_data.dig(:img_tags, :aws, :text)).to eq('Amazon EKS')
expect(js_data.dig(:img_tags, :default, :text)).to eq('Kubernetes Cluster')
expect(js_data.dig(:img_tags, :gcp, :text)).to eq('Google GKE')
end
end
describe '#provider_icon' do
it 'will return GCP logo with gcp argument' do
logo = helper.provider_icon('gcp')
......
......@@ -16,6 +16,7 @@ describe ClusterSerializer do
:name,
:nodes,
:path,
:provider_type,
:status)
end
end
......
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