From 415cbc438d21e0b65a992404194ff805945253fb Mon Sep 17 00:00:00 2001 From: Joshua Jones Date: Wed, 21 Jul 2021 14:48:15 -0700 Subject: [PATCH 1/6] Move metrics button to the services index page. --- src/nextapp/pages/manager/services/[id].tsx | 226 +++++++++---------- src/nextapp/pages/manager/services/index.tsx | 115 ++++++---- 2 files changed, 177 insertions(+), 164 deletions(-) diff --git a/src/nextapp/pages/manager/services/[id].tsx b/src/nextapp/pages/manager/services/[id].tsx index 740b3a292..a6a7272bb 100644 --- a/src/nextapp/pages/manager/services/[id].tsx +++ b/src/nextapp/pages/manager/services/[id].tsx @@ -2,18 +2,14 @@ import * as React from 'react'; import { Badge, Box, - Button, Container, Divider, Heading, - Icon, Skeleton, Table, Tbody, Td, Text, - Th, - Thead, Tr, Wrap, WrapItem, @@ -24,7 +20,6 @@ import PageHeader from '@/components/page-header'; import api, { useApi } from '@/shared/services/api'; import { dateRange } from '@/components/services-list/utils'; import { GET_GATEWAY_SERVICE } from '@/shared/queries/gateway-service-queries'; -import { FaExternalLinkSquareAlt } from 'react-icons/fa'; import EnvironmentBadge from '@/components/environment-badge'; import MetricGraph from '@/components/services-list/metric-graph'; import ServiceRoutes from '@/components/service-routes'; @@ -32,8 +27,8 @@ import { dehydrate } from 'react-query/hydration'; import { QueryClient } from 'react-query'; import { GetServerSideProps, InferGetServerSidePropsType } from 'next'; import { Query } from '@/shared/types/query.types'; - -import breadcrumbs from '@/components/ns-breadcrumb'; +import { useNamespaceBreadcrumbs } from '@/shared/hooks'; +import Head from 'next/head'; export const getServerSideProps: GetServerSideProps = async (context) => { const queryClient = new QueryClient(); @@ -61,6 +56,9 @@ export const getServerSideProps: GetServerSideProps = async (context) => { const ServicePage: React.FC< InferGetServerSidePropsType > = ({ id }) => { + const breadcrumb = useNamespaceBreadcrumbs([ + { href: '/manager/services', text: 'Services' }, + ]); const range = dateRange(); const { data } = useApi( ['gateway-service', id], @@ -72,82 +70,43 @@ const ServicePage: React.FC< }, { enabled: Boolean(id), suspense: false } ); - const breadcrumb = breadcrumbs([ - { href: '/manager/services', text: 'Services' }, - ]); const tags: string[] = !isEmpty(data?.GatewayService?.tags) ? (JSON.parse(data.GatewayService.tags) as string[]) : []; return ( - - } - > - View Full Metrics - - } - breadcrumb={breadcrumb} - title={ - - {data?.GatewayService.name} - - - } - /> - - - Metrics - - - - {id && data && ( - }> - + + {`API Program Services | Services | ${data?.GatewayService.name}`} + + + + {data?.GatewayService.name} + - - )} - - - - + + } + /> + - Stats + Metrics - + {id && data && ( }> - + - Routes + + Stats + + + + {id && data && ( + } + > + + + )} + - - - - - - - -
- -
- - - - Details + + + Routes + + + + + + + + +
+ +
- - + - - Host - - {data?.GatewayService.host} - - Tags - - - - {tags.map((t) => ( - - {t} - - ))} - - + Details + + + + + + Host + + {data?.GatewayService.host} + + Tags + + + + {tags.map((t) => ( + + {t} + + ))} + + + - - + + ); }; diff --git a/src/nextapp/pages/manager/services/index.tsx b/src/nextapp/pages/manager/services/index.tsx index f4bff0c7f..7c82a225b 100644 --- a/src/nextapp/pages/manager/services/index.tsx +++ b/src/nextapp/pages/manager/services/index.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Box, + Button, Container, Divider, Heading, @@ -11,14 +12,15 @@ import { Skeleton, } from '@chakra-ui/react'; import ClientRequest from '@/components/client-request'; +import { FaExternalLinkSquareAlt } from 'react-icons/fa'; import PageHeader from '@/components/page-header'; import ServicesList from '@/components/services-list'; import { useAuth /*, withAuth*/ } from '@/shared/services/auth'; import SearchInput from '@/components/search-input'; import { FaCaretSquareUp, FaFilter } from 'react-icons/fa'; import ServicesFilters from '@/components/services-list/services-filters'; - -import breadcrumbs from '@/components/ns-breadcrumb' +import { useNamespaceBreadcrumbs } from '@/shared/hooks'; +import Head from 'next/head'; // export const getServerSideProps = withAuth(async (context) => { // const { user } = context; @@ -38,6 +40,7 @@ import breadcrumbs from '@/components/ns-breadcrumb' // }); const ServicesPage: React.FC = () => { + const breadcrumb = useNamespaceBreadcrumbs(); const { user } = useAuth(); const [search, setSearch] = React.useState(''); const [showFilters, setShowFilters] = React.useState(false); @@ -46,53 +49,71 @@ const ServicesPage: React.FC = () => { }; return ( - - -

- List of services from the API Owner perspective. This should pull in - details from Prometheus and gwa-api Status. -

- - - - - - 7 Day Metrics - - - - } + <> + + API Program Services | Services + + + - - - {showFilters && } - {user && ( - - ( - - ))} + href="https://grafana.apps.gov.bc.ca/" + rightIcon={} > - - - - )} - - + View Full Metrics + + } + title="Services" + breadcrumb={breadcrumb} + > +

+ List of services from the API Owner perspective. This should pull in + details from Prometheus and gwa-api Status. +

+ + + + + + 7 Day Metrics + + + + } + variant="primary" + onClick={onFilterClick} + /> + + + {showFilters && } + {user && ( + + ( + + ))} + > + + + + )} + + + ); }; From 33f5dad30c69b748b568b5000feeec5bd592c816 Mon Sep 17 00:00:00 2001 From: ikethecoder Date: Mon, 26 Jul 2021 21:30:10 -0700 Subject: [PATCH 2/6] Add grafana url as an env var --- .github/workflows/ci-build-deploy.yaml | 4 +++- src/nextapp/pages/manager/services/index.tsx | 3 ++- src/nextapp/shared/config.ts | 1 + 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci-build-deploy.yaml b/.github/workflows/ci-build-deploy.yaml index 8dcb6fc4f..ac8d44470 100644 --- a/.github/workflows/ci-build-deploy.yaml +++ b/.github/workflows/ci-build-deploy.yaml @@ -209,7 +209,9 @@ jobs: EXTERNAL_URL: value: 'https://api-services-portal-${{ steps.set-deploy-id.outputs.DEPLOY_ID }}.apps.silver.devops.gov.bc.ca' NEXT_PUBLIC_API_ROOT: - value: 'https://api-services-portal-${{ steps.set-deploy-id.outputs.DEPLOY_ID }}.apps.silver.devops.gov.bc.ca' + value: 'https://api-services-portal-${{ steps.set-deploy-id.outputs.DEPLOY_ID }}.apps.silver.devops.gov.bc.ca' + NEXT_PUBLIC_GRAFANA_URL: + value: 'https://grafana-apps-gov-bc-ca.dev.api.gov.bc.ca' GWA_API_URL: value: 'https://gwa-api-gov-bc-ca.dev.api.gov.bc.ca' GWA_RES_SVR_CLIENT_ID: diff --git a/src/nextapp/pages/manager/services/index.tsx b/src/nextapp/pages/manager/services/index.tsx index 7c82a225b..ba70df966 100644 --- a/src/nextapp/pages/manager/services/index.tsx +++ b/src/nextapp/pages/manager/services/index.tsx @@ -20,6 +20,7 @@ import SearchInput from '@/components/search-input'; import { FaCaretSquareUp, FaFilter } from 'react-icons/fa'; import ServicesFilters from '@/components/services-list/services-filters'; import { useNamespaceBreadcrumbs } from '@/shared/hooks'; +import { grafanaUrl } from '@/shared/config'; import Head from 'next/head'; // export const getServerSideProps = withAuth(async (context) => { @@ -59,7 +60,7 @@ const ServicesPage: React.FC = () => {