Skip to content

Commit 190c2b0

Browse files
deeptailordeeptailor
committed
added hello world plugin
1 parent 323fed6 commit 190c2b0

File tree

6 files changed

+204
-122
lines changed

6 files changed

+204
-122
lines changed

Diff for: ‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@
2323
"mini-css-extract-plugin": "^1.3.9",
2424
"node-sass": "^4.14.1",
2525
"openmct": "^1.6.1",
26+
"vue": "^2.6.12",
2627
"vue-loader": "^15.9.6",
28+
"vue-template-compiler": "^2.6.12",
2729
"webpack": "^5.24.4",
2830
"webpack-cli": "^4.5.0",
2931
"webpack-dev-server": "^3.11.2"

Diff for: ‎src/index.js

+127-121
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,140 @@
11
import openmct from 'openmct';
2+
import HelloWorldPlugin from './plugins/HelloWorld/plugin';
23

34
function initializeApp() {
4-
const THIRTY_SECONDS = 30 * 1000;
5-
const ONE_MINUTE = THIRTY_SECONDS * 2;
6-
const FIVE_MINUTES = ONE_MINUTE * 5;
7-
const FIFTEEN_MINUTES = FIVE_MINUTES * 3;
8-
const THIRTY_MINUTES = FIFTEEN_MINUTES * 2;
9-
const ONE_HOUR = THIRTY_MINUTES * 2;
10-
const TWO_HOURS = ONE_HOUR * 2;
11-
const ONE_DAY = ONE_HOUR * 24;
5+
installDefaultPlugins();
126

13-
[
14-
'example/eventGenerator'
15-
].forEach(
16-
openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
17-
);
7+
openmct.install(HelloWorldPlugin());
8+
openmct.start();
9+
}
10+
11+
function installDefaultPlugins() {
12+
const THIRTY_SECONDS = 30 * 1000;
13+
const ONE_MINUTE = THIRTY_SECONDS * 2;
14+
const FIVE_MINUTES = ONE_MINUTE * 5;
15+
const FIFTEEN_MINUTES = FIVE_MINUTES * 3;
16+
const THIRTY_MINUTES = FIFTEEN_MINUTES * 2;
17+
const ONE_HOUR = THIRTY_MINUTES * 2;
18+
const TWO_HOURS = ONE_HOUR * 2;
19+
const ONE_DAY = ONE_HOUR * 24;
1820

19-
openmct.install(openmct.plugins.LocalStorage());
20-
openmct.install(openmct.plugins.Espresso());
21-
openmct.install(openmct.plugins.MyItems());
22-
openmct.install(openmct.plugins.Generator());
23-
openmct.install(openmct.plugins.ExampleImagery());
24-
openmct.install(openmct.plugins.UTCTimeSystem());
25-
openmct.install(openmct.plugins.AutoflowView({
26-
type: "telemetry.panel"
27-
}));
28-
openmct.install(openmct.plugins.DisplayLayout({
29-
showAsView: ['summary-widget', 'example.imagery']
30-
}));
31-
openmct.install(openmct.plugins.Conductor({
32-
menuOptions: [
33-
{
34-
name: "Fixed",
35-
timeSystem: 'utc',
36-
bounds: {
37-
start: Date.now() - THIRTY_MINUTES,
38-
end: Date.now()
21+
[
22+
'example/eventGenerator'
23+
].forEach(
24+
openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
25+
);
26+
27+
openmct.install(openmct.plugins.LocalStorage());
28+
openmct.install(openmct.plugins.Espresso());
29+
openmct.install(openmct.plugins.MyItems());
30+
openmct.install(openmct.plugins.Generator());
31+
openmct.install(openmct.plugins.ExampleImagery());
32+
openmct.install(openmct.plugins.UTCTimeSystem());
33+
openmct.install(openmct.plugins.AutoflowView({
34+
type: "telemetry.panel"
35+
}));
36+
openmct.install(openmct.plugins.DisplayLayout({
37+
showAsView: ['summary-widget', 'example.imagery']
38+
}));
39+
openmct.install(openmct.plugins.Conductor({
40+
menuOptions: [
41+
{
42+
name: "Fixed",
43+
timeSystem: 'utc',
44+
bounds: {
45+
start: Date.now() - THIRTY_MINUTES,
46+
end: Date.now()
47+
},
48+
// commonly used bounds can be stored in history
49+
// bounds (start and end) can accept either a milliseconds number
50+
// or a callback function returning a milliseconds number
51+
// a function is useful for invoking Date.now() at exact moment of preset selection
52+
presets: [
53+
{
54+
label: 'Last Day',
55+
bounds: {
56+
start: () => Date.now() - ONE_DAY,
57+
end: () => Date.now()
58+
}
59+
},
60+
{
61+
label: 'Last 2 hours',
62+
bounds: {
63+
start: () => Date.now() - TWO_HOURS,
64+
end: () => Date.now()
65+
}
3966
},
40-
// commonly used bounds can be stored in history
41-
// bounds (start and end) can accept either a milliseconds number
42-
// or a callback function returning a milliseconds number
43-
// a function is useful for invoking Date.now() at exact moment of preset selection
44-
presets: [
45-
{
46-
label: 'Last Day',
47-
bounds: {
48-
start: () => Date.now() - ONE_DAY,
49-
end: () => Date.now()
50-
}
51-
},
52-
{
53-
label: 'Last 2 hours',
54-
bounds: {
55-
start: () => Date.now() - TWO_HOURS,
56-
end: () => Date.now()
57-
}
58-
},
59-
{
60-
label: 'Last hour',
61-
bounds: {
62-
start: () => Date.now() - ONE_HOUR,
63-
end: () => Date.now()
64-
}
67+
{
68+
label: 'Last hour',
69+
bounds: {
70+
start: () => Date.now() - ONE_HOUR,
71+
end: () => Date.now()
6572
}
66-
],
67-
// maximum recent bounds to retain in conductor history
68-
records: 10
69-
// maximum duration between start and end bounds
70-
// for utc-based time systems this is in milliseconds
71-
// limit: ONE_DAY
73+
}
74+
],
75+
// maximum recent bounds to retain in conductor history
76+
records: 10
77+
// maximum duration between start and end bounds
78+
// for utc-based time systems this is in milliseconds
79+
// limit: ONE_DAY
80+
},
81+
{
82+
name: "Realtime",
83+
timeSystem: 'utc',
84+
clock: 'local',
85+
clockOffsets: {
86+
start: - THIRTY_MINUTES,
87+
end: THIRTY_SECONDS
7288
},
73-
{
74-
name: "Realtime",
75-
timeSystem: 'utc',
76-
clock: 'local',
77-
clockOffsets: {
78-
start: - THIRTY_MINUTES,
79-
end: THIRTY_SECONDS
89+
presets: [
90+
{
91+
label: '1 Hour',
92+
bounds: {
93+
start: - ONE_HOUR,
94+
end: THIRTY_SECONDS
95+
}
8096
},
81-
presets: [
82-
{
83-
label: '1 Hour',
84-
bounds: {
85-
start: - ONE_HOUR,
86-
end: THIRTY_SECONDS
87-
}
88-
},
89-
{
90-
label: '30 Minutes',
91-
bounds: {
92-
start: - THIRTY_MINUTES,
93-
end: THIRTY_SECONDS
94-
}
95-
},
96-
{
97-
label: '15 Minutes',
98-
bounds: {
99-
start: - FIFTEEN_MINUTES,
100-
end: THIRTY_SECONDS
101-
}
102-
},
103-
{
104-
label: '5 Minutes',
105-
bounds: {
106-
start: - FIVE_MINUTES,
107-
end: THIRTY_SECONDS
108-
}
109-
},
110-
{
111-
label: '1 Minute',
112-
bounds: {
113-
start: - ONE_MINUTE,
114-
end: THIRTY_SECONDS
115-
}
97+
{
98+
label: '30 Minutes',
99+
bounds: {
100+
start: - THIRTY_MINUTES,
101+
end: THIRTY_SECONDS
116102
}
117-
]
118-
}
119-
]
120-
}));
121-
openmct.install(openmct.plugins.SummaryWidget());
122-
openmct.install(openmct.plugins.Notebook());
123-
openmct.install(openmct.plugins.LADTable());
124-
openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
125-
openmct.install(openmct.plugins.ObjectMigration());
126-
openmct.install(openmct.plugins.ClearData(
127-
['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked'],
128-
{indicator: true}
129-
));
130-
131-
openmct.start();
103+
},
104+
{
105+
label: '15 Minutes',
106+
bounds: {
107+
start: - FIFTEEN_MINUTES,
108+
end: THIRTY_SECONDS
109+
}
110+
},
111+
{
112+
label: '5 Minutes',
113+
bounds: {
114+
start: - FIVE_MINUTES,
115+
end: THIRTY_SECONDS
116+
}
117+
},
118+
{
119+
label: '1 Minute',
120+
bounds: {
121+
start: - ONE_MINUTE,
122+
end: THIRTY_SECONDS
123+
}
124+
}
125+
]
126+
}
127+
]
128+
}));
129+
openmct.install(openmct.plugins.SummaryWidget());
130+
openmct.install(openmct.plugins.Notebook());
131+
openmct.install(openmct.plugins.LADTable());
132+
openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
133+
openmct.install(openmct.plugins.ObjectMigration());
134+
openmct.install(openmct.plugins.ClearData(
135+
['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked'],
136+
{indicator: true}
137+
));
132138
}
133139

134140
document.addEventListener('DOMContentLoaded', initializeApp);

Diff for: ‎src/plugins/HelloWorld/HelloWorldViewProvider.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import Vue from 'vue';
2+
import HelloWorldComponent from './components/HelloWorldComponent.vue';
3+
4+
export default function HelloWorldViewProvider(openmct) {
5+
return {
6+
key: 'webPage',
7+
name: 'Web Page',
8+
cssClass: 'icon-page',
9+
canView: function (domainObject) {
10+
return domainObject.type === 'hello-world';
11+
},
12+
view: function (domainObject) {
13+
let component;
14+
15+
return {
16+
show: function (element) {
17+
component = new Vue({
18+
el: element,
19+
components: {
20+
HelloWorldComponent: HelloWorldComponent
21+
},
22+
provide: {
23+
openmct,
24+
domainObject
25+
},
26+
template: '<hello-world-component></hello-world-component>'
27+
});
28+
},
29+
destroy: function (element) {
30+
component.$destroy();
31+
component = undefined;
32+
}
33+
};
34+
},
35+
priority: function () {
36+
return 1;
37+
}
38+
};
39+
}

Diff for: ‎src/plugins/HelloWorld/components/HelloWorldComponent.vue

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div>
3+
{{ domainObject.string }} For Hello World
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
inject: ['openmct', 'domainObject']
10+
};
11+
</script>

Diff for: ‎src/plugins/HelloWorld/plugin.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import HelloWorldViewProvider from './HelloWorldViewProvider';
2+
3+
export default function plugin() {
4+
return function install(openmct) {
5+
openmct.objectViews.addProvider(new HelloWorldViewProvider(openmct));
6+
7+
openmct.types.addType('hello-world', {
8+
name: "Hello World",
9+
description: "Enter a string to be shown on the Hello World View",
10+
creatable: true,
11+
cssClass: 'icon-page',
12+
form: [
13+
{
14+
"key": "string",
15+
"name": "String",
16+
"control": "textfield",
17+
"required": true,
18+
"cssClass": "l-input-lg"
19+
}
20+
]
21+
});
22+
};
23+
}

Diff for: ‎webpack.config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ module.exports = {
1919
resolve: {
2020
alias: {
2121
"@": path.join(__dirname, "node_modules/openmct"),
22-
"openmct": path.join(__dirname, "node_modules/openmct/dist/openmct.js")
22+
"openmct": path.join(__dirname, "node_modules/openmct/dist/openmct.js"),
23+
"vue": path.join(__dirname, "node_modules/vue/dist/vue.js")
2324
}
2425
},
2526
plugins: [

0 commit comments

Comments
 (0)