aboutsummaryrefslogtreecommitdiffstats
path: root/ui/imports/ui/components/vedge-info-window/vedge-info-window.html
blob: 3670d71255b1d87e9eb9eb2ffdd21587b7098059 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!-- 
########################################################################################
# Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others #
#                                                                                      #
# All rights reserved. This program and the accompanying materials                     #
# are made available under the terms of the Apache License, Version 2.0                #
# which accompanies this distribution, and is available at                             #
# http://www.apache.org/licenses/LICENSE-2.0                                           #
########################################################################################
 -->
<template name="VedgeInfoWindow">
<div class="os-vedge-info-window {{#if isShow}}cl-visible{{/if}}" 
     style="top: {{ top }}px; left: {{ left }}px;">   
        
    <div class="sm-header">
      <button type="button" class="sm-close-button close" 
        data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">x</span>
      </button>
      <h4 class="modal-title">Object Information: {{ name }}</h4>
    </div>

    <div class="sm-body">
      {{#if showMessage }}
      <div class="sm-message-panel alert alert-{{ messageType }}">
         <div class="sm-message-text">{{ message }}</div>
      </div>
      {{/if }}

      <form class="sm-form-graph-filters">
        <div class="sm-form-group form-group">
          <label for="">Flow types</label>
          <select class="sm-flow-type-select cl-input">
            <option value="">Choose a flow type</option>
            {{#each flowType in flowTypes }}
            <option value="{{ flowType.name }}">{{ flowType.name }}</option>
            {{/each }}
          </select>
        </div>  

        {{#if (is selectedFlowType 'L2') }}
        <div class="sm-f2-input-group">
          <div class="sm-form-group form-group">
            <label for="">Source: Mac address</label>
            <select class="sm-source-mac-address-select cl-input">
              <option value="">Choose an address </option>
              {{#each address in srcMacAddresses }}
              <option value="{{ address }}">{{ address }}</option>
              {{/each }}
            </select>
          </div>

          <div class="sm-form-group form-group">
            <label for="">Destination: Mac address</label>
            <select class="sm-destination-mac-address-select cl-input">
              <option value="">Choose an address </option>
              {{#each address in dstMacAddresses }}
              <option value="{{ address }}">{{ address }}</option>
              {{/each }}
            </select>
          </div>
        </div>
        {{/if }}

        {{#if (is selectedFlowType 'L3') }}
        <div class="sm-f3-input-group">
          <select class="sm-source-ip-address cl-input">
            <option value="">Choose an address </option>
            {{#each address in srcIPv4Addresses }}
            <option value="{{ address }}">{{ address }}</option>
            {{/each }}
          </select>

          <select class="sm-destination-ip-address cl-input">
            {{#each address in dstIPv4Addresses }}
            <option value="{{ address }}">{{ address }}</option>
            {{/each }}
          </select>
        </div>
        {{/if }}

        <div class="checkbox">
          <label>
            <input type="checkbox" class="sm-simulate-graph">Simulate graph 
          </label>
        </div>

        <div class="form-group">
          <label for="">Y-Scale</label>
          <input type="number" class="form-control sm-y-scale-input">
        </div>

        <div class="form-group">
          <label for="">Start time</label>
          <div class="sm-start-datetime-group input-group date">
            <input class="sm-start-datetime form-control" type="text"/>
            <span class="input-group-addon"
              ><i class="glyphicon glyphicon-calendar"></i></span>
          </div>
        </div>
      </form>
    </div><!-- end: body -->

    {{#if isShowGraph }}
    <div class="sm-graph-container">
      {{>FlowGraph argsFlowGraph }}
    </div>
    {{/if }}

    <div class="sm-footer"> 
    </div>

</div>
</template>