Merge pull request #48 from Flared/mahinse/create_single_react_package

Single react components package with multiple entry points instead of multiple packages for each components

packages/flare/package.json

@@ -12,8 +12,7 @@
     "stylelint": "stylelint \"src/**/*.{js,jsx}\" --config stylelint.config.js"
   },
   "dependencies": {
-    "@flare/configuration-screen": "^0.0.1",
-    "@flare/status-screen": "^0.0.1"
+    "@flare/react-components": "^0.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.2.0",

packages/flare/src/main/webapp/pages/configuration/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import layout from '@splunk/react-page';
-import ConfigurationScreen from '@flare/configuration-screen';
+import ConfigurationScreen from '@flare/react-components/configuration-screen';
 import { getUserTheme } from '@splunk/splunk-utils/themes';
 
 getUserTheme()

packages/flare/src/main/webapp/pages/status/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import layout from '@splunk/react-page';
-import StatusScreen from '@flare/status-screen';
+import StatusScreen from '@flare/react-components/status-screen';
 import { getUserTheme } from '@splunk/splunk-utils/themes';
 
 getUserTheme()

packages/configuration-screen/package.json → packages/react-components/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@flare/configuration-screen",
+  "name": "@flare/react-components",
   "version": "0.0.1",
   "license": "UNLICENSED",
   "scripts": {
@@ -11,7 +11,10 @@
     "start": "webpack --watch",
     "stylelint": "stylelint \"src/**/*.{js,jsx}\" --config stylelint.config.js"
   },
-  "main": "ConfigurationScreen.js",
+  "exports": {
+    "./configuration-screen": "./ConfigurationScreen.js",
+    "./status-screen": "./StatusScreen.js"
+  },
   "dependencies": {
     "@splunk/react-ui": "^4.30.0",
     "@splunk/themes": "^0.18.0"

packages/configuration-screen/src/ConfigurationScreen.css → packages/react-components/src/ConfigurationScreen.css

@@ -24,6 +24,7 @@
     flex-direction: column;
     flex: content;
     align-items: flex-start;
+    gap: 2rem;
 }
 
 .link {

packages/status-screen/src/StatusScreen.tsx → packages/react-components/src/StatusScreen.tsx

@@ -1,10 +1,14 @@
 import React, { useEffect, FC, useState } from 'react';
 import './global.css';
 import './StatusScreen.css';
-import { fetchTenantId, fetchVersionName, fetchCollectionItems } from './utils/setupConfiguration';
+import {
+    fetchTenantId,
+    fetchVersionName,
+    fetchCollectionItems,
+    fetchCurrentIndexName,
+} from './utils/setupConfiguration';
 import { SplunkCollectionItem } from './models/splunk';
 import Button from './components/Button';
-import { fetchCurrentIndexName } from '../../configuration-screen/src/utils/setupConfiguration';
 
 const COLLECTION_KEYS_NEXT_PREFIX = 'next_';
 

packages/configuration-screen/src/components/ConfigurationGlobalStep.css → packages/react-components/src/components/ConfigurationGlobalStep.css

@@ -12,7 +12,7 @@
     flex-direction: column;
     width: 100%;
     align-items: flex-start;
-    margin-top: 1rem;
+    margin-top: 2rem;
     gap: 1rem;
 }
 

packages/status-screen/src/global.css → packages/react-components/src/global.css

@@ -76,7 +76,7 @@ input {
 input {
     border: 1px solid var(--secondary-text-color);
     border-radius: 40px;
-    margin-top: 1rem;
+    margin-top: 0.5rem;
 }
 
 input:hover {
@@ -104,6 +104,7 @@ h5 {
     color: var(--text-color);
     text-align: start;
     font-weight: normal;
+    margin: 0;
 }
 
 .parent-container {

packages/configuration-screen/src/models/splunk.ts → packages/react-components/src/models/splunk.ts

@@ -11,6 +11,12 @@ export interface SplunkPassword {
     };
 }
 
+export interface SplunkCollectionItem {
+    key: string;
+    value: string;
+    user: string;
+}
+
 export interface SplunkIndex {
     name: string;
 }
@@ -73,6 +79,7 @@ export interface SplunkService {
     apps: () => SplunkAppsAccessor;
     storagePasswords: () => SplunkStoragePasswordAccessors;
     indexes: () => SplunkIndexesAccessor;
+    get: (splunkUrlPath: string, data: any) => void;
     post: (
         splunkUrlPath: string,
         data: any,

packages/configuration-screen/src/utils/setupConfiguration.ts → packages/react-components/src/utils/setupConfiguration.ts

@@ -3,6 +3,7 @@ import { Tenant } from '../models/flare';
 import {
     PasswordKeys,
     SplunkApplicationNamespace,
+    SplunkCollectionItem,
     SplunkService,
     SplunkStoragePasswordAccessors,
 } from '../models/splunk';
@@ -117,6 +118,27 @@ async function saveConfiguration(
     await reloadApp(service);
 }
 
+async function fetchCollectionItems(): Promise<SplunkCollectionItem[]> {
+    const service = createService();
+    return promisify(service.get)('storage/collections/data/event_ingestion_collection/', {})
+        .then((data: any) => {
+            const items: SplunkCollectionItem[] = [];
+            if (data.data) {
+                data.data.forEach((element) => {
+                    items.push({
+                        key: element._key,
+                        value: element.value,
+                        user: element._user,
+                    });
+                });
+            }
+            return items;
+        })
+        .catch(() => {
+            return [];
+        });
+}
+
 async function fetchPassword(passwordKey: string): Promise<string> {
     const service = createService();
     const storagePasswords = await promisify(service.storagePasswords().fetch)();
@@ -207,6 +229,11 @@ async function fetchCurrentIndexName(): Promise<string> {
     );
 }
 
+async function fetchVersionName(): Promise<string> {
+    const service = createService();
+    return getConfigurationStanzaValue(service, 'app', 'launcher', 'version', 'unknown');
+}
+
 export {
     saveConfiguration,
     fetchUserTenants,
@@ -219,4 +246,6 @@ export {
     createFlareIndex,
     fetchAvailableIndexNames,
     fetchCurrentIndexName,
+    fetchVersionName,
+    fetchCollectionItems,
 };

packages/configuration-screen/webpack.config.js → packages/react-components/webpack.config.js

@@ -5,6 +5,7 @@ const baseComponentConfig = require('@splunk/webpack-configs/component.config').
 module.exports = webpackMerge(baseComponentConfig, {
     entry: {
         ConfigurationScreen: path.join(__dirname, 'src/ConfigurationScreen.tsx'),
+        StatusScreen: path.join(__dirname, 'src/StatusScreen.tsx'),
     },
     output: {
         path: path.join(__dirname),