Skip to content

Commit

Permalink
Updated main desktop navigation sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@rudyryk
rudyryk committed Jul 21, 2024
1 parent be92244 commit f892e08
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 93 deletions.
5 changes: 5 additions & 0 deletions application/assets/less/components/navbar-desktop.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,9 @@
background-color: rgba(255, 255, 255, 0.05);
font-weight: 500;
}

.ant-menu-item-divider {
background-color: rgba(255, 255, 255, 0.15);
margin: 0.5rem 1rem;
}
}
98 changes: 15 additions & 83 deletions application/components/layouts/DesktopNavbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,89 +9,18 @@ import VersionInfo from "@/components/general/VersionInfo";
import { useCurrentRoute } from "@/components/router/Router";
import { Auth, currentUser } from "@/services/auth";
import settingsMenu from "@/services/settingsMenu";
import {
EndpointsOutlinedIcon,
TerminalOutlinedIcon,
SettingOutlinedIcon,
TransferInOutlinedIcon,
HelpOutlinedIcon,
WorkbooksOutlinedIcon
} from "@/theme/icons";
import logoUrl from "@/assets/images/icon-80.png";

// const { Text } = Typography;

const ReportOutlinedIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-report"
width="24" height="24" viewBox="0 0 24 24"
strokeWidth="1.5" stroke="#ffffff" fill="none"
strokeLinecap="round" strokeLinejoin="round"
>
<path d="M3 12m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
<path d="M9 8m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
<path d="M15 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
<path d="M4 20l14 0"></path>
</svg>
)
}

const TerminalOutlinedIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-terminal-2"
width="24" height="24" viewBox="0 0 24 24"
strokeWidth="1.5" stroke="#ffffff" fill="none"
strokeLinecap="round" strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M8 9l3 3l-3 3" />
<line x1="13" y1="15" x2="16" y2="15" />
<rect x="3" y="4" width="18" height="16" rx="2" />
</svg>
)
}

const SettingOutlinedIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-settings"
width="24" height="24" viewBox="0 0 24 24"
strokeWidth="1.5" stroke="#ffffff" fill="none"
strokeLinecap="round" strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
<circle cx="12" cy="12" r="3" />
</svg>
)
}

const TransferInOutlinedIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-transfer-in"
width="24" height="24" viewBox="0 0 24 24"
strokeWidth="1.5" stroke="#ffffff" fill="none"
strokeLinecap="round" strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 18v3h16v-14l-8 -4l-8 4v3"></path>
<path d="M4 14h9"></path>
<path d="M10 11l3 3l-3 3"></path>
</svg>
)
}

const HelpOutlinedIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-help"
width="24" height="24" viewBox="0 0 24 24"
strokeWidth="1.5" stroke="#ffffff" fill="none"
strokeLinecap="round" strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M12 17l0 .01"></path>
<path d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4"></path>
</svg>
)
}

function useNavbarActiveState() {
const currentRoute = useCurrentRoute();
return useMemo(
Expand Down Expand Up @@ -170,7 +99,7 @@ export default function DesktopNavbar() {
},
(
getMenuItem(
<Link href="streams">Streams</Link>,
<Link href="streams">Data streams</Link>,
"streams",
<TransferInOutlinedIcon aria-label="Streams navigation button" />
)
Expand All @@ -187,17 +116,20 @@ export default function DesktopNavbar() {
getMenuItem(
<Link href="queries">Queries</Link>,
"queries",
<TerminalOutlinedIcon aria-label="Queries navigation button" />
<WorkbooksOutlinedIcon aria-label="Queries navigation button" />
)
),
(
// currentUser.hasPermission("list_dashboards") &&
getMenuItem(
(<Link href="widgets">Widgets</Link>),
(<Link href="widgets">Endpoints</Link>),
"widgets",
<ReportOutlinedIcon aria-label="Widgets navigation button" />
<EndpointsOutlinedIcon aria-label="Widgets navigation button" />
)
),
{
type: "divider"
},
(
firstSettingsTab && getMenuItem(
<Link href={firstSettingsTab.path}>Settings</Link>,
Expand Down
8 changes: 1 addition & 7 deletions application/pages/queries-list/QueriesList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import type { TabsProps } from "antd";
import navigateTo from "@/components/router/navigateTo";
import routeWithUserSession from "@/components/router/routeWithUserSession";
import Link from "@/components/general/Link";
// import PageHeader from "@/components/general/PageHeader";
import Paginator from "@/components/general/Paginator";
import DynamicComponent from "@/components/general/DynamicComponent";
import { QueryTagsControl } from "@/components/tags/TagsControl";
Expand All @@ -15,14 +14,9 @@ import { wrap as itemsList, ControllerType } from "@/components/items-list/Items
import useItemsListExtraActions from "@/components/items-list/hooks/useItemsListExtraActions";
import { ResourceItemsSource } from "@/components/items-list/classes/ItemsSource";
import { UrlStateStorage } from "@/components/items-list/classes/StateStorage";

// import * as Sidebar from "@/components/items-list/components/Sidebar";
import ItemsTable, { Columns } from "@/components/items-list/components/ItemsTable";

// import Layout from "@/components/layouts/ContentWithSidebar";

import { Query } from "@/services/query";
// import { currentUser } from "@/services/auth";
import location from "@/services/location";
import routes from "@/services/routes";

Expand Down Expand Up @@ -72,7 +66,7 @@ const listColumns = [
width: null,
}),

Columns.custom((text, item) => item.user.name, {
Columns.custom((text: String, item: { user: { name: String; }; }) => item.user.name, {
title: "Created By",
// width: "1%"
}),
Expand Down
7 changes: 4 additions & 3 deletions application/services/query.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { Parameter, createParameter } from "./parameters";
import { currentUser } from "./auth";
import QueryResult from "./query-result";
import localOptions from "@/lib/localOptions";
import { List } from "lodash";

Mustache.escape = identity; // do not html-escape values

Expand All @@ -43,10 +44,10 @@ export type QueryType = {
// ...
}

function collectParams(parts) {
let parameters = [];
function collectParams(parts: any[][]) {
let parameters: Array<any> = [];

parts.forEach(part => {
parts.forEach((part: any[]) => {
if (part[0] === "name" || part[0] === "&") {
parameters.push(part[1].split(".")[0]);
} else if (part[0] === "#") {
Expand Down
108 changes: 108 additions & 0 deletions application/theme/icons.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
export const ReportOutlinedIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-report"
width="24" height="24" viewBox="0 0 24 24"
strokeWidth="1.5" stroke="#ffffff" fill="none"
strokeLinecap="round" strokeLinejoin="round"
>
<path d="M3 12m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
<path d="M9 8m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
<path d="M15 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
<path d="M4 20l14 0"></path>
</svg>
)
}

export const TerminalOutlinedIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-terminal-2"
width="24" height="24" viewBox="0 0 24 24"
strokeWidth="1.5" stroke="#ffffff" fill="none"
strokeLinecap="round" strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M8 9l3 3l-3 3" />
<line x1="13" y1="15" x2="16" y2="15" />
<rect x="3" y="4" width="18" height="16" rx="2" />
</svg>
)
}

export const SettingOutlinedIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-settings"
width="24" height="24" viewBox="0 0 24 24"
strokeWidth="1.5" stroke="#ffffff" fill="none"
strokeLinecap="round" strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
<circle cx="12" cy="12" r="3" />
</svg>
)
}

export const TransferInOutlinedIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-transfer-in"
width="24" height="24" viewBox="0 0 24 24"
strokeWidth="1.5" stroke="#ffffff" fill="none"
strokeLinecap="round" strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 18v3h16v-14l-8 -4l-8 4v3"></path>
<path d="M4 14h9"></path>
<path d="M10 11l3 3l-3 3"></path>
</svg>
)
}

export const EndpointsOutlinedIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-code"
width="24" height="24" viewBox="0 0 24 24"
strokeWidth="1.5" stroke="#ffffff" fill="none"
strokeLinecap="round" strokeLinejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M7 8l-4 4l4 4" />
<path d="M17 8l4 4l-4 4" />
<path d="M14 4l-4 16" />
</svg>
)
}

export const WorkbooksOutlinedIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-code"
width="24" height="24" viewBox="0 0 24 24"
strokeWidth="1.5" stroke="#ffffff" fill="none"
strokeLinecap="round" strokeLinejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18" />
<path d="M13 8l2 0" />
<path d="M13 12l2 0" />
</svg>
)
}

export const HelpOutlinedIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-help"
width="24" height="24" viewBox="0 0 24 24"
strokeWidth="1.5" stroke="#ffffff" fill="none"
strokeLinecap="round" strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M12 17l0 .01"></path>
<path d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4"></path>
</svg>
)
}

0 comments on commit f892e08

Please sign in to comment.