cleaned up service_account_id from api and partially integrated integrations tab

dashboard/src/components/image-selector/ImageSelector.tsx

@@ -4,7 +4,7 @@ import info from '../../assets/info.svg';
 import edit from '../../assets/edit.svg';
 
 import api from '../../shared/api';
-import { getIntegrationIcon } from '../../shared/common';
+import { integrationList } from '../../shared/common';
 import { Context } from '../../shared/Context';
 import { ImageType } from '../../shared/types';
 
@@ -78,7 +78,7 @@ export default class ImageSelector extends Component<PropsType, StateType> {
     }
 
     return images.map((image: ImageType, i: number) => {
-      let icon = getIntegrationIcon(image.kind);
+      let icon = image.kind;
       return (
         <ImageItem
           key={i}
@@ -143,7 +143,7 @@ export default class ImageSelector extends Component<PropsType, StateType> {
     let { selectedImageUrl, setSelectedImageUrl } = this.props;
     let icon = info;
     if (this.state.clickedImage) {
-      icon = getIntegrationIcon(this.state.clickedImage.kind);
+      icon = this.state.clickedImage.kind;
     } else if (selectedImageUrl && selectedImageUrl !== '') {
       icon = edit;
     }

dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -42,7 +42,6 @@ export default class ClusterDashboard extends Component<PropsType, StateType> {
     api.getChart('<token>', {
       namespace: this.state.namespace,
       cluster_id: currentCluster.id,
-      service_account_id: currentCluster.service_account_id,
       storage: StorageType.Secret
     }, {
       name: this.state.currentChart.name,

dashboard/src/main/home/cluster-dashboard/NamespaceSelector.tsx

@@ -28,7 +28,6 @@ export default class NamespaceSelector extends Component<PropsType, StateType> {
 
     api.getNamespaces('<token>', {
       cluster_id: currentCluster.id,
-      service_account_id: currentCluster.service_account_id
     }, { id: currentProject.id }, (err: any, res: any) => {
       if (err && this._isMounted) {
         // setCurrentError('Could not read clusters: ' + JSON.stringify(err));

dashboard/src/main/home/cluster-dashboard/chart/ChartList.tsx

@@ -40,7 +40,6 @@ export default class ChartList extends Component<PropsType, StateType> {
     api.getCharts('<token>', {
       namespace: this.props.namespace,
       cluster_id: currentCluster.id,
-      service_account_id: currentCluster.service_account_id,
       storage: StorageType.Secret,
       limit: 20,
       skip: 0,
@@ -120,7 +119,6 @@ export default class ChartList extends Component<PropsType, StateType> {
         api.getChartControllers('<token>', {
           namespace: chart.namespace,
           cluster_id: currentCluster.id,
-          service_account_id: currentCluster.service_account_id,
           storage: StorageType.Secret
         }, {
           id: currentProject.id,
@@ -244,5 +242,5 @@ const LoadingWrapper = styled.div`
 `;
 
 const StyledChartList = styled.div`
-  padding-bottom: 100px;
+  padding-bottom: 85px;
 `;

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -67,7 +67,6 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     api.getChartComponents('<token>', {
       namespace: currentChart.namespace,
       cluster_id: currentCluster.id,
-      service_account_id: currentCluster.service_account_id,
       storage: StorageType.Secret
     }, {
       id: currentProject.id,
@@ -229,7 +228,6 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       api.getChartComponents('<token>', {
         namespace: oldChart.namespace,
         cluster_id: currentCluster.id,
-        service_account_id: currentCluster.service_account_id,
         storage: StorageType.Secret
       }, {
         id: currentProject.id,

dashboard/src/main/home/cluster-dashboard/expanded-chart/RevisionSection.tsx

@@ -38,7 +38,6 @@ export default class RevisionSection extends Component<PropsType, StateType> {
     api.getRevisions('<token>', {
       namespace: chart.namespace,
       cluster_id: currentCluster.id,
-      service_account_id: currentCluster.service_account_id,
       storage: StorageType.Secret
     }, { id: currentProject.id, name: chart.name }, (err: any, res: any) => {
       if (err) {

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/ControllerTab.tsx

@@ -43,7 +43,6 @@ export default class ControllerTab extends Component<PropsType, StateType> {
     
     api.getMatchingPods('<token>', { 
       cluster_id: currentCluster.id,
-      service_account_id: currentCluster.service_account_id,
       selectors,
     }, {
       id: currentProject.id

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/StatusSection.tsx

@@ -90,7 +90,6 @@ export default class StatusSection extends Component<PropsType, StateType> {
     api.getChartControllers('<token>', {
       namespace: currentChart.namespace,
       cluster_id: currentCluster.id,
-      service_account_id: currentCluster.service_account_id,
       storage: StorageType.Secret
     }, {
       id: currentProject.id,

dashboard/src/main/home/integrations/IntegrationList.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 
 import { Context } from '../../../shared/Context';
-import { getIntegrationIcon } from '../../../shared/common';
+import { integrationList } from '../../../shared/common';
 import api from '../../../shared/api';
 
 type PropsType = {
@@ -17,9 +17,9 @@ type StateType = {
 export default class IntegrationList extends Component<PropsType, StateType> {
   renderContents = () => {
     let { integrations, setCurrent, isCategory } = this.props;
-    if (integrations) {
+    if (integrations && integrations.length > 0) {
       return integrations.map((integration: any, i: number) => {
-        let icon = getIntegrationIcon(integration.value);
+        let icon = integrationList[integration.value] && integrationList[integration.value].icon;
         let disabled = integration.value === 'repo';
         return (
           <Integration
@@ -39,7 +39,7 @@ export default class IntegrationList extends Component<PropsType, StateType> {
     }
     return (
       <Placeholder>
-        You haven't set up any integrations yet.
+        No integrations set up yet.
       </Placeholder>
     );
   }

dashboard/src/main/home/integrations/Integrations.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { Context } from '../../../shared/Context';
 import api from '../../../shared/api';
-import { getIntegrationIcon } from '../../../shared/common';
+import { integrationList } from '../../../shared/common';
 import { ChoiceType } from '../../../shared/types';
 
 import IntegrationList from './IntegrationList';
@@ -14,7 +14,7 @@ type PropsType = {
 
 type StateType = {
   currentCategory: ChoiceType | null,
-  currentIntegration: any | null,
+  currentIntegration: string | null,
   currentOptions: any[],
 };
 
@@ -39,23 +39,34 @@ const categories = [
 export default class Integrations extends Component<PropsType, StateType> {
   state = {
     currentCategory: null as any | null,
-    currentIntegration: null as any | null,
+    currentIntegration: null as string | null,
     currentOptions: [] as any[],
   }
 
+  // TODO: implement once backend is restructured
   getIntegrations = (categoryType: string): any[] => {
+    return [];
+    /*
+    let { currentProject } = this.context;
     switch (categoryType) {
       case 'kubernetes':
-        return [
-          {
-            value: 'gke',
-            label: 'Google Kubernetes Engine (GKE)',
-          },
-          {
-            value: 'eks',
-            label: 'Amazon Elastic Kubernetes Service (EKS)',
-          },
-        ];
+        api.getProjectClusterIntegrations('<token>', {}, { id: currentProject.id }, (err: any, res: any) => {
+          if (err) {
+            console.log(err);
+          } else {
+            console.log(res.data)
+            return [
+              {
+                value: 'gke',
+                label: 'Google Kubernetes Engine (GKE)',
+              },
+              {
+                value: 'eks',
+                label: 'Amazon Elastic Kubernetes Service (EKS)',
+              },
+            ];
+          }
+        });
       case 'registry':
         return [
           {
@@ -67,13 +78,14 @@ export default class Integrations extends Component<PropsType, StateType> {
             label: 'Elastic Container Registry (ECR)',
           },
           {
-            value: 'docker-hub',
+            value: 'docker',
             label: 'Docker Hub',
           },
         ];
       default:
         return [];
     }
+    */
   }
 
   componentDidUpdate(prevProps: PropsType, prevState: StateType) {
@@ -86,7 +98,7 @@ export default class Integrations extends Component<PropsType, StateType> {
     let { currentCategory, currentIntegration } = this.state;
 
     if (currentIntegration) {
-      let icon = getIntegrationIcon(currentIntegration.value);
+      let icon = integrationList[currentIntegration] && integrationList[currentIntegration].icon;
       return (
         <div>
           <TitleSectionAlt>
@@ -95,16 +107,16 @@ export default class Integrations extends Component<PropsType, StateType> {
                 keyboard_backspace
               </i>
               <Icon src={icon && icon} />
-              <Title>{currentIntegration.label}</Title>
+              <Title>{integrationList[currentIntegration].label}</Title>
             </Flex>
           </TitleSectionAlt>
 
-          <IntegrationForm integrationName={currentIntegration.value} />
+          <IntegrationForm integrationName={currentIntegration} />
           <Br />
         </div>
       );
     } else if (currentCategory) {
-      let icon = getIntegrationIcon(currentCategory.value);
+      let icon = integrationList[currentCategory.value] && integrationList[currentCategory.value].icon;
       return (
         <div>
           <TitleSectionAlt>
@@ -118,7 +130,7 @@ export default class Integrations extends Component<PropsType, StateType> {
 
             <Button 
               onClick={() => this.context.setCurrentModal('IntegrationsModal', { 
-                integrations: this.state.currentOptions,
+                category: this.state.currentCategory.value,
                 setCurrentIntegration: (x: any) => this.setState({ currentIntegration: x })
               })}
             >

dashboard/src/main/home/integrations/integration-form/DockerHubForm.tsx

@@ -25,6 +25,10 @@ export default class DockerHubForm extends Component<PropsType, StateType> {
     dockerPassword: ''
   }
 
+  handleSubmit = () => {
+    // TODO: implement once api is restructured
+  }
+
   render() {
     return ( 
       <StyledForm>
@@ -65,7 +69,7 @@ export default class DockerHubForm extends Component<PropsType, StateType> {
         <SaveButton
           text='Save Settings'
           makeFlush={true}
-          onClick={() => console.log('unimplemented')}
+          onClick={this.handleSubmit}
         />
       </StyledForm>
     );
@@ -73,7 +77,7 @@ export default class DockerHubForm extends Component<PropsType, StateType> {
 }
 
 const CredentialWrapper = styled.div`
-  padding: 10px 40px 25px;
+  padding: 5px 40px 25px;
   background: #ffffff11;
   border-radius: 5px;
 `;

dashboard/src/main/home/integrations/integration-form/ECRForm.tsx

@@ -26,6 +26,10 @@ export default class ECRForm extends Component<PropsType, StateType> {
     awsSecretKey: '',
   }
 
+  handleSubmit = () => {
+    // TODO: implement once api is restructured
+  }
+
   render() {
     return ( 
       <StyledForm>
@@ -62,7 +66,7 @@ export default class ECRForm extends Component<PropsType, StateType> {
         <SaveButton
           text='Save Settings'
           makeFlush={true}
-          onClick={() => console.log('unimplemented')}
+          onClick={this.handleSubmit}
         />
       </StyledForm>
     );
@@ -70,7 +74,7 @@ export default class ECRForm extends Component<PropsType, StateType> {
 }
 
 const CredentialWrapper = styled.div`
-  padding: 10px 40px 25px;
+  padding: 5px 40px 25px;
   background: #ffffff11;
   border-radius: 5px;
 `;

dashboard/src/main/home/integrations/integration-form/EKSForm.tsx

@@ -30,6 +30,10 @@ export default class EKSForm extends Component<PropsType, StateType> {
     awsSecretKey: '',
   }
 
+  handleSubmit = () => {
+    // TODO: implement once api is restructured
+  }
+
   render() {
     return ( 
       <StyledForm>
@@ -82,7 +86,7 @@ export default class EKSForm extends Component<PropsType, StateType> {
         <SaveButton
           text='Save Settings'
           makeFlush={true}
-          onClick={() => console.log('unimplemented')}
+          onClick={this.handleSubmit}
         />
       </StyledForm>
     );
@@ -90,7 +94,7 @@ export default class EKSForm extends Component<PropsType, StateType> {
 }
 
 const CredentialWrapper = styled.div`
-  padding: 10px 40px 25px;
+  padding: 5px 40px 25px;
   background: #ffffff11;
   border-radius: 5px;
 `;

dashboard/src/main/home/integrations/integration-form/GCRForm.tsx

@@ -24,6 +24,10 @@ export default class GCRForm extends Component<PropsType, StateType> {
     serviceAccountKey: '',
   }
 
+  handleSubmit = () => {
+    // TODO: implement once api is restructured
+  }
+
   render() {
     return ( 
       <StyledForm>
@@ -51,7 +55,7 @@ export default class GCRForm extends Component<PropsType, StateType> {
         <SaveButton
           text='Save Settings'
           makeFlush={true}
-          onClick={() => console.log('unimplemented')}
+          onClick={this.handleSubmit}
         />
       </StyledForm>
     );
@@ -59,7 +63,7 @@ export default class GCRForm extends Component<PropsType, StateType> {
 }
 
 const CredentialWrapper = styled.div`
-  padding: 10px 40px 25px;
+  padding: 5px 40px 25px;
   background: #ffffff11;
   border-radius: 5px;
 `;

dashboard/src/main/home/integrations/integration-form/GKEForm.tsx

@@ -28,6 +28,10 @@ export default class GKEForm extends Component<PropsType, StateType> {
     serviceAccountKey: ''
   }
 
+  handleSubmit = () => {
+    // TODO: implement once api is restructured
+  }
+
   render() {
     return ( 
       <StyledForm>
@@ -71,7 +75,7 @@ export default class GKEForm extends Component<PropsType, StateType> {
         <SaveButton
           text='Save Settings'
           makeFlush={true}
-          onClick={() => console.log('unimplemented')}
+          onClick={this.handleSubmit}
         />
       </StyledForm>
     );
@@ -79,7 +83,7 @@ export default class GKEForm extends Component<PropsType, StateType> {
 }
 
 const CredentialWrapper = styled.div`
-  padding: 10px 40px 25px;
+  padding: 5px 40px 25px;
   background: #ffffff11;
   border-radius: 5px;
 `;

dashboard/src/main/home/modals/IntegrationsModal.tsx

@@ -3,34 +3,70 @@ import styled from 'styled-components';
 import close from '../../../assets/close.png';
 
 import { Context } from '../../../shared/Context';
-import { getIntegrationIcon } from '../../../shared/common';
+import api from '../../../shared/api';
+import { integrationList } from '../../../shared/common';
 
 type PropsType = {
 };
 
 type StateType = {
+  integrations: any[],
 };
 
 export default class IntegrationsModal extends Component<PropsType, StateType> {
   state = {
+    integrations: [] as any[],
+  }
+
+  componentDidMount() {
+    let { category } = this.context.currentModalData;
+    if (category === 'kubernetes') {
+      api.getClusterIntegrations('<token>', {}, {}, (err: any, res: any) => {
+        if (err) {
+          console.log(err);
+        } else {
+          this.setState({ integrations: res.data });
+        }
+      });
+    } else if (category === 'registry') {
+      api.getRegistryIntegrations('<token>', {}, {}, (err: any, res: any) => {
+        if (err) {
+          console.log(err);
+        } else {
+          console.log(res.data)
+          this.setState({ integrations: res.data });
+        }
+      });
+    } else {
+      api.getRepoIntegrations('<token>', {}, {}, (err: any, res: any) => {
+        if (err) {
+          console.log(err);
+        } else {
+          this.setState({ integrations: res.data });
+        }
+      });
+    }
   }
 
   renderIntegrationsCatalog = () => {
     if (this.context.currentModalData) {
-      let { integrations, setCurrentIntegration } = this.context.currentModalData;
-      
-      return integrations.map((integration: any, i: number) => {
-        let icon = getIntegrationIcon(integration.value);
+      let { setCurrentIntegration } = this.context.currentModalData;
+      return this.state.integrations.map((integration: any, i: number) => {
+        let icon = integrationList[integration.service] && integrationList[integration.service].icon;
+        let disabled = integration.service === 'kube' || integration.service === 'docker';
         return (
           <IntegrationOption 
             key={i}
+            disabled={disabled}
             onClick={() => {
-              setCurrentIntegration(integration);
-              this.context.setCurrentModal(null, null);
+              if (!disabled) {
+                setCurrentIntegration(integration.service);
+                this.context.setCurrentModal(null, null);
+              }
             }}
           >
             <Icon src={icon && icon} />
-            <Label>{integration.label}</Label>
+            <Label>{integrationList[integration.service].label}</Label>
           </IntegrationOption>
         );
       });
@@ -78,9 +114,9 @@ const IntegrationOption = styled.div`
   display: flex;
   align-items: center;
   padding: 20px;
-  cursor: pointer;
+  cursor: ${(props: { disabled: boolean }) => props.disabled ? 'not-allowed' : 'pointer'};
   :hover {
-    background: #ffffff22;
+    background: ${(props: { disabled: boolean }) => props.disabled ? '' : '#ffffff22'};
   }
 `;
 

dashboard/src/shared/api.tsx

@@ -43,7 +43,6 @@ const getClusters = baseApi<{}, { id: number }>('GET', pathParams => {
 const getCharts = baseApi<{
   namespace: string,
   cluster_id: number,
-  service_account_id: number,
   storage: StorageType,
   limit: number,
   skip: number,
@@ -56,7 +55,6 @@ const getCharts = baseApi<{
 const getChart = baseApi<{
   namespace: string,
   cluster_id: number,
-  service_account_id: number,
   storage: StorageType
 }, { id: number, name: string, revision: number }>('GET', pathParams => {
   return `/api/projects/${pathParams.id}/releases/${pathParams.name}/${pathParams.revision}`;
@@ -65,7 +63,6 @@ const getChart = baseApi<{
 const getChartComponents = baseApi<{
   namespace: string,
   cluster_id: number,
-  service_account_id: number,
   storage: StorageType
 }, { id: number, name: string, revision: number }>('GET', pathParams => {
   return `/api/projects/${pathParams.id}/releases/${pathParams.name}/${pathParams.revision}/components`;
@@ -74,7 +71,6 @@ const getChartComponents = baseApi<{
 const getChartControllers = baseApi<{
   namespace: string,
   cluster_id: number,
-  service_account_id: number,
   storage: StorageType
 }, { id: number, name: string, revision: number }>('GET', pathParams => {
   return `/api/projects/${pathParams.id}/releases/${pathParams.name}/${pathParams.revision}/controllers`;
@@ -82,14 +78,12 @@ const getChartControllers = baseApi<{
 
 const getNamespaces = baseApi<{
   cluster_id: number,
-  service_account_id: number,
 }, { id: number }>('GET', pathParams => {
   return `/api/projects/${pathParams.id}/k8s/namespaces`;
 });
 
 const getMatchingPods = baseApi<{
   cluster_id: number,
-  service_account_id: number,
   selectors: string[]
 }, { id: number }>('GET', pathParams => {
   return `/api/projects/${pathParams.id}/k8s/pods`;
@@ -98,7 +92,6 @@ const getMatchingPods = baseApi<{
 const getRevisions = baseApi<{
   namespace: string,
   cluster_id: number,
-  service_account_id: number,
   storage: StorageType
 }, { id: number, name: string }>('GET', pathParams => {
   return `/api/projects/${pathParams.id}/releases/${pathParams.name}/history`;
@@ -112,10 +105,9 @@ const rollbackChart = baseApi<{
   id: number,
   name: string,
   cluster_id: number,
-  service_account_id: number,
   }>('POST', pathParams => {
-  let { id, name, cluster_id, service_account_id } = pathParams;
-  return `/api/projects/${id}/releases/${name}/rollback?cluster_id=${cluster_id}&service_account_id=${service_account_id}`;
+  let { id, name, cluster_id } = pathParams;
+  return `/api/projects/${id}/releases/${name}/rollback?cluster_id=${cluster_id}`;
 });
 
 const upgradeChartValues = baseApi<{
@@ -126,10 +118,9 @@ const upgradeChartValues = baseApi<{
   id: number,
   name: string,
   cluster_id: number,
-  service_account_id: number,
   }>('POST', pathParams => {
-  let { id, name, cluster_id, service_account_id } = pathParams;
-  return `/api/projects/${id}/releases/${name}/upgrade?cluster_id=${cluster_id}&service_account_id=${service_account_id}`;
+  let { id, name, cluster_id } = pathParams;
+  return `/api/projects/${id}/releases/${name}/upgrade?cluster_id=${cluster_id}`;
 });
 
 const getTemplates = baseApi('GET', '/api/templates');
@@ -167,9 +158,27 @@ const deployTemplate = baseApi<{
   imageURL: string,
   formValues: any,
   storage: StorageType,
-}, { id: number, cluster_id: number, service_account_id: number }>('POST', pathParams => {
-  let {id, cluster_id, service_account_id} = pathParams;
-  return `/api/projects/${id}/deploy?cluster_id=${cluster_id}&service_account_id=${service_account_id}`;
+}, { id: number, cluster_id: number }>('POST', pathParams => {
+  let { cluster_id } = pathParams;
+  return `/api/projects/${id}/deploy?cluster_id=${cluster_id}`;
+});
+
+const getClusterIntegrations = baseApi('GET', '/api/integrations/cluster');
+
+const getRegistryIntegrations = baseApi('GET', '/api/integrations/registry');
+
+const getRepoIntegrations = baseApi('GET', '/api/integrations/repo');
+
+const getProjectClusterIntegrations = baseApi<{}, { id: number }>('GET', pathParams => {
+  return `/api/projects/${pathParams.id}/integrations/cluster`;
+});
+
+const getProjectRegistryIntegrations = baseApi<{}, { id: number }>('GET', pathParams => {
+  return `/api/projects/${pathParams.id}/integrations/registry`;
+});
+
+const getProjectRepoIntegrations = baseApi<{}, { id: number }>('GET', pathParams => {
+  return `/api/projects/${pathParams.id}/integrations/repo`;
 });
 
 // Bundle export to allow default api import (api.<method> is more readable)
@@ -197,5 +206,11 @@ export default {
   getProjects,
   createProject,
   deleteProject,
-  deployTemplate
+  deployTemplate,
+  getClusterIntegrations,
+  getRegistryIntegrations,
+  getRepoIntegrations,
+  getProjectClusterIntegrations,
+  getProjectRegistryIntegrations,
+  getProjectRepoIntegrations,
 }

dashboard/src/shared/baseApi.tsx

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import qs from 'qs';
 
-axios.defaults.timeout = 8000;
+axios.defaults.timeout = 10000;
 
 // Partial function that accepts a generic params type and returns an api method
 export const baseApi = <T extends {}, S = {}>(requestType: string, endpoint: ((pathParams: S) => string) | string) => {

dashboard/src/shared/common.tsx

@@ -1,27 +1,38 @@
-export const getIntegrationIcon = (kind: string) => {
-  switch (kind) {
-    case 'gke':
-      return 'https://sysdig.com/wp-content/uploads/2016/08/GKE_color.png';
-    case 'eks':
-      return 'https://img.stackshare.io/service/7991/amazon-eks.png';
-    case 'kubeconfig':
-      return 'https://uxwing.com/wp-content/themes/uxwing/download/10-brands-and-social-media/kubernetes.png';
-    case 'docker-hub':
-      return 'https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/97_Docker_logo_logos-512.png';
-    case 'gcr':
-      return 'https://carlossanchez.files.wordpress.com/2019/06/21046548.png?w=640';
-    case 'ecr':
-      return 'https://avatars2.githubusercontent.com/u/52505464?s=400&u=da920f994c67665c7ad6c606a5286557d4f8555f&v=4';
-    case 'kubernetes':
-      return 'https://uxwing.com/wp-content/themes/uxwing/download/10-brands-and-social-media/kubernetes.png';
-    case 'repo':
-      return 'https://3.bp.blogspot.com/-xhNpNJJyQhk/XIe4GY78RQI/AAAAAAAAItc/ouueFUj2Hqo5dntmnKqEaBJR4KQ4Q2K3ACK4BGAYYCw/s1600/logo%2Bgit%2Bicon.png';
-    case 'registry':
-      return 'https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/97_Docker_logo_logos-512.png';
-    default:
-      return null
-  }
-}
+export const integrationList: any = {
+  'gke': {
+    icon: 'https://sysdig.com/wp-content/uploads/2016/08/GKE_color.png',
+    label: 'Google Kubernetes Engine (GKE)',
+  },
+  'eks': {
+    icon: 'https://img.stackshare.io/service/7991/amazon-eks.png',
+    label: 'Amazon Elastic Kubernetes Service (EKS)',
+  },
+  'kube': {
+    icon: 'https://uxwing.com/wp-content/themes/uxwing/download/10-brands-and-social-media/kubernetes.png',
+    label: 'Upload Kubeconfig'
+  },
+  'docker': {
+    icon: 'https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/97_Docker_logo_logos-512.png',
+    label: 'Docker Hub',
+  },
+  'gcr': {
+    icon: 'https://carlossanchez.files.wordpress.com/2019/06/21046548.png?w=640',
+    label: 'Google Container Registry (GCR)',
+  },
+  'ecr': {
+    icon: 'https://avatars2.githubusercontent.com/u/52505464?s=400&u=da920f994c67665c7ad6c606a5286557d4f8555f&v=4',
+    label: 'Elastic Container Registry (ECR)',
+  },
+  'kubernetes': {
+    icon: 'https://uxwing.com/wp-content/themes/uxwing/download/10-brands-and-social-media/kubernetes.png',
+  },
+  'repo': {
+    icon: 'https://3.bp.blogspot.com/-xhNpNJJyQhk/XIe4GY78RQI/AAAAAAAAItc/ouueFUj2Hqo5dntmnKqEaBJR4KQ4Q2K3ACK4BGAYYCw/s1600/logo%2Bgit%2Bicon.png',
+  },
+  'registry': {
+    icon: 'https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/97_Docker_logo_logos-512.png',
+  },
+};
 
 export const getIgnoreCase = (object: any, key: string) => {
   return object[Object.keys(object)