Skip to content

Commit

Permalink
Update Navbar and ServiceCard components
Browse files Browse the repository at this point in the history
  • Loading branch information
truemiller committed Mar 7, 2024
1 parent 088beec commit 32ec04d
Show file tree
Hide file tree
Showing 7 changed files with 68 additions and 14 deletions.
6 changes: 0 additions & 6 deletions frontend/components/Layout/Navbar/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,10 @@
import { Flex } from 'antd';
import { SettingsButton } from './SettingsButton';
import { NotificationButton } from './NotificationButton';
import Image from 'next/image';

export const Navbar = () => {
return (
<Flex vertical={false} justify="space-between" style={{ minWidth: '100%' }}>
<Image src="/olas-logo.png" alt="" width={100} height={25} />
<Flex gap={4}>
<NotificationButton disabled />
<SettingsButton disabled />
</Flex>
</Flex>
);
};
8 changes: 7 additions & 1 deletion frontend/components/YourAgents/ServiceCard/ServiceCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
message,
Tooltip,
} from 'antd';
import { green } from '@ant-design/colors';
import Image from 'next/image';
import { useCallback, useMemo, useState } from 'react';
import { useInterval } from 'usehooks-ts';
Expand All @@ -27,6 +28,7 @@ import {
SERVICE_CARD_STATUS_POLLING_INTERVAL,
} from '@/constants/intervals';
import { ServicesService, EthersService } from '@/service';
import { ServiceCardSettings } from './ServiceCardSettings';

type ServiceCardProps = {
service: Service;
Expand Down Expand Up @@ -195,6 +197,8 @@ export const ServiceCard = ({ service }: ServiceCardProps) => {
</div>
)}

<ServiceCardSettings serviceHash={service.hash} />

<Flex gap={16}>
<Image
src={serviceTemplate.image}
Expand Down Expand Up @@ -234,7 +238,9 @@ const ServiceCardStatusBadge = ({
case DeploymentStatus.DEPLOYING:
return <Badge status="processing" text="Deploying" />;
case DeploymentStatus.DEPLOYED:
return <Badge status="success" text="Running" />;
return (
<Badge status="processing" color={green.primary} text="Running" />
); // processing status adds pulse animation; color prop is used to override the default color
case DeploymentStatus.STOPPING:
return <Badge status="processing" text="Stopping" />;
case DeploymentStatus.STOPPED:
Expand Down
36 changes: 36 additions & 0 deletions frontend/components/YourAgents/ServiceCard/ServiceCardSettings.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { SpawnScreen } from '@/enums';
import { SettingOutlined } from '@ant-design/icons';
import { Button, Dropdown, MenuProps } from 'antd';
import Link from 'next/link';
import { useMemo } from 'react';

export const ServiceCardSettings = ({
serviceHash,
}: {
serviceHash: string;
}) => {
const items: MenuProps['items'] = useMemo(
() => [
{
key: '1',
label: (
<Link
href={`/spawn/${serviceHash}?screen=${SpawnScreen.AGENT_FUNDING}`}
>
Fund agent
</Link>
),
},
{ key: '2', label: <Link href="#">Delete Agent</Link>, danger: true },
],
[serviceHash],
);

return (
<Dropdown menu={{ items }} trigger={['click']} placement="bottomRight">
<Button style={{ position: 'absolute', top: 0, right: 0 }} type="text">
<SettingOutlined />
</Button>
</Dropdown>
);
};
7 changes: 4 additions & 3 deletions frontend/package.json
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
{
"author": "Valory AG",
"dependencies": {
"@ant-design/colors": "^7.0.2",
"@ant-design/cssinjs": "^1.18.4",
"@ant-design/icons": "^5.3.0",
"antd": "^5.14.0",
"ethers": "5.7.2",
"lodash": "^4.17.21",
"next": "14.1.0",
"react": "^18",
"react-dom": "^18",
"sudo-prompt": "9.2.1",
"swr": "^2.2.4",
"usehooks-ts": "^2.14.0",
"@ant-design/cssinjs": "^1.18.4",
"sudo-prompt": "9.2.1"
"usehooks-ts": "^2.14.0"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.4.2",
Expand Down
11 changes: 10 additions & 1 deletion frontend/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,20 @@
"@jridgewell/gen-mapping" "^0.3.0"
"@jridgewell/trace-mapping" "^0.3.9"

"@ant-design/colors@^7.0.0", "@ant-design/colors@^7.0.2":
"@ant-design/colors@^7.0.0":
version "7.0.2"
resolved "https://registry.npmjs.org/@ant-design/colors/-/colors-7.0.2.tgz"
integrity sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg==
dependencies:
"@ctrl/tinycolor" "^3.6.1"

"@ant-design/colors@^7.0.2":
version "7.0.2"
resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-7.0.2.tgz#c5c753a467ce8d86ba7ca4736d2c01f599bb5492"
integrity sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg==
dependencies:
"@ctrl/tinycolor" "^3.6.1"

"@ant-design/cssinjs@^1.18.4":
version "1.18.4"
resolved "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.18.4.tgz"
Expand Down Expand Up @@ -5436,6 +5443,7 @@ string-length@^4.0.1:
strip-ansi "^6.0.0"

"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
name string-width-cjs
version "4.2.3"
resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
Expand Down Expand Up @@ -5946,6 +5954,7 @@ which@^2.0.1:
isexe "^2.0.0"

"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
name wrap-ansi-cjs
version "7.0.0"
resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
Expand Down
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"author": "Valory AG",
"dependencies": {
"@ant-design/colors": "^7.0.2",
"@ant-design/cssinjs": "^1.18.4",
"@ant-design/icons": "^5.3.0",
"antd": "^5.14.0",
Expand All @@ -16,9 +17,9 @@
"ps-tree": "^1.2.0",
"react": "^18",
"react-dom": "^18",
"sudo-prompt": "9.2.1",
"swr": "^2.2.4",
"usehooks-ts": "^2.14.0",
"sudo-prompt": "9.2.1"
"usehooks-ts": "^2.14.0"
},
"devDependencies": {
"concurrently": "^8.2.2",
Expand Down
9 changes: 8 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,20 @@
resolved "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz"
integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==

"@ant-design/colors@^7.0.0", "@ant-design/colors@^7.0.2":
"@ant-design/colors@^7.0.0":
version "7.0.2"
resolved "https://registry.npmjs.org/@ant-design/colors/-/colors-7.0.2.tgz"
integrity sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg==
dependencies:
"@ctrl/tinycolor" "^3.6.1"

"@ant-design/colors@^7.0.2":
version "7.0.2"
resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-7.0.2.tgz#c5c753a467ce8d86ba7ca4736d2c01f599bb5492"
integrity sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg==
dependencies:
"@ctrl/tinycolor" "^3.6.1"

"@ant-design/cssinjs@^1.18.4":
version "1.18.4"
resolved "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.18.4.tgz"
Expand Down

0 comments on commit 32ec04d

Please sign in to comment.