Halaman utama Jelajahi Bantuan
Masuk
RONCC
/
Big-Data-HPC-Platform
Liatin 1
Bintangi 0
Fork 0
Berkas Masalah 0 Tarik Permintaan 0 Wiki
Jelajahi Sumber

HPCC-23734 EclWatch React/Dojo Wrapper

React Component for Dojo Widgets.

Signed-off-by: Gordon Smith <gordonjsmith@gmail.com>
Gordon Smith 5 tahun lalu
induk
cc5b6f80e9
melakukan
06c840ebcd
7 mengubah file dengan 220 tambahan dan 5 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 62 0
      esp/src/index.html
  2. 1 1
      esp/src/src/UserPreferences/Recent.ts
  3. 51 0
      esp/src/src/index.tsx
  4. 58 0
      esp/src/src/react/dojoComponent.tsx
  5. 38 0
      esp/src/src/react/frame.tsx
  6. 1 0
      esp/src/src/react/index.ts
  7. 9 4
      esp/src/webpack.config.js

+ 62 - 0
esp/src/index.html
Tampilan Berkas 

@@ -0,0 +1,62 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+    <title>ECL Watch</title>
 
+    <script src="/esp/files/node_modules/es6-promise/dist/es6-promise.auto.min.js"></script>
 
+    <link rel="stylesheet" href="/esp/files/dist/font-awesome/css/font-awesome.min.css">
 
+    <link rel="icon" type="image/png" href="/esp/files/img/favlogo.png">
 
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
 
+    <script type="text/javascript">
 
+        getAuthType();
 
+        function getAuthType() {
 
+            if (document.cookie.indexOf("ESPSessionState=true") > -1) {
 
+                checkCookie();
 
+            } else if (document.cookie.indexOf("ESPSessionState=false") > -1) {
 
+                window.location.href;
 
+            } else {
 
+                sendAuthRequest();
 
+            }
 
+
 
+            function checkCookie() {
 
+                document.cookie.indexOf("ESPAuthenticated=true") > -1 ? window.location.href : window.location.href = location.origin + "/esp/files/Login.html";
 
+            }
 
+
 
+            function sendAuthRequest() {
 
+                var xhttp = new XMLHttpRequest();
 
+                xhttp.onload = function () {
 
+                    var responseType = this.responseXML && this.responseXML.childNodes && this.responseXML.childNodes.length ? this.responseXML.childNodes[0].textContent : "None";
 
+                    if (this.readyState == 4 && this.status == 200) {
 
+                        switch (responseType) {
 
+                            case 'Mixed':
 
+                            case 'PerSessionOnly':
 
+                                document.cookie = ("ESPSessionState=true");
 
+                                break;
 
+                            case 'PerRequestOnly':
 
+                            case 'UserNameOnly':
 
+                            case 'None':
 
+                                document.cookie = ("ESPSessionState=false");
 
+                                break;
 
+                            default:
 
+                                document.cookie = ("ESPSessionState=false");
 
+                        }
 
+                    } else {
 
+                        alert('Authorization Request Error.');
 
+                    }
 
+                }
 
+                xhttp.open('GET', '/esp/getauthtype', true);
 
+                xhttp.send();
 
+            }
 
+        }
 
+    </script>
 
+</head>
 
+
 
+<body class="flat">
 
+    <div id="app"></div>
 
+    <script src="/esp/files/dist/index.eclwatch.js" charset="utf-8"></script>
 
+</body>
 
+
 
+</html>

+ 1 - 1
esp/src/src/UserPreferences/Recent.ts
Tampilan Berkas 

@@ -12,7 +12,7 @@ export function addToStack(key: string, data: any, expectedLength?: number) {
 
                 resolve(finalData = JSON.stringify([data]));
 
             } else {
 
                 const encodedData = JSON.parse(response);
 
-                if (encodedData.length >= expectedLength) {
 
+                if (encodedData?.length >= expectedLength) {
 
                     encodedData.pop();
 
                     encodedData.unshift(data);
 
                     ws_store.set(key, JSON.stringify(encodedData));

+ 51 - 0
esp/src/src/index.tsx
Tampilan Berkas 

@@ -0,0 +1,51 @@
 
+import * as React from "react";
 
+import * as ReactDOM from "react-dom";
 
+import { MuiThemeProvider, createMuiTheme } from "@material-ui/core";
 
+import CssBaseline from "@material-ui/core/CssBaseline";
 
+import deepOrange from "@material-ui/core/colors/deepOrange";
 
+import { Frame } from "./react/frame";
 
+import { globalKeyValStore } from "./KeyValStore";
 
+import { initSession } from "./Session";
 
+
 
+import "css!hpcc/css/ecl.css";
 
+import "css!dojo-themes/flat/flat.css";
 
+import "css!hpcc/css/hpcc.css";
 
+
 
+declare const dojoConfig: any;
 
+
 
+const baseHost = "";
 
+const hashNodes = location.hash.split("#");
 
+
 
+dojoConfig.urlInfo = {
 
+    baseHost,
 
+    pathname: location.pathname,
 
+    hash: hashNodes.length >= 2 ? hashNodes[1] : "",
 
+    resourcePath: baseHost + "/esp/files/eclwatch",
 
+    basePath: baseHost + "/esp/files",
 
+    fullPath: location.origin + "/esp/files"
 
+};
 
+
 
+const store = globalKeyValStore();
 
+store.set("", "", false, "HPCCApps", "ECLWatch");
 
+initSession();
 
+
 
+const theme = createMuiTheme({
 
+    palette: {
 
+        primary: {
 
+            light: "#8561c5",
 
+            main: "#673ab7",
 
+            dark: "#482880",
 
+            contrastText: "#fff"
 
+        },
 
+        secondary: deepOrange
 
+    }
 
+});
 
+
 
+ReactDOM.render(
 
+    <MuiThemeProvider theme={theme}>
 
+        <CssBaseline>
 
+            <Frame />
 
+        </CssBaseline>
 
+    </MuiThemeProvider>,
 
+    document.getElementById("app")
 
+);

+ 58 - 0
esp/src/src/react/dojoComponent.tsx
Tampilan Berkas 

@@ -0,0 +1,58 @@
 
+import * as React from "react";
 
+import { resolve } from "../Utility";
 
+
 
+export interface DojoProps {
 
+    widget: string;
 
+    params?: object;
 
+    onWidgetMount?: (widget) => void;
 
+}
 
+
 
+export interface DojoState {
 
+    placeholderID: string;
 
+    widgetID: string;
 
+}
 
+
 
+let g_id = 0;
 
+export class DojoComponent extends React.Component<DojoProps, DojoState> {
 
+
 
+    constructor(props: DojoProps) {
 
+        super(props);
 
+        const id = ++g_id;
 
+        this.state = {
 
+            placeholderID: `dojo-component-${id}`,
 
+            widgetID: `dojo-component-widget-${id}`
 
+        };
 
+    }
 
+
 
+    shouldComponentUpdate(nextProps: Readonly<DojoProps>, nextState: Readonly<DojoState>): boolean {
 
+        return false;
 
+    }
 
+
 
+    componentDidMount() {
 
+        resolve(this.props.widget, WidgetClass => {
 
+            const widget = new WidgetClass({
 
+                id: this.state.widgetID,
 
+                style: {
 
+                    margin: "0px",
 
+                    padding: "0px",
 
+                    width: "100%",
 
+                    height: "100%"
 
+                }
 
+            });
 
+            widget.placeAt(this.state.placeholderID, "replace");
 
+            widget.startup();
 
+            widget.resize();
 
+            if (widget.init) {
 
+                widget.init(this.props.params || {});
 
+            }
 
+            if (this.props.onWidgetMount) {
 
+                this.props.onWidgetMount(widget);
 
+            }
 
+        });
 
+    }
 
+
 
+    render() {
 
+        return <div id={this.state.placeholderID}>...loading {this.props.widget}...</div>;
 
+    }
 
+
 
+}

+ 38 - 0
esp/src/src/react/frame.tsx
Tampilan Berkas 

@@ -0,0 +1,38 @@
 
+import * as React from "react";
 
+import AppBar from "@material-ui/core/AppBar";
 
+import Toolbar from "@material-ui/core/Toolbar";
 
+import IconButton from "@material-ui/core/IconButton";
 
+import MenuIcon from "@material-ui/icons/Menu";
 
+import Container from "@material-ui/core/Container";
 
+import Typography from "@material-ui/core/Typography";
 
+import Box from "@material-ui/core/Box";
 
+import { DojoComponent } from "./dojoComponent";
 
+
 
+export function Frame() {
 
+    const divStyle = {
 
+        width: "100%",
 
+        height: "800px"
 
+    };
 
+    return (
 
+        <Container maxWidth="xl">
 
+            <AppBar title="ECL Watch" position="static">
 
+                <Toolbar>
 
+                    <IconButton edge="start" color="inherit" aria-label="menu">
 
+                        <MenuIcon />
 
+                    </IconButton>
 
+                    <Typography variant="h6">
 
+                        ECL Watch
 
+                    </Typography>
 
+                </Toolbar>
 
+            </AppBar>
 
+            <Box my={4}>
 
+                <div>
 
+                    <h1>WU Queries</h1>
 
+                    <div style={divStyle}>
 
+                        <DojoComponent widget="WUQueryWidget" params={{}} />
 
+                    </div>
 
+                </div>
 
+            </Box>
 
+        </Container>
 
+    );
 
+}

+ 1 - 0
esp/src/src/react/index.ts
Tampilan Berkas 

@@ -1,3 +1,4 @@
 
+export * from "./dojoComponent";
 
 export * from "./render";
 
 export * from "./wuStatus";
 
 export * from "./recentFilters";

+ 9 - 4
esp/src/webpack.config.js
Tampilan Berkas 

@@ -8,6 +8,14 @@ module.exports = function (env) {
 
     const isDev = env && env === "development";
 
     const isProduction = !isDev;
 
 
+    const entry = {
 
+        stub: "eclwatch/stub",
 
+        dojoLib: "lib/src/dojoLib"
 
+    };
 
+    if (!isProduction) {
 
+        entry.index = "lib/src/index";
 
+    }
 
+
 
     const plugins = [
 
         new DojoWebpackPlugin({
 
             loaderConfig: require("./eclwatch/dojoConfig"),
 
@@ -40,10 +48,7 @@ module.exports = function (env) {
 
 
     return {
 
         context: __dirname,
 
-        entry: {
 
-            stub: "eclwatch/stub",
 
-            dojoLib: "lib/src/dojoLib"
 
-        },
 
+        entry: entry,
 
         output: {
 
             filename: "[name].eclwatch.js",
 
             chunkFilename: "[name].eclwatch.js",