-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Expand file tree
/
Copy pathSidebar.tsx
More file actions
126 lines (112 loc) · 3.91 KB
/
Sidebar.tsx
File metadata and controls
126 lines (112 loc) · 3.91 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import React, { useContext, useState } from "react";
import { EuiIcon, EuiSideNav, htmlIdGenerator } from "@elastic/eui";
import { useNavigate, useParams } from "react-router-dom";
import { useMatchSubpath } from "../hooks/useMatchSubpath";
import useLoadRegistry from "../queries/useLoadRegistry";
import RegistryPathContext from "../contexts/RegistryPathContext";
import { DataSourceIcon } from "../graphics/DataSourceIcon";
import { EntityIcon } from "../graphics/EntityIcon";
import { FeatureViewIcon } from "../graphics/FeatureViewIcon";
import { FeatureServiceIcon } from "../graphics/FeatureServiceIcon";
import { DatasetIcon } from "../graphics/DatasetIcon";
const SideNav = () => {
const registryUrl = useContext(RegistryPathContext);
const { isSuccess, data } = useLoadRegistry(registryUrl);
const { projectName } = useParams();
const [isSideNavOpenOnMobile, setisSideNavOpenOnMobile] = useState(false);
const navigate = useNavigate();
const toggleOpenOnMobile = () => {
setisSideNavOpenOnMobile(!isSideNavOpenOnMobile);
};
const dataSourcesLabel = `Data Sources ${
isSuccess && data?.objects.dataSources
? `(${data?.objects.dataSources?.length})`
: ""
}`;
const entitiesLabel = `Entities ${
isSuccess && data?.objects.entities
? `(${data?.objects.entities?.length})`
: ""
}`;
const featureViewsLabel = `Feature Views ${
isSuccess && data?.mergedFVList && data?.mergedFVList.length > 0
? `(${data?.mergedFVList.length})`
: ""
}`;
const featureServicesLabel = `Feature Services ${
isSuccess && data?.objects.featureServices
? `(${data?.objects.featureServices?.length})`
: ""
}`;
const savedDatasetsLabel = `Datasets ${
isSuccess && data?.objects.savedDatasets
? `(${data?.objects.savedDatasets?.length})`
: ""
}`;
const sideNav = [
{
name: "Home",
id: htmlIdGenerator("basicExample")(),
onClick: () => {
navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/`);
},
items: [
{
name: dataSourcesLabel,
id: htmlIdGenerator("dataSources")(),
icon: <EuiIcon type={DataSourceIcon} />,
onClick: () => {
navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source`);
},
isSelected: useMatchSubpath("data-source"),
},
{
name: entitiesLabel,
id: htmlIdGenerator("entities")(),
icon: <EuiIcon type={EntityIcon} />,
onClick: () => {
navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/entity`);
},
isSelected: useMatchSubpath("entity"),
},
{
name: featureViewsLabel,
id: htmlIdGenerator("featureView")(),
icon: <EuiIcon type={FeatureViewIcon} />,
onClick: () => {
navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view`);
},
isSelected: useMatchSubpath("feature-view"),
},
{
name: featureServicesLabel,
id: htmlIdGenerator("featureService")(),
icon: <EuiIcon type={FeatureServiceIcon} />,
onClick: () => {
navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-service`);
},
isSelected: useMatchSubpath("feature-service"),
},
{
name: savedDatasetsLabel,
id: htmlIdGenerator("savedDatasets")(),
icon: <EuiIcon type={DatasetIcon} />,
onClick: () => {
navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-set`);
},
isSelected: useMatchSubpath("data-set"),
},
],
},
];
return (
<EuiSideNav
aria-label="Project Level"
mobileTitle="Feast"
toggleOpenOnMobile={() => toggleOpenOnMobile()}
isOpenOnMobile={isSideNavOpenOnMobile}
items={sideNav}
/>
);
};
export default SideNav;