backstage

1
/*
2
 * Copyright 2021 The Backstage Authors
3
 *
4
 * Licensed under the Apache License, Version 2.0 (the "License");
5
 * you may not use this file except in compliance with the License.
6
 * You may obtain a copy of the License at
7
 *
8
 *     http://www.apache.org/licenses/LICENSE-2.0
9
 *
10
 * Unless required by applicable law or agreed to in writing, software
11
 * distributed under the License is distributed on an "AS IS" BASIS,
12
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
 * See the License for the specific language governing permissions and
14
 * limitations under the License.
15
 */
16

17
import {
18
  ClockConfig,
19
  CustomHomepageGrid,
20
  HeaderWorldClock,
21
  HomePageCompanyLogo,
22
  HomePageRandomJoke,
23
  HomePageStarredEntities,
24
  HomePageToolkit,
25
  HomePageTopVisited,
26
  HomePageRecentlyVisited,
27
  WelcomeTitle,
28
} from '@backstage/plugin-home';
29
import { Content, Header, Page } from '@backstage/core-components';
30
import { HomePageCalendar } from '@backstage/plugin-gcalendar';
31
import { MicrosoftCalendarCard } from '@backstage/plugin-microsoft-calendar';
32
import React from 'react';
33
import HomeIcon from '@material-ui/icons/Home';
34
import { HomePagePagerDutyCard } from '@backstage/plugin-pagerduty';
35

36
const clockConfigs: ClockConfig[] = [
37
  {
38
    label: 'NYC',
39
    timeZone: 'America/New_York',
40
  },
41
  {
42
    label: 'UTC',
43
    timeZone: 'UTC',
44
  },
45
  {
46
    label: 'STO',
47
    timeZone: 'Europe/Stockholm',
48
  },
49
  {
50
    label: 'TYO',
51
    timeZone: 'Asia/Tokyo',
52
  },
53
];
54

55
const timeFormat: Intl.DateTimeFormatOptions = {
56
  hour: '2-digit',
57
  minute: '2-digit',
58
  hour12: false,
59
};
60

61
const defaultConfig = [
62
  {
63
    component: 'CompanyLogo',
64
    x: 0,
65
    y: 0,
66
    width: 12,
67
    height: 1,
68
    movable: false,
69
    resizable: false,
70
    deletable: false,
71
  },
72
  {
73
    component: 'WelcomeTitle',
74
    x: 0,
75
    y: 1,
76
    width: 12,
77
    height: 1,
78
  },
79
  {
80
    component: 'HomePageSearchBar',
81
    x: 0,
82
    y: 2,
83
    width: 12,
84
    height: 2,
85
  },
86
];
87

88
export const homePage = (
89
  <Page themeId="home">
90
    <Header title={<WelcomeTitle />} pageTitleOverride="Home">
91
      <HeaderWorldClock
92
        clockConfigs={clockConfigs}
93
        customTimeFormat={timeFormat}
94
      />
95
    </Header>
96
    <Content>
97
      <CustomHomepageGrid config={defaultConfig}>
98
        <HomePageRandomJoke />
99
        <HomePageCalendar />
100
        <HomePagePagerDutyCard name="Rota" />
101
        <MicrosoftCalendarCard />
102
        <HomePageStarredEntities />
103
        <HomePageCompanyLogo />
104
        <WelcomeTitle />
105
        <HomePageToolkit
106
          tools={[
107
            {
108
              url: 'https://backstage.io',
109
              label: 'Backstage Homepage',
110
              icon: <HomeIcon />,
111
            },
112
          ]}
113
        />
114
        <HomePageTopVisited />
115
        <HomePageRecentlyVisited />
116
      </CustomHomepageGrid>
117
    </Content>
118
  </Page>
119
);
120