dashboard: integrate Flow, sketch message API (#15713)

* dashboard: minor design change

* dashboard: Flow integration, message API

* dashboard: minor polishes, exclude misspell linter

1 files changed, 74 insertions, 33 deletions

diff --git a/dashboard/assets/components/Common.jsx b/dashboard/assets/components/Common.jsx
index 5129939c5..d8723830e 100644
--- a/dashboard/assets/components/Common.jsx
+++ b/dashboard/assets/components/Common.jsx
@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright 2017 The go-ethereum Authors
 // This file is part of the go-ethereum library.
 //
@@ -14,39 +16,78 @@
 // You should have received a copy of the GNU Lesser General Public License
 // along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
 
-// isNullOrUndefined returns true if the given variable is null or undefined.
-export const isNullOrUndefined = variable => variable === null || typeof variable === 'undefined';
-
-export const LIMIT = {
-    memory:  200, // Maximum number of memory data samples.
-    traffic: 200, // Maximum number of traffic data samples.
-    log:     200, // Maximum number of logs.
-};
+type ProvidedMenuProp = {|title: string, icon: string|};
+const menuSkeletons: Array<{|id: string, menu: ProvidedMenuProp|}> = [
+	{
+		id:   'home',
+		menu: {
+			title: 'Home',
+			icon:  'home',
+		},
+	}, {
+		id:   'chain',
+		menu: {
+			title: 'Chain',
+			icon:  'link',
+		},
+	}, {
+		id:   'txpool',
+		menu: {
+			title: 'TxPool',
+			icon:  'credit-card',
+		},
+	}, {
+		id:   'network',
+		menu: {
+			title: 'Network',
+			icon:  'globe',
+		},
+	}, {
+		id:   'system',
+		menu: {
+			title: 'System',
+			icon:  'tachometer',
+		},
+	}, {
+		id:   'logs',
+		menu: {
+			title: 'Logs',
+			icon:  'list',
+		},
+	},
+];
+export type MenuProp = {|...ProvidedMenuProp, id: string|};
 // The sidebar menu and the main content are rendered based on these elements.
-export const TAGS = (() => {
-    const T = {
-        home:         { title: "Home", },
-        chain:        { title: "Chain", },
-        transactions: { title: "Transactions", },
-        network:      { title: "Network", },
-        system:       { title: "System", },
-        logs:         { title: "Logs", },
-    };
-    // Using the key is circumstantial in some cases, so it is better to insert it also as a value.
-    // This way the mistyping is prevented.
-    for(let key in T) {
-        T[key]['id'] = key;
-    }
-    return T;
-})();
+// Using the id is circumstantial in some cases, so it is better to insert it also as a value.
+// This way the mistyping is prevented.
+export const MENU: Map<string, {...MenuProp}> = new Map(menuSkeletons.map(({id, menu}) => ([id, {id, ...menu}])));
+
+type ProvidedSampleProp = {|limit: number|};
+const sampleSkeletons: Array<{|id: string, sample: ProvidedSampleProp|}> = [
+	{
+		id:     'memory',
+		sample: {
+			limit: 200,
+		},
+	}, {
+		id:     'traffic',
+		sample: {
+			limit: 200,
+		},
+	}, {
+		id:     'logs',
+		sample: {
+			limit: 200,
+		},
+	},
+];
+export type SampleProp = {|...ProvidedSampleProp, id: string|};
+export const SAMPLE: Map<string, {...SampleProp}> = new Map(sampleSkeletons.map(({id, sample}) => ([id, {id, ...sample}])));
 
-export const DATA_KEYS = (() => {
-    const DK = {};
-    ["memory", "traffic", "logs"].map(key => {
-       DK[key] = key;
-    });
-    return DK;
-})();
+export const DURATION = 200;
 
-// Temporary - taken from Material-UI
-export const DRAWER_WIDTH = 240;
+export const LENS: Map<string, string> = new Map([
+	'content',
+	...menuSkeletons.map(({id}) => id),
+	...sampleSkeletons.map(({id}) => id),
+].map(lens => [lens, lens]));