Integrate kanri directly into ddf-ui

 - Integrates kanri directly into ddf-ui, incorporating the branding that was previously an extension point.
 - Removes code around mocks for now

Author: andrewkfiedler

ui-frontend/packages/admin/package.json

@@ -13,24 +13,59 @@
     "node": "20.x.x"
   },
   "devDependencies": {
+    "@connexta/ace": "git+https://github.com/connexta/ace.git#20166c642d60c5c67626f89108c6b72d1451e62f",
+    "@types/dropzone": "5.0.6",
+    "@types/lodash": "4.17.16",
     "@types/react": "16.9.34",
     "@types/react-dom": "16.9.7",
-    "@types/styled-components": "5.1.0",
-    "@connexta/ace": "git+https://github.com/connexta/ace.git#20166c642d60c5c67626f89108c6b72d1451e62f",
+    "@types/react-redux": "5.0.28",
+    "@types/react-router-dom": "5.1.5",
+    "@types/react-select": "3.0.12",
+    "@types/redux-immutable": "3.0.43",
+    "@types/styled-components": "4.0.3",
+    "@types/traverse": "0.6.37",
+    "@types/validator": "13.12.2",
     "npm": "10.9.2"
   },
   "dependencies": {
-    "@connexta/kanri": "0.0.18",
     "@material-ui/core": "4.9.12",
     "@material-ui/icons": "4.9.1",
     "@material-ui/lab": "4.0.0-alpha.51",
     "@material-ui/pickers": "3.2.10",
+    "ace-builds": "1.39.0",
+    "autoprefixer": "10.4.20",
+    "clsx": "1.2.1",
+    "dropzone": "5.5.1",
+    "formik": "2.3.3",
+    "fuse.js": "3.4.5",
+    "golden-layout": "1.5.9",
+    "immutable": "3.8.2",
+    "lodash": "4.17.21",
+    "moment": "2.29.4",
     "notistack": "0.9.11",
+    "ohash": "2.0.11",
+    "postcss-focus-visible": "8.0.2",
+    "prop-types": "15.7.2",
+    "querystring": "0.2.0",
     "react": "16.13.1",
+    "react-ace": "14.0.1",
     "react-dom": "16.13.1",
-    "react-select": "3.1.0",
+    "react-redux": "5.1.1",
     "react-router-dom": "5.1.2",
-    "styled-components": "5.1.0"
+    "react-select": "3.1.0",
+    "react-visibility-sensor": "5.0.2",
+    "redux": "3.7.2",
+    "redux-immutable": "3.1.0",
+    "redux-thunk": "2.4.2",
+    "scroll-into-view-if-needed": "2.2.20",
+    "styled-components": "5.1.0",
+    "tailwindcss": "3.4.17",
+    "traverse": "0.6.11",
+    "type-fest": "4.37.0",
+    "typescript": "5.8.2",
+    "url": "0.11.0",
+    "validator": "13.12.0",
+    "yup": "1.4.0"
   },
   "scripts": {
     "start": "ace start",
@@ -43,6 +78,6 @@
     "target/webapp",
     "src/main/resources"
   ],
-  "main": "src/components/entry/entry",
+  "main": "src/main/webapp/components/entry/default-entry.tsx",
   "context-path": "/admin"
 }

ui-frontend/packages/admin/postcss.config.js

@@ -1,2 +1,9 @@
-const upstreamConfig = require('@connexta/kanri/postcss.config.js')
-module.exports = upstreamConfig
+const tailwindcss = require('tailwindcss')
+const postcssFocusVisible = require('postcss-focus-visible')
+module.exports = {
+  plugins: [
+    tailwindcss('./tailwind.config.js'),
+    postcssFocusVisible(),
+    require('autoprefixer'),
+  ],
+}

ui-frontend/packages/admin/src/components/entry/entry.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react'
+import { COMMANDS } from '../fetch/fetch'
+import Paper from '@material-ui/core/Paper'
+import Grid from '@material-ui/core/Grid'
+import Typography from '@material-ui/core/Typography'
+import { useAppRootContext } from '../app-root/app-root.pure'
+import Button from '@material-ui/core/Button'
+import CloseIcon from '@material-ui/icons/Close'
+
+const ALERTS_DISMISS_URL =
+  '/admin/jolokia/exec/org.codice.ddf.ui.admin.api:type=AdminAlertMBean/dismissAlert'
+
+const createPayload = (alertId: string) => {
+  return {
+    type: 'EXEC',
+    mbean: 'org.codice.ddf.ui.admin.api:type=AdminAlertMBean',
+    operation: 'dismissAlert',
+    arguments: [alertId],
+  }
+}
+
+export const Alerts = () => {
+  const { alerts, fetchAlerts } = useAppRootContext()
+  const [loading, setLoading] = React.useState(false)
+  return (
+    <>
+      <Typography variant="h4" align="center" style={{ marginBottom: '20px' }}>
+        Alerts
+      </Typography>
+      <Grid
+        container
+        direction="column"
+        wrap="nowrap"
+        spacing={3}
+        style={{ width: '100%', height: '100%', overflow: 'auto' }}
+      >
+        {alerts.map((alert) => {
+          return (
+            <Grid item key={alert.id}>
+              <Paper style={{ padding: '20px' }}>
+                <Grid container direction="column" spacing={3}>
+                  <Grid item>
+                    <Grid container justify="space-between" alignItems="center">
+                      <Grid item>
+                        <Typography variant="h6">{alert.title}</Typography>
+                      </Grid>
+                      <Grid item>
+                        {alert.id ? (
+                          <Button
+                            disabled={loading}
+                            color="secondary"
+                            onClick={async () => {
+                              if (alert.id === undefined) {
+                                return
+                              }
+                              setLoading(true)
+                              await COMMANDS.FETCH(ALERTS_DISMISS_URL, {
+                                method: 'POST',
+                                body: JSON.stringify(createPayload(alert.id)),
+                              })
+                              await fetchAlerts()
+                              setLoading(false)
+                            }}
+                          >
+                            <CloseIcon />
+                          </Button>
+                        ) : null}
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                  {alert.id ? (
+                    <Grid item>
+                      <Typography>
+                        Dismiss this alert at your own risk. This alert may be
+                        repopulated if the issue persists.
+                      </Typography>
+                      <Typography>
+                        Host: {alert.hostName} : {alert.hostAddress}
+                      </Typography>
+                    </Grid>
+                  ) : null}
+
+                  {alert.details.map((detail, index) => {
+                    return (
+                      <Grid item key={index}>
+                        <Typography>{detail}</Typography>
+                      </Grid>
+                    )
+                  })}
+                </Grid>
+              </Paper>
+            </Grid>
+          )
+        })}
+      </Grid>
+    </>
+  )
+}

ui-frontend/packages/admin/src/main/webapp/components/alerts/alerts.tsx

@@ -0,0 +1,157 @@
+import * as React from 'react'
+import { RouteChildrenProps } from 'react-router'
+import { setType } from '../../typescript/hooks'
+
+export type PlatformConfigType = {
+  background: string
+  color: string
+  favIcon: string
+  footer: string
+  header: string
+  productImage: string
+  systemUsageMessage?: string
+  systemUsageOncePerSession?: boolean
+  systemUsageTitle?: string
+  timeout: number
+  title: string
+  vendorImage: string
+  version: string
+}
+
+export type AdminConfigType = {
+  branding: string
+  disabledInstallerApps: string
+}
+
+export type AlertType = {
+  alertAttribute?: string
+  alertLevel?: string
+  alertPattern?: string
+  count?: number
+  createddate?: string
+  'event.topics'?: string
+  details: string[]
+  hostAddress?: string
+  hostName?: string
+  id?: string
+  'last-updated'?: string
+  noticeTime?: string
+  priority?: number
+  source?: string
+  status?: string
+  timestamp?: number
+  title: string
+  type?: string
+}
+
+export type ModuleType = {
+  iframeLocation: string
+  name: string
+  active: boolean
+  cssLocation: string
+  id: string
+  jsLocation: string
+}
+
+export type ApplicationType = {
+  name: string
+  description: string
+}
+
+export type ApplicationTheme = 'light' | 'dark'
+
+export type MetatypeType = {
+  value: string[]
+  cardinality: number
+  defaultValue: string[]
+  description: string | null
+  id: string
+  name: string
+  optionLabels: string[]
+  optionValues: string[]
+  type: number
+  touched: boolean
+  initialTouched: boolean
+}
+
+export type ExistingConfigurationType = {
+  bundle: number
+  bundle_location: string
+  bundle_name: string
+  enabled: boolean
+  fpid?: string
+  id: string
+  name: string
+  properties: {
+    [key: string]: string | boolean | number | string[] | boolean[] | number[]
+  }
+  operation_actions?: any[] // these appear unique to source configurations
+  report_actions?: any[] // these appear unique to source configurations
+  // Let the child access parent info like metatype (we do this in our parsing, it's not a default prop from backend)
+  service?: ConfigurationType
+}
+
+export type ConfigurationType = {
+  configurations?: ExistingConfigurationType[]
+  factory: boolean
+  id: string
+  fpid?: string
+  metatype: MetatypeType[]
+  name: string
+}
+
+export type FeatureType = {
+  name: string
+  repository: string
+  status: 'Uninstalled' | 'Installed'
+  version: string
+}
+
+// create context with no upfront defaultValue
+// without having to do undefined check all the time
+export function createCtx<A>() {
+  const ctx = React.createContext<A | undefined>(undefined)
+  function useCtx() {
+    const c = React.useContext(ctx)
+    if (!c) throw new Error('useCtx must be inside a Provider with a value')
+    return c
+  }
+  return [useCtx, ctx.Provider] as const // make TypeScript infer a tuple, not an array of union types
+}
+
+export type ExtensionType =
+  | {
+      links?: {
+        name: string
+        shortName: string
+        url: string
+        Icon: any
+        content: (props: any) => JSX.Element
+      }[]
+      handleModuleRouting?: (moduleId: string) => JSX.Element | undefined
+    }
+  | undefined
+
+export const [useAppRootContext, AppRootContextProvider] = createCtx<{
+  platformConfig: PlatformConfigType
+  adminConfig: AdminConfigType
+  alerts: AlertType[]
+  fetchAlerts: () => Promise<void>
+  sourceConfigurations: ConfigurationType[]
+  fetchSourceConfigurations: () => Promise<void>
+  loadingSourceConfigurations: boolean
+  isSourceFactoryId: (fpid?: string) => boolean
+  sourceFactoryIds: string[]
+  isSourceConfiguration: (configuration: ExistingConfigurationType) => boolean
+  modules: ModuleType[]
+  fetchModules: () => Promise<void>
+  applications: ApplicationType[]
+  fetchApplications: () => Promise<void>
+  theme: ApplicationTheme
+  setTheme: setType<ApplicationTheme>
+  extension?: ExtensionType
+}>()
+
+export const [useRouteContext, RouteContextProvider] = createCtx<{
+  routeProps: RouteChildrenProps
+}>()