mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 05:07:52 +00:00
Notebook saved link (#2998)
* https://github.com/nasa/openmct/issues/2859 * create and store link to default notebook in storage and pass it to notification. * [Notebook] Add link to notebook inside 'Saved to Notebook' notification #2860 * Added custom autoDismissTimeout for into notifications. * Backwards compatibility fix for old notebook model without link in metadata. * lint fixes * added JS Doc description for API changes + changed property names to appropriate function. * fixed bug due to merging. * fixed url update loop Co-authored-by: Andrew Henry <akhenry@gmail.com>
This commit is contained in:
parent
55c851873c
commit
b7085f7f62
@ -75,13 +75,20 @@ export default class NotificationAPI extends EventEmitter {
|
||||
* Info notifications are low priority informational messages for the user. They will be auto-destroy after a brief
|
||||
* period of time.
|
||||
* @param {string} message The message to display to the user
|
||||
* @param {Object} [options] object with following properties
|
||||
* autoDismissTimeout: {number} in miliseconds to automatically dismisses notification
|
||||
* link: {Object} Add a link to notifications for navigation
|
||||
* onClick: callback function
|
||||
* cssClass: css class name to add style on link
|
||||
* text: text to display for link
|
||||
* @returns {InfoNotification}
|
||||
*/
|
||||
info(message) {
|
||||
info(message, options = {}) {
|
||||
let notificationModel = {
|
||||
message: message,
|
||||
autoDismiss: true,
|
||||
severity: "info"
|
||||
severity: "info",
|
||||
options
|
||||
};
|
||||
|
||||
return this._notify(notificationModel);
|
||||
@ -90,12 +97,19 @@ export default class NotificationAPI extends EventEmitter {
|
||||
/**
|
||||
* Present an alert to the user.
|
||||
* @param {string} message The message to display to the user.
|
||||
* @param {Object} [options] object with following properties
|
||||
* autoDismissTimeout: {number} in miliseconds to automatically dismisses notification
|
||||
* link: {Object} Add a link to notifications for navigation
|
||||
* onClick: callback function
|
||||
* cssClass: css class name to add style on link
|
||||
* text: text to display for link
|
||||
* @returns {Notification}
|
||||
*/
|
||||
alert(message) {
|
||||
alert(message, options = {}) {
|
||||
let notificationModel = {
|
||||
message: message,
|
||||
severity: "alert"
|
||||
severity: "alert",
|
||||
options
|
||||
};
|
||||
|
||||
return this._notify(notificationModel);
|
||||
@ -104,12 +118,19 @@ export default class NotificationAPI extends EventEmitter {
|
||||
/**
|
||||
* Present an error message to the user
|
||||
* @param {string} message
|
||||
* @param {Object} [options] object with following properties
|
||||
* autoDismissTimeout: {number} in miliseconds to automatically dismisses notification
|
||||
* link: {Object} Add a link to notifications for navigation
|
||||
* onClick: callback function
|
||||
* cssClass: css class name to add style on link
|
||||
* text: text to display for link
|
||||
* @returns {Notification}
|
||||
*/
|
||||
error(message) {
|
||||
error(message, options = {}) {
|
||||
let notificationModel = {
|
||||
message: message,
|
||||
severity: "error"
|
||||
severity: "error",
|
||||
options
|
||||
};
|
||||
|
||||
return this._notify(notificationModel);
|
||||
@ -325,9 +346,11 @@ export default class NotificationAPI extends EventEmitter {
|
||||
this.emit('notification', notification);
|
||||
|
||||
if (notification.model.autoDismiss || this._selectNextNotification()) {
|
||||
const autoDismissTimeout = notification.model.options.autoDismissTimeout
|
||||
|| DEFAULT_AUTO_DISMISS_TIMEOUT;
|
||||
this.activeTimeout = setTimeout(() => {
|
||||
this._dismissOrMinimize(notification);
|
||||
}, DEFAULT_AUTO_DISMISS_TIMEOUT);
|
||||
}, autoDismissTimeout);
|
||||
} else {
|
||||
delete this.activeTimeout;
|
||||
}
|
||||
|
@ -115,6 +115,7 @@ import { addNotebookEntry, createNewEmbed, getNotebookEntries, mutateObject } fr
|
||||
import objectUtils from 'objectUtils';
|
||||
|
||||
import { throttle } from 'lodash';
|
||||
import objectLink from '../../../ui/mixins/object-link';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -182,7 +183,9 @@ export default {
|
||||
mounted() {
|
||||
this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
|
||||
this.formatSidebar();
|
||||
|
||||
window.addEventListener('orientationchange', this.formatSidebar);
|
||||
window.addEventListener("hashchange", this.navigateToSectionPage, false);
|
||||
|
||||
this.navigateToSectionPage();
|
||||
},
|
||||
@ -190,6 +193,9 @@ export default {
|
||||
if (this.unlisten) {
|
||||
this.unlisten();
|
||||
}
|
||||
|
||||
window.removeEventListener('orientationchange', this.formatSidebar);
|
||||
window.removeEventListener("hashchange", this.navigateToSectionPage);
|
||||
},
|
||||
updated: function () {
|
||||
this.$nextTick(() => {
|
||||
@ -225,15 +231,17 @@ export default {
|
||||
},
|
||||
createNotebookStorageObject() {
|
||||
const notebookMeta = {
|
||||
identifier: this.internalDomainObject.identifier
|
||||
name: this.internalDomainObject.name,
|
||||
identifier: this.internalDomainObject.identifier,
|
||||
link: this.getLinktoNotebook()
|
||||
};
|
||||
const page = this.getSelectedPage();
|
||||
const section = this.getSelectedSection();
|
||||
|
||||
return {
|
||||
notebookMeta,
|
||||
section,
|
||||
page
|
||||
page,
|
||||
section
|
||||
};
|
||||
},
|
||||
dragOver(event) {
|
||||
@ -309,6 +317,20 @@ export default {
|
||||
|
||||
return this.openmct.objects.get(oldNotebookStorage.notebookMeta.identifier);
|
||||
},
|
||||
getLinktoNotebook() {
|
||||
const objectPath = this.openmct.router.path;
|
||||
const link = objectLink.computed.objectLink.call({
|
||||
objectPath,
|
||||
openmct: this.openmct
|
||||
});
|
||||
|
||||
const selectedSection = this.selectedSection;
|
||||
const selectedPage = this.selectedPage;
|
||||
const sectionId = selectedSection ? selectedSection.id : '';
|
||||
const pageId = selectedPage ? selectedPage.id : '';
|
||||
|
||||
return `${link}?sectionId=${sectionId}&pageId=${pageId}`;
|
||||
},
|
||||
getPage(section, id) {
|
||||
return section.pages.find(p => p.id === id);
|
||||
},
|
||||
@ -393,6 +415,12 @@ export default {
|
||||
return s;
|
||||
});
|
||||
|
||||
const selectedSectionId = this.selectedSection && this.selectedSection.id;
|
||||
const selectedPageId = this.selectedPage && this.selectedPage.id;
|
||||
if (selectedPageId === pageId && selectedSectionId === sectionId) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.sectionsChanged({ sections });
|
||||
},
|
||||
newEntry(embed = null) {
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { addNotebookEntry, createNewEmbed } from './utils/notebook-entries';
|
||||
import { getDefaultNotebook } from './utils/notebook-storage';
|
||||
import { getDefaultNotebook, getDefaultNotebookLink, setDefaultNotebook } from './utils/notebook-storage';
|
||||
import { NOTEBOOK_DEFAULT } from '@/plugins/notebook/notebook-constants';
|
||||
import SnapshotContainer from './snapshot-container';
|
||||
|
||||
@ -45,12 +45,21 @@ export default class Snapshot {
|
||||
_saveToDefaultNoteBook(embed) {
|
||||
const notebookStorage = getDefaultNotebook();
|
||||
this.openmct.objects.get(notebookStorage.notebookMeta.identifier)
|
||||
.then(domainObject => {
|
||||
.then(async (domainObject) => {
|
||||
addNotebookEntry(this.openmct, domainObject, notebookStorage, embed);
|
||||
|
||||
let link = notebookStorage.notebookMeta.link;
|
||||
|
||||
// Backwards compatibility fix (old notebook model without link)
|
||||
if (!link) {
|
||||
link = await getDefaultNotebookLink(this.openmct, domainObject);
|
||||
notebookStorage.notebookMeta.link = link;
|
||||
setDefaultNotebook(this.openmct, notebookStorage);
|
||||
}
|
||||
|
||||
const defaultPath = `${domainObject.name} - ${notebookStorage.section.name} - ${notebookStorage.page.name}`;
|
||||
const msg = `Saved to Notebook ${defaultPath}`;
|
||||
this._showNotification(msg);
|
||||
this._showNotification(msg, link);
|
||||
});
|
||||
}
|
||||
|
||||
@ -58,16 +67,29 @@ export default class Snapshot {
|
||||
* @private
|
||||
*/
|
||||
_saveToNotebookSnapshots(embed) {
|
||||
const saved = this.snapshotContainer.addSnapshot(embed);
|
||||
if (!saved) {
|
||||
return;
|
||||
this.snapshotContainer.addSnapshot(embed);
|
||||
}
|
||||
|
||||
const msg = 'Saved to Notebook Snapshots - click to view.';
|
||||
this._showNotification(msg);
|
||||
_showNotification(msg, url) {
|
||||
const options = {
|
||||
autoDismissTimeout: 30000,
|
||||
link: {
|
||||
cssClass: '',
|
||||
text: 'click to view',
|
||||
onClick: this._navigateToNotebook(url)
|
||||
}
|
||||
};
|
||||
|
||||
this.openmct.notifications.info(msg, options);
|
||||
}
|
||||
|
||||
_showNotification(msg) {
|
||||
this.openmct.notifications.info(msg);
|
||||
_navigateToNotebook(url = null) {
|
||||
if (!url) {
|
||||
return () => {};
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.location.href = window.location.origin + url;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
@ -48,14 +48,29 @@ export function getDefaultNotebook() {
|
||||
return JSON.parse(notebookStorage);
|
||||
}
|
||||
|
||||
export async function getDefaultNotebookLink(openmct, domainObject = null) {
|
||||
if (!domainObject) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const path = await openmct.objects.getOriginalPath(domainObject.identifier)
|
||||
.then(objectPath => objectPath
|
||||
.map(o => o && openmct.objects.makeKeyString(o.identifier))
|
||||
.reverse()
|
||||
.join('/')
|
||||
);
|
||||
const { page, section } = getDefaultNotebook();
|
||||
|
||||
return `#/browse/${path}?sectionId=${section.id}&pageId=${page.id}`;
|
||||
}
|
||||
|
||||
export function setDefaultNotebook(openmct, notebookStorage, domainObject) {
|
||||
observeDefaultNotebookObject(openmct, notebookStorage.notebookMeta, domainObject);
|
||||
observeDefaultNotebookObject(openmct, notebookStorage, domainObject);
|
||||
saveDefaultNotebook(notebookStorage);
|
||||
}
|
||||
|
||||
export function setDefaultNotebookSection(section) {
|
||||
const notebookStorage = getDefaultNotebook();
|
||||
|
||||
notebookStorage.section = section;
|
||||
saveDefaultNotebook(notebookStorage);
|
||||
}
|
||||
|
@ -29,6 +29,11 @@
|
||||
@click="maximize()"
|
||||
>
|
||||
<span class="c-message-banner__message">{{ activeModel.message }}</span>
|
||||
<span v-if="haslink"
|
||||
class="c-message-banner__message"
|
||||
:class="[haslink ? getLinkProps.cssClass : '']"
|
||||
>{{ getLinkProps.text }}</span>
|
||||
|
||||
<progress-bar
|
||||
v-if="activeModel.progressPerc !== undefined"
|
||||
class="c-message-banner__progress-bar"
|
||||
@ -43,6 +48,7 @@
|
||||
|
||||
<script>
|
||||
import ProgressBar from '../../components/ProgressBar.vue';
|
||||
|
||||
let activeNotification = undefined;
|
||||
let maximizedDialog = undefined;
|
||||
let minimizeButton = {
|
||||
@ -78,11 +84,20 @@ export default {
|
||||
message: undefined,
|
||||
progressPerc: undefined,
|
||||
progressText: undefined,
|
||||
minimized: undefined
|
||||
minimized: undefined,
|
||||
options: undefined
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
haslink() {
|
||||
const options = this.activeModel.options;
|
||||
|
||||
return options && options.link;
|
||||
},
|
||||
getLinkProps() {
|
||||
return this.activeModel.options.link;
|
||||
},
|
||||
progressWidth() {
|
||||
return {
|
||||
width: this.activeModel.progress + '%'
|
||||
@ -145,6 +160,15 @@ export default {
|
||||
activeNotification.off('destroy', dismissMaximizedDialog);
|
||||
},
|
||||
maximize() {
|
||||
if (this.haslink) {
|
||||
const linkProps = this.getLinkProps;
|
||||
linkProps.onClick();
|
||||
|
||||
activeNotification.dismiss();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.activeModel.progressPerc !== undefined) {
|
||||
maximizedDialog = this.openmct.overlays.progressDialog({
|
||||
buttons: [minimizeButton],
|
||||
@ -164,6 +188,5 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user