Comma seperated display for tags on job details section

+ format code
Netflix · Feb 24, 2017 · 4820b7c · 4820b7c
1 parent fe67d82
commit 4820b7c
Show file tree

Hide file tree

Showing 15 changed files with 133 additions and 169 deletions.
diff --git a/genie-web/src/main/resources/static/scripts/Application.js b/genie-web/src/main/resources/static/scripts/Application.js
@@ -19,7 +19,7 @@ export default class Application extends Page {
         name: "status",
         value: "",
         type: "option",
-        optionValues: [ "", "ACTIVE", "DEPRECATED", "INACTIVE" ]
+        optionValues: ["", "ACTIVE", "DEPRECATED", "INACTIVE"]
       },
       { label: "Tag", name: "tag", value: "", type: "input" },
       { label: "Type", name: "type", value: "", type: "input" },
@@ -28,7 +28,7 @@ export default class Application extends Page {
         name: "sort",
         value: "",
         type: "select",
-        selectFields: [ "name", "status", "tag" ].map(field => ({
+        selectFields: ["name", "status", "tag"].map(field => ({
           value: field,
           label: field
         }))
@@ -38,7 +38,7 @@ export default class Application extends Page {
         name: "sortOrder",
         value: "desc",
         type: "sortOption",
-        optionValues: [ "desc", "asc" ]
+        optionValues: ["desc", "asc"]
       }
     ];
   }

diff --git a/genie-web/src/main/resources/static/scripts/Cluster.js b/genie-web/src/main/resources/static/scripts/Cluster.js
@@ -19,15 +19,15 @@ export default class Cluster extends Page {
         name: "status",
         value: "",
         type: "option",
-        optionValues: [ "", "UP", "OUT_OF_SERVICE", "TERMINATED" ]
+        optionValues: ["", "UP", "OUT_OF_SERVICE", "TERMINATED"]
       },
       { label: "Tag", name: "tag", value: "", type: "input" },
       {
         label: "Sort By",
         name: "sort",
         value: "",
         type: "select",
-        selectFields: [ "name", "status", "tag" ].map(field => ({
+        selectFields: ["name", "status", "tag"].map(field => ({
           value: field,
           label: field
         }))
@@ -37,7 +37,7 @@ export default class Cluster extends Page {
         name: "sortOrder",
         value: "desc",
         type: "sortOption",
-        optionValues: [ "desc", "asc" ]
+        optionValues: ["desc", "asc"]
       }
     ];
   }

diff --git a/genie-web/src/main/resources/static/scripts/Command.js b/genie-web/src/main/resources/static/scripts/Command.js
@@ -20,15 +20,15 @@ export default class Command extends Page {
         name: "status",
         value: "",
         type: "option",
-        optionValues: [ "", "ACTIVE", "DEPRECATED", "INACTIVE" ]
+        optionValues: ["", "ACTIVE", "DEPRECATED", "INACTIVE"]
       },
       { label: "Tag", name: "tag", value: "", type: "input" },
       {
         label: "Sort By",
         name: "sort",
         value: "",
         type: "select",
-        selectFields: [ "name", "user", "status", "tag" ].map(field => ({
+        selectFields: ["name", "user", "status", "tag"].map(field => ({
           value: field,
           label: field
         }))
@@ -38,7 +38,7 @@ export default class Command extends Page {
         name: "sortOrder",
         value: "desc",
         type: "sortOption",
-        optionValues: [ "desc", "asc" ]
+        optionValues: ["desc", "asc"]
       }
     ];
   }

diff --git a/genie-web/src/main/resources/static/scripts/Job.js b/genie-web/src/main/resources/static/scripts/Job.js
@@ -36,23 +36,23 @@ export default class Job extends Page {
         name: "startTime",
         value: [],
         type: "timeRange",
-        queryMapping: [ "minStarted", "maxStarted" ],
+        queryMapping: ["minStarted", "maxStarted"],
         mapper: x => moment(parseInt(x, 10)).utc()
       },
       {
         label: "Finished Range",
         name: "finishedTime",
         value: [],
         type: "timeRange",
-        queryMapping: [ "minFinished", "maxFinished" ],
+        queryMapping: ["minFinished", "maxFinished"],
         mapper: x => moment(parseInt(x, 10)).utc()
       },
       {
         label: "Size",
         name: "size",
         value: 25,
         type: "option",
-        optionValues: [ 10, 25, 50, 100 ]
+        optionValues: [10, 25, 50, 100]
       },
       {
         label: "Sort By",
@@ -76,7 +76,7 @@ export default class Job extends Page {
         name: "sortOrder",
         value: "desc",
         type: "sortOption",
-        optionValues: [ "desc", "asc" ]
+        optionValues: ["desc", "asc"]
       }
     ];
   }

diff --git a/genie-web/src/main/resources/static/scripts/OutputDirectory.js b/genie-web/src/main/resources/static/scripts/OutputDirectory.js
@@ -35,13 +35,13 @@ export default class OutputDirectory extends React.Component {
   }
 
   get headers() {
-    return [ { url: "#", name: "GENIE", className: "supress" } ];
+    return [{ url: "#", name: "GENIE", className: "supress" }];
   }
 
   loadData(url) {
     fetch(`/api/v3/jobs/${url}`)
       .done(output => {
-        const [ jobId, ...ignored ] = url.split("/");
+        const [jobId, ...ignored] = url.split("/");
         this.setState({
           output,
           jobId,
@@ -71,38 +71,32 @@ export default class OutputDirectory extends React.Component {
     return (
       <div>
         <SiteHeader headers={this.state.headers} infos={this.state.infos} />
-        {
-          this.state.error ? <div className="container job-output-directory">
+        {this.state.error
+          ? <div className="container job-output-directory">
               Output not found
               <div>
                 <Link to="/jobs">← back</Link>
               </div>
-            </div> : <div className="container job-output-directory">
-              {
-                this.state.fetching && !this.state.error ? <Loading /> : <div>
+            </div>
+          : <div className="container job-output-directory">
+              {this.state.fetching && !this.state.error
+                ? <Loading />
+                : <div>
                     <Navigation url={this.state.url} />
-                    {
-                      this.state.output.files.length === 0 &&
-                        this.state.output.directories.length === 0
-                        ? <div>Empty directory</div>
-                        : <div>
+                    {this.state.output.files.length === 0 &&
+                      this.state.output.directories.length === 0
+                      ? <div>Empty directory</div>
+                      : <div>
                           <Table>
                             <TableHeader
-                              headers={[
-                                "Name",
-                                "Size",
-                                "Last Modified (UTC)"
-                              ]}
+                              headers={["Name", "Size", "Last Modified (UTC)"]}
                             />
                             <TableBody output={this.state.output} />
                           </Table>
                           <DirectoryInfo output={this.state.output} />
-                        </div>
-                    }
-                  </div>
-              }
-            </div>
-        }
+                        </div>}
+                  </div>}
+            </div>}
         <SiteFooter />
       </div>
     );
@@ -195,7 +189,7 @@ DirectoryInfo.propTypes = {
 };
 
 const Navigation = props => {
-  const [ jobId, output, ...path ] = props.url.split("/");
+  const [jobId, output, ...path] = props.url.split("/");
   let breadCrumbs = [];
   // Home Button
   breadCrumbs.push(

diff --git a/genie-web/src/main/resources/static/scripts/Page.js b/genie-web/src/main/resources/static/scripts/Page.js
@@ -57,7 +57,6 @@ export default class Page extends React.Component {
     const { rowId = null, showSearchForm = "true" } = query;
     this.setState({ query, data: [] });
 
-    // Loading state
     fetch(this.url, query)
       .done(data => {
         if (data.hasOwnProperty("_embedded")) {
@@ -83,12 +82,12 @@ export default class Page extends React.Component {
   render() {
     const sideBar = this.state.showSearchForm
       ? <SearchForm
-        query={this.state.query}
-        formFields={this.formFields}
-        hiddenFormFields={this.hiddenFormFields}
-        toggleSearchForm={this.toggleSearchForm}
-        searchPath={this.searchPath}
-      />
+          query={this.state.query}
+          formFields={this.formFields}
+          hiddenFormFields={this.hiddenFormFields}
+          toggleSearchForm={this.toggleSearchForm}
+          searchPath={this.searchPath}
+        />
       : <SearchBar toggleSearchForm={this.toggleSearchForm} />;
 
     let resultPanel = null;
@@ -97,27 +96,25 @@ export default class Page extends React.Component {
     } else {
       resultPanel = this.state.data.length > 0
         ? <div
-          className={this.state.showSearchForm ? "col-md-10" : "col-md-12"}
-        >
-          <Table>
-            <TableHeader headers={this.tableHeader} />
-            <TableBody
-              rows={this.state.data}
-              rowId={this.state.rowId}
-              rowType={this.rowType}
-              detailsTable={this.detailsTable}
-              toggleRowDetails={this.toggleRowDetails}
+            className={this.state.showSearchForm ? "col-md-10" : "col-md-12"}
+          >
+            <Table>
+              <TableHeader headers={this.tableHeader} />
+              <TableBody
+                rows={this.state.data}
+                rowId={this.state.rowId}
+                rowType={this.rowType}
+                detailsTable={this.detailsTable}
+                toggleRowDetails={this.toggleRowDetails}
+              />
+            </Table>
+            <Pagination
+              page={this.state.page}
+              pageType={this.searchPath}
+              links={this.state.links}
             />
-          </Table>
-          <Pagination
-            page={this.state.page}
-            pageType={this.searchPath}
-            links={this.state.links}
-          />
-        </div>
-        : this.state.noSearchResult
-          ? <NoSearchResult />
-          : <Loading />; // Default to loading...
+          </div>
+        : this.state.noSearchResult ? <NoSearchResult /> : <Loading />; // Default to loading...
     }
 
     return (

diff --git a/genie-web/src/main/resources/static/scripts/components/ApplicationDetails.js b/genie-web/src/main/resources/static/scripts/components/ApplicationDetails.js
@@ -32,11 +32,12 @@ export default class ApplicationDetails extends React.Component {
     const { row } = props;
     const applicationUrl = row._links.self.href;
     const commandsUrl = row._links.commands.href;
-    $
-      .when(fetch(applicationUrl), fetch(commandsUrl))
-      .done((application, commands) => {
-        this.setState({ application: application[0], commands: commands[0] });
-      });
+    $.when(fetch(applicationUrl), fetch(commandsUrl)).done((
+      application,
+      commands
+    ) => {
+      this.setState({ application: application[0], commands: commands[0] });
+    });
   }
 
   render() {
@@ -91,14 +92,9 @@ export default class ApplicationDetails extends React.Component {
                 <tr>
                   <td className="col-xs-2 align-right">Commands:</td>
                   <td>
-                    {
-                      this.state.commands.length > 0
-                        ? <InfoTable
-                          data={this.state.commands}
-                          type="commands"
-                        />
-                        : <div />
-                    }
+                    {this.state.commands.length > 0
+                      ? <InfoTable data={this.state.commands} type="commands" />
+                      : <div />}
                   </td>
                 </tr>
                 <tr>

diff --git a/genie-web/src/main/resources/static/scripts/components/ClusterDetails.js b/genie-web/src/main/resources/static/scripts/components/ClusterDetails.js
@@ -71,14 +71,9 @@ export default class ClusterDetails extends React.Component {
                 <tr>
                   <td className="col-xs-2 align-right">Commands:</td>
                   <td>
-                    {
-                      this.state.commands.length > 0
-                        ? <InfoTable
-                          data={this.state.commands}
-                          type="commands"
-                        />
-                        : <div />
-                    }
+                    {this.state.commands.length > 0
+                      ? <InfoTable data={this.state.commands} type="commands" />
+                      : <div />}
                   </td>
                 </tr>
                 <tr>

diff --git a/genie-web/src/main/resources/static/scripts/components/CommandDetails.js b/genie-web/src/main/resources/static/scripts/components/CommandDetails.js
@@ -32,15 +32,17 @@ export default class CommandDetails extends React.Component {
     const commandUrl = row._links.self.href;
     const clustersUrl = `${row._links.clusters.href}?status=UP`;
     const applicationsUrl = row._links.applications.href;
-    $
-      .when(fetch(commandUrl), fetch(clustersUrl), fetch(applicationsUrl))
-      .done((command, clusters, applications) => {
-        this.setState({
-          command: command[0],
-          clusters: clusters[0],
-          applications: applications[0]
-        });
+    $.when(fetch(commandUrl), fetch(clustersUrl), fetch(applicationsUrl)).done((
+      command,
+      clusters,
+      applications
+    ) => {
+      this.setState({
+        command: command[0],
+        clusters: clusters[0],
+        applications: applications[0]
       });
+    });
   }
 
   render() {
@@ -88,27 +90,20 @@ export default class CommandDetails extends React.Component {
                 <tr>
                   <td className="col-xs-2 align-right">Clusters:</td>
                   <td>
-                    {
-                      this.state.clusters.length > 0
-                        ? <InfoTable
-                          data={this.state.clusters}
-                          type="clusters"
-                        />
-                        : <div />
-                    }
+                    {this.state.clusters.length > 0
+                      ? <InfoTable data={this.state.clusters} type="clusters" />
+                      : <div />}
                   </td>
                 </tr>
                 <tr>
                   <td className="col-xs-2 align-right">Applications:</td>
                   <td>
-                    {
-                      this.state.applications.length > 0
-                        ? <InfoTable
+                    {this.state.applications.length > 0
+                      ? <InfoTable
                           data={this.state.applications}
                           type="applications"
                         />
-                        : <div />
-                    }
+                      : <div />}
                   </td>
                 </tr>
                 <tr>