How the states of containers are updated on Rancher UI?

Archive Rancher 1.x
1

I found the state can be updated automatically in Rancher UI even if I do some actions on containers through SSH , such as ‘docker stop’…, but I can not trace any http/ws interaction between browser and rancher backend, how can the states are updated ?

2

The UI is updated via the websocket connection to /v1/projects/<project id>/subscribe.

(On the host side, the Rancher agent watches for docker events and send them up through its websocket connection to the server…)

3

Thanks for your kind reply!

When resource changed event is received:

...
  else if ( message.name === 'resource.change' && message.data )
  {
    var resource = message.data.resource;

    var info = 'name='+resource.name + ', state='+resource.state;
    if ( resource.transitioning !== 'no' )
    {
      info += ', transitioning='+resource.transitioning + ', message='+resource.transitioningMessage
    }

    console.log(message.resourceType, message.resourceId, 'changed:', info);
  }
...

In the above code, the received data is only logged to console, but how can the UI is updated?

4

That’s just an example of watching the event stream…

In our actual UI there’s a store which has a copy of every resource model in browser memory. The new copy that comes in from the change event is turned into a model and replaces the old copy (or is added to the store if it wasn’t known about before). When a model is added/removed/changed, the relevant pieces of the screen are automatically re-rendered by Ember.js to show the change.

5

Very thanks to your detail explaination, I understand it now!