@ant-design/icons#DesktopOutlined JavaScript Examples

items = [
  {
    id: 1,
    name: routes.dashboard.name,
    path: routes.dashboard.path,
    icon: <DesktopOutlined />,
    disabled: false,
  },
  {
    id: 2,
    name: routes.payment.name,
    path: routes.payment.path,
    icon: <WalletOutlined />,
    disabled: false,
  },
  {
    id: 3,
    name: routes.history.name,
    path: routes.history.path,
    icon: <HistoryOutlined />,
    disabled: false,
  },
  {
    id: 4,
    name: 'Cards',
    path: '4',
    icon: <CreditCardOutlined />,
    disabled: true,
  },
  {
    id: 5,
    name: 'Credits',
    path: '5',
    icon: <LineChartOutlined />,
    disabled: true,
  },
  {
    id: 6,
    name: 'Deposits',
    path: '6',
    icon: <BankOutlined />,
    disabled: true,
  },
  {
    id: 7,
    name: routes.settings.name,
    path: routes.settings.path,
    icon: <SettingOutlined />,
    disabled: false,
  },
]

render() {
    return (
      <Layout>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['3']} defaultOpenKeys={['sub1']}>
            <Menu.Item key="1" icon={<PieChartOutlined />}>
              Option 1
            </Menu.Item>
            <Menu.Item key="2" icon={<DesktopOutlined />}>
              Option 2
            </Menu.Item>
            <SubMenu key="sub1" icon={<UserOutlined />} title="User">
              <Menu.Item key="3">Tom</Menu.Item>
              <Menu.Item key="4">Bill</Menu.Item>
              <Menu.Item key="5">Alex</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
              <Menu.Item key="6">Team 1</Menu.Item>
              <Menu.Item key="8">Team 2</Menu.Item>
            </SubMenu>
            <Menu.Item key="9" icon={<FileOutlined />} />
          </Menu>
        </Sider>
        <Layout>
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle,
            })}
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            Content
          </Content>
        </Layout>
      </Layout>
    );
  }

render() {
    const { collapsed } = this.state;
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1" icon={<PieChartOutlined />}>
              Option 1
            </Menu.Item>
            <Menu.Item key="2" icon={<DesktopOutlined />}>
              Option 2
            </Menu.Item>
            <SubMenu key="sub1" icon={<UserOutlined />} title="User">
              <Menu.Item key="3">Tom</Menu.Item>
              <Menu.Item key="4">Bill</Menu.Item>
              <Menu.Item key="5">Alex</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
              <Menu.Item key="6">Team 1</Menu.Item>
              <Menu.Item key="8">Team 2</Menu.Item>
            </SubMenu>
            <Menu.Item key="9" icon={<FileOutlined />}>
              Files
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }} />
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              Bill is a cat.
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    );
  }

render() {
    return (
      <div style={{ width: 256 }}>
        <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
          {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
        </Button>
        <Menu
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
          inlineCollapsed={this.state.collapsed}
        >
          <Menu.Item key="1" icon={<PieChartOutlined />}>
            Option 1
          </Menu.Item>
          <Menu.Item key="2" icon={<DesktopOutlined />}>
            Option 2
          </Menu.Item>
          <Menu.Item key="3" icon={<ContainerOutlined />}>
            Option 3
          </Menu.Item>
          <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
            <Menu.Item key="5">Option 5</Menu.Item>
            <Menu.Item key="6">Option 6</Menu.Item>
            <Menu.Item key="7">Option 7</Menu.Item>
            <Menu.Item key="8">Option 8</Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
            <Menu.Item key="9">Option 9</Menu.Item>
            <Menu.Item key="10">Option 10</Menu.Item>
            <SubMenu key="sub3" title="Submenu">
              <Menu.Item key="11">Option 11</Menu.Item>
              <Menu.Item key="12">Option 12</Menu.Item>
            </SubMenu>
          </SubMenu>
        </Menu>
      </div>
    );
  }

function App({ user, loggedIn, logoutUser, getProfile }) {
  useInjectSaga({ key: 'login', saga });

  useEffect(() => {
    if (!loggedIn) getProfile();
  });

  const [collapsed, setCollapsed] = useState(true);

  const siderMenu = loggedIn ? (
    <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed}>
      <div style={logoStyle} />
      <Menu
        theme="dark"
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['profile']}
        mode="inline"
      >
        <Menu.Item key="home" icon={<PieChartOutlined />}>
          <Link to="/">Dashboard</Link>
        </Menu.Item>
        <Menu.Item key="experiments" icon={<DesktopOutlined />}>
          <Link to="/experiments">My experiments</Link>
        </Menu.Item>
        <SubMenu
          key="profile"
          icon={<UserOutlined />}
          title={`${user.username}`}
        >
          <Menu.Item key="logout" onClick={logoutUser}>
            Logout
          </Menu.Item>
        </SubMenu>
      </Menu>
    </Sider>
  ) : (
    ''
  );

  return (
    <div>
      <Helmet
        titleTemplate="%s - QiskitFlow"
        defaultTitle="QiskitFlow. Reproducible quantum experiments."
      >
        <meta
          name="description"
          content="QiskitFlow. Reproducible quantum experiments."
        />
      </Helmet>
      <Layout style={{ minHeight: '100vh' }}>
        {siderMenu}
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            <Link to="/" style={{ padding: '0 24px', fontSize: 24 }}>
              QiskitFlow
            </Link>
          </Header>
          <Content style={{ margin: '16px 16px' }}>
            <div
              className="site-layout-background"
              style={{ padding: 24, minHeight: 360, background: '#fff' }}
            >
              <Switch>
                <Route exact path="/" component={HomePage} />
                <PrivateRoute
                  exact
                  authed
                  path="/experiments"
                  component={ExperimentsList}
                />
                <PrivateRoute
                  authed
                  path="/experiments/:experimentId"
                  component={ExperimentRunsList}
                />
                <PrivateRoute
                  authed
                  path="/runs/:id"
                  component={Run}
                />
                <Route path="" component={NotFoundPage} />
              </Switch>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>QiskitFlow ©2021</Footer>
        </Layout>
      </Layout>
    </div>
  );
}

function Dashboard() {
  // Layout and Menu
  const { Content, Sider } = Layout;
  const { SubMenu } = Menu;

  // report an issue preventDefault
  const preventDefault = (event) => {
    event.preventDefault();
    window.location.href =
      "https://github.com/abhishekpatel946/Smart-Vehicle-Fleet-Manager/issues/new/choose";
  };

  // snakbar state
  const [vehicleAddSuccess, setvehicleAddSuccess] = React.useState(false);
  const [vehicleAddError, setvehicleAddError] = React.useState(false);
  const [maintainanceAddSuccess, setmaintainanceAddSuccess] = React.useState(
    false
  );
  const [maintainanceAddError, setmaintainanceAddError] = React.useState(false);
  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }
    setvehicleAddSuccess(false);
    setvehicleAddError(false);
    setmaintainanceAddSuccess(false);
    setmaintainanceAddError(false);
  };

  // vehicleId & vehicleName for addVehicle
  const [vehicleNAME, setVehicleNAME] = useState("");
  const [vehicleID, setVehicleID] = useState("");

  // vehicleName, dateTime & cost for maintenace
  const [vehicleRegNumber, setVehicleRegNumber] = useState("");
  const [date, setDate] = useState(moment().toString());
  const [cost, setCost] = useState("");

  // set date
  const onDateChange = (val) => {
    setDate(val);
  };

  const [collapseState, setCollapseState] = useState(false);
  const onCollapse = (collapsed) => {
    setCollapseState({ collapsed });
  };

  // form onSubmit handler
  const submitHandler = (event) => {
    event.preventDefault();
    event.target.className += " was-validated";
  };

  // fetch vehicle model & regid
  // const [vehicleInfo, setVehicleInfo] = useState([]);
  // let vehicleModel = "";
  // let vehicleModelId = "";
  // db.collection("data")
  //   .doc("MP10ME7969")
  //   .get()
  //   .then((snapshot) => {
  //     const currentInfo = [];
  //     snapshot.forEach((doc) => {
  //       currentInfo.push(doc.data());
  //     });
  //     setVehicleInfo(currentInfo);
  //   });
  // vehicleInfo.forEach((data) => {
  //   vehicleModel = data.vehicleId;
  //   vehicleModelId = data.vehicleName;
  // });

  // fetch moduleState
  const [moduleState, setModuleState] = useState([]);
  let liveState = false;
  db.collection("data")
    .doc("MP10ME7969")
    .collection("module_state")
    .onSnapshot((docs) => {
      const currentState = [];
      docs.forEach((doc) => {
        currentState.push(doc.data());
      });
      setModuleState(currentState);
    });

  moduleState.forEach((data) => {
    liveState = data.state;
  });

  // form vehicleRegister submitHandler
  const vehicleRegister = (event) => {
    if (vehicleID && vehicleNAME) {
      // check if the doc are already available in the DB... then just give the warning to the user!

      // create a doc in DB with vehicleID and set it fields
      db.collection("data").doc(vehicleID).set({
        vehicleId: vehicleID,
        vehicleName: vehicleNAME,
      });

      // create a dummy collection for newly created vehicleID
      db.collection("data").doc(vehicleID).collection("fuel").doc().set({
        id: "0",
        amount: "0",
        timestamp: "0",
      });
      db.collection("data").doc(vehicleID).collection("fuel_refill").doc().set({
        id: "0",
        amount: "0",
        timestamp: "0",
      });
      db.collection("data")
        .doc(vehicleID)
        .collection("maintainance")
        .doc()
        .set({
          id: "0",
          amount: "0",
          timestamp: "0",
        });
      db.collection("data").doc(vehicleID).collection("overspeed").doc().set({
        id: "0",
        speed: "0",
        timestamp: "0",
      });
      db.collection("data").doc(vehicleID).collection("speed").doc().set({
        id: "0",
        speed: "0",
        timestamp: "0",
      });
      db.collection("data")
        .doc(vehicleID)
        .collection("accident_alert")
        .doc()
        .set({
          id: "0",
          accident: "0",
          geolocation_lat: "0",
          geolocation_long: "0",
          timestamp: "0",
        });
      db.collection("data")
        .doc(vehicleID)
        .collection("fuel_theft_alert")
        .doc()
        .set({
          id: "0",
          fuelTheft: "0",
          geolocation_lat: "0",
          geolocation_long: "0",
          timestamp: "0",
        });
      db.collection("data")
        .doc(vehicleID)
        .collection("module_state")
        .doc()
        .set({
          state: "0",
        });

      // success mgs for the all are right
      setvehicleAddError(false);
      setmaintainanceAddSuccess(false);
      setmaintainanceAddError(false);
      setvehicleAddSuccess(true);

      // set it to defualt to state
      setVehicleNAME("");
      setVehicleID("");
    } else {
      // alert("Both the fields are mandatory!!!");
      setvehicleAddSuccess(false);
      setmaintainanceAddSuccess(false);
      setmaintainanceAddError(false);
      setvehicleAddError(true);
    }
  };

  // from vehicleMaintenace submitHandler
  const addCost = (event) => {
    // store maintainance-cost into database
    db.collection("data")
      .doc(vehicleRegNumber)
      .collection("maintainance")
      .add({
        id: vehicleRegNumber,
        cose: cost,
        timestamp: date,
      })
      .then(function () {
        // success mgs for the all are right
        setvehicleAddSuccess(false);
        setvehicleAddError(false);
        setmaintainanceAddError(false);
        setmaintainanceAddSuccess(true);
      })
      .catch(function (error) {
        setvehicleAddSuccess(false);
        setvehicleAddError(false);
        setmaintainanceAddSuccess(false);
        setmaintainanceAddError(true);
      });
  };

  // render() {
  return (
    <Layout id="header">
      {/* Header Section */}
      <HeaderLayout className="header" />
      <Layout style={{ minHeight: "100vh" }}>
        <Sider
          collapsible
          collapsed={collapseState.collapsed}
          onCollapse={onCollapse}
        >
          <div className="logo" />
          <Menu
            theme="dark"
            defaultSelectedKeys={["stats"]}
            defaultOpenKeys={["track"]}
            mode="inline"
          >
            <Menu.Item key="stats" icon={<PieChartOutlined />}>
              Stats
            </Menu.Item>
            <SubMenu key="track" icon={<DesktopOutlined />} title="Track">
              <Menu.Item key="speed">
                <Link href="#speedSection">Speed</Link>
              </Menu.Item>
              <Menu.Item key="fuel">
                <Link href="#fuelSection">Fuel</Link>
              </Menu.Item>
              <Menu.Item key="fuel_refill">
                <Link href="#fuelRefillSection">Fuel Refill</Link>
              </Menu.Item>
              <Menu.Item key="overspeeding">
                <Link href="#overSpeedingSection">OverSpeeding</Link>
              </Menu.Item>
              <Menu.Item key="maintainance">
                <Link href="#maintainanceSection">Maintainance</Link>
              </Menu.Item>
            </SubMenu>
            <Menu.Item
              key="accidentAlert"
              icon={<NotificationsActiveOutlinedIcon />}
            >
              <Link href="#accidentAlertSection">Accident alert</Link>
            </Menu.Item>
            <Menu.Item
              key="fuelTheftAlert"
              icon={<NotificationImportantIcon />}
            >
              <Link href="#fuelTheftAlertSection">FuelTheft alert</Link>
            </Menu.Item>
            <Menu.Item key="addVehicle" icon={<LocalTaxiIcon />}>
              <Link href="#addVehicleSection">Add Vehicle</Link>
            </Menu.Item>
            <Menu.Item key="addMaintainance" icon={<PostAddIcon />}>
              <Link href="#addVehicleSection">Add Maintainance</Link>
            </Menu.Item>
            <Menu.Item key="reportIssue" icon={<ReportProblemOutlinedIcon />}>
              <Link
                href="https://github.com/abhishekpatel946/Smart-Vehicle-Fleet-Manager/issues/new/choose"
                onClick={preventDefault}
              >
                Report an issue
              </Link>
            </Menu.Item>
          </Menu>
        </Sider>

        {/* Breadcrum Naming */}
        <Layout className="site-layout">
          <Content style={{ margin: "0 16px" }}>
            <Breadcrumb style={{ margin: "16px 0" }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Dashboard</Breadcrumb.Item>
              <div>
                <p className="h6 text-left mb-1">
                  Status : {liveState ? "Active" : "Inactive"}
                  {/* {vehicleModel}
                  {vehicleModelId} */}
                </p>
              </div>
            </Breadcrumb>
            <div
              className="site-layout-background"
              style={{ padding: 24, minHeight: 560 }}
            >
              {/* Speed Section */}
              <Divider orientation="left" id="speedSection">
                Speed area
              </Divider>
              <MDBContainer>
                <SpeedLog />
              </MDBContainer>

              {/* Fuel Section */}
              <Divider orientation="left" id="fuelSection">
                Fuel area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <FuelLog />
                </MDBRow>
              </MDBContainer>

              {/* OverSpeeding Section */}
              <Divider orientation="left" id="overSpeedingSection">
                OverSpeeding area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <OverSpeedLog />
                </MDBRow>
              </MDBContainer>

              {/* Fuel Refill Section */}
              <Divider orientation="left" id="fuelRefillSection">
                Fuel Refill area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <FuelRefillLog />
                </MDBRow>
              </MDBContainer>

              {/* Maintainence Section */}
              <Divider orientation="left" id="maintainanceSection">
                Maintainance area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <MaintainenceLog />
                </MDBRow>
              </MDBContainer>

              {/* Accident Section */}
              <Divider orientation="left" id="accidentAlertSection">
                Accident Alert area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <AccidentAlert />
                </MDBRow>
              </MDBContainer>

              {/* FuelTheft Section */}
              <Divider orientation="left" id="fuelTheftAlertSection">
                FuelTheft Alert area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <FuelTheftAlert />
                </MDBRow>
              </MDBContainer>

              {/* addVehicle Section */}
              <Divider orientation="left" id="addVehicleSection">
                Add Vehicle
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <MDBCol md="6">
                    <form
                      className="needs-validation"
                      onSubmit={submitHandler}
                      noValidate
                    >
                      <p className="h5 text-center mb-4">Register Vehicle</p>
                      <div className="grey-text">
                        <MDBInput
                          className="addVehicle_vehicleNAME"
                          name="vehicleNAME"
                          onChange={(event) =>
                            setVehicleNAME(event.target.value)
                          }
                          value={vehicleNAME}
                          label="Your vehicle name"
                          icon="car"
                          group
                          type="text"
                          validate
                          error="wrong"
                          success="right"
                          required
                        />
                        <MDBInput
                          className="addVehicle_vehicleID"
                          name="vehicleID"
                          onChange={(event) => setVehicleID(event.target.value)}
                          value={vehicleID}
                          label="Your vechile reg. number"
                          icon="registered"
                          group
                          type="text"
                          validate
                          error="wrong"
                          success="right"
                          required
                        />
                      </div>
                      <div className="text-center">
                        <MDBBtn outline type="submit" onClick={vehicleRegister}>
                          Register
                          <MDBIcon className="ml-1" />
                        </MDBBtn>
                      </div>
                    </form>
                  </MDBCol>
                  <MDBCol md="6">
                    <form
                      className="needs-validation"
                      onSubmit={submitHandler}
                      noValidate
                    >
                      <p className="h5 text-center mb-4">
                        Register Maintainance
                      </p>
                      <div className="grey-text">
                        <MDBInput
                          className="addVehicle_vehicleNAME"
                          name="vehicleName"
                          onChange={(event) =>
                            setVehicleRegNumber(event.target.value)
                          }
                          value={vehicleRegNumber}
                          label="Your vehicle Reg number"
                          icon="registered"
                          group
                          type="text"
                          validate
                          error="wrong"
                          success="right"
                          required
                        />
                        <div>
                          <MuiPickersUtilsProvider utils={DateFnsUtils}>
                            <KeyboardDatePicker
                              disableToolbar
                              fullWidth
                              variant="inline"
                              format="dd/MM/yyyy"
                              margin="normal"
                              id="date-picker-inline"
                              label="DD/MM/YYYY"
                              value={date}
                              onChange={onDateChange}
                              KeyboardButtonProps={{
                                "aria-label": "change date",
                              }}
                            />
                          </MuiPickersUtilsProvider>
                        </div>
                        <MDBInput
                          className="addVehicle_vehicleID"
                          name="cost"
                          onChange={(event) => setCost(event.target.value)}
                          value={cost}
                          label="Your mainatenace cost..."
                          icon="rupee-sign"
                          group
                          type="text"
                          validate
                          error="wrong"
                          success="right"
                          required
                        />
                      </div>
                      <div className="text-center">
                        <MDBBtn outline type="submit" onClick={addCost}>
                          Add Cost
                          <MDBIcon className="ml-1" />
                        </MDBBtn>
                      </div>
                    </form>
                  </MDBCol>
                </MDBRow>
              </MDBContainer>

              {/* back to top */}
              <Link href="#header">
                <Button
                  // ghost
                  icon={<NavigationIcon />}
                  style={{
                    float: "right",
                    margin: "auto 20px 10px 20px",
                  }}
                >
                  {" "}
                  Back to top{" "}
                </Button>
              </Link>

              {/* End */}
            </div>
          </Content>

          {/* snakbar notifiers */}
          <Snackbar
            open={vehicleAddSuccess}
            autoHideDuration={3000}
            onClose={handleClose}
          >
            <Alert onClose={handleClose} severity="success">
              Vehicle added successfully.
            </Alert>
          </Snackbar>
          <Snackbar
            open={vehicleAddError}
            autoHideDuration={3000}
            onClose={handleClose}
          >
            <Alert onClose={handleClose} severity="error">
              All the field's are mendatory!!!
            </Alert>
          </Snackbar>
          <Snackbar
            open={maintainanceAddSuccess}
            autoHideDuration={3000}
            onClose={handleClose}
          >
            <Alert onClose={handleClose} severity="success">
              Maintainance added successfully.
            </Alert>
          </Snackbar>
          <Snackbar
            open={maintainanceAddError}
            autoHideDuration={3000}
            onClose={handleClose}
          >
            <Alert onClose={handleClose} severity="error">
              All the field's are mendatory!!!
            </Alert>
          </Snackbar>

          {/* footer */}
          <FooterLayout />
        </Layout>
      </Layout>
    </Layout>
  );
}

render() {

        const menu = (
            <Menu>

                <Menu.Item>
                    <Link to={'/info'}>
                        <SolutionOutlined/> 个人中心
                    </Link>
                </Menu.Item>
                <Menu.Divider/>

                <Menu.Item>

                    <Popconfirm
                        key='login-btn-pop'
                        title="您确定要退出登录吗?"
                        onConfirm={this.confirm}
                        okText="确定"
                        cancelText="取消"
                        placement="left"
                    >
                        <LogoutOutlined/> 退出登录
                    </Popconfirm>
                </Menu.Item>

            </Menu>
        );

        return (

            <Switch>
                <Route path="/access" component={Access}/>
                <Route path="/term" component={Term}/>
                <Route path="/login"><Login updateUser={this.updateUser}/></Route>

                <Route path="/">
                    <Layout className="layout" style={{minHeight: '100vh'}}>

                        {
                            isAdmin() ?
                                <>
                                    <Sider collapsible collapsed={this.state.collapsed} trigger={null}>
                                        <div className="logo">
                                            <img src={this.state.logo} alt='logo' width={this.state.logoWidth}/>
                                        </div>

                                        <Menu
                                            onClick={(e) => this.setCurrent(e.key)}
                                            selectedKeys={[this.state.current]}
                                            onOpenChange={this.subMenuChange}
                                            defaultOpenKeys={this.state.openKeys}
                                            theme="dark" mode="inline" defaultSelectedKeys={['dashboard']}
                                            inlineCollapsed={this.state.collapsed}
                                            style={{lineHeight: '64px'}}>

                                            <Menu.Item key="dashboard" icon={<DashboardOutlined/>}>
                                                <Link to={'/'}>
                                                    控制面板
                                                </Link>
                                            </Menu.Item>

                                            <SubMenu key='resource' title='资源管理' icon={<CloudServerOutlined/>}>
                                                <Menu.Item key="asset" icon={<DesktopOutlined/>}>
                                                    <Link to={'/asset'}>
                                                        资产列表
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="credential" icon={<IdcardOutlined/>}>
                                                    <Link to={'/credential'}>
                                                        授权凭证
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="dynamic-command" icon={<CodeOutlined/>}>
                                                    <Link to={'/dynamic-command'}>
                                                        动态指令
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="access-gateway" icon={<ApiOutlined/>}>
                                                    <Link to={'/access-gateway'}>
                                                        接入网关
                                                    </Link>
                                                </Menu.Item>
                                            </SubMenu>

                                            <SubMenu key='audit' title='会话审计' icon={<AuditOutlined/>}>
                                                <Menu.Item key="online-session" icon={<LinkOutlined/>}>
                                                    <Link to={'/online-session'}>
                                                        在线会话
                                                    </Link>
                                                </Menu.Item>

                                                <Menu.Item key="offline-session" icon={<DisconnectOutlined/>}>
                                                    <Link to={'/offline-session'}>
                                                        历史会话
                                                    </Link>
                                                </Menu.Item>
                                            </SubMenu>
                                            <SubMenu key='ops' title='系统运维' icon={<ControlOutlined/>}>
                                                <Menu.Item key="login-log" icon={<LoginOutlined/>}>
                                                    <Link to={'/login-log'}>
                                                        登录日志
                                                    </Link>
                                                </Menu.Item>

                                                <Menu.Item key="job" icon={<BlockOutlined/>}>
                                                    <Link to={'/job'}>
                                                        计划任务
                                                    </Link>
                                                </Menu.Item>

                                                <Menu.Item key="access-security" icon={<SafetyCertificateOutlined/>}>
                                                    <Link to={'/access-security'}>
                                                        访问安全
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="storage" icon={<HddOutlined/>}>
                                                    <Link to={'/storage'}>
                                                        磁盘空间
                                                    </Link>
                                                </Menu.Item>
                                            </SubMenu>

                                            <SubMenu key='user-manage' title='用户管理' icon={<UserSwitchOutlined/>}>
                                                <Menu.Item key="user" icon={<UserOutlined/>}>
                                                    <Link to={'/user'}>
                                                        用户管理
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="user-group" icon={<TeamOutlined/>}>
                                                    <Link to={'/user-group'}>
                                                        用户组管理
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="strategy" icon={<InsuranceOutlined/>}>
                                                    <Link to={'/strategy'}>
                                                        授权策略
                                                    </Link>
                                                </Menu.Item>
                                            </SubMenu>
                                            <Menu.Item key="my-file" icon={<FolderOutlined/>}>
                                                <Link to={'/my-file'}>
                                                    我的文件
                                                </Link>
                                            </Menu.Item>
                                            <Menu.Item key="info" icon={<SolutionOutlined/>}>
                                                <Link to={'/info'}>
                                                    个人中心
                                                </Link>
                                            </Menu.Item>
                                            <Menu.Item key="setting" icon={<SettingOutlined/>}>
                                                <Link to={'/setting'}>
                                                    系统设置
                                                </Link>
                                            </Menu.Item>
                                        </Menu>
                                    </Sider>

                                    <Layout className="site-layout">
                                        <Header className="site-layout-background"
                                                style={{padding: 0, height: headerHeight, zIndex: 20}}>
                                            <div className='layout-header'>
                                                <div className='layout-header-left'>
                                                    {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                                        className: 'trigger',
                                                        onClick: this.onCollapse,
                                                    })}
                                                </div>

                                                <div className='layout-header-right'>
                                                    <div className={'layout-header-right-item'}>
                                                        <a style={{color: 'black'}} target='_blank'
                                                           href='https://github.com/dushixiang/next-terminal'
                                                           rel='noreferrer noopener'>
                                                            <GithubOutlined/>
                                                        </a>
                                                    </div>
                                                </div>

                                                <div className='layout-header-right'>
                                                    <Dropdown overlay={menu}>
                                                        <div className='nickname layout-header-right-item'>
                                                            {getCurrentUser()['nickname']} &nbsp;<DownOutlined/>
                                                        </div>
                                                    </Dropdown>
                                                </div>
                                            </div>
                                        </Header>

                                        <Route path="/" exact component={Dashboard}/>
                                        <Route path="/user" component={User}/>
                                        <Route path="/user-group" component={UserGroup}/>
                                        <Route path="/asset" component={Asset}/>
                                        <Route path="/credential" component={Credential}/>
                                        <Route path="/dynamic-command" component={DynamicCommand}/>
                                        <Route path="/batch-command" component={BatchCommand}/>
                                        <Route path="/online-session" component={OnlineSession}/>
                                        <Route path="/offline-session" component={OfflineSession}/>
                                        <Route path="/login-log" component={LoginLog}/>
                                        <Route path="/info" component={Info}/>
                                        <Route path="/setting" component={Setting}/>
                                        <Route path="/job" component={Job}/>
                                        <Route path="/access-security" component={Security}/>
                                        <Route path="/access-gateway" component={AccessGateway}/>
                                        <Route path="/my-file" component={MyFile}/>
                                        <Route path="/storage" component={Storage}/>
                                        <Route path="/strategy" component={Strategy}/>

                                        <Footer style={{textAlign: 'center'}}>
                                            Copyright © 2020-2022 dushixiang, All Rights Reserved.
                                            Version:{this.state.package['version']}
                                        </Footer>
                                    </Layout>
                                </> :
                                <>
                                    <Header style={{padding: 0}}>
                                        <div className='km-header'>
                                            <div style={{flex: '1 1 0%'}}>
                                                <Link to={'/'}>
                                                    <img src={this.state.logo} alt='logo' width={120}/>
                                                </Link>

                                                <Link to={'/my-file'}>
                                                    <Button type="text" style={{color: 'white'}}
                                                            icon={<FolderOutlined/>}>
                                                        文件
                                                    </Button>
                                                </Link>

                                                <Link to={'/dynamic-command'}>
                                                    <Button type="text" style={{color: 'white'}}
                                                            icon={<CodeOutlined/>}>
                                                        指令
                                                    </Button>
                                                </Link>
                                            </div>
                                            <div className='km-header-right'>
                                                <Dropdown overlay={menu}>
                                                <span className={'km-header-right-item'}>
                                                    {getCurrentUser()['nickname']}
                                                </span>
                                                </Dropdown>
                                            </div>
                                        </div>
                                    </Header>
                                    <Content className='km-container'>
                                        <Layout>
                                            <Route path="/" exact component={MyAsset}/>
                                            <Content className={'kd-content'}>
                                                <Route path="/info" component={Info}/>
                                                <Route path="/my-file" component={MyFile}/>
                                                <Route path="/dynamic-command" component={DynamicCommand}/>
                                            </Content>
                                        </Layout>
                                    </Content>
                                    <Footer style={{textAlign: 'center'}}>
                                        Copyright © 2020-2022 dushixiang, All Rights Reserved.
                                        Version:{this.state.package['version']}
                                    </Footer>
                                </>
                        }


                    </Layout>
                </Route>
            </Switch>

        );
    }

render() {

        const data = [
            {
                type: 'RDP',
                value: this.state.asset['rdp'],
            },
            {
                type: 'SSH',
                value: this.state.asset['ssh'],
            },
            {
                type: 'TELNET',
                value: this.state.asset['telnet'],
            },
            {
                type: 'VNC',
                value: this.state.asset['vnc'],
            },
            {
                type: 'Kubernetes',
                value: this.state.asset['kubernetes'],
            }
        ];
        const config = {
            appendPadding: 10,
            data: data,
            angleField: 'value',
            colorField: 'type',
            radius: 1,
            innerRadius: 0.6,
            label: {
                type: 'inner',
                offset: '-50%',
                content: '{value}',
                style: {
                    textAlign: 'center',
                    fontSize: 14,
                },
            },
            interactions: [{type: 'element-selected'}, {type: 'element-active'}],
            statistic: {
                title: false,
                content: {
                    formatter: () => {
                        return '资产类型';
                    },
                },
            },
        };

        let accessData = this.state.access.map(item=>{
            return {
                title: `${item['username']}@${item['ip']}:${item['port']}`,
                // title: `${item['assetId']}`,
                value: item['accessCount'],
                protocol: item['protocol']
            }
        });

        const accessConfig = {
            data: accessData,
            xField: 'value',
            yField: 'title',
            seriesField: 'protocol',
            legend: { position: 'top-left' },
        }

        return (
            <>

                <div style={{margin: 16, marginBottom: 0}}>
                    <Row gutter={16}>
                        <Col span={6}>
                            <Card bordered={true} hoverable>
                                <Link to={'/user'}>
                                    <Statistic title="在线用户" value={this.state.counter['user']}
                                               prefix={<UserOutlined/>}/>
                                </Link>
                            </Card>
                        </Col>
                        <Col span={6}>
                            <Card bordered={true} hoverable>
                                <Link to={'/asset'}>
                                    <Statistic title="资产数量" value={this.state.counter['asset']}
                                               prefix={<DesktopOutlined/>}/>
                                </Link>
                            </Card>
                        </Col>
                        <Col span={6}>
                            <Card bordered={true} hoverable>
                                <Link to={'/credential'} hoverable>
                                    <Statistic title="授权凭证" value={this.state.counter['credential']}
                                               prefix={<IdcardOutlined/>}/>
                                </Link>

                            </Card>
                        </Col>
                        <Col span={6}>
                            <Card bordered={true} hoverable>
                                <Link to={'/online-session'}>
                                    <Statistic title="在线会话" value={this.state.counter['onlineSession']}
                                               prefix={<LinkOutlined/>}/>
                                </Link>
                            </Card>
                        </Col>
                    </Row>
                </div>

                <div className="page-card">
                    <Row gutter={16}>
                        <Col span={12}>
                            <Card bordered={true} title="资产类型">
                                <Pie {...config} />
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card bordered={true} title="使用次数Top10 资产">
                                <Bar {...accessConfig} />
                            </Card>
                        </Col>
                    </Row>

                </div>
            </>
        );
    }

export default function Status({
  statusInfo,
  piPowerOff,
  wsConnected,
  delay = 0,
  isFullscreen,
  setting,
  isLogin,
  session,
  changeEditabled,
  channelStatus,
  changeChannel,
  serverConfig,
  version,
  connectType,
  onCarMicphoneChange,
  locked,
  onControllerMicphoneChange = () => {},
  enabledControllerMicphone = true,
}) {
  const isWebRTC = connectType === "webrtc";
  const { sharedEndTime } = serverConfig;

  const gamepadPress = ({ detail: { index, value } }) => {
    if (index === 3 && value > 0.5) {
      onControllerMicphoneChange(!enabledControllerMicphone);
    }
  };

  useKeyPress(
    "t",
    () => onControllerMicphoneChange(!enabledControllerMicphone),
    {
      events: ["keyup"],
    }
  );

  useEventListener("gamepadpress", gamepadPress);

  return (
    <Form layout="inline" className="app-status" size="small">
      <Form.Item>
        <Link to={`${process.env.PUBLIC_URL}/controller`}>
          <img className="logo" src="/logo-256.png" alt="N-RC" />
        </Link>
        <span>N RC</span>
      </Form.Item>
      <Form.Item>
        <Tag
          style={{
            width: "7em",
          }}
          icon={
            locked ? (
              <StopOutlined />
            ) : wsConnected ? (
              <LinkOutlined />
            ) : (
              <DisconnectOutlined />
            )
          }
          color={locked || delay > 80 || !wsConnected ? "red" : "green"}
          size="xs"
        >
          {isWebRTC ? "直连" : "中转"}:{delay.toFixed(0)}
        </Tag>
      </Form.Item>
      {(serverConfig.channelList || [])
        .filter(({ enabled, type }) => enabled && type === "switch")
        .map(({ pin, name }) => (
          <Form.Item key={pin}>
            <Switch
              checked={channelStatus[pin] || false}
              checkedChildren={name}
              unCheckedChildren={name}
              onChange={(value) => changeChannel({ pin, value })}
            />
          </Form.Item>
        ))}

      {isLogin && isWebRTC && (
        <Form.Item>
          <Switch
            checked={enabledControllerMicphone}
            onChange={onControllerMicphoneChange}
            checkedChildren={
              <>
                <DesktopOutlined /> <AudioOutlined />
              </>
            }
            unCheckedChildren={
              <>
                <DesktopOutlined /> <AudioMutedOutlined />
              </>
            }
          />
        </Form.Item>
      )}

      {isLogin && (
        <Form.Item>
          <AudioPlayer
            session={session}
            connectType={connectType}
            onMicphoneChange={onCarMicphoneChange}
            url={`${
              window.location.protocol === "https:" ? "wss://" : "ws://"
            }${setting.host}/microphone`}
          />
        </Form.Item>
      )}

      <Form.Item>
        <Switch
          checkedChildren={<FormOutlined />}
          unCheckedChildren={<FormOutlined />}
          onChange={changeEditabled}
        ></Switch>
      </Form.Item>

      <Form.Item>
        <Link to={`${process.env.PUBLIC_URL}/setting`}>
          <Button
            size="small"
            icon={<SettingOutlined />}
            shape="circle"
          ></Button>
        </Link>
      </Form.Item>

      {document.body.requestFullscreen && (
        <Form.Item>
          <Button
            type="primary"
            shape="circle"
            icon={
              isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />
            }
            onClick={() => {
              if (isFullscreen) {
                document.exitFullscreen();
              } else {
                document.body.requestFullscreen();
              }
            }}
          ></Button>
        </Form.Item>
      )}

      {wsConnected && isLogin && (
        <Form.Item>
          <Button
            type="danger"
            shape="circle"
            icon={<PoweroffOutlined />}
            onClick={piPowerOff}
          ></Button>
        </Form.Item>
      )}

      {wsConnected &&
        isLogin &&
        Object.keys(statusInfo).map((key) => {
          const { color, label, value } = statusInfo[key];
          return !["gps"].includes(label) ? (
            <Form.Item key={key}>
              <Tag color={color}>
                {label}:{value}
              </Tag>
            </Form.Item>
          ) : undefined;
        })}

      {wsConnected && sharedEndTime && (
        <Form.Item>
          <Tag
            icon={<HourglassOutlined />}
            color={session && session.endTime && "orange"}
          >
            {((sharedEndTime - new Date().getTime()) / 1000).toFixed(0)}s
          </Tag>
        </Form.Item>
      )}

      {version && (
        <Form.Item>
          <Tag>v{version}</Tag>
        </Form.Item>
      )}
    </Form>
  );
}

render() {

        const qa_complete = this.state.data["advisory_details"][0]["qa_complete"]
        const doc_complete = this.state.data["advisory_details"][0]["doc_complete"]
        const security_approved = this.state.data["advisory_details"][0]["security_approved"]


        let qa_step = this.get_step_number(qa_complete)
        let doc_step = this.get_step_number(doc_complete)
        let security_step = this.get_step_number(security_approved)

        return (
            <div style={{padding: "40px"}}>
                <Card hoverable={true}
                      extra={this.state.data["advisory_details"][0]["synopsis"]}
                      title={this.state.data.type[0].toUpperCase() + this.state.data.type.slice(1)}
                      actions={[
                          <a href={"https://errata.devel.redhat.com/advisory/" + this.state.data["advisory_details"][0]["id"]} target="_blank" rel="noopener noreferrer"><Tooltip title={"Errata Advisory Link"}><DesktopOutlined/></Tooltip></a>,
                          <Link to={`/release/advisory/overview/${this.state.data["advisory_details"][0]["id"]}`}>
                              <Tooltip title={"Advisory Overview"}>
                                  <AuditOutlined/>
                              </Tooltip>
                          </Link>
                      ]}>

                    <Row className={"center"}>
                        <Col span={8}>
                            <p>Errata Id</p>
                            <Tag color={"red"}>{this.state.data["advisory_details"][0]["id"]}</Tag>
                        </Col>
                        <Col span={8}>
                            <p>Advisory Status</p>
                            <Tag color="geekblue">{this.state.data["advisory_details"][0]["status"]}</Tag>
                        </Col>
                        <Col span={8}>
                            <p>Release Date</p>
                            <Tag color="green">{this.state.data["advisory_details"][0]["release_date"]}</Tag>
                        </Col>
                    </Row>
                    <br/>
                    <Row className={"center"}>
                        <Col span={8}>
                            <p>QE Status</p>
                            <Approval_status_tag result={qa_step} result_for={"QE Approval"}/>
                        </Col>
                        <Col span={8}>
                            <p>Doc Status</p>
                            <Approval_status_tag result={doc_step} result_for={"Doc Approval"}/>
                        </Col>
                        <Col span={8}>
                            <p>Security Status</p>
                            <Approval_status_tag result={security_step} result_for={"Security Approval"}/>
                        </Col>
                    </Row>
                    <br/>
                    <Row className={"center"}>
                        <Col span={8}>
                            <p>QE Reviewer</p>
                            {this.state.data.advisory_details[0].qe_reviewer_id === null && <Tag color={"red"}>Not Available</Tag>}
                            {this.state.data.advisory_details[0].qe_reviewer_id !== null && <Tag color={"green"}><a href={"https://errata.devel.redhat.com/user/" + this.state.data.advisory_details[0].qe_reviewer_id} target="_blank" rel="noopener noreferrer">{this.state.data.advisory_details[0].qe_reviewer_id}</a></Tag>}
                        </Col>
                        <Col span={8}>
                            <p>Doc Reviewer</p>
                            {this.state.data.advisory_details[0].doc_reviewer_id === null && <Tag color={"red"}>Not Available</Tag>}
                            {this.state.data.advisory_details[0].doc_reviewer_id !== null && <Tag color={"green"}><a href={"https://errata.devel.redhat.com/user/" + this.state.data.advisory_details[0].doc_reviewer_id} target="_blank" rel="noopener noreferrer">{this.state.data.advisory_details[0].doc_reviewer_id}</a></Tag>}
                        </Col>
                        <Col span={8}>
                            <p>Security Reviewer</p>
                            {this.state.data.advisory_details[0].product_security_reviewer_id === null && <Tag color={"red"}>Not Available</Tag>}
                            {this.state.data.advisory_details[0].product_security_reviewer_id !== null && <Tag color={"green"}><a href={"https://errata.devel.redhat.com/user/" + this.state.data.advisory_details[0].product_security_reviewer_id} target="_blank" rel="noopener noreferrer">{this.state.data.advisory_details[0].product_security_reviewer_id}</a></Tag>}
                        </Col>
                    </Row>
                    <br/>
                    <br/>
                    <Row>
                        <Col span={24}>
                            <Release_branch_detail_card_bug_summary_table data={this.state.data.bug_summary}/>
                        </Col>
                    </Row>
                </Card>
            </div>
        );
    }