paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 49 Packages Projects Releases Wiki Activity

Design changes

Browse Source 
Signed-off-by: mufaddal motiwala <mufaddalmm.52@gmail.com>
This commit is contained in:
mufaddalWh
2021-11-22 13:40:01 +05:30
committed by mufaddal motiwala
parent 48b2289c3e
commit 670e8fdbe7
10 changed files with 66 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/new-relic-dashboard/src/components/ExampleComponents/ExampleComponent.tsx
-56
View File
@@ -1,56 +0,0 @@
/*
* Copyright 2021 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { Typography, Grid } from '@material-ui/core';
import {
InfoCard,
Header,
Page,
Content,
ContentHeader,
HeaderLabel,
SupportButton,
} from '@backstage/core-components';
import { NewRelicExample } from './NewRelicExample';
export const ExampleComponent = () => (
<Page themeId="tool">
<Header
title="Welcome to new-relic-dashboard!"
subtitle="View all dashboards at a glance"
>
<HeaderLabel label="Owner" value="Team X" />
<HeaderLabel label="Lifecycle" value="Alpha" />
</Header>
<Content>
<ContentHeader title="New Relic Plugin">
<SupportButton>This page will load a list of dashboards</SupportButton>
</ContentHeader>
<Grid container spacing={3} direction="column">
<Grid item>
<InfoCard title="Information card">
<Typography variant="body1">
All content should be wrapped in a card like this.
</Typography>
</InfoCard>
</Grid>
<Grid item>
<NewRelicExample />
</Grid>
</Grid>
</Content>
</Page>
);
plugins/new-relic-dashboard/src/components/ExampleComponents/NewRelicExample.tsx
-65
View File
@@ -1,65 +0,0 @@
/*
* Copyright 2021 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { Typography, Grid } from '@material-ui/core';
export const NewRelicExample = () => {
// const [dashboardUrl, setDashboardUrl] = React.useState<
// DashboardSnapshotSummary | undefined
// >();
// const NewRelicDashboardAPI = useApi(NewRelicDashboardApiRef);
// const { value } = useAsync(async (): Promise<any> => {
// let dashboardObject: any = NewRelicDashboardAPI.getDashboardEntity(
// 'MjY2NjU3MnxWSVp8REFTSEJPQVJEfGRhOjQ0OTc1MA',
// );
// return dashboardObject;
// }, []);
// useEffect(() => {
// if (value) {
// NewRelicDashboardAPI.getDashboardSnapshot(
// value?.getDashboardEntity?.data?.actor.entitySearch.results.entities[0]
// .guid,
// '2000000000',
// );
// }
// }, [value]);
// console.log(
// value?.getDashboardEntity.data.actor.entitySearch.results.entities[0].guid,
// );
return (
<Grid container spacing={3} direction="column">
<Typography variant="h4">
New Relic Dashboards loaded via custom APIs
</Typography>
<Grid item>
{/* {data.getTodos.map((todo: ITodo) => ( */}
{/* <>{JSON.stringify(value)}</>
<>{JSON.stringify(dashboardUrl?.getDashboardSnapshot.data.dashboardCreateSnapshotUrl)}</> */}
{/* {value?.getDashboardSnapshot?.map(contributor => (
<Grid item>
<>{contributor}</>
</Grid>
))} */}
{/* <img src={String(dashboardUrl?.dashboardCreateSnapshotUrl)}></img> */}
{/* ))} */}
</Grid>
</Grid>
);
};
plugins/new-relic-dashboard/src/components/ExampleComponents/index.ts
-16
View File
@@ -1,16 +0,0 @@
/*
* Copyright 2021 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { ExampleComponent } from './ExampleComponent';
plugins/new-relic-dashboard/src/components/NewRelicDashboard/DashboardSnapshot/DashboardSnapshot.tsx → plugins/new-relic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx
+20 -31
View File
@@ -14,13 +14,12 @@
* limitations under the License.
*/
import React from 'react';
import { Grid, Paper, Typography } from '@material-ui/core';
import { Box, Grid } from '@material-ui/core';
import { useApi } from '@backstage/core-plugin-api';
import { useAsync } from 'react-use';
import { Progress } from '@backstage/core-components';
import { InfoCard, Progress } from '@backstage/core-components';
import { NewRelicDashboardApiRef } from '../../../api';
import Alert from '@material-ui/lab/Alert';
import Link from '@material-ui/core/Link';
type Props = {
guid: String;
@@ -50,33 +49,23 @@ export const DashboardSnapshot = ({
return <Alert severity="error">{error.message}</Alert>;
}
return (
<Paper>
<Grid style={{ width: '100%' }} container spacing={3} direction="column">
<Grid item xs={12} style={{ marginTop: '20px' }}>
<Link target="_blank" href={permalink}>
<Typography variant="h4">{name}</Typography>
</Link>
</Grid>
<Grid item xs={12}>
<a target="_blank" href={permalink}>
<img
alt={`${name} Dashbord`}
style={{ border: 'solid 1px black' }}
src={`?${value?.getDashboardSnapshot?.data?.dashboardCreateSnapshotUrl?.replace(
/...$/,
'png',
)}`}
/>
</a>
{/* {JSON.stringify(
value.getDashboardSnapshot.data.dashboardCreateSnapshotUrl.replace(
/...$/,
'png',
),
)} */}
</Grid>
</Grid>
</Paper>
<Grid container style={{ marginTop: '30px' }}>
<InfoCard variant="gridItem" title={name}>
<Box display="flex">
<Box flexGrow="1">
<a target="_blank" href={permalink}>
<img
alt={`${name} Dashbord`}
style={{ border: 'solid 1px black' }}
src={`${value?.getDashboardSnapshot?.data?.dashboardCreateSnapshotUrl?.replace(
/...$/,
'png',
)}`}
/>
</a>
</Box>
</Box>
</InfoCard>
</Grid>
);
};
plugins/new-relic-dashboard/src/components/NewRelicDashboard/DashboardSnapshot/DashboardSnapshotList.tsx → plugins/new-relic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx
+37 -51
View File
@@ -97,62 +97,48 @@ export const DashboardSnapshotList = ({ guid }: Props) => {
return <Alert severity="error">{error.message}</Alert>;
}
return (
<>
<Grid container direction="column">
{/* <Grid item xs={8}>
{value.getDashboardEntity.data.actor.entitySearch.results.entities?.map(
(Entity: any) => {
return (
<DashboardSnapshot
name={Entity.name}
permalink={Entity.permalink}
guid={Entity.guid}
/>
);
},
)}
</Grid> */}
<Tabs
selectionFollowsFocus
indicatorColor="primary"
textColor="inherit"
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
onChange={handleChange}
value={value1}
>
{value.getDashboardEntity.data.actor.entitySearch.results.entities?.map(
(Entity: any, index: any) => {
return (
<Tab
label={Entity.name}
className={styles.defaultTab}
classes={{
selected: styles.selected,
root: styles.tabRoot,
}}
{...a11yProps(index)}
/>
);
},
)}
</Tabs>
<Grid container direction="column">
<Tabs
selectionFollowsFocus
indicatorColor="primary"
textColor="inherit"
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
onChange={handleChange}
value={value1}
style={{ width: '100%' }}
>
{value.getDashboardEntity.data.actor.entitySearch.results.entities?.map(
(Entity: any, index: any) => {
return (
<TabPanel value1={value1} index={index}>
<DashboardSnapshot
name={Entity.name}
permalink={Entity.permalink}
guid={Entity.guid}
duration={2000000000}
/>
</TabPanel>
<Tab
label={Entity.name}
className={styles.defaultTab}
classes={{
selected: styles.selected,
root: styles.tabRoot,
}}
{...a11yProps(index)}
/>
);
},
)}
</Grid>
</>
</Tabs>
{value.getDashboardEntity.data.actor.entitySearch.results.entities?.map(
(Entity: any, index: any) => {
return (
<TabPanel value1={value1} index={index}>
<DashboardSnapshot
name={Entity.name}
permalink={Entity.permalink}
guid={Entity.guid}
duration={2000000000}
/>
</TabPanel>
);
},
)}
</Grid>
);
};
plugins/new-relic-dashboard/src/components/NewRelicDashboard/DashboardSnapshot/index.ts → plugins/new-relic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/index.ts
View File
plugins/new-relic-dashboard/src/components/ExampleComponents/ExampleComponent.test.tsx → plugins/new-relic-dashboard/src/components/NewRelicDashboard/NewRelicComponent.test.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React from 'react';
import { ExampleComponent } from './ExampleComponent';
import { NewRelicDashboard } from './NewRelicDashboard';
import { ThemeProvider } from '@material-ui/core';
import { lightTheme } from '@backstage/theme';
import { rest } from 'msw';
@@ -39,7 +39,7 @@ describe('ExampleComponent', () => {
it('should render', async () => {
const rendered = await renderInTestApp(
<ThemeProvider theme={lightTheme}>
<ExampleComponent />
<NewRelicDashboard />
</ThemeProvider>,
);
expect(
plugins/new-relic-dashboard/src/components/NewRelicDashboard/NewRelicDashboard.tsx
+7 -3
View File
@@ -18,7 +18,7 @@ import { Grid } from '@material-ui/core';
import { Page, Content } from '@backstage/core-components';
import { useNewRelicDashboardEntity } from '../../hooks';
import { DashboardEntityList } from './DashboardEntityList';
import { DashboardSnapshotList } from './DashboardSnapshot';
import { DashboardSnapshotList } from './DashboardSnapshotList';
export const NewRelicDashboard = () => {
const entity = useNewRelicDashboardEntity();
@@ -26,8 +26,12 @@ export const NewRelicDashboard = () => {
<Page themeId="home">
<Content>
<Grid container spacing={6} direction="row" alignItems="stretch">
<DashboardEntityList />
<DashboardSnapshotList guid={String(entity.integrationKey)} />
<Grid item xs={12}>
<DashboardEntityList />
</Grid>
<Grid item xs={12}>
<DashboardSnapshotList guid={String(entity.integrationKey)} />
</Grid>
</Grid>
</Content>
</Page>
plugins/new-relic-dashboard/src/index.ts
-1
View File
@@ -15,7 +15,6 @@
*/
export {
newRelicDashboardPlugin,
NewRelicDashboardPage,
EntityNewRelicDashboard,
EntityPageNewRelicDashboard,
} from './plugin';
plugins/new-relic-dashboard/src/plugin.ts
-9
View File
@@ -41,15 +41,6 @@ export const newRelicDashboardPlugin = createPlugin({
],
});
export const NewRelicDashboardPage = newRelicDashboardPlugin.provide(
createRoutableExtension({
name: 'NewRelicDashboardPage',
component: () =>
import('./components/ExampleComponents').then(m => m.ExampleComponent),
mountPoint: rootRouteRef,
}),
);
export const EntityNewRelicDashboard = newRelicDashboardPlugin.provide(
createRoutableExtension({
component: () => import('./Router').then(m => m.Router),