-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Expand file tree
/
Copy pathSidebar.tsx
More file actions
114 lines (100 loc) · 3.76 KB
/
Sidebar.tsx
File metadata and controls
114 lines (100 loc) · 3.76 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
import React, { useContext, useState } from "react";
import { EuiIcon, EuiSideNav, htmlIdGenerator } from "@elastic/eui";
import { Link, 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 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 baseUrl = `/p/${projectName}`;
const sideNav: React.ComponentProps<typeof EuiSideNav>['items'] = [
{
name: "Home",
id: htmlIdGenerator("basicExample")(),
renderItem: props => <Link {...props} to={`${baseUrl}/`} />,
items: [
{
name: dataSourcesLabel,
id: htmlIdGenerator("dataSources")(),
icon: <EuiIcon type={DataSourceIcon} />,
renderItem: props => <Link {...props} to={`${baseUrl}/data-source`} />,
isSelected: useMatchSubpath(`${baseUrl}/data-source`),
},
{
name: entitiesLabel,
id: htmlIdGenerator("entities")(),
icon: <EuiIcon type={EntityIcon} />,
renderItem: props => <Link {...props} to={`${baseUrl}/entity`} />,
isSelected: useMatchSubpath(`${baseUrl}/entity`),
},
{
name: featureViewsLabel,
id: htmlIdGenerator("featureView")(),
icon: <EuiIcon type={FeatureViewIcon} />,
renderItem: props => <Link {...props} to={`${baseUrl}/feature-view`} />,
isSelected: useMatchSubpath(`${baseUrl}/feature-view`),
},
{
name: featureServicesLabel,
id: htmlIdGenerator("featureService")(),
icon: <EuiIcon type={FeatureServiceIcon} />,
renderItem: props => <Link {...props} to={`${baseUrl}/feature-service`} />,
isSelected: useMatchSubpath(`${baseUrl}/feature-service`),
},
{
name: savedDatasetsLabel,
id: htmlIdGenerator("savedDatasets")(),
icon: <EuiIcon type={DatasetIcon} />,
renderItem: props => <Link {...props} to={`${baseUrl}/data-set`} />,
isSelected: useMatchSubpath(`${baseUrl}/data-set`),
},
],
},
];
return (
<EuiSideNav
aria-label="Project Level"
mobileTitle="Feast"
toggleOpenOnMobile={() => toggleOpenOnMobile()}
isOpenOnMobile={isSideNavOpenOnMobile}
items={sideNav}
/>
);
};
export default SideNav;