Merge pull request #20 from oslabs-beta/elena/testingEKS

Elena/testing eks

Author: elenaatencio

app/containers/AWSGraphsContainer.tsx

@@ -125,13 +125,7 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
       )}
       {typeOfService === 'AWS/EKS' && (
         <div>
-          {/* <iframe src={`${awsUrl}/d/8jYcvsBVz/kubernetes-cluster-monitoring-via-prometheus?orgId=1&refresh=10s&theme=light&kiosk`} width="1300" height="1300" ></iframe> */}
-          {/* <iframe src={`${awsUrl}/d/jPEGwyfVk/opencost?orgId=1&theme=light&kiosk`} width="1300" height="1300" ></iframe> */}
-
-          <iframe src={`http://a9921cff905094aa0a45e6e330684283-98913978.us-east-2.elb.amazonaws.com/d/8jYcvsBVz/kubernetes-cluster-monitoring-via-prometheus?orgId=1&refresh=10s&theme=light&kiosk`} width="1300" height="1300" ></iframe>
-          <iframe src={`http://a9921cff905094aa0a45e6e330684283-98913978.us-east-2.elb.amazonaws.com/d/jPEGwyfVk/opencost?orgId=1&theme=light&kiosk`} width="1300" height="1300" ></iframe>
-
-          {/* <GrafanaIFrame {...awsAppInfo}/> */}
+           <iframe src={`${awsEksData}?orgId=1&refresh=10s&theme=light&kiosk`} width="1300" height="1300" ></iframe>
         </div>
       )}
     </div>

app/modals/AwsModal.tsx

@@ -127,20 +127,20 @@ const AwsModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
           </select>
         </div>
         <div>
-          <label htmlFor="aws-access-key">
-            Access Key<span>*</span>
+          <label htmlFor="aws-access-key">{(typeOfService === 'AWS/EKS') ? 'Bearer Token' : 'Access Key'} <span>*</span>
           </label>
           <input
             id="aws-access-key"
             type="password"
             name="accessKey"
             value={accessKey}
             onChange={e => handleChange(e)}
-            placeholder="AWS Access Key"
+            placeholder={typeOfService === 'AWS/EKS' ? 'Grafana Bearer Token' : 'AWS Access Key'}
             required
           />
         </div>
-        <div>
+        {(typeOfService !== 'AWS/EKS') && (
+          <div>
           <label htmlFor="aws-secret-access-key">
             Secret Access Key<span>*</span>
           </label>
@@ -154,18 +154,33 @@ const AwsModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
             required
           />
         </div>
+        )}
+        {/* <div>
+          <label htmlFor="aws-secret-access-key">
+            Secret Access Key<span>*</span>
+          </label>
+          <input
+            id="aws-secret-access-key"
+            type="password"
+            name="secretAccessKey"
+            value={secretAccessKey}
+            onChange={e => handleChange(e)}
+            placeholder="AWS Secret Access Key"
+            required
+          />
+        </div> */}
+        
         <div>
           <label htmlFor="aws-url">
-            Cluster URL<span>*</span>
+            {(typeOfService === 'AWS/EKS') ? 'Grafana URL' : 'Access Key'}<span>*</span>
           </label>
           <input
             id="aws-url"
             type="string"
             name="awsUrl"
             value={awsUrl}
             onChange={e => handleChange(e)}
-            placeholder="AWS Url"
-            required
+            placeholder={typeOfService === 'AWS/EKS'? 'Grafana Provided URL': 'AWS Url'}
           />
         </div>
         <div>

electron/routes/cloudbased.ts

@@ -255,6 +255,8 @@ ipcMain.on(
 );
 
  // v10 notes:  Has not been reconfigured to refer to User database yet, only works for guest. 
+   // We tried dynamically pulling the grafana dashboard with just the AWS cluster URL, but did not complete it in the allotted time...
+  // If future teams could get it rendering dynamically that would be awesome :)
 /**
  * @event   eksMetricsRequest
  * @desc    Connects user to Cloudwatch using aws-sdk and fetches data for ECS Clusters/Services
@@ -265,22 +267,50 @@ ipcMain.on(
 ipcMain.on('eksMetricsRequest', async (message:Electron.IpcMainEvent, username: string, appIndex: number) => {
   const fileContents = JSON.parse(fs.readFileSync(settingsLocation, 'utf8'));
   const userAwsService = fileContents[username]?.services[appIndex];
-  const [typeOfService, region, awsUrl] = [userAwsService[4], userAwsService[2], userAwsService[9]];
+  const [typeOfService, region, awsUrl, token] = [userAwsService[4], userAwsService[2], userAwsService[9], userAwsService[7]];
+  // awsURL -> the input is actually the Grafana Dashboard URL you receive after exporting the external hostname 
+  // of the Kubernetes Service in the Grafana Namespace (see step 3 of the AWS/EKS readme)
+  // token -> is the Bearer Token which must be generated by the admin in Grafana to use the Grafana Dashboard API.
+
+  // build the url for the GET request to the Grafana Dashboard with the Grafana URL. This will find the available dashboard
+  // and return the dashboard data -> we want the completed dashboard URL which will be sent in the response to the front end
+  // and pulled into the Grafana Iframe Component to render the graph.
 
   const url = `${awsUrl}/api/search?folderIds=0`
-  console.log("hi")
-  const response = await fetch(url, {
+
+    fetch(url, {
     method: 'GET',
     headers: {
-      "Access-Control-Allow-Origin": "*",
-      Accept: "application/json",
-      "Content-Type": "application/json",
-      Authorization: 'Bearer eyJrIjoiamN4UGRKVHg3cUQyZ201N042NW41bHg5bGhJaVFlaFciLCJuIjoidGVzdEtleSIsImlkIjoxfQ=='
-    },
+      'Content-Type': 'application/json',
+      'Accept': 'application/json',
+      'Authorization': `Bearer ${token}`,
+    }
+  })
+  .then((response) => response.json())
+  .then((data)=> {
+    console.log('received data:', data);
+    const appendToUrl = data[0].url;
+    console.log(appendToUrl);
+    const dashboardURL = `${awsUrl}${appendToUrl}`;
+    console.log(dashboardURL);
+     message.sender.send('eksMetricsResponse', JSON.stringify(dashboardURL));
+  })
+  .catch((err) => {
+    console.log({err: 'error in grafana GET ' + err})
   });
-  log.info(response);
-  const data = await response.json();
-  console.log(data)
-  console.log(awsUrl)
-  message.sender.send('eksMetricsResponse', JSON.stringify(data));
+
+  // const response = await fetch(url, {
+  //   method: 'GET',
+  //   headers: {
+  //     "Access-Control-Allow-Origin": "*",
+  //     Accept: "application/json",
+  //     "Content-Type": "application/json",
+  //     Authorization: `Bearer ${token}`,
+  //   },
+  // });
+  // log.info(response);
+  // const data = await response.json();
+  // console.log(data)
+  // console.log(awsUrl)
+  // message.sender.send('eksMetricsResponse', JSON.stringify(data));
 });

examples/AWS/AWS-EKS/README.md

@@ -128,7 +128,7 @@ This process can also be done using the AWS Command Line Interface (CLI) or the
      --values grafana.yaml \
      --set service.type=LoadBalancer
 
-   3. Execute these commands to get the URL.  Login in with the username admin and the password EKS!sAWsome
+   3. Execute these commands to get the URL.  Login in with the username   admin and the password EKS!sAWsome. The URL received after exporting the   external hostname (from the command below) will be used to render the   graphs in Electron. 
 
      export ELB=$(kubectl get svc -n grafana grafana -o jsonpath='{.status.loadBalancer.ingress[0].hostname}')
      echo "http://$ELB"