feat(ui): Display scraper name in scrapers list

influxdata · Feb 12, 2019 · 7da37c3 · 7da37c3
1 parent 0b890e7
commit 7da37c3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/ui/src/organizations/components/ScraperList.tsx b/ui/src/organizations/components/ScraperList.tsx
@@ -23,8 +23,9 @@ export default class ScraperList extends PureComponent<Props> {
       <>
         <IndexList>
           <IndexList.Header>
-            <IndexList.HeaderCell columnName="URL" width="50%" />
-            <IndexList.HeaderCell columnName="Bucket" width="50%" />
+            <IndexList.HeaderCell columnName="Name" width="33%" />
+            <IndexList.HeaderCell columnName="URL" width="34%" />
+            <IndexList.HeaderCell columnName="Bucket" width="33%" />
           </IndexList.Header>
           <IndexList.Body columnCount={3} emptyState={emptyState}>
             {this.scrapersList}

diff --git a/ui/src/organizations/components/ScraperRow.tsx b/ui/src/organizations/components/ScraperRow.tsx
@@ -28,11 +28,12 @@ export default class ScraperRow extends PureComponent<Props> {
         <IndexList.Row>
           <IndexList.Cell>
             <EditableName
-              onUpdate={this.handleUpdateScraper}
-              name={scraper.url}
+              onUpdate={this.handleUpdateScraperName}
+              name={scraper.name}
               noNameString={DEFAULT_SCRAPER_NAME}
             />
           </IndexList.Cell>
+          <IndexList.Cell>{scraper.url}</IndexList.Cell>
           <IndexList.Cell>{scraper.bucket}</IndexList.Cell>
           <IndexList.Cell revealOnHover={true} alignment={Alignment.Right}>
             <ConfirmationButton
@@ -48,8 +49,8 @@ export default class ScraperRow extends PureComponent<Props> {
     )
   }
 
-  private handleUpdateScraper = (name: string) => {
+  private handleUpdateScraperName = (name: string) => {
     const {onUpdateScraper, scraper} = this.props
-    onUpdateScraper({...scraper, url: name})
+    onUpdateScraper({...scraper, name})
   }
 }