DataSegment

DataSegment component enables fetching data using predefined function and showing segmented data in a simple manner.

It delivers alternative way of presenting fetched data to DataTable.

Access

Stage.Basic.DataSegment

Features

• data pagination
• selectable segments

Usage

Simple example

<DataSegment>

    <DataSegment.Action>
        <Button icon="rocket" />
    </DataSegment.Action>

    <DataSegment.Item>
        <h2>SegmentItem 1</h2>
    </DataSegment.Item>

    <DataSegment.Item>
        <h2>SegmentItem 2</h2>
    </DataSegment.Item>

    <DataSegment.Item>
        <h2>SegmentItem 3</h2>
    </DataSegment.Item>

    <DataSegment.Item>
        <h2>SegmentItem 4</h2>
    </DataSegment.Item>

</DataSegment>

Deployments list example

<DataSegment totalSize={this.props.data.total}
             pageSize={this.props.widget.configuration.pageSize}
             fetchData={this.props.fetchData}>
{
     this.props.data.items.map((item) => {
         return (
             <DataSegment.Item key={item.id} selected={item.isSelected} className={item.id}
                           onClick={()=>this.props.onSelectDeployment(item)}>
                 <div className="ui grid">
                     <div className="three wide center aligned column rightDivider">
                         <h3 className="ui icon header verticalCenter">{item.id}</h3>
                         <ResourceVisibility visibility={item.visibility} className="rightFloated"/>
                     </div>
                     <div className="two wide column">
                         <h5 className="ui icon header">Blueprint</h5>
                         <p>{item.blueprint_id}</p>
                     </div>
                     <div className="two wide column">
                         <h5 className="ui icon header">Created</h5>
                         <p>{item.created_at}</p>
                     </div>
                     <div className="two wide column">
                         <h5 className="ui icon header">Updated</h5>
                         <p>{item.updated_at}</p>
                     </div>
                     <div className="two wide column">
                         <h5 className="ui icon header">Creator</h5>
                         <p>{item.created_by}</p>
                     </div>
                     <div className="four wide column">
                         <h5 className="ui icon header">Nodes ({item.nodeSize})</h5>
                         <div className="ui four column grid">
                             <div className="column center aligned">
                                 <NodeState icon="checkmark" title="running" state="started" color="green"
                                            value={item.nodeStates.started}/>
                             </div>
                             <div className="column center aligned">
                                 <NodeState icon="spinner" title="in progress" state="uninitialized or created" color="yellow"
                                            value={_.add(item.nodeStates.uninitialized, item.nodeStates.created)}/>
                             </div>
                             <div className="column center aligned">
                                 <NodeState icon="exclamation" title="warning" state="undefined" color="orange"
                                            value={0}/>
                             </div>
                             <div className="column center aligned">
                                 <NodeState icon="remove" title="error" state="deleted or stopped" color="red"
                                            value={_.add(item.nodeStates.deleted, item.nodeStates.stopped)}/>
                             </div>
                         </div>
                     </div>

                     <div className="column action">
                         {
                             _.isEmpty(item.executions)
                             ?
                             <MenuAction item={item} onSelectAction={this.props.onMenuAction}/>
                             :
                             <ActiveExecutionStatus item={item.executions[0]} onCancelExecution={this.props.onCancelExecution}/>
                         }
                     </div>
                 </div>
             </DataSegment.Item>
        );
    })
}
</DataSegment>