Merge pull request #163 from ksvital/multipipeline-group-ui

Multi pipeline group UI

web/src/screens/repo/screens/build/components/procs.js

@@ -15,24 +15,47 @@ const renderEnviron = data => {
   );
 };
 
-const ProcListHolder = ({ vars, renderName, children }) => (
+class ProcListHolder extends Component {
-  <div className={styles.list}>
+  constructor(props, context) {
-    {renderName && vars.name !== "drone" ? (
+    super(props, context);
-      <div>
+    this.state = { open: false };
-        <StatusText status={vars.state} text={vars.name} />
+  }
+
+  toggleOpen = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const { vars, renderName, children } = this.props;
+    const groupExpandStatus = this.state.open
+      ? styles.collapsed
+      : styles.expanded;
+    return (
+      <div className={styles.list}>
+        {renderName && vars.name !== "drone" ? (
+          <div
+            onClick={this.toggleOpen}
+            className={`${styles.group} ${groupExpandStatus}`}
+          >
+            <StatusText status={vars.state} text={vars.name} />
+          </div>
+        ) : null}
+        {vars.environ ? (
+          <div
+            onClick={this.toggleOpen}
+            className={`${styles.group} ${groupExpandStatus}`}
+          >
+            <StatusText
+              status={vars.state}
+              text={Object.entries(vars.environ).map(renderEnviron)}
+            />
+          </div>
+        ) : null}
+        <div className={!this.state.open ? styles.hide : ""}>{children}</div>
       </div>
-    ) : null}
+    );
-    {vars.environ ? (
+  }
-      <div>
+}
-        <StatusText
-          status={vars.state}
-          text={Object.entries(vars.environ).map(renderEnviron)}
-        />
-      </div>
-    ) : null}
-    {children}
-  </div>
-);
 
 export class ProcList extends Component {
   render() {

web/src/screens/repo/screens/build/components/procs.less

@@ -8,6 +8,33 @@
 	}
 }
 
+.group {
+	cursor: pointer;
+	position: relative;
+}
+
+.expanded:after {
+	content: "+";
+	position: absolute;
+	top: 8px;
+	right: 12px;
+	color: white;
+	font-size: 16px;
+}
+
+.collapsed:after {
+	content: "—";
+	position: absolute;
+	top: 8px;
+	right: 12px;
+	color: white;
+	font-size: 16px;
+}
+
+.hide {
+	display: none;
+}
+
 .vars {
 	padding: 30px 0 0 10px;
 }

web/src/screens/repo/screens/build/index.js

@@ -200,7 +200,7 @@ export default class BuildLogs extends Component {
             <section className={styles.sticky}>
               {build.procs.map(function(rootProc) {
                 return (
-                  <div style="padding-bottom: 50px;" key={rootProc.pid}>
+                  <div style="padding-bottom: 20px;" key={rootProc.pid}>
                     <ProcList
                       key={rootProc.pid}
                       repo={repo}

web/src/shared/components/status.js

@@ -92,7 +92,7 @@ export const StatusText = ({ status, text }) => {
   return (
     <div
       className={classnames(style.label, style[status])}
-      style="text-transform: capitalize;padding: 5px 10px;"
+      style="padding: 5px 10px;"
     >
       <div>{text}</div>
     </div>

web/yarn.lock

@@ -3118,7 +3118,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -3127,13 +3127,10 @@ inherits@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
 
-<<<<<<< HEAD
 inherits@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
 
-=======
->>>>>>> parent of 2bfa5732... Bump webpack-dev-server from 2.11.5 to 3.1.11 in /web
 ini@~1.3.0:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
@@ -4025,17 +4022,10 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-<<<<<<< HEAD
-lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
-  version "4.17.20"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
-  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
-=======
 lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
->>>>>>> parent of 2bfa5732... Bump webpack-dev-server from 2.11.5 to 3.1.11 in /web
 
 loglevel@^1.4.1:
   version "1.4.1"
@@ -4209,21 +4199,14 @@ mimic-fn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
 
-<<<<<<< HEAD
-mimic-fn@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
-  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
-
-minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
-  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
-=======
 minimalistic-assert@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
->>>>>>> parent of 2bfa5732... Bump webpack-dev-server from 2.11.5 to 3.1.11 in /web
+
+minimalistic-assert@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
+  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
 minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   version "1.0.1"
@@ -4240,21 +4223,14 @@ minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
-<<<<<<< HEAD
-minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5, minimist@~1.2.0:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
-=======
 minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
-minimist@~0.0.1:
+minimist@^1.2.5:
-  version "0.0.10"
+  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
->>>>>>> parent of 2bfa5732... Bump webpack-dev-server from 2.11.5 to 3.1.11 in /web
 
 mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
@@ -5503,11 +5479,7 @@ require-uncached@^1.0.3:
     caller-path "^0.1.0"
     resolve-from "^1.0.0"
 
-<<<<<<< HEAD
+requires-port@1.0.x, requires-port@^1.0.0:
-requires-port@^1.0.0:
-=======
-requires-port@1.0.x, requires-port@1.x.x:
->>>>>>> parent of 2bfa5732... Bump webpack-dev-server from 2.11.5 to 3.1.11 in /web
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=