<template>
  <PageContainer :pageHeaderRender="false" style="padding: 0 10px 10px 10px">
    <div>
      <Row :gutter="[24, 24]">
        <Col :span="24"><TopCard @serviceChange="serviceChange" /> </Col>
        <Col :span="24" v-if="isNoCommunity"><Network :serviceId="serviceId" /></Col>
        <Col :span="12"><Cpu :isNoCommunity="isNoCommunity" :serviceId="serviceId" /></Col>
        <Col :span="12"><Jvm :isNoCommunity="isNoCommunity" :serviceId="serviceId" /></Col>
      </Row>
    </div>
  </PageContainer>
</template>

<script lang="ts" setup name="DashBoardPage">
  import TopCard from './components/TopCard.vue';
  import Network from './components/Network.vue';
  import Cpu from './components/Cpu.vue';
  import Jvm from './components/Jvm.vue';
  import { isNoCommunity } from '@jdlinker/utils';
  import { ref } from 'vue';
  // @ts-ignore
  import { PageContainer, Row, Col } from 'linker-ui-components';

  const serviceId = ref<string | undefined>();

  const serviceChange = (id: string) => {
    serviceId.value = id;
  };
</script>

<style lang="less" scoped></style>
