Add sub-sections into NavDrawer (#30)

* - add sub-sections into NavDrawer * - update deps of NavDrawer memo * - address PR comments
caraml-dev · Aug 2, 2021 · 01d3203 · 01d3203
1 parent efe7cb3
commit 01d3203
Show file tree

Hide file tree

Showing 21 changed files with 221 additions and 74 deletions.
diff --git a/Makefile b/Makefile
@@ -96,7 +96,7 @@ build-docker:
 # Run recipes
 # ============================================================
 .PHONY: run
-run:
+run: build-api local-db
 	@echo "> Running application ..."
 	@./bin/${BIN_NAME}
 

diff --git a/api/models/application.go b/api/models/application.go
@@ -1,12 +1,52 @@
 package models
 
+import (
+	"database/sql/driver"
+	"encoding/json"
+	"errors"
+)
+
 type Application struct {
-	Id          Id     `json:"id"`
-	Name        string `json:"name"`
-	Description string `json:"description"`
-	Href        string `json:"href"`
-	IconName    string `json:"icon" gorm:"column:icon"`
-	UseProjects bool   `json:"use_projects"`
-	IsInBeta    bool   `json:"is_in_beta"`
-	IsDisabled  bool   `json:"is_disabled"`
+	Id          Id                 `json:"id"`
+	Name        string             `json:"name"`
+	Description string             `json:"description"`
+	Href        string             `json:"href"`
+	IconName    string             `json:"icon" gorm:"column:icon"`
+	UseProjects bool               `json:"use_projects"`
+	IsInBeta    bool               `json:"is_in_beta"`
+	IsDisabled  bool               `json:"is_disabled"`
+	Config      *ApplicationConfig `json:"config"`
+}
+
+type ApplicationConfig struct {
+	Sections []ApplicationSection `json:"sections"`
+}
+
+func (c ApplicationConfig) Value() (driver.Value, error) {
+	return json.Marshal(c)
+}
+
+func (c *ApplicationConfig) Scan(value interface{}) error {
+	b, ok := value.([]byte)
+	if !ok {
+		return errors.New("type assertion to []byte failed")
+	}
+	return json.Unmarshal(b, &c)
+}
+
+type ApplicationSection struct {
+	Name string `json:"name"`
+	Href string `json:"href"`
+}
+
+func (c ApplicationSection) Value() (driver.Value, error) {
+	return json.Marshal(c)
+}
+
+func (c *ApplicationSection) Scan(value interface{}) error {
+	b, ok := value.([]byte)
+	if !ok {
+		return errors.New("type assertion to []byte failed")
+	}
+	return json.Unmarshal(b, &c)
 }
diff --git a/db-migrations/7_application_config.down.sql b/db-migrations/7_application_config.down.sql
@@ -0,0 +1 @@
+ALTER TABLE applications DROP COLUMN config;
diff --git a/db-migrations/7_application_config.up.sql b/db-migrations/7_application_config.up.sql
@@ -0,0 +1,5 @@
+ALTER TABLE applications ADD config jsonb;
+
+UPDATE applications
+SET config = '{"sections": [{"name": "Routers", "href": "/routers"}, {"name": "Ensemblers", "href": "/ensemblers"}, {"name": "Ensembling Jobs", "href": "/jobs"}]}'
+WHERE name = 'Turing';
diff --git a/ui/packages/app/src/PrivateLayout.js b/ui/packages/app/src/PrivateLayout.js
@@ -16,9 +16,7 @@ export const PrivateLayout = Component => {
         <CurrentProjectContextProvider {...props}>
           <Header
             appIcon="graphApp"
-            onProjectSelect={projectId =>
-              navigate(`/projects/${projectId}`)
-            }
+            onProjectSelect={projectId => navigate(`/projects/${projectId}`)}
             docLinks={config.DOC_LINKS}
           />
           <div className="main-component-layout">

diff --git a/ui/packages/app/src/config.js b/ui/packages/app/src/config.js
@@ -15,9 +15,16 @@ const config = {
   TEAMS: (getEnv("REACT_APP_TEAMS") || []).map(team => team.trim()),
   STREAMS: (getEnv("REACT_APP_STREAMS") || []).map(stream => stream.trim()),
   DOC_LINKS: getEnv("REACT_APP_DOC_LINKS") || [
-    {"href":"https://github.com/gojek/merlin/blob/main/docs/getting-started/README.md","label":"Merlin User Guide"},
-    {"href":"https://github.com/gojek/turing","label":"Turing User Guide"},
-    {"href":"https://docs.feast.dev/user-guide/overview","label":"Feast User Guide"},
+    {
+      href:
+        "https://github.com/gojek/merlin/blob/main/docs/getting-started/README.md",
+      label: "Merlin User Guide"
+    },
+    { href: "https://github.com/gojek/turing", label: "Turing User Guide" },
+    {
+      href: "https://docs.feast.dev/user-guide/overview",
+      label: "Feast User Guide"
+    }
   ],
 
   FEAST_CORE_API: getEnv("REACT_APP_FEAST_CORE_API"),
@@ -28,7 +35,7 @@ const config = {
   FEAST_UI_HOMEPAGE: getEnv("REACT_APP_FEAST_UI_HOMEPAGE") || "/feast",
   KUBEFLOW_UI_HOMEPAGE: getEnv("REACT_APP_KUBEFLOW_UI_HOMEPAGE"),
   MERLIN_UI_HOMEPAGE: getEnv("REACT_APP_MERLIN_UI_HOMEPAGE") || "/merlin",
-  TURING_UI_HOMEPAGE: getEnv("REACT_APP_TURING_UI_HOMEPAGE") || "/turing",
+  TURING_UI_HOMEPAGE: getEnv("REACT_APP_TURING_UI_HOMEPAGE") || "/turing"
 };
 
 export default {

diff --git a/ui/packages/app/src/pages/project/Project.js b/ui/packages/app/src/pages/project/Project.js
@@ -59,9 +59,18 @@ const Project = () => {
 
   useEffect(() => {
     if (project) {
-      fetchEntities({ body: JSON.stringify({ "filter": { "project": project.name } }) });
-      fetchFeatureTables({ body: JSON.stringify({ "filter": { "project": project.name } }) });
-      fetchFeastIngestionJobs({ body: JSON.stringify({ "include_terminated":true, "project": project.name.replace(/-/g, "_") }) });
+      fetchEntities({
+        body: JSON.stringify({ filter: { project: project.name } })
+      });
+      fetchFeatureTables({
+        body: JSON.stringify({ filter: { project: project.name } })
+      });
+      fetchFeastIngestionJobs({
+        body: JSON.stringify({
+          include_terminated: true,
+          project: project.name.replace(/-/g, "_")
+        })
+      });
       fetchModels();
       fetchRouters();
     }
@@ -118,7 +127,10 @@ const Project = () => {
 
             <EuiFlexGroup>
               <EuiFlexItem grow={5}>
-                <ComingSoonPanel title="Health Monitoring" iconType="monitoringApp" />
+                <ComingSoonPanel
+                  title="Health Monitoring"
+                  iconType="monitoringApp"
+                />
               </EuiFlexItem>
               <EuiFlexItem grow={4}>
                 <ComingSoonPanel title="Error Summary" iconType="bug" />

diff --git a/ui/packages/app/src/pages/project/components/ComingSoonPanel.js b/ui/packages/app/src/pages/project/components/ComingSoonPanel.js
@@ -1,8 +1,5 @@
 import React from "react";
-import {
-  EuiCard,
-  EuiIcon,
-} from "@elastic/eui";
+import { EuiCard, EuiIcon } from "@elastic/eui";
 
 export const ComingSoonPanel = ({ title, iconType }) => {
   return (

diff --git a/ui/packages/app/src/pages/project/components/FeastJobsTable.js b/ui/packages/app/src/pages/project/components/FeastJobsTable.js
@@ -62,8 +62,11 @@ export const FeastJobsTable = ({ project, feastIngestionJobs }) => {
 
   const cellProps = item => ({
     style: { cursor: "pointer" },
-    onClick: () => window.location.href = `/feast/projects/${project.id}/jobs/${item.type}`,
+    onClick: () =>
+      (window.location.href = `/feast/projects/${project.id}/jobs/${item.type}`)
   });
 
-  return <EuiInMemoryTable items={items} columns={columns} cellProps={cellProps} />;
+  return (
+    <EuiInMemoryTable items={items} columns={columns} cellProps={cellProps} />
+  );
 };
diff --git a/ui/packages/app/src/pages/project/components/Instances.js b/ui/packages/app/src/pages/project/components/Instances.js
@@ -53,5 +53,7 @@ export const Instances = ({ project, feastIngestionJobs, models, routers }) => {
     }
   ];
 
-  return <Panel title="Instances" items={items} type="row" iconType="compute" />;
+  return (
+    <Panel title="Instances" items={items} type="row" iconType="compute" />
+  );
 };
diff --git a/ui/packages/app/src/pages/project/components/MerlinDeployments.js b/ui/packages/app/src/pages/project/components/MerlinDeployments.js
@@ -55,7 +55,9 @@ export const MerlinDeployments = ({ project, models }) => {
                 <EuiText size="s">{totalServing} active serving</EuiText>
               </>
             ),
-            onClick: () => { window.location.href = `/merlin/projects/${project.id}/models/${model.id}`; },
+            onClick: () => {
+              window.location.href = `/merlin/projects/${project.id}/models/${model.id}`;
+            },
             size: "s"
           };
         });

diff --git a/ui/packages/app/src/pages/project/components/MerlinDeploymentsTable.js b/ui/packages/app/src/pages/project/components/MerlinDeploymentsTable.js
@@ -28,7 +28,7 @@ export const MerlinDeploymentsTable = ({ project, models }) => {
                 environment_name: endpoint.environment_name,
                 endpoint: endpoint.url,
                 version_id: destination.version_endpoint.version_id,
-                version_endpoint_id: destination.version_endpoint.id,
+                version_endpoint_id: destination.version_endpoint.id
               });
             });
           });
@@ -58,8 +58,11 @@ export const MerlinDeploymentsTable = ({ project, models }) => {
 
   const cellProps = item => ({
     style: { cursor: "pointer" },
-    onClick: () => window.location.href = `/merlin/projects/${project.id}/models/${item.id}/versions/${item.version_id}/endpoints/${item.version_endpoint_id}/details`,
+    onClick: () =>
+      (window.location.href = `/merlin/projects/${project.id}/models/${item.id}/versions/${item.version_id}/endpoints/${item.version_endpoint_id}/details`)
   });
 
-  return <EuiInMemoryTable items={items} columns={columns} cellProps={cellProps} />;
+  return (
+    <EuiInMemoryTable items={items} columns={columns} cellProps={cellProps} />
+  );
 };
diff --git a/ui/packages/app/src/pages/project/components/ProjectSummary.js b/ui/packages/app/src/pages/project/components/ProjectSummary.js
@@ -1,9 +1,5 @@
 import React from "react";
-import {
-  EuiIcon,
-  EuiLink,
-  EuiText
-} from "@elastic/eui";
+import { EuiIcon, EuiLink, EuiText } from "@elastic/eui";
 // import { CollapsibleLabelsPanel } from "@gojek/mlp-ui";
 import { Panel } from "./Panel";
 
@@ -30,14 +26,23 @@ export const ProjectSummary = ({ project, environments }) => {
     {
       title: "Modified at",
       description: moment(project.updated_at).format("DD-MM-YYYY")
-    },
+    }
   ];
 
   const actions = (
     <EuiLink href={`/projects/${project.id}/settings`}>
-      <EuiText size="s"><EuiIcon type="arrowRight" /> Go to Project Settings</EuiText>
+      <EuiText size="s">
+        <EuiIcon type="arrowRight" /> Go to Project Settings
+      </EuiText>
     </EuiLink>
   );
 
-  return <Panel title="Project Info" items={items} actions={actions} iconType="machineLearningApp" />;
+  return (
+    <Panel
+      title="Project Info"
+      items={items}
+      actions={actions}
+      iconType="machineLearningApp"
+    />
+  );
 };
diff --git a/ui/packages/app/src/pages/project/components/Resources.js b/ui/packages/app/src/pages/project/components/Resources.js
@@ -49,7 +49,10 @@ export const Resources = ({
       size="s">
       Create FeatureTable
     </EuiContextMenuItem>,
-    <EuiContextMenuItem href={`${config.MERLIN_UI_HOMEPAGE}/projects/${project.id}`} key="model" size="s">
+    <EuiContextMenuItem
+      href={`${config.MERLIN_UI_HOMEPAGE}/projects/${project.id}`}
+      key="model"
+      size="s">
       Deploy model
     </EuiContextMenuItem>,
     <EuiContextMenuItem
@@ -95,14 +98,16 @@ export const Resources = ({
           Clockwork Pipelines
         </EuiLink>
       )
-    },
+    }
   ];
 
   const actions = (
     <EuiPopover
       button={
         <EuiLink onClick={onButtonClick}>
-          <EuiText size="s"><EuiIcon type="arrowRight" /> Create a new resource</EuiText>
+          <EuiText size="s">
+            <EuiIcon type="arrowRight" /> Create a new resource
+          </EuiText>
         </EuiLink>
       }
       isOpen={isPopoverOpen}
@@ -114,5 +119,12 @@ export const Resources = ({
     </EuiPopover>
   );
 
-  return <Panel title="Resources" items={items} actions={actions} iconType="beaker" />;
+  return (
+    <Panel
+      title="Resources"
+      items={items}
+      actions={actions}
+      iconType="beaker"
+    />
+  );
 };
diff --git a/ui/packages/app/src/pages/project/components/TuringRoutersTable.js b/ui/packages/app/src/pages/project/components/TuringRoutersTable.js
@@ -47,8 +47,11 @@ export const TuringRoutersTable = ({ project, routers }) => {
 
   const cellProps = item => ({
     style: { cursor: "pointer" },
-    onClick: () => window.location.href = `/turing/projects/${project.id}/routers/${item.id}/details`,
+    onClick: () =>
+      (window.location.href = `/turing/projects/${project.id}/routers/${item.id}/details`)
   });
 
-  return <EuiInMemoryTable items={items} columns={columns} cellProps={cellProps} />;
+  return (
+    <EuiInMemoryTable items={items} columns={columns} cellProps={cellProps} />
+  );
 };
diff --git a/ui/packages/app/src/services/merlin/Model.js b/ui/packages/app/src/services/merlin/Model.js
@@ -4,7 +4,7 @@ export const MODEL_TYPE_NAME_MAP = {
   sklearn: "SKLearn",
   tensorflow: "Tensorflow",
   xgboost: "XGBoost",
-  
+
   pyfunc: "Pyfunc",
   pyfunc_v2: "Pyfunc",
   custom: "Custom"

diff --git a/ui/packages/lib/src/components/collapsible_labels_panels/CollapsibleLabelsPanel.js b/ui/packages/lib/src/components/collapsible_labels_panels/CollapsibleLabelsPanel.js
@@ -1,9 +1,5 @@
 import React from "react";
-import {
-  EuiBadge,
-  EuiLink,
-  EuiBadgeGroup,
-} from "@elastic/eui";
+import { EuiBadge, EuiLink, EuiBadgeGroup } from "@elastic/eui";
 import EllipsisText from "react-ellipsis-text";
 import useCollapse from "react-collapsed";
 

diff --git a/ui/packages/lib/src/components/header/Header.js b/ui/packages/lib/src/components/header/Header.js
@@ -22,7 +22,7 @@ export const Header = ({
   userMenuItems,
   helpLink,
   docLinks,
-  homepage,
+  homepage
 }) => {
   const { state, onLogout } = useContext(AuthContext);
   const { projects } = useContext(ProjectsContext);

diff --git a/ui/packages/lib/src/components/multi_steps_form/StepsWizardHorizontal.js b/ui/packages/lib/src/components/multi_steps_form/StepsWizardHorizontal.js
@@ -44,7 +44,9 @@ export const StepsWizardHorizontal = ({
         <EuiSpacer size="l" />
 
         <EuiFlexItem>
-          <StepContent width={steps[currentStep].width}>{steps[currentStep].children}</StepContent>
+          <StepContent width={steps[currentStep].width}>
+            {steps[currentStep].children}
+          </StepContent>
         </EuiFlexItem>
 
         <EuiSpacer size="l" />