poll for uc component and store it in front-end.

src/App.vue

@@ -58,6 +58,15 @@ function initLoad(store) {
 export default {
   name: 'App',
   methods: {
+    pollUcComponentState() {
+      console.log('Initialize polling for Uc Component state.')
+
+      // Start polling Studio component state
+      const UC_COMPONENT_STATE_POLLING_INTERVAL_MS = 4000
+      let ucComponentStateIntervalId = setInterval(() => {
+        this.$store.dispatch('zap/updateUcComponentState', this.$store.state.zap.studio.projectPath)
+      }, UC_COMPONENT_STATE_POLLING_INTERVAL_MS)
+    },
     setThemeMode() {
       const theme = document.documentElement.getAttribute('data-theme')
       if (theme === 'com.silabs.ss.platform.theme.dark') {
@@ -110,6 +119,7 @@ export default {
 
     if (query['studioProject']) {
       this.$store.dispatch('zap/setStudioConfigPath', query['studioProject'])
+      this.pollUcComponentState()
     }
 
     this.zclDialogTitle = 'ZCL tab!'

src/store/zap/actions.js

@@ -17,6 +17,8 @@
 import Vue from 'vue'
 import * as Util from '../../util/util.js'
 import restApi from '../../../src-shared/rest-api.js'
+import { util } from 'prettier'
+const http = require('http-status-codes')
 
 export function updateInformationText(context, text) {
   Vue.prototype
@@ -114,8 +116,14 @@ export function updateSelectedCommands(context, selectionContext) {
 }
 
 export function updateSelectedComponent(context, payload) {
-  let op = payload.added ? restApi.uc.componentAdd : restApi.uc.componentRemove
-  return Vue.prototype.$serverPost(op, payload)
+  if (!('studioProject' in payload)) {
+    return Promise.resolve({ status: http.StatusCodes.BAD_REQUEST })
+  } else {
+    let op = payload.added
+      ? restApi.uc.componentAdd
+      : restApi.uc.componentRemove
+    return Vue.prototype.$serverPost(op, payload)
+  }
 }
 
 export function updateSelectedServers(context, selectionContext) {
@@ -620,3 +628,17 @@ export function setFilterString(context, filterString) {
 export function resetFilters(context) {
   context.commit('resetFilters')
 }
+
+export function updateUcComponentState(context, studioProjectPath) {
+  Vue.prototype
+    .$serverGet(restApi.uc.componentTree, {
+      params: {
+        studioProject: studioProjectPath,
+      },
+    })
+    .then((response) => {
+      let selected = Util.getSelectedComponent(response.data)
+      let selectedComponentIds = Util.getClustersByUcComponentIds(selected)
+      context.commit('updateUcComponentState', selectedComponentIds)
+    })
+}

src/store/zap/mutations.js

@@ -436,3 +436,7 @@ export function resetFilters(state) {
 export function updateProjectPackages(state, packages) {
   Vue.set(state, 'packages', packages)
 }
+
+export function updateUcComponentState(state, selectedUcComponentIds) {
+  Vue.set(state.studio, 'selectedComponentIds', selectedUcComponentIds)
+}

src/store/zap/state.js

@@ -118,6 +118,8 @@ export default function () {
     },
     studio: {
       projectPath: '',
-    }
+      projectInfoJson: '', // HTTP response from Studio jetty server
+      selectedComponentIds: [], // parsed from 'projectInfoJson'
+    },
   }
 }

src/util/util.js

@@ -133,3 +133,15 @@ export function getSelectedComponent(ucComponentTreeResponse) {
   }
   return selected
 }
+
+/**
+ * Extract cluster id string "$cluster" from the internal Uc Component Id
+ *
+ * e.g. "basic" from "studiocomproot-Zigbee-Cluster_Library-Common-zigbee_basic"
+ * @param {*} ucComponentIds - an array of ids
+ */
+export function getClustersByUcComponentIds(ids) {
+  return ids
+    .filter((x) => x.includes('zigbee_'))
+    .map((x) => x.substr(x.lastIndexOf('-') + 1))
+}