algorithm to find new name if it exists

public/app/features/datasources/NewDataSourcePage.tsx

@@ -24,7 +24,7 @@ class NewDataSourcePage extends PureComponent<Props> {
   }
 
   onDataSourceTypeClicked = type => {
-    this.props.addDataSource(type.name, type.value);
+    this.props.addDataSource(type);
   };
 
   onSearchQueryChange = event => {
@@ -38,7 +38,7 @@ class NewDataSourcePage extends PureComponent<Props> {
       <div>
         <PageHeader model={navModel} />
         <div className="page-container page-body">
-          <h3 className="add-data-source-header">Choose data source type</h3>
+          <h2 className="add-data-source-header">Choose data source type</h2>
           <div className="add-data-source-search">
             <label className="gf-form--has-input-icon">
               <input

public/app/features/datasources/state/actions.test.ts

@@ -0,0 +1,44 @@
+import { findNewName, nameExits } from './actions';
+import { getMockPlugin, getMockPlugins } from '../../plugins/__mocks__/pluginMocks';
+
+describe('Name exists', () => {
+  const plugins = getMockPlugins(5);
+
+  it('should be true', () => {
+    const name = 'pretty cool plugin-1';
+
+    expect(nameExits(plugins, name)).toEqual(true);
+  });
+
+  it('should be false', () => {
+    const name = 'pretty cool plugin-6';
+
+    expect(nameExits(plugins, name));
+  });
+});
+
+describe('Find new name', () => {
+  it('should create a new name', () => {
+    const plugins = getMockPlugins(5);
+    const name = 'pretty cool plugin-1';
+
+    expect(findNewName(plugins, name)).toEqual('pretty cool plugin-6');
+  });
+
+  it('should create new name without suffix', () => {
+    const plugin = getMockPlugin();
+    plugin.name = 'prometheus';
+    const plugins = [plugin];
+    const name = 'prometheus';
+
+    expect(findNewName(plugins, name)).toEqual('prometheus-1');
+  });
+
+  it('should handle names that end with -', () => {
+    const plugin = getMockPlugin();
+    const plugins = [plugin];
+    const name = 'pretty cool plugin-';
+
+    expect(findNewName(plugins, name)).toEqual('pretty cool plugin-');
+  });
+});

public/app/features/datasources/state/actions.ts

@@ -80,9 +80,23 @@ export function loadDataSources(): ThunkResult<void> {
   };
 }
 
-export function addDataSource(name: string, type: string): ThunkResult<void> {
-  return async dispatch => {
-    const result = await getBackendSrv().post('/api/datasources', { name: name, type: type, access: 'proxy' });
+export function addDataSource(plugin: Plugin): ThunkResult<void> {
+  return async (dispatch, getStore) => {
+    let dataSources = getStore().dataSources.dataSources;
+
+    if (dataSources.length === 0) {
+      dispatch(loadDataSources());
+
+      dataSources = getStore().dataSources.dataSources;
+    }
+
+    let name = plugin.name;
+
+    if (nameExits(dataSources, name)) {
+      name = findNewName(dataSources, name);
+    }
+
+    const result = await getBackendSrv().post('/api/datasources', { name: name, type: plugin.id, access: 'proxy' });
     dispatch(updateLocation({ path: `/datasources/edit/${result.id}` }));
   };
 }
@@ -93,3 +107,47 @@ export function loadDataSourceTypes(): ThunkResult<void> {
     dispatch(dataSourceTypesLoaded(result));
   };
 }
+
+export function nameExits(dataSources, name) {
+  return (
+    dataSources.filter(dataSource => {
+      return dataSource.name === name;
+    }).length > 0
+  );
+}
+
+export function findNewName(dataSources, name) {
+  // Need to loop through current data sources to make sure
+  // the name doesn't exist
+  while (nameExits(dataSources, name)) {
+    // If there's a duplicate name that doesn't end with '-x'
+    // we can add -1 to the name and be done.
+    if (!nameHasSuffix(name)) {
+      name = `${name}-1`;
+    } else {
+      // if there's a duplicate name that ends with '-x'
+      // we can try to increment the last digit until the name is unique
+
+      // remove the 'x' part and replace it with the new number
+      name = `${getNewName(name)}${incrementLastDigit(getLastDigit(name))}`;
+    }
+  }
+
+  return name;
+}
+
+function nameHasSuffix(name) {
+  return name.endsWith('-', name.length - 1);
+}
+
+function getLastDigit(name) {
+  return parseInt(name.slice(-1), 10);
+}
+
+function incrementLastDigit(digit) {
+  return isNaN(digit) ? 1 : digit + 1;
+}
+
+function getNewName(name) {
+  return name.slice(0, name.length - 1);
+}

public/app/types/index.ts

@@ -52,4 +52,5 @@ export interface StoreState {
   team: TeamState;
   folder: FolderState;
   dashboard: DashboardState;
+  dataSources: DataSourcesState;
 }

public/sass/components/_add_data_source.scss

@@ -1,12 +1,12 @@
 .add-data-source-header {
-  margin-bottom: $panel-margin * 2;
+  margin-bottom: $panel-margin * 4;
   text-align: center;
 }
 
 .add-data-source-search {
   display: flex;
   justify-content: center;
-  margin-bottom: $panel-margin * 6;
+  margin-bottom: $panel-margin * 2;
 }
 
 .add-data-source-grid {
@@ -18,14 +18,10 @@
   @include media-breakpoint-up(md) {
     grid-template-columns: repeat(3, 1fr);
   }
-
-  @include media-breakpoint-up(lg) {
-    grid-template-columns: repeat(4, 1fr);
-  }
 }
 
 .add-data-source-grid-item {
-  padding: 10px;
+  padding: 15px;
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -40,10 +36,9 @@
 
 .add-data-source-grid-item-text {
   font-size: $font-size-h5;
-  margin-left: 10px;
 }
 
 .add-data-source-grid-item-logo {
+  margin: 0 15px;
   width: 55px;
-  height: 55px;
 }