const

        commitGenerator = (function(CHARSET){ return ()=> _.range(7).map(()=> _.sample(CHARSET)).join(''); })("abcdefgh0123456789".split('')),

        formatTime = (span)=> [60*60*1000, 60*1000, 1000].reduce((function(currentSpan){ return (acc, multiplier)=> {

                let part = ~~(currentSpan/multiplier);

                currentSpan -= part * multiplier;

                return acc.concat([part]);

            };

        })(span) ,[]).map(_.partial(_.padStart, _, 2, '0')).join(':'),

        randomChance = ()=> chance[_.sample(["name", "sentence", "email", "ip", "ipv6", "url"])]();

​

    Kefir

        .combine(_.range(10).map((id)=> {

            let baseEnvironment = {

                id,

                create: Date.now() - _.random(1000*60*60*24),

                name: chance.word({ syllables: 10 }),

                user_name: chance.name({ middle: false }),

                user_email: chance.email(),

                state: _.sample(["run", "stop"]),

                type: _.sample(["service", "image", "composition"]),

                commit: commitGenerator(),

                branch: chance.word()

            };

​

            return Kefir.repeat((index) => Kefir.later(index === 0 ? 0 : _.random(5000), randomChance()))

                .merge(Kefir.later(0, _.range(8).map(randomChance)).flatten())

                .map((line)=> [_.sample(["> ", "* ", "  ", ""]), line].join(''))

                .slidingWindow(8)

                .map((log) => _.assign(baseEnvironment, { log }))

        }))

        .combine(Kefir.fromPoll(1000, Date.now))

        .throttle(200)

        .onValue(([environment, now])=> {

            const [ul, li, div, span, h1, figure, img, figcaption, pre] = ["ul", "li", "div", "span", "h1", "figure", "img", "figcaption", "pre"].map((elName)=> (attrs = {}, structChildren = [], children = undefined)=> React.createElement(elName, attrs, children, ...structChildren));

            ReactDOM.render(

                ul({ className: "environments" }, [], environment.map(

                    ({ id, name, user_name, user_email, state, type, commit, branch, log, create })=> li({ key: id }, [

                        div({ className: ["environment", state, type].join(' ') }, [

                            h1({}, [

                                name,

                                span({ className: "properties" }, [

                                    span({ className: "repository_commit" }, [ commit ]),

                                    span({ className: "repository_branch" }, [ branch ])

                                ])

                            ]),

                            figure({}, [

                                img({ src: `https://robohash.org/${commit}.png?size=150x150` }, []),

                                figcaption({}, [user_name])

                            ]),

                            pre({}, [div({}, [formatTime(now - create)]), ...log.map((line)=> span({ className: ["a","e","i","o","u"].includes(_.flow(_.first, _.lowerCase)(line)) ? "error" : "ok" }, [line]))])

                        ])

                    ]))

                )

                , document.querySelector('main'));

        });