Commit cb0834e3 authored by Ryo Yamashita's avatar Ryo Yamashita Committed by Yas Naoi
Browse files

Issue #3290773 by Ryo Yamashita, yas: Fix typos in Cloud Dashboard

parent 4b81e6a6

modules/cloud_dashboard/cloud_dashboard/src/model/CloudContenxtItem.ts→modules/cloud_dashboard/cloud_dashboard/src/model/CloudContextItem.ts

+11 −0
Original line number Diff line number Diff line 
import { LatLngTuple } from 'leaflet';

import CloudContenxtItemlabel from 'model/CloudContenxtItemLabel';

import CloudContextItemlabel from 'model/CloudContextItemLabel';



interface CloudContenxtItem {

interface CloudContextItem {

  icon: L.Icon | undefined,

  cloudServiceProvider: string,

  position: LatLngTuple,

  item: CloudContenxtItemlabel[]

  item: CloudContextItemlabel[]

}



export default CloudContenxtItem;
 
export default CloudContextItem;

modules/cloud_dashboard/cloud_dashboard/src/model/CloudContenxtItemLabel.ts→modules/cloud_dashboard/cloud_dashboard/src/model/CloudContextItemLabel.ts

+10 −0
Original line number Diff line number Diff line 
import { LatLngTuple } from 'leaflet';



interface CloudContenxtItemlabel {



interface CloudContextItemlabel {

  iconUrl: string;

  entityViewUrl: string;

  name: string;

  positionLabel: string;

}



export default CloudContenxtItemlabel;
 
export default CloudContextItemlabel;

modules/cloud_dashboard/cloud_dashboard/src/molecules/CloudContenxtItemPopup.tsx→modules/cloud_dashboard/cloud_dashboard/src/molecules/CloudContextItemPopup.tsx

+28 −0
Original line number Diff line number Diff line 
import CloudContenxtItem from 'model/CloudContenxtItem';

import CloudContenxtItemPopupLabel from 'molecules/CloudContenxtItemPopupLabel';

import CloudContextItem from 'model/CloudContextItem';

import CloudContextItemPopupLabel from 'molecules/CloudContextItemPopupLabel';

import { Marker, Popup } from 'react-leaflet';



/**

 * Popup on CloudServiceProviderMap.

 *

 * @param item Information of CloudContenxt.

 * @param item Information of CloudContext.

 */

const CloudContenxtItemPopup = ({ item }: {

  item: CloudContenxtItem

const CloudContextItemPopup = ({ item }: {

  item: CloudContextItem

}) => {



  return <Marker position={item.position} icon={item.icon}>

    <Popup>

      {

        item.item.map((item2, index) => {

          return <CloudContenxtItemPopupLabel

          return <CloudContextItemPopupLabel

            label={item2}

            key={index} />;

        })
@@ -25,4 +25,4 @@ const CloudContenxtItemPopup = ({ item }: { 


};



export default CloudContenxtItemPopup;
 
export default CloudContextItemPopup;

modules/cloud_dashboard/cloud_dashboard/src/molecules/CloudContenxtItemPopupLabel.tsx→modules/cloud_dashboard/cloud_dashboard/src/molecules/CloudContextItemPopupLabel.tsx

+6 −6
Original line number Diff line number Diff line 
import CloudContenxtItemlabel from 'model/CloudContenxtItemLabel';

import CloudContextItemlabel from 'model/CloudContextItemLabel';

import { BsPinMapFill } from 'react-icons/bs';

import { Link } from 'react-router-dom';



/**

 * Label on CloudContenxtItemPopup.

 * Label on CloudContextItemPopup.

 *

 * @param label Labeling data of CloudContenxtItem.

 * @param label Labeling data of CloudContextItem.

 */

const CloudContenxtItemPopupLabel = ({ label }: {

  label: CloudContenxtItemlabel

const CloudContextItemPopupLabel = ({ label }: {

  label: CloudContextItemlabel

}) => {



  return <div>
@@ -32,4 +32,4 @@ const CloudContenxtItemPopupLabel = ({ label }: { 


};



export default CloudContenxtItemPopupLabel;
 
export default CloudContextItemPopupLabel;

modules/cloud_dashboard/cloud_dashboard/src/organisms/CloudServiceProviderMap.tsx

+11 −11
Original line number Diff line number Diff line 
import useDrupalJsonApi, { GetJsonDataType } from 'hooks/drupal_jsonapi';

import CloudContenxtItem from 'model/CloudContenxtItem';

import CloudContextItem from 'model/CloudContextItem';

import { MapData } from 'model/MapData';

import RawCloudContextItem from 'model/RawCloudContextItem';

import CloudContenxtItemPopup from 'molecules/CloudContenxtItemPopup';

import CloudContextItemPopup from 'molecules/CloudContextItemPopup';

import LoadingSpinner from 'molecules/LoadingSpinner';

import MapPolygonLayer from 'molecules/MapPolygonLayer';

import { useEffect, useState } from 'react';

import { MapContainer } from 'react-leaflet';

import { convertCloudContenxtItemList } from 'service/utility';

import { convertCloudContextItemList } from 'service/utility';



/**

 * Load List of CloudContenxtItem.

 * Load List of CloudContextItem.

 */

const LoadCloudContenxtItemList = async (getJsonData: GetJsonDataType) => {

const LoadCloudContextItemList = async (getJsonData: GetJsonDataType) => {

  const response = await fetch('/clouds/cloud_dashboard/config/marker_icon_uri');

  if (!response.ok) {

    return [];
@@ -20,7 +20,7 @@ const LoadCloudContenxtItemList = async (getJsonData: GetJsonDataType) => { 
  const resJson = await response.json();

  const defaultIconUri: string = resJson['uri'];

  const rawCloudContextItemList = await getJsonData<RawCloudContextItem[]>('/clouds/cloud_config_location');

  const cloudContextItemList = convertCloudContenxtItemList(rawCloudContextItemList, defaultIconUri);

  const cloudContextItemList = convertCloudContextItemList(rawCloudContextItemList, defaultIconUri);

  return cloudContextItemList;

};
@@ -45,7 +45,7 @@ const LoadMapData = async ( 
 */

const CloudServiceProviderMap = () => {



  const [cloudContenxtItemList, setCloudContenxtItemList] = useState<CloudContenxtItem[]>([]);

  const [cloudContextItemList, setCloudContextItemList] = useState<CloudContextItem[]>([]);

  const [mapData, setMapData] = useState<MapData>({

    features: []

  });
@@ -53,8 +53,8 @@ const CloudServiceProviderMap = () => { 


  useEffect(() => {

    const init = async () => {

      // Load CloudContenxtItemList.

      setCloudContenxtItemList(await LoadCloudContenxtItemList(getJsonData));

      // Load CloudContextItemList.

      setCloudContextItemList(await LoadCloudContextItemList(getJsonData));



      // Load MapData.

      setMapData(await LoadMapData(getJsonData));
@@ -73,8 +73,8 @@ const CloudServiceProviderMap = () => { 
      style={{ height: 500, backgroundColor: '#4e5d6c' }}>

      <MapPolygonLayer mapData={mapData} />

      {

        cloudContenxtItemList.map((item, index) => {

          return <CloudContenxtItemPopup item={item} key={index} />;

        cloudContextItemList.map((item, index) => {

          return <CloudContextItemPopup item={item} key={index} />;

        })

      }

    </MapContainer>;