ADDON-34283: ucc_ui_lib: updated configs and structure to have single…

… entry point js and template file
splunk · Mar 2, 2021 · e04d1db · e04d1db
1 parent 6328fdf
commit e04d1db
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 146 deletions.
diff --git a/...es/splunk/appserver/templates/inputs.html → ...rces/splunk/appserver/templates/base.html b/...es/splunk/appserver/templates/inputs.html → ...rces/splunk/appserver/templates/base.html
@@ -8,7 +8,7 @@
 <head>
     <meta charset="utf-8">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <title>${_('Inputs')}</title>
+    <title>${_('Loading')}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="apple-touch-icon" href="apple-touch-icon.png">
 </head>
@@ -22,7 +22,7 @@
     </script>
 
     <%
-    page_path = "/static/app/" + app_name + "/js/build/" + page + ".js"
+    page_path = "/static/app/" + app_name + "/js/build/entry_page.js"
     %>
 
     <script src="${make_url(page_path)}"></script>

diff --git a/...ucc_framework/ucc_ui_lib/src/main/resources/splunk/appserver/templates/configuration.html b/...ucc_framework/ucc_ui_lib/src/main/resources/splunk/appserver/templates/configuration.html
diff --git a/...cc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/views/configuration.xml b/...cc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/views/configuration.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0"?>
-<view template="${package.name}:/templates/configuration.html" type="html" isDashboard="False">
+<view template="${package.name}:/templates/base.html" type="html" isDashboard="False">
 	<label>Configuration</label>
 </view>
diff --git a/...dd_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/views/inputs.xml b/...dd_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/views/inputs.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0"?>
-<view template="${package.name}:/templates/inputs.html" type="html" isDashboard="False">
+<view template="${package.name}:/templates/base.html" type="html" isDashboard="False">
 	<label>Inputs</label>
 </view>
diff --git a/...webapp/pages/configuration/StartStyles.js → ..._lib/src/main/webapp/pages/StartStyles.js b/...webapp/pages/configuration/StartStyles.js → ..._lib/src/main/webapp/pages/StartStyles.js
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/configuration/index.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/configuration/index.jsx
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+import layout from '@splunk/react-page';
+import { SplunkThemeProvider } from '@splunk/themes';
+
+import { defaultTheme } from '@splunk/splunk-utils/themes';
+
+import TestComponent from '../components/TestComponent';
+import { StyledContainer, StyledGreeting } from './StartStyles';
+
+const defaultThemeSplunkThemeProviderMap = {
+    enterprise: {
+        family: 'enterprise',
+        colorScheme: 'light',
+        density: 'comfortable',
+    },
+    enterpriseDark: {
+        family: 'enterprise',
+        colorScheme: 'dark',
+        density: 'comfortable',
+    },
+    lite: {
+        family: 'enterprise',
+        colorScheme: 'light',
+        density: 'comfortable',
+    },
+};
+
+const themeProviderSettings =
+    defaultThemeSplunkThemeProviderMap[defaultTheme()] ||
+    defaultThemeSplunkThemeProviderMap.enterprise;
+
+const url = window.location.pathname;
+const urlParts = url.substring(1).split('/');
+const page = urlParts[urlParts.length - 1];
+
+if (page === 'inputs') {
+    layout(
+        <SplunkThemeProvider {...themeProviderSettings}>
+            <StyledContainer>
+                <StyledGreeting>Hello, from inside Inputs!</StyledGreeting>
+                <div>Your component will appear below.</div>
+                <TestComponent name="from inside TestComponent" />
+            </StyledContainer>
+        </SplunkThemeProvider>,
+        { pageTitle: 'Inputs' }
+    );
+} else if (page === 'configuration') {
+    layout(
+        <SplunkThemeProvider {...themeProviderSettings}>
+            <StyledContainer>
+                <StyledGreeting>Hello, from inside Configuration!</StyledGreeting>
+                <div>Your component will appear below.</div>
+                <TestComponent name="from inside TestComponent" />
+            </StyledContainer>
+        </SplunkThemeProvider>,
+        { pageTitle: 'Configuration' }
+    );
+}
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/inputs/StartStyles.js b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/inputs/StartStyles.js
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/inputs/index.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/inputs/index.jsx
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/webpack.config.js b/splunk_add_on_ucc_framework/ucc_ui_lib/webpack.config.js
@@ -4,20 +4,11 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const webpackMerge = require('webpack-merge');
 const baseConfig = require('@splunk/webpack-configs/base.config').default;
 
-// Set up an entry config by iterating over the files in the pages directory.
-const entries = fs
-    .readdirSync(path.join(__dirname, 'src/main/webapp/pages'))
-    .filter((pageFile) => !/^\./.test(pageFile))
-    .reduce((accum, page) => {
-        accum[page] = path.join(__dirname, 'src/main/webapp/pages', page);
-        return accum;
-    }, {});
-
 module.exports = webpackMerge(baseConfig, {
-    entry: entries,
+    entry: path.join(__dirname, 'src/main/webapp/pages/entry_page'),
     output: {
         path: path.join(__dirname, 'stage/appserver/static/js/build'),
-        filename: '[name].js',
+        filename: 'entry_page.js',
     },
     plugins: [
         new CopyWebpackPlugin([