GH-1538:Add Active Cancel Observation support in server-demo UI.

eclipse-leshan · Nov 30, 2023 · fbd9d32 · fbd9d32
1 parent 2f8cca4
commit fbd9d32
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 10 deletions.
diff --git a/leshan-server-demo/webapp/src/components/compositeOperation/CompositeObjectControl.vue b/leshan-server-demo/webapp/src/components/compositeOperation/CompositeObjectControl.vue
@@ -15,7 +15,13 @@
  <request-button @on-click="observe" title="Composite Observe"
  >Obs</request-button
  >
- <request-button @on-click="stopObserve" title="Passive Cancel Obverse">
+ <request-button
+ @on-click="stopPassiveObserve"
+ title="Passive Cancel Obverse"
+ >
+ <v-icon dense small>{{ $icons.mdiEyeOffOutline }}</v-icon></request-button
+ >
+ <request-button @on-click="stopActiveObserve" title="Active Cancel Obverse">
  <v-icon dense small>{{
  $icons.mdiEyeRemoveOutline
  }}</v-icon></request-button
@@ -145,7 +151,7 @@ export default {
  requestButton.resetState();
  });
  },
- stopObserve(requestButton) {
+ stopPassiveObserve(requestButton) {
  this.axios
  .delete(
  `${this.requestPath()}/observe?paths=${this.compositeObject.paths.join(
@@ -154,7 +160,6 @@ export default {
  )
  .then(() => {
  requestButton.changeState("success");
- this.$store.setObserved(this.endpoint, this.path, false);
  this.$store.setCompositeObjectObserved(
  this.endpoint,
  this.compositeObject,
@@ -165,6 +170,28 @@ export default {
  requestButton.resetState();
  });
  },
+ stopActiveObserve(requestButton) {
+ this.axios
+ .delete(
+ `${this.requestPath()}/observe?paths=${this.compositeObject.paths.join(
+ ","
+ )}&active&timeout=${timeout.get()}`
+ )
+ .then((response) => {
+ this.updateState(response.data, requestButton);
+ if (response.data.success) {
+ this.$store.newNodes(this.endpoint, response.data.content);
+ this.$store.setCompositeObjectObserved(
+ this.endpoint,
+ this.compositeObject,
+ false
+ );
+ }
+ })
+ .catch(() => {
+ requestButton.resetState();
+ });
+ },
  openWriteDialog() {
  this.dialog = true;
  },

diff --git a/leshan-server-demo/webapp/src/components/instance/InstanceControl.vue b/leshan-server-demo/webapp/src/components/instance/InstanceControl.vue
@@ -16,8 +16,14 @@
  >Obs</request-button
  >
  <request-button
- @on-click="stopObserve"
+ @on-click="stopPassiveObserve"
  :title="'Passive Cancel Obverse ' + path"
+ >
+ <v-icon dense small>{{ $icons.mdiEyeOffOutline }}</v-icon></request-button
+ >
+ <request-button
+ @on-click="stopActiveObserve"
+ :title="'Active Cancel Obverse ' + path"
  >
  <v-icon dense small>{{
  $icons.mdiEyeRemoveOutline
@@ -125,9 +131,9 @@ export default {
  requestButton.resetState();
  });
  },
- stopObserve(requestButton) {
+ stopPassiveObserve(requestButton) {
  this.axios
- .delete(`${this.requestPath()}/observe`)
+ .delete(this.requestPath() + "/observe")
  .then(() => {
  requestButton.changeState("success");
  this.$store.setObserved(this.endpoint, this.path, false);
@@ -136,6 +142,24 @@ export default {
  requestButton.resetState();
  });
  },
+ stopActiveObserve(requestButton) {
+ this.axios
+ .delete(this.requestPath() + `/observe?active&timeout=${timeout.get()}`)
+ .then((response) => {
+ this.updateState(response.data, requestButton);
+ if (response.data.success) {
+ this.$store.newInstanceValue(
+ this.endpoint,
+ this.path,
+ response.data.content.resources
+ );
+ this.$store.setObserved(this.endpoint, this.path, false);
+ }
+ })
+ .catch(() => {
+ requestButton.resetState();
+ });
+ },
  openWriteDialog() {
  this.dialog = true;
  },

diff --git a/leshan-server-demo/webapp/src/components/resources/ResourceControl.vue b/leshan-server-demo/webapp/src/components/resources/ResourceControl.vue
@@ -19,9 +19,16 @@
  >Obs</request-button
  >
  <request-button
- @on-click="stopObserve"
+ @on-click="stopPassiveObserve"
  v-if="readable"
  :title="'Passive Cancel Obverse ' + path"
+ >
+ <v-icon dense small>{{ $icons.mdiEyeOffOutline }}</v-icon></request-button
+ >
+ <request-button
+ @on-click="stopActiveObserve"
+ v-if="readable"
+ :title="'Active Cancel Obverse ' + path"
  >
  <v-icon dense small>{{
  $icons.mdiEyeRemoveOutline
@@ -152,7 +159,7 @@ export default {
  requestButton.resetState();
  });
  },
- stopObserve(requestButton) {
+ stopPassiveObserve(requestButton) {
  this.axios
  .delete(this.requestPath() + "/observe")
  .then(() => {
@@ -163,6 +170,24 @@ export default {
  requestButton.resetState();
  });
  },
+ stopActiveObserve(requestButton) {
+ this.axios
+ .delete(this.requestPath() + `/observe?active&timeout=${timeout.get()}`)
+ .then((response) => {
+ this.updateState(response.data, requestButton);
+ if (response.data.success) {
+ this.$store.newResourceValue(
+ this.endpoint,
+ this.path,
+ response.data.content
+ );
+ this.$store.setObserved(this.endpoint, this.path, false);
+ }
+ })
+ .catch(() => {
+ requestButton.resetState();
+ });
+ },
  openWriteDialog() {
  this.dialog = true;
  },

diff --git a/leshan-server-demo/webapp/src/components/resources/ResourceInstanceControl.vue b/leshan-server-demo/webapp/src/components/resources/ResourceInstanceControl.vue
@@ -19,9 +19,16 @@
  >Obs</request-button
  >
  <request-button
- @on-click="stopObserve"
+ @on-click="stopPassiveObserve"
  v-if="readable"
  :title="'Passive Cancel Obverse ' + path"
+ >
+ <v-icon dense small>{{ $icons.mdiEyeOffOutline }}</v-icon></request-button
+ >
+ <request-button
+ @on-click="stopActiveObserve"
+ v-if="readable"
+ :title="'Active Cancel Obverse ' + path"
  >
  <v-icon dense small>{{
  $icons.mdiEyeRemoveOutline
@@ -141,7 +148,7 @@ export default {
  requestButton.resetState();
  });
  },
- stopObserve(requestButton) {
+ stopPassiveObserve(requestButton) {
  this.axios
  .delete(this.requestPath() + "/observe")
  .then(() => {
@@ -152,6 +159,25 @@ export default {
  requestButton.resetState();
  });
  },
+ stopActiveObserve(requestButton) {
+ this.axios
+ .delete(this.requestPath() + `/observe?active&timeout=${timeout.get()}`)
+ .then((response) => {
+ this.updateState(response.data, requestButton);
+ if (response.data.success) {
+ this.$store.newResourceInstanceValue(
+ this.endpoint,
+ this.resourcePath,
+ this.instanceId,
+ response.data.content.value
+ );
+ this.$store.setObserved(this.endpoint, this.path, false);
+ }
+ })
+ .catch(() => {
+ requestButton.resetState();
+ });
+ },
  openWriteDialog() {
  this.dialog = true;
  },

diff --git a/leshan-server-demo/webapp/src/plugins/icons.js b/leshan-server-demo/webapp/src/plugins/icons.js
@@ -23,6 +23,7 @@ import {
  mdiDevices,
  mdiDownload,
  mdiExitRun,
+ mdiEyeOffOutline,
  mdiEyeOutline,
  mdiEyeRemoveOutline,
  mdiFormatListCheckbox,
@@ -66,6 +67,7 @@ const _icons = {
  mdiDevices,
  mdiDownload,
  mdiExitRun,
+ mdiEyeOffOutline,
  mdiEyeOutline,
  mdiEyeRemoveOutline,
  mdiFormatListCheckbox,