diff --git a/web/src/screens/repo/screens/build/components/procs.js b/web/src/screens/repo/screens/build/components/procs.js
index a2b9c9f4e..8e8e398c1 100644
--- a/web/src/screens/repo/screens/build/components/procs.js
+++ b/web/src/screens/repo/screens/build/components/procs.js
@@ -15,24 +15,47 @@ const renderEnviron = data => {
);
};
-const ProcListHolder = ({ vars, renderName, children }) => (
-
- {renderName && vars.name !== "drone" ? (
-
-
+class ProcListHolder extends Component {
+ constructor(props, context) {
+ super(props, context);
+ this.state = { open: false };
+ }
+
+ toggleOpen = () => {
+ this.setState({ open: !this.state.open });
+ };
+
+ render() {
+ const { vars, renderName, children } = this.props;
+ const groupExpandStatus = this.state.open
+ ? styles.collapsed
+ : styles.expanded;
+ return (
+
+ {renderName && vars.name !== "drone" ? (
+
+
+
+ ) : null}
+ {vars.environ ? (
+
+
+
+ ) : null}
+
{children}
- ) : null}
- {vars.environ ? (
-
-
-
- ) : null}
- {children}
-
-);
+ );
+ }
+}
export class ProcList extends Component {
render() {
diff --git a/web/src/screens/repo/screens/build/components/procs.less b/web/src/screens/repo/screens/build/components/procs.less
index 033d8cd77..f7622d92f 100644
--- a/web/src/screens/repo/screens/build/components/procs.less
+++ b/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;
}