Merge branch 'issue-242-ui'

* issue-242-ui: ISSUE-242 State change implementation
hortonworks · Sep 13, 2017 · 9dc66a5 · 9dc66a5
2 parents 7c9c221 + ba27451
commit 9dc66a5
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 7 deletions.
diff --git a/...main/resources/app/scripts/containers/Registry-Services/SchemaRegistry/SchemaInfoForm.jsx b/...main/resources/app/scripts/containers/Registry-Services/SchemaRegistry/SchemaInfoForm.jsx
@@ -211,7 +211,7 @@ export default class SchemaFormContainer extends Component {
     };
     let {evolve, schemaText, showError, changedFields, showCodemirror, expandCodemirror} = this.state;
     return (
-      <form className="form-horizontal">
+      <form>
       <div className="row">
         <div className={expandCodemirror ? "hidden" : "col-md-6"} ref="formLeftPanel">
           <div className="form-group">

diff --git a/...urces/app/scripts/containers/Registry-Services/SchemaRegistry/SchemaRegistryContainer.jsx b/...urces/app/scripts/containers/Registry-Services/SchemaRegistry/SchemaRegistryContainer.jsx
@@ -28,9 +28,11 @@ import {
     PanelGroup,
     Panel,
     Modal,
-    Pagination
+    Pagination,
+    OverlayTrigger,
+    Popover
 } from 'react-bootstrap';
-import Utils from '../../../utils/Utils';
+import Utils, {StateMachine} from '../../../utils/Utils';
 import ReactCodemirror from 'react-codemirror';
 import '../../../utils/Overrides';
 import CodeMirror from 'codemirror';
@@ -63,6 +65,60 @@ CodeMirror.registerHelper("lint", "json", function(text) {
   return found;
 });
 
+class ChangeState extends Component{
+  constructor(props){
+    super(props);
+    this.state = {
+      edit: false
+    };
+  }
+  changeState(e){
+    const {version} = this.props;
+    SchemaREST.changeStateOfVersion(version.id, this.refs.stateSelect.value, {}).then((res) => {
+      version.stateId = parseInt(this.refs.stateSelect.value);
+      this.setState({edit: false});
+    });
+  }
+  onEdit(){
+    this.setState({edit: true}, () => {});
+  }
+  render(){
+    const {edit} = this.state;
+    const {StateMachine, version, showEditBtn} = this.props;
+    const transitions = StateMachine.getTransitionStateOptions(version.stateId);
+    const currentState = StateMachine.getStateById(version.stateId).name;
+    let comp;
+    if(edit){
+      comp = <div style={{"marginTop": "5px"}}>
+        <select ref="stateSelect" className="stateSelect" defaultValue={version.stateId}>
+          <option disabled value={version.stateId}>{currentState}</option>
+          {transitions.map( option =>
+            (<option value={option.targetStateId} key={option.targetStateId}>{option.name}</option>)
+          )}
+        </select>
+        &nbsp;
+        <a href="javascript:void(0)" className="btn-stateSelect" onClick={this.changeState.bind(this)}>
+          <i className="fa fa-check" aria-hidden="true"></i>
+        </a>
+        &nbsp;
+        <a href="javascript:void(0)" className="btn-stateSelect" onClick={() => this.setState({edit: false})}>
+          <i className="fa fa-times" aria-hidden="true"></i>
+        </a>
+      </div>;
+    }else{
+      comp = <div>
+          <span className="text-muted">{currentState}</span>
+          &nbsp;
+          {transitions.length &&  showEditBtn?
+          <a href="javascript:void(0)" onClick={this.onEdit.bind(this)}><i className="fa fa-pencil" aria-hidden="true"></i></a>
+          : ''
+          }
+        </div>;
+    }
+    return comp;
+  }
+}
+
 export default class SchemaRegistryContainer extends Component {
   constructor(props) {
     super();
@@ -94,6 +150,8 @@ export default class SchemaRegistryContainer extends Component {
     };
     this.schemaObj = {};
     this.schemaText = '';
+
+    this.StateMachine = new StateMachine();
   }
   componentDidUpdate(){
     this.btnClassChange();
@@ -105,6 +163,7 @@ export default class SchemaRegistryContainer extends Component {
         this.setState({dataFound: false});
       }
     });
+    this.fetchStateMachine();
   }
   btnClassChange = () => {
     if(!this.state.loading){
@@ -120,6 +179,11 @@ export default class SchemaRegistryContainer extends Component {
       }
     }
   }
+  fetchStateMachine(){
+    return SchemaREST.getSchemaVersionStateMachine().then((res) => {
+      this.StateMachine.setStates(res);
+    });
+  }
   fetchData() {
     let promiseArr = [],
       schemaData = [],
@@ -149,7 +213,9 @@ export default class SchemaRegistryContainer extends Component {
                 description: v.description,
                 schemaText: v.schemaText,
                 schemaName: name,
-                timestamp: v.timestamp
+                timestamp: v.timestamp,
+                stateId: v.stateId,
+                id: v.id
               });
             });
             currentVersion = Utils.sortArray(obj.versions.slice(), 'timestamp', false)[0].version;
@@ -492,8 +558,16 @@ export default class SchemaRegistryContainer extends Component {
                         sortedVersions.map((v, i)=>{
                           return (
                               <li onClick={this.selectVersion.bind(this, v)} className={s.currentVersion === v.versionId? "clearfix current" : "clearfix"} key={i}>
-                              <a className={s.currentVersion === v.versionId? "hb version-number" : "hb default version-number"}>v{v.versionId}</a>
-                              <p><span className="log-time-text">{Utils.splitTimeStamp(new Date(v.timestamp))}</span> <br/><span className="text-muted">{i === (totalVersions - 1) ? 'CREATED': 'EDITED'}</span></p>
+                                <a className={s.currentVersion === v.versionId? "hb version-number" : "hb default version-number"}>v{v.versionId}</a>
+                                <p>
+                                  <span className="log-time-text">{Utils.splitTimeStamp(new Date(v.timestamp))}</span>
+                                  <br/>
+                                </p>
+                                <ChangeState
+                                  version={v}
+                                  StateMachine={this.StateMachine}
+                                  showEditBtn={s.currentVersion === v.versionId}
+                                />
                               </li>
                           );
                         })

diff --git a/webservice/src/main/resources/app/scripts/rest/SchemaREST.js b/webservice/src/main/resources/app/scripts/rest/SchemaREST.js
@@ -139,6 +139,28 @@ const SchemaREST = {
       .then( (response) => {
         return response.json();
       });
+  },
+  getSchemaVersionStateMachine(options) {
+    options = options || {};
+    options.method = options.method || 'GET';
+    options.credentials = 'same-origin';
+    return fetch(baseUrl + 'schemaregistry/schemas/versions/statemachine', options)
+      .then((response) => {
+        return response.json();
+      });
+  },
+  changeStateOfVersion(verId, stateId, options){
+    options = options || {};
+    options.method = options.method || 'POST';
+    options.headers = options.headers || {
+      'Content-Type': 'application/json',
+      'Accept': 'application/json'
+    };
+    options.credentials = 'same-origin';
+    return fetch(baseUrl + 'schemaregistry/schemas/versions/'+verId+'/state/'+stateId, options)
+      .then((response) => {
+        return response.json();
+      });
   }
 };
 

diff --git a/webservice/src/main/resources/app/scripts/utils/Utils.js b/webservice/src/main/resources/app/scripts/utils/Utils.js
@@ -68,6 +68,26 @@ const ellipses = function(string, tagWidth) {
   return string.length > (tagWidth/10) ? `${string.substr(0, tagWidth/10)}...` : string;
 };
 
+export class StateMachine {
+  constructor(obj = {}){
+    this.states = obj.states;
+    this.transitions = obj.transitions;
+  }
+  setStates(obj = {}){
+    this.states = obj.states;
+    this.transitions = obj.transitions;
+  }
+  getStateById(id){
+    return _.find(this.states, {id: id});
+  }
+  getTransitionStateOptions(id){
+    var options = _.filter(this.transitions, (t) => {
+      return t.sourceStateId == id;
+    });
+    return options;
+  }
+}
+
 export default {
   isValidJson,
   sortArray,

diff --git a/webservice/src/main/resources/app/styles/css/style.css b/webservice/src/main/resources/app/styles/css/style.css
@@ -333,6 +333,7 @@ footer {
   border-left: 1px solid #1290c0;
   border-right: 1px solid #1290c0;
   color: #fff;
+  z-index:99
 }
 
 .hb:before, .hb:after {
@@ -1121,7 +1122,7 @@ label {
   content: '';
   position: absolute;
   border-left: 2px solid #949494;
-  height: 30px;
+  height: 40px;
   bottom: 45px;
   left: 39px;
   width: 1px;
@@ -1513,3 +1514,22 @@ table.diff .empty {
 .schema-version-labels{
   padding-top: 7px;
 }
+
+.stateSelect {
+  display: inline-block;
+  height: 24px;
+  background: white;
+  font-size: 11px;
+  border-radius: 3px;
+  border-color: #1290c0;
+}
+.btn-stateSelect {
+  display: inline-block;
+  width: 24px;
+  padding: 1px;
+  background-color: #ffffff;
+  color: #1290c0;
+  border-radius: 5px;
+  text-align: center;
+  border: 1px #1290c0 solid;
+}