-
Notifications
You must be signed in to change notification settings - Fork 64
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3835 from FlowFuse/3789-snapshot-view-flows
Visualise a snapshots flows
- Loading branch information
Showing
13 changed files
with
441 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import product from '../services/product.js' | ||
| import daysSince from '../utils/daysSince.js' | ||
|
|
||
| import client from './client.js' | ||
|
|
||
| /** | ||
| * Get summary of a snapshot | ||
| */ | ||
| const getSummary = (snapshotId) => { | ||
| return client.get(`/api/v1/snapshots/${snapshotId}`).then(res => { | ||
| res.data.createdSince = daysSince(res.data.createdAt) | ||
| res.data.updatedSince = daysSince(res.data.updatedAt) | ||
| return res.data | ||
| }) | ||
| } | ||
|
|
||
| /** | ||
| * Get full snapshot | ||
| */ | ||
| const getFullSnapshot = (snapshotId) => { | ||
| return client.get(`/api/v1/snapshots/${snapshotId}/full`).then(res => { | ||
| res.data.createdSince = daysSince(res.data.createdAt) | ||
| res.data.updatedSince = daysSince(res.data.updatedAt) | ||
| return res.data | ||
| }) | ||
| } | ||
|
|
||
| /** | ||
| * Export a snapshot for later import in another project or platform | ||
| */ | ||
| const exportSnapshot = (snapshotId, options) => { | ||
| return client.post(`/api/v1/snapshots/${snapshotId}/export`, options).then(res => { | ||
| const props = { | ||
| 'snapshot-id': res.data.id | ||
| } | ||
| product.capture('$ff-snapshot-export', props, {}) | ||
| return res.data | ||
| }) | ||
| } | ||
|
|
||
| /** | ||
| * Delete a snapshot | ||
| * @param {String} snapshotId - id of the snapshot | ||
| */ | ||
| const deleteSnapshot = async (snapshotId) => { | ||
| return client.delete(`/api/v1/snapshots/${snapshotId}`).then(res => { | ||
| const props = { | ||
| 'snapshot-id': snapshotId, | ||
| 'deleted-at': (new Date()).toISOString() | ||
| } | ||
| product.capture('$ff-snapshot-deleted', props, {}) | ||
| return res.data | ||
| }) | ||
| } | ||
|
|
||
| export default { | ||
| deleteSnapshot, | ||
| getFullSnapshot, | ||
| exportSnapshot, | ||
| getSummary | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| <template> | ||
| <ff-dialog ref="dialog" :header="header" confirm-label="Close" :closeOnConfirm="true" data-el="snapshot-view-dialog" boxClass="!min-w-[80%] !min-h-[80%] !w-[80%] !h-[80%]" contentClass="overflow-hidden" @confirm="confirm()"> | ||
| <template #default> | ||
| <div ref="viewer" data-el="ff-flow-previewer" class="ff-flow-viewer"> | ||
| Loading... | ||
| </div> | ||
| </template> | ||
| <template #actions> | ||
| <div class="flex justify-end"> | ||
| <ff-button @click="confirm()">Close</ff-button> | ||
| </div> | ||
| </template> | ||
| </ff-dialog> | ||
| </template> | ||
| <script> | ||
| import FlowRenderer from '@flowfuse/flow-renderer' | ||
| export default { | ||
| name: 'SnapshotViewerDialog', | ||
| components: { | ||
| // FlowViewer | ||
| }, | ||
| setup () { | ||
| return { | ||
| show (snapshot) { | ||
| this.$refs.dialog.show() | ||
| this.snapshot = snapshot | ||
| setTimeout(() => { | ||
| this.renderFlows() | ||
| }, 20) | ||
| } | ||
| } | ||
| }, | ||
| data () { | ||
| return { | ||
| snapshot: [] | ||
| } | ||
| }, | ||
| computed: { | ||
| flow () { | ||
| return this.snapshot?.flows?.flows || [] | ||
| }, | ||
| header () { | ||
| return this.snapshot?.name || 'Snapshot' | ||
| } | ||
| }, | ||
| mounted () { | ||
| }, | ||
| methods: { | ||
| confirm () { | ||
| this.$refs.dialog.close() | ||
| }, | ||
| renderFlows () { | ||
| const flowRenderer = new FlowRenderer() | ||
| flowRenderer.renderFlows(this.flow, { | ||
| container: this.$refs.viewer | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| <style scoped> | ||
| .ff-flow-viewer { | ||
| height: 100%; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
test/e2e/frontend/cypress/fixtures/snapshots/device-snapshots.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| { | ||
| "count": 1, | ||
| "snapshots": [ | ||
| { | ||
| "createdAt": "2024-01-01T11:22:33.444Z", | ||
| "updatedAt": "2024-01-01T11:22:33.444Z", | ||
| "ownerType": "device", | ||
| "deviceId": "2", | ||
| "device": { | ||
| "id": "2", | ||
| "name": "device-2", | ||
| "type": "type-1", | ||
| "lastSeenMs": null, | ||
| "status": "running", | ||
| "mode": "autonomous", | ||
| "isDeploying": false | ||
| }, | ||
| "id": "1", | ||
| "name": "application device-2 snapshot-1", | ||
| "description": "a device snapshot" | ||
| } | ||
| ] | ||
| } |
Oops, something went wrong.